Channels ▼
RSS

Web Development

Test-Driving Development for the Firefox OS Phone


The mobile computing land-grab is in full swing. While Apple and Google duke it out over the top mobile OS spot, Microsoft and RIM are making their best efforts to catch up. But in addition to those vendors, companies traditionally associated purely with the software industry are also getting into the mobile hardware game. Facebook recently partnered with HTC to create an Android OS-based phone optimized for their new Facebook Home shell. Linux distributor Canonical is working on a Linux-powered Ubuntu Phone. And recently, Mozilla developed its own operating system, originally called "Boot to Gecko," which evolved into Firefox OS, and that uses a kernel called Gonk, which shares some of the same components as the Linux kernel for Android It runs on lots of  hardware, including Samsung devices (although these are considered Tier 2 devices and will not receive the latest bug fixes) and a recently released dedicated device called the Geeksphone.

This article isn't a review of the Geeksphone because several of the phone's features are not yet complete. Rather, I review the development experience in Firefox OS. The point of this early release of the Firefox OS hardware and software is to provide enthusiastic Firefox Web developers a head start with an inexpensive mobile platform that will be sold to consumers sometime in the future.

Developers interested in creating applications for Firefox OS can even do so right now, entirely without the Firefox OS hardware requirement. Because the OS is powered by the same technology as the Firefox for Android Web browser, anyone with a supported device running Android 2.2 or higher can download and install Firefox for Android from the Google Play market.

Getting Started

Regardless of whether you have access to Firefox OS phone hardware, the first thing you should do is install the Firefox OS simulator. You will need the latest release of the Firefox Web browser for Windows, Mac, or Linux. Then install the Firefox OS simulator plug-in.

Launch the simulator (Figure 1) by selecting from the desktop Firefox Tools | Web Developer | Firefox OS menu item. Toggle the Simulator switch in the left margin of the page to "Running," and note how quickly the simulator is ready to use. Compared to launching an Android or iOS simulator on the same hardware, the Firefox OS simulator leaves those simulator start-up times in the dust.

The Firefox OS Simulator
Figure 1: The Firefox OS simulator.

Next, try out one of the many apps already available in the Firefox Marketplace. Simply select the Marketplace icon in the simulator, and choose an app of interest.

For example, to install the Wikipedia app, scroll the simulator home screen to the right to display the app icons, one of which is the Marketplace. Click that icon to open it. From there, select the Wikipedia app icon on the Marketplace home page. From the Wikipedia App Details page, click the Free button to load the app into the simulator. Clicking the Install button completes the installation process.

When you return to the simulator's home screen by clicking the small home icon on the left side of the bottom toolbar, you should see the Wikipedia app (Figure 2) along with the other installed applications (Figure 3) on the simulated device.

Installing the Wikipedia app
Figure 2: Installing the Wikipedia app.

Various Firefox OS applications
Figure 3: Various Firefox OS applications.

Like any new platform, the Firefox Marketplace offers limited, but rapidly expanding, categories of applications ranging from Business and Education to Productivity and Games. Many of the apps themselves are shells for websites and online services, although there are also some entirely offline apps like To Do Lists that use JavaScript locally to manage and store data. That's a key differentiator of Firefox OS compared with other mobile platforms. The applications themselves are written in Web-standard HTML5/CSS3/JavaScript and bundled into application distribution packages that can be deployed through the Firefox Marketplace on Android mobile devices running the Firefox browser as well as on the Firefox OS. Apps can also be hosted independently by a developer for more flexibility when it comes to updates, this is explained in more detail later.

Of course, Firefox OS shares some of the same components as the Linux kernel for Android, everything else about the OS has been built around the Gecko browsing engine and Gaia user interface.

Web-Centric Development

Because Firefox OS apps consist of Web-native HTML5, CSS3, and JavaScript files, Web developers can create optimized editions of their Web properties today using the debugging capabilities built into Firefox for Android.

To get started with Firefox Marketplace app development, visit the Developer Hub for a brief walkthrough of the process. This will acclimate you to the Firefox app design fundamentals and user interface guidelines, provide links to the Firefox OS Simulator and reference applications (with all the source code posted on Github), as well as explain how to prepare your application for deployment. To utilize the display metrics of Firefox OS Web applications, developers should follow the documented guidelines recommended on the Mozilla Developer Network (MDN).

If you want to employ hardware-specific Firefox OS features, such as the filesystem or radios, will need to create a collection of HTML/JavaScript files that access these features. To access the GPS radio, for instance (Figure 4), developers need to call the getCurrentPosition() function (see the Mozilla Developer Network documentation for an example of this call in action). For apps that require more privileged access to such features as alarms or notifications and local storage, developers need to explicitly add those permissions to the manifest, similar to the way Android developers do within the AndroidManifest.xml file.

Running a Geolocation app on a Firefox OS smartphone
Figure 4: Running a Geolocation app on a Firefox OS smartphone.

App Distribution

While developers can test and deploy their hosted Web applications on either the Firefox for Android or Firefox OS phones, applications that are intended to be bundled into a zipped manifest and launched locally need to be signed to be granted permission to do so. These apps are divided into three types from lowest to highest sensitivity: plain, privileged, and certified.

  • Plain means that the zipped manifest doesn't require access to any hardware and behaves with the same level of permissions as if it were running in a standard Firefox Web browser over the Web.
  • Privileged means the app requires access to sensitive Web API calls such as address book read access. 
  • Certified is the highest level of system-level access (such as the ability to change system settings) and is intended more for device OEM's than Web developers.

Mozilla holds the app-signing keys, but unlike developer programs for other mobile OS platforms, does not charge developers for the privilege of working with Mozilla to upload an application for code review to the Firefox marketplace. Prior to doing so, developers need to create or use an existing Mozilla Developer Network account and agree to the terms of service.

If the developer guidelines are followed and an application has been submitted for review, Mozilla estimates the review turnaround time to take about two weeks. Once approved, the app bundle is code signed by Mozilla and made available for download from the Firefox Marketplace. If the application is a paid product, revenue share for distributing the app through the Firefox OS marketplace is shared with Mozilla, similar to the way Apple takes a percentage of sales through its App Store.

Next Steps

If you already have an Android device capable of running the Firefox browser, you're ready to get started developing for the Firefox OS. However, for a truly accurate performance portrayal of how your Web applications perform on the platform (Figure 5), you can obtain the developer preview edition today from the Geeksphone website. For the more adventurous, you can even attempt to build your own Firefox OS phone because Mozilla has posted the source code to the kernel on Github. Some porting projects are already underway to get Firefox OS to run on older Android hardware.

A Collection of Firefox OS applications<
Figure 5: A collection of Firefox OS applications.

Mozilla's approach with Firefox OS seems to be an amalgamation of parts of Palm/HP's ill-fated WebOS combined with the advantages of centralized Web application curating and distribution of programs that step into the realm of hardware-level access. And because the OS itself is there primarily to serve the Gecko engine, speed and security are some of the most notable benefits that Firefox OS has to offer. Thanks to this laser-focused approach on speed and security, the hardware required to adequately run an acceptable user experience precludes the mobile hardware arms race currently underway elsewhere.

So if you're a fan of Web standards and like the Web-centric approach that Mozilla has to offer, take the dive and port your favorite website, app, or service to a Firefox OS program to see how intuitive and quickly rewarding the process can be.


Mike Riley is a blogger for and frequent contributor to Dr. Dobb's.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 
Dr. Dobb's TV