Launched in 2013, Firefox OS is a Linux kernel-based open source OS for smartphones and tablet that can also be used on smart TVs. Firefox OS is developed By Mozilla, well known for Firefox browser.

Main goal of Firefox OS is to provide a complete, community-based alternative system for mobile devices using open standards an approaches such as HTML 5 applications, Javascript and open web APIs. Firefox OS is written in HTML 5, CSS, Javascript bu also C++.

Current version of Firefox OS is 2.1.0 with a 2.2.0 version that should be released in Q3 2015. At the end of 2014, Firefox OS phones are offered by 14 operators in 28 countries throughout the world. OS can be considered as a competitor of OS like Apple’s iOS, Google’s Android, and Microsoft’s Windows Phone.

Architecture

At the core of Firefox OS, there are three major software layers :

  • Gonk that is platform denomination for a combination of the Linux Kernel and the Hardware Abstract Layer from Android.
  • Gecko that is the web browser engine and application runtime services layer.
  • Gaia that is an HTML 5 layer and user-interface system.

The following diagram show a representation of Firefox OS architecture :

Firefox_OS_Architecture_diagram

 

Firefox OS Simulator

To try applications, Mozilla provides a Firefox OS Simulator which can run on any machine because it’s a Firefox browser plugin freely available here : https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator .

Once you have downloaded and installed this plugin, you can display the Simulator Dashboard as a Firefox tab by entering about:app-manager in the url area or by launching directly WebIDE.

WebIDE is a the dedicated IDE provided by Mozilla to create applications for Firefox OS.

webide

 

Launch the Firefox OS Simulator, and you will see the following result :

firefoxOSSimulator

 

Create your first app

To create your first app, go on Project > New App. Then, choose Hello World template. Structure of the create project is like that :

structure

 

You can note app.js file that contains all the logic code of the application. File index.html will contain the UI and you must have a manifest.webapp where you must define configuration of the application :


{
  "name": "MyFirstApp",
  "description": "A Hello World app",
  "launch_path": "/index.html",
  "icons": {
    "16": "/icons/icon16x16.png",
    "48": "/icons/icon48x48.png",
    "60": "/icons/icon60x60.png",
    "128": "/icons/icon128x128.png"
  },
  "type": "privileged",
  "permissions": {}
}

Most important property is “launch_path” that indicates to OS which file must be launched when application is started. Here, it’s the index.html file.


Deployment

Application created, we must deploy it on a Firefox OS compatible device or in a Firefox OS Simulator. Here, we choose to deploy on a Firefox OS Simulator. Once it’s launched from WebIDE, you can click on the play button on the top of the editor area. Current application is deployed.

deployment

 

Test

Last step to test the application is to click on its icon and enjoy your first “Hello World” application for Firefox OS launched :

helloworld

 

 

You can also profit of this tutorial as a Youtube video :