Firefox OS Introduction And App Dev

In this article I will be talking a very rough sketch of Firefox OS, which is developed by Mozilla. I will be talking about the architecture, how it works and wrap it up with a demo and sample code attached.

Pre-requisites

• Firefox Browser [Latest Update].
• Add on [Firefox OS simulator].
• Sublime or any editor.

Introduction

Couple of years back, Mozilla came up with a Firefox OS which was open sourced and could operate in a very low resource and give the users a feel of a Smartphone. This was done mainly to encourage people who were using “feature” phones to try their hands on the new phone which came at the same price to that of their phone. The idea was to have all the people have an identity on the internet. The whole OS is divided in 3 major parts,

1. Gaia – UI
2. Gonk – ADB Kernel
3. Gecko – The rendering engine.

Architecture



Gaia is the UI and it draws everything which the user sees on the screen including the lock screen, dialer and all the apps. This is made with HTML5,CSS3 and JS. Gaia talks with the OS layer with standard Web APIs which are there in Gecko.





(Images of Gaia UI of Firefox OS running on Alcatel One Touch and InFocus Tab).

Gonk:

It’s a Linux distribution that interfaces the Gecko and hardware. Gonk exposes the Web APIs which are implemented in Gecko and controls the function of the hardware. Some of its modules are taken from Android and extended by Mozilla by a few open source projects. This type of implementation has made it easy for the OEMs to manufacture / port Firefox OS on the smartphones which are existing in the market.

Gecko 

The rendering engine takes HTML, XML, SVG, Images, CSS (for formatting) and displays the formatted content. Gecko is small lightweight which is why when it lies in the heart of Firefox OS it can deliver contents much faster and since it is open sourced many vendors have implemented it. Gecko also provides cross platform support which is very cool.

Jumping into App Dev.

Introduction to Simulator



The Simulator is a addon which can be installed from Firefox Browser Developer - Web IDE -Install Simulator.

I have popped up the simulator FxOS 2.0 and I will be running the demo with this simulator only!

Lets just have a better idea of how it looks from Inside.



Now, that we have seen how it looks. Lets build a small app and see how it all happens. But before that I will like to walk you through the manifest.webapp file which is how Firefox OS understands the App and installs it.

manifest.webapp is a plain JSON file containing a few key pair values which are essentials for the app to get installed in the phone. This file is divided in 3 blocks,

1. Information about the app (name,version,icons).
2. Information about the developer(s).
3. Security (from where the app can be installed). In the demo I have kept it “ *” which means I will be able to install the whole app from anywhere.

The following is the code snippet for the file.



Much like every website has a starting page “index.html” this app too has the starting point which is “index.html” which is right now in my root folder. If one has a webpage written in HTML5, CSS3 and js. They can simply write a webapp.manifest file and convert their web page in a web app without having to do the hard work.

Let me just show how easy it is.



That’s the webpage which we have and after we attach the manifest.webapp file with it. And run it on the simulator, here’s what we will find.



This is how easy, we can convert any standard html page into an app.

I hope you guys had fun reading. I will soon be writing on add on development for Firefox. The code for the app which I demoed can be found here.