Código de aplicativo

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.

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:

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

Our mobile device & phone layouts

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.

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:

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-TypeHTTP 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

Navigation

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.