Getting Started with Firefox OS

Jeff Friesen
This entry is part 1 of 2 in the series Getting Started with Firefox OS

Getting Started with Firefox OS

Mobile applications are all the rage these days. Native apps run on a mobile device’s operating system and must be adapted to run on different devices, whereas Web apps run in a browser context and are accessible to all Web-capable mobile devices.

Native apps currently dominate the mobile app landscape, a fact borne out by the success of Google’s Android and Apple’s iOS platforms. Perhaps Mozilla’s fledgling Firefox OS mobile operating system for running Web apps may erode some of this marketshare.

This article begins a two-part series that shows you how to get started with Firefox OS. I first introduce you to this mobile operating system, and then show you how to set up a development environment based on the Firefox OS simulator.

Introducing Firefox OS

Firefox OS is a Mozilla-developed open source mobile operating system for smartphones and tablets. It’s based on a Linux kernel, and boots into a Gecko-based runtime engine that lets users run apps written in HTML, JavaScript, and other open Web application APIs.

Firefox OS is implemented as an open Web technologies stack that consists of three major layers:

  • Gonk: a Linux kernel and userspace hardware abstraction layer (HAL). Common open source projects such as Linux, libusb, and BlueZ are used for the kernel and various userspace libraries. Some parts of the HAL (e.g., camera and GPS) are shared with Android.
  • Gecko: the application runtime that sits on top of Gonk. It implements open standards for HTML, CSS, and JavaScript. Also, Gecko includes a networking stack, graphics stack, layout engine, virtual machine (for JavaScript), and more.
  • Gaia: the user interface, which controls everything drawn on the screen. It’s written in HTML, CSS, and JavaScript; and interfaces with the operating system through Open Web APIs (implemented by Gecko). Gaia includes a lock screen, a home screen, and more.

On July 25, 2011, Dr. Andreas Gal, Director of Research at Mozilla Corporation, announced the Boot to Gecko (B2G) project — Firefox OS was originally known as Boot to Gecko. This project’s goal: build a complete standalone operating system for the open Web.

Why create another, albeit Web-based, mobile operating system? Mozilla created B2G/Firefox OS for the following reasons:

  • Demonstrate that the standards-based open Web has the potential to be a competitive alternative to the existing single-vendor application development stacks offered by the dominant mobile operating systems. Native apps are a step backward in that they tie users to a specific operating system and the devices that support it. In contrast, the Web has evolved so that users experience content in much the same way on any kind of device.
  • Close a large gap in the mobile marketplace. Smartphones tend to be very expensive and not everyone can afford them (especially in developing markets, such as Columbia and Poland). One way to achieve a smartphone experience without having to pay alot of money is to purchase a cheap Android device. However, apps tend to run poorly because of code overhead, slower processors, and other factors. Firefox OS offers a more performant experience because there’s less overhead between Gecko and the hardware — it’s able to offer a smartphone experience on inexpensive and low-end hardware, which is comparable to offering an Android experience on more expensive hardware. Firefox OS doesn’t compete with high-end devices. Instead, it offers entry-to-mid-level smartphones at feature phone prices.

For Firefox OS to be a complete OS, it has to allow Web apps access to all important device capabilities that native apps can access. Firefox OS looks for those gaps that prevent Web apps from being the equal of native apps and provides the needed APIs.

Firefox OS’s fruits include new Web APIs that expose device capabilities (e.g., telephone and camera), a privilege model for safely exposing these capabilities to Web pages, applications that prove these capabilities, and more.

Firefox OS can run on many Android devices, including those from Samsung. It has even been demonstrated on the Raspberry Pi. Also, Geeksphone is providing the first developer preview devices for this OS — see Figure 1.

Keon and Peak

Figure 1: The Keon (on the left) features a 3.5-inch HVGA Multitouch screen, whereas the Peak (on the right)
features a 4.3-inch qHD IPS Multitouch screen.

In February, Mozilla announced plans to globally roll out Firefox OS on inexpensive mobile devices. It has partnered with LG Electronics and other companies to make devices that run this OS, and with mobile network providers such as Telefónica and Deutsche Telekom.

Firefox OS and Tablets
Foxconn recently announced a tablet device that runs Firefox OS.

The first wave of Firefox OS devices will be available to consumers in Brazil, Colombia, Hungary, Mexico, Montenegro, Poland, Serbia, Spain, and Venezuela. Firefox OS devices will probably not be available to the smartphone-saturated U.S. market until 2014.

Setting Up a Development Environment

If you’re familiar with HTML, CSS, JavaScript, and other open Web technologies, you already have a head start on developing apps for Firefox OS. However, you first need to set up a development environment. The simplest solution is to use the Firefox OS Simulator.

Firefox OS Simulator is a test environment for Firefox OS. This environment consists of a dashboard, a console, and the Firefox OS Simulator device (the simulator) for installing and running Web apps.

Point your browser to Mozilla’s Firefox OS Simulator page to obtain this add-on for recent versions of the Firefox browser. Version 3.0.1 is the latest version at time of writing.

Click the Add to Firefox button to download Firefox OS Simulator. On the resulting Software Installation dialog box, click the Install Now button. After a few moments, Firefox OS Simulator is installed and a new entry is added to the add-ons screen.

Select Tools | Add-ons to display the add-ons screen. Because Firefox OS Simulator is initially disabled, you must enable it by clicking this add-on’s Enable button.

After enabling Firefox OS Simulator, select Tools | Web Developer | Firefox OS Simulator. The simulator loads quickly and you are taken to the dashboard that’s shown in Figure 2.

dashboard

Figure 2: The dashboard lets you start and stop as well as add apps to/remove apps from the simulator.

You can start and stop the simulator, choose whether or not to display a console for viewing messages, and add apps to/remove apps from the simulator. Each added app also appears on the dashboard.

Click the Stopped/Running switch to start the simulator. (Click this switch again when you want to stop the simulator.) If you don’t want an error console to appear, uncheck the Console checkbox. Figure 3 shows both the simulator and error console.

connect button

Figure 3: When the simulator is running, a Connect button appears on the dashboard for connecting to a remote device, for debugging purposes.

The simulator presents a home screen with a status area at the top, an area for viewing application icons (drag the mouse to the left/right to view them) below, a toolbar of commonly used icons (e.g., phone) below, and a toolbar with the following iconic buttons at the bottom:

  • Home: this button navigates to home screen.
  • Rotation Simulation: this button switches the simulator between portrait and landscape orientation.
  • Geolocation Simulation: this button triggers a dialog asking you to share your geographic location, either your current coordinates or supplied custom coordinates.

Check out Mozilla’s Firefox OS Simulator document to learn more about the Firefox OS Simulator and working with the dashboard. You’ll also learn about the simulator’s limitations.

Conclusion

I’ve introduced Firefox OS and shown you how to set up a simple development environment based on the Firefox OS Simulator. In the second part of this series, I’ll introduce you to hosted apps and packaged apps, and show you how to create them.

Getting Started with Firefox OS

Getting Started with Firefox OS: Hosted and Packaged Apps >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://oscaralderete.com Oscar

    Good article. I’m waiting for next part!

    Talking with guys of work (web developers) about this, someone said something interesting: PHP started as the low-entry option in web servers market too, now PHP runs on 75% of them.

    I like the idea of FF OS, but I think its success (or not) just depends of how good it could be.

  • http://tutortutor.ca Jeff Friesen

    Thanks Oscar.

    Jeff

  • http://familyfirst-online.blogspot.com/ Family First

    I like the UI.
    it look very simple and stylish!

  • http://yahoo.com/ Alex Bray

    Hi, thanks for sharing. I’m wondering if it’s OK to copy some of the text in my site?

    • http://www.onsman.com Ricky Onsman

      Hi Alex. Generally speaking, we don’t permit the re-publication of SitePoint content. Exceptions are made under fair use provisions in most territories that have relevant copyright legislation, but this can be tricky to interpret when it comes to web content. SitePoint supports the legislated use of excerpts of copyright material for educational, non-profit purposes, but we need to see the details before we can give approval. I know it’s boring, but we have an obligation to protect our authors’ rights, and our own. Email me at editor@sitepoint.com with the details of what you’d like to reproduce and where, and we’ll see what we can do.

  • http://tykie.com Charles Stover

    Please, don’t let this get hooked into a vendor, like Nokia, who can then just quit and hang us users out to dry. They did that with maemo and now I’m stuck with a rather expensive device with no upgrade path. They are now on my permanent s**t list, so, absolutely do not hook up with them. On a related note, could FF OS be installed on my N900?