Writing apps for Firefox OS phones

Life on Planet Firefox

Article from Issue 156/2013

Cooking up an app for the Firefox OS is in no way difficult. All you need is a good measure of HTML and a dash of CSS. A few drops of JavaScript will bring it all to life.

Although the smartphone software market seems polarized between iOS and Android these days, other contenders are filling out or creating their own niches. Mozilla, for example is aiming at the modest part of the market share: the very low end phones. That doesn't mean that Firefox OS phones are bad. Quite the contrary. The few models I've seen so far are perfectly adequate considering their price tag. Additionally, they are real smartphones, with a great potential market in developing countries or for those who think that spending more than 100 bucks on a phone is a waste, which, let's face it, is most people.

Firefox OS can do most, if not all, of what you can do in Android and iOS, and it's easy to make apps for it. If you can write HTML5, CSS3, and JavaScript to create web apps, you've already mastered 90% of what you need to know. Even if you are bit rusty with your web technologies, I'll try to show you in this article how to get from idea to marketplace quickly and easily.

The Hardware

Having a real device on which to test your software definitely helps. The good news is that Firefox OS handsets are cheap, and you can pick up a ZTE Open for less than US$ 80 (or as little as EUR 39 if you live in Spain). Even if you don't have a physical device, however, you can run, test, and debug your app using the Firefox OS Simulator.

The Simulator

The Firefox OS Simulator is a Mozilla add-on that lets you run a Firefox OS emulator (Figure 1) and test your apps [1]. After installing it, go to the Tools | Web Developer | Firefox OS Simulator.

Figure 1: The Firefox OS Simulator lets you test your apps in an emulated environment.

The simulator comprises two parts: the dashboard and the emulator proper. From the dashboard, from left to right and top to bottom, you can run the emulator, see a list of apps you have installed in the emulator, and add a directory or an URL that contains the manifest of Firefox OS app (more about that later). On the far right, within the list of apps, you can Refresh individual apps on the emulator when you make changes and Connect Firefox's integrated web development tools to the emulator to debug your JavaScript code, HTML, or CSS.

If you have a Firefox OS handset, you can also Push your app to it. To do this, you first have to configure your phone by going to Settings on your device; then, scroll down and choose Device Information | More Information | Developer and check the Remote Debugging option. Next, connect your handset to your computer using the USB data cable, and … Presto! Your device will pop up on the dashboard.

The emulator itself, apart from simulating a handset, has two menus at the top. File allows you to Quit the emulator, and App allows you to Refresh an installed app.

Note that the Firefox OS emulator is still in a very early stage of development; hence, it's slow and resource hungry. It may also behave weirdly, lock up, or show results that are inconsistent with what you would see on a real phone, which can be annoying and sort of defeats the purpose of an emulator in the first place. However, unless you have a real Firefox OS device, it's the best you can do.

The Assets

Before you start writing your app, you will want to grab the assets that Mozilla has to offer [2] and that you can use freely in your project. Not only will this make your life easier, it will also help maintain a consistent look and feel across all apps on the system.

The bag of goodies you really want to get is the Building blocks package, which includes all the fonts, icons, images, and CSS files (including styles for buttons, the status bar, etc.) that you need to design an app. Additionally, it includes plenty of examples to help you see how these resources are used, as well as sample JavaScript code to power the whole lot. For comprehensive advice and even more examples to help you use the assets, check out the Building Firefox OS website [3].

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Treasure Hunt

    A geolocation guessing game based on the popular Wordle evaluates a player's guesses based on the distance from and direction to the target location. Mike Schilli turns this concept into a desktop game in Go using the photos from his private collection.

  • Programming the Cell

    The Cell architecPIture is finding its way into a vast range of computer systems – from huge supercomputers to inauspicious Playstation game consoles. We'll show you around the Cell and take a look at a sample Cell application.

  • Firefox OS Smartphones

    JavaScript, HTML5, and a liberal helping of Linux and Android inheritances: This is Firefox OS, the smartphone operating system Mozilla created to push into the low-end smartphone market. We tested the Keon and Peak models by Geeksphone.

  • Firefox OS vs. Android

    Firefox OS has come out of nowhere to challenge Android and iOS in the mobile operating system market. We'll show you what is different about Firefox OS and compare a recent Firefox OS phone with a comparable Android device.

  • Canvas Fingerprinting

    We'll tell you about some powerful new ad tracking techniques and how you can stop them.

comments powered by Disqus
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters

Support Our Work

Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.

Learn More