App code

  • Revision slug: Apps/Tutorials/General/App_code
  • Revision title: App code
  • Revision id: 339807
  • Created:
  • Creator: Yoshino
  • Is current revision? No
  • Comment Updated links

Revision Content

Outside of the different colors and imagery that apps use, an app's design isn't necessarily dynamic: the principles of designing a flexible app are largely the same. But the style and tools a developer uses in coding an application is a completely different story. Numerous libraries and frameworks are available for coding mobile apps.

JavaScript libraries

jQuery Mobile

jQuery's official mobile framework is jQuery Mobile. jQuery Mobile provides a unified, HTML5-based user interface system for all popular mobile device platforms. jQuery Mobile also provides a theme builder for application design as well as development.

Dojo Mobile

Dojo Mobile is the Dojo Toolkit's mobile framework, boasting a series of flexible views and widgets, automatic device detection and themes, and more. The Dojo Mobile Showcase shows advanced Dojo Mobile usage in action.

MooTools Moobile

The unofficial mobile framework of MooTools is called Moobile. Moobile provides a mobile application boilerplate as well as a host of simple mobile widgets.

Numerous other mobile JavaScript frameworks are available to aid the development of mobile web apps. When looking for a good mobile web app JavaScript framework, look for multi-device support, touch and gesture event support, and a unified API with its host framework.

The web app built in this tutorial will utilize jQuery Mobile. Experiment and evaluate different mobile frameworks based on the goals of your app before selecting one (or deciding against using any at all). In many cases, a framework app will be save you time; in other cases, a framework could be overkill.

CSS libraries, helpers, and techniques

CSS plays an important role in any web-based technology. There are a variety of CSS libraries than may aid you in creating, maintaining, and organizing your CSS.

CSS preprocessors

While CSS is a simple language, its lack of variables and the need for repeated style assignments with vendor prefixes can make CSS difficult to maintain—a pain no mobile app developer needs. CSS preprocessors ease development of apps, allowing for better code organization and faster development.

With one of those CSS preprocessors, LESS, CSS can be written like this:

@someColor: #000; /* color var */

.rounded-corners (@radius: 5px) { /* function */
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

p {
  color: @someColor;
  a {
    color: #fff;
    background: @someColor;
    
    .rounded-corners;
  }
}
	

This gets converted into the following by the LESS preprocessor:

p { 
  color: #000;
}

p a {
  color: #fff;
  background: #000;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
	

While LESS is the most popular CSS preprocessor, SASS and Stylus are also available and useful.

CSS3 techniques

Web apps may take advantage of numerous CSS techniques that allow for enriched design and strategies for avoiding the need for imagery.

Gradients

CSS3 provides the ability to create linear and radial gradients with some simple CSS code:

h1 { 
  background-image: -moz-linear-gradient(#6facd5, #497bae);
}

Box and text shadows

Box shadows and text shadows provide a subtle depth enhancement to block elements and text:

.shadower {
  -moz-box-shadow: 10px 5px 5px #000;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}

Shapes with CSS

CSS also provides the ability to cleverly create shapes likes triangles and circles:

.arrowRight {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;
  border-top:5px solid transparent;
  border-left:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Creating responsive layouts

Coding responsive layouts is paramount in creating flexible apps that work on multiple devices and in multiple orientations. The following are some techniques for creating such a design.

Our desktop layout

desktop-screenshot1.png

Our mobile device & phone layouts

iphone-screenshot1.pngiphone-screenshot2.png

Percentage widths

Fixed pixel widths should rarely be used. Percentage widths are preferred as they let elements adjust to device viewport dimensions. Fixed widths (and heights) should generally be used only for small, genuinely fixed-sized items.

Viewport size-dependent element display

Showing and hiding elements based on viewport size is a common practice. Instead of cramming a lot of content into a smaller space, or changing an app's design completely, simply hiding those "supporting" elements may be the best option.

Viewport size-dependent imagery

Adapting image sizes to the device viewport size is also a common practice, making vector images (using SVG, for example) the best practice for your web app.

Media queries

CSS media queries let developers adjust layout and element styles to viewport size, orientation, aspect ratio, and more:

/* screen size media queries */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}


/* orientation media queries */
@media (orientation:portrait) {

}
@media (orientation:landscape) {

}

/* advanced media query usage */
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {

}

/* aspect ratio */
@media screen and (device-aspect-ratio: 16/9) {

}

orientationchange and resize events

Orientation changes can also be detected with JavaScript. Most browsers fire an orientationchange event while all browsers are known to fire the resize event.

window.addEventListener("resize", function() { 
  // Detect orientation based on width
  var orientation = window.innerWidth > window.innerHeight ? "landscape" : "portrait";
  
  // Execute more code accordingly...
}, false);

Web app bootstraps

Server side processing of information can be handled by the server side technology of your choice. Popular server side languages include PHP, Python, and NodeJS + express. There's a likelihood that your application will want to implement BrowserID for app sign in. You can find the code required to implement BrowserID on MDN.

App manifests

Apps submitted to the Firefox Marketplace require an application manifest. This manifest contains basic information that a web browser needs to interact with an app. Manifests are written in JSON. A sample manifest could look like this:

{
  "version": "0.1",
  "name": "Area Tweet",
  "description": "Find tweets by for any location",
  "icons": {
    "16": "http://areatweet.com/images/icon-16.png",
    "48": "http://areatweet.com/images/icon-48.png",
    "128": "http://areatweet.com/images/icon-128.png"
  },
  "developer": {
    "name": "David Walsh",
    "url": "http://areatweet.com"
  },
  "installs_allowed_from": [
    "https://marketplace.firefox.com",
    "http://areatweet.com"
  ],
  "default_locale": "en"
}

The application manifest lives on the host server, not the Firefox Marketplace. It's recommended that your manifest be saved with a .webapp extension. The manifest must be served with a Content-Type HTTP header of application/x-web-app-manifest+json. Use of HTTPS is recommended.

A complete listing of all manifest properties can be found here. There's also a Frequently Asked Questions document which provides tips for creating your manifest and explanations for why the manifest hosting process is the way it is.

Use absolute paths within the manifest, even for images. The Firefox Marketplace will not currently accept manifests with relative paths.

Application cache

See Using the application cache for details.

When an Open Web App is running in the Web runtime, no navigation controls are displayed. If you want to detect this, check the window.locationbar.visible property. If window.locationbar.visible is false, no navigation is displayed. You might want to check for this so you can provide navigation controls for the app user.

Revision Source

<p>Outside of the different colors and imagery that apps use, an app's design isn't necessarily dynamic: the principles of designing a flexible app are largely the same. But the style and tools a developer uses in coding an application is a completely different story. Numerous libraries and frameworks are available for coding mobile apps.</p>
<h2 id="JavaScript_libraries">JavaScript libraries</h2>
<h3 id="jQuery_Mobile">jQuery Mobile</h3>
<p><a class="external" href="http://jquery.com/">jQuery's</a> official mobile framework is <a class="external" href="http://jquerymobile.com/">jQuery Mobile</a>. jQuery Mobile provides a unified, HTML5-based user interface system for all popular mobile device platforms. jQuery Mobile also provides a <a class="external" href="http://jquerymobile.com/themeroller/">theme builder</a> for application design as well as development.</p>
<div class="infoBlock">
  <ul>
    <li><a class="external" href="http://jquerymobile.com/blog/">jQuery Mobile Blog</a></li>
    <li><a class="external" href="http://jquerymobile.com/demos/1.1.0/">jQuery Mobile API</a></li>
    <li><a class="external" href="http://api.jquery.com/">jQuery API</a></li>
  </ul>
</div>
<h3 id="Dojo_Mobile">Dojo Mobile</h3>
<p><a class="external" href="http://dojotoolkit.org/features/mobile">Dojo Mobile</a> is the <a class="external" href="http://dojotoolkit.org">Dojo Toolkit's</a> mobile framework, boasting a series of flexible views and widgets, automatic device detection and themes, and more. The <a class="external" href="http://demos.dojotoolkit.org/demos/demos.php?cat=mobile">Dojo Mobile Showcase</a> shows advanced Dojo Mobile usage in action.</p>
<div class="infoBlock">
  <ul>
    <li><a class="external" href="http://dojotoolkit.org/documentation/tutorials/1.7/mobile/tweetview/getting_started/">Getting Started with dojox/mobile</a></li>
    <li><a class="external" href="http://livedocs.dojotoolkit.org/dojox/mobile">Dojo Mobile Documentation</a></li>
    <li><a class="link-https" href="https://www.ibm.com/developerworks/mydeveloperworks/blogs/ykami/entry/dojox_mobile_pane_dojox_mobile_container_and_dojox_mobile_contentpane9">Dojo Mobile 1.8 Work-In-Progress</a></li>
    <li><a class="external" href="http://dojotoolkit.org/api/">Dojo Toolkit API</a></li>
  </ul>
</div>
<h3 id="MooTools_Moobile">MooTools Moobile</h3>
<p>The unofficial mobile framework of <a class="external" href="http://mootools.net">MooTools</a> is called <a class="external" href="http://moobilejs.com/">Moobile</a>. Moobile provides a mobile application boilerplate as well as a host of simple mobile widgets.</p>
<div class="infoBlock">
  <ul>
    <li><a class="link-https" href="https://github.com/cpojer/mootools-mobile">MooTools Mobile</a></li>
    <li><a class="external" href="http://mootools.net/docs/core">MooTools Documentation</a></li>
    <li><a class="external" href="http://mootools.net/forge/">MooTools Forge</a></li>
  </ul>
</div>
<p>Numerous other mobile JavaScript frameworks are available to aid the development of mobile web apps. When looking for a good mobile web app JavaScript framework, look for multi-device support, touch and gesture event support, and a unified API with its host framework.</p>
<p class="tutBlock">The web app built in this tutorial will utilize jQuery Mobile. Experiment and evaluate different mobile frameworks based on the goals of your app before selecting one (or deciding against using any at all). In many cases, a framework app will be save you time; in other cases, a framework could be overkill.</p>
<h2 id="CSS_libraries.2C_helpers.2C_and_techniques">CSS libraries, helpers, and techniques</h2>
<p>CSS plays an important role in any web-based technology. There are a variety of CSS libraries than may aid you in creating, maintaining, and organizing your CSS.</p>
<h3 id="CSS_preprocessors">CSS preprocessors</h3>
<p>While CSS is a simple language, its lack of variables and the need for repeated style assignments with vendor prefixes can make CSS difficult to maintain—a pain no mobile app developer needs. CSS preprocessors ease development of apps, allowing for better code organization and faster development.</p>
<p>With one of those CSS preprocessors, <a class="external" href="http://lesscss.org/">LESS</a>, CSS can be written like this:</p>
<pre class="brush: css">
@someColor: #000; /* color var */

.rounded-corners (@radius: 5px) { /* function */
&nbsp;&nbsp;border-radius: @radius;
&nbsp;&nbsp;-webkit-border-radius: @radius;
&nbsp;&nbsp;-moz-border-radius: @radius;
}

p {
&nbsp;&nbsp;color: @someColor;
&nbsp;&nbsp;a {
&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;
&nbsp;&nbsp;&nbsp;&nbsp;background: @someColor;
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;.rounded-corners;
&nbsp;&nbsp;}
}
	</pre>
<p>This gets converted into the following by the LESS preprocessor:</p>
<pre class="brush: css">
p { 
&nbsp;&nbsp;color: #000;
}

p a {
&nbsp;&nbsp;color: #fff;
&nbsp;&nbsp;background: #000;
&nbsp;&nbsp;border-radius: 5px;
&nbsp;&nbsp;-webkit-border-radius: 5px;
&nbsp;&nbsp;-moz-border-radius: 5px;
}
	</pre>
<p>While LESS is the most popular CSS preprocessor, <a class="external" href="http://sass-lang.com/">SASS</a> and <a class="external" href="http://learnboost.github.com/stylus/">Stylus</a> are also available and useful.</p>
<h3 id="CSS3_techniques">CSS3 techniques</h3>
<p>Web apps may take advantage of numerous CSS techniques that allow for enriched design and strategies for avoiding the need for imagery.</p>
<h4 id="Gradients">Gradients</h4>
<p>CSS3 provides the ability to create <a href="/en-US/docs/CSS/Using_CSS_gradients">linear and radial gradients</a> with some simple CSS code:</p>
<pre class="brush: css">
h1 { 
&nbsp;&nbsp;background-image: -moz-linear-gradient(#6facd5, #497bae);
}
</pre>
<h4 id="Box_and_text_shadows">Box and text shadows</h4>
<p><a href="/en-US/docs/CSS/Box-shadow">Box shadows</a> and <a href="/en-US/docs/CSS/text-shadow">text shadows</a> provide a subtle depth enhancement to block elements and text:</p>
<pre class="brush: css">
.shadower {
&nbsp;&nbsp;-moz-box-shadow: 10px 5px 5px #000;
&nbsp;&nbsp;text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
&nbsp;&nbsp;color: white;
&nbsp;&nbsp;font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}
</pre>
<h4 id="Shapes_with_CSS">Shapes with CSS</h4>
<p>CSS also provides the ability to cleverly create shapes likes triangles and circles:</p>
<pre class="brush: css">
.arrowRight {
&nbsp;&nbsp;width:0px; 
&nbsp;&nbsp;height:0px; 
&nbsp;&nbsp;border-bottom:5px solid transparent;
&nbsp;&nbsp;border-top:5px solid transparent;
&nbsp;&nbsp;border-left:5px solid #2f2f2f;
&nbsp;&nbsp;font-size:0px;
&nbsp;&nbsp;line-height:0px;
}

.circle {
&nbsp;&nbsp;border-radius: 50%;
&nbsp;&nbsp;width: 200px;
&nbsp;&nbsp;height: 200px;
}
</pre>
<h3 id="Creating_responsive_layouts">Creating responsive layouts</h3>
<p>Coding responsive layouts is paramount in creating flexible apps that work on multiple devices and in multiple orientations. The following are some techniques for creating such a design.</p>
<div class="tutBlock">
  <h4 id="Our_desktop_layout">Our desktop layout</h4>
  <p><img alt="desktop-screenshot1.png" class="internal default" src="/files/3732/desktop-screenshot1.png" /></p>
  <h4 id="Our_mobile_device_.26_phone_layouts">Our mobile device &amp; phone layouts</h4>
  <p><img alt="iphone-screenshot1.png" class="internal default" src="/@api/deki/files/6278/=iphone-screenshot1.png" /><img alt="iphone-screenshot2.png" class="internal default" src="/@api/deki/files/6279/=iphone-screenshot2.png" /></p>
</div>
<h4 id="Percentage_widths">Percentage widths</h4>
<p>Fixed pixel widths should rarely be used. Percentage widths are preferred as they let elements adjust to device viewport dimensions. Fixed widths (and heights) should generally be used only for small, genuinely fixed-sized items.</p>
<h4 id="Viewport_size-dependent_element_display">Viewport size-dependent element display</h4>
<p>Showing and hiding elements based on viewport size is a common practice. Instead of cramming a lot of content into a smaller space, or changing an app's design completely, simply hiding those "supporting" elements may be the best option.</p>
<h4 id="Viewport_size-dependent_imagery">Viewport size-dependent imagery</h4>
<p>Adapting image sizes to the device viewport size is also a common practice, making vector images (using <a href="/en-US/docs/SVG">SVG</a>, for example) the best practice for your web app.</p>
<h4 id="Media_queries">Media queries</h4>
<p><a href="/en-US/docs/CSS/Media_queries">CSS media queries</a> let developers adjust layout and element styles to viewport size, orientation, aspect ratio, and more:</p>
<pre class="brush: css">
/* screen size media queries */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}


/* orientation media queries */
@media (orientation:portrait) {

}
@media (orientation:landscape) {

}

/* advanced media query usage */
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {

}

/* aspect ratio */
@media screen and (device-aspect-ratio: 16/9) {

}
</pre>
<h4 id="orientationchange.C2.A0and.C2.A0resize.C2.A0events"><code>orientationchange</code> and <code>resize</code> events</h4>
<p>Orientation changes can also be detected with JavaScript. Most browsers fire an <code>orientationchange</code> event while all browsers are known to fire the <code>resize</code> event.</p>
<pre class="brush: js">
window.addEventListener("resize", function() { 
&nbsp;&nbsp;// Detect orientation based on width
&nbsp;&nbsp;var orientation = window.innerWidth &gt; window.innerHeight ? "landscape" : "portrait";
&nbsp;&nbsp;
&nbsp;&nbsp;// Execute more code accordingly...
}, false);

</pre>
<h2 id="Web_app_bootstraps">Web app bootstraps</h2>
<p>Server side processing of information can be handled by the server side technology of your choice. Popular server side languages include PHP, Python, and <a class="external" href="http://nodejs.org/">NodeJS</a> + <a class="external" href="http://expressjs.com/">express</a>. There's a likelihood that your application will want to implement <a href="/en-US/docs/BrowserID">BrowserID</a> for app sign in. You can find the code required to implement BrowserID on <a href="/en-US/docs/BrowserID">MDN</a>.</p>
<h2 id="App_manifests">App manifests</h2>
<p>Apps submitted to the Firefox Marketplace require an <a href="/en-US/docs/Apps/Manifest">application manifest</a>. This manifest contains basic information that a web browser needs to interact with an app. Manifests are written in <a href="/en-US/docs/JSON">JSON</a>. A sample manifest could look like this:</p>
<pre class="brush: js">
{
&nbsp; "version": "0.1",
&nbsp; "name": "Area Tweet",
&nbsp; "description": "Find tweets by for any location",
&nbsp; "icons": {
&nbsp;&nbsp;&nbsp; "16": "http://areatweet.com/images/icon-16.png",
&nbsp;&nbsp;&nbsp; "48": "http://areatweet.com/images/icon-48.png",
&nbsp;&nbsp;&nbsp; "128": "http://areatweet.com/images/icon-128.png"
&nbsp; },
&nbsp; "developer": {
&nbsp;&nbsp;&nbsp; "name": "David Walsh",
&nbsp;&nbsp;&nbsp; "url": "http://areatweet.com"
&nbsp; },
&nbsp; "installs_allowed_from": [
&nbsp;&nbsp;&nbsp; "https://marketplace.firefox.com",
&nbsp;&nbsp;&nbsp; "http://areatweet.com"
&nbsp; ],
&nbsp; "default_locale": "en"
}
</pre>
<p>The application manifest lives on the host server, <strong>not the Firefox Marketplace</strong>. It's recommended that your manifest be saved with a <code>.webapp</code> extension. The manifest must be served with a <code>Content-Type</code> <a href="/en-US/docs/HTTP">HTTP</a> header of <code>application/x-web-app-manifest+json</code>. Use of HTTPS is recommended.</p>
<p>A complete listing of all manifest properties can be <a href="/en-US/docs/Apps/Manifest">found here</a>. There's also a <a href="/en-US/docs/Apps/FAQs/About_app_manifests">Frequently Asked Questions</a> document which provides tips for creating your manifest and explanations for why the manifest hosting process is the way it is.</p>
<p>Use absolute paths within the manifest, even for images. The Firefox Marketplace will not currently accept manifests with relative paths.</p>
<h2 id="Application_cache">Application cache</h2>
<p>See <a href="/en-US/docs/HTML/Using_the_application_cache">Using the application cache</a> for details.</p>
<h2 id="Navigation">Navigation</h2>
<p>When an Open Web App is running in the Web runtime, no navigation controls are displayed. If you want to detect this, check the <code>window.locationbar.visible</code> property. If <code>window.locationbar.visible</code> is false, no navigation is displayed. You might want to check for this so you can provide navigation controls for the app user.</p>
Revert to this revision