Ver este artículo en castellano aquí

On march 20th I had the oportunity to attend the “Firefox OS App Days” here in Valladolid. The goal was simple, two hours of introductory sessions and a hackathon for having a first-hand contact with the platform.

The Platform

Firefox OS is, at a glance, an Android a linux kernel similar to Android’s core + a web browser, so everything in there, including the start screen and the notifications are rendered in HTML5, so there are no “native apps”. The main difference between this approach and running an app inside an Android or iPhone browser, is that Firefox OS apps will have access to the phone APIs, including, but not limited to, contacts, calendar and other options.

Development: Tools, languages, and the simulator

We can develop a Firefox OS app in the same way we create a web app, with HTML + CSS + Javascript. This means that we can also extend our code using LESS, SASS, jQuery, Sencha, and every javascript framework we want (for my app I used Knockout.js). We only need a Firefox browser for debugging, as the rendering engine that runs on the phone is the same that runs on the browser.

Eventually we will need to test things like the camera, the contacts, notifications, or other API functions that are not available in the standard browser. For these scenarios we can use the simulator, which can be installed as a Firefox extension.

Building blocks: Native interface

As I told early, there are no “native” apps on Firefox, this means that we can use the same styles and elements for lists, buttons, headers and dialogs of the operating system for our own applications, so it integrates seamlessly. Today we don’t have a base app template, so we need to manually copy the CSS files from the Gaia repository (see links at the end of the article) to our app.

My first app

After the introduction we had a hackathon, less than two hours for having a functional app up and running. My first project is a ToDo list, with the following features:

The styles are made with the Building blocks, from the Gaia repository. Gaia is the name of the UI for Firefox OS.

The animations are made with standard CSS3 transforms and some JS, thanks to the guys of Mozilla and Telefonica I+D for the help.

The list is handled with Knockout.js, making it simple to draw a list without manually injecting HTML inside the DOM.

The result is what you see here:

Next steps

This is a Hello World, of course, for this app to be fully functional I would need to save the data, and extend it using the calendar for setting alarms (for example). It may not be the first platform in the future, nor the second or the third, but I think is worth to learn a bit about it.

Links