Firefox mobile OS talk at JSFoo - Bangalore 2012

Have given demo oriented talk on Firefox mobile OS, at JSFoo - Bangalore 2012.  My talk was attended by around 60-80 members. Theme of my talk focused on introducing audience to Firefox mobile OS, creating FFx mobile applications using HTML, JS, CSS technologies.

Here is text-overview of my talk,

Android, iOS are 2 established mobile OS players in the Market. Windows 8 preview is available & Blackberry 10 are about to be released sometime next year. We also have Open WebOS from HP. FFx mobile OS is a new entrant to this space. In this session, I would be sharing my experience of what got me excited about FFx mobile OS & whats in there for web developers like you & me.

FFx mobile OS allows application to be created using JS, CSS, HTML. In fact, the only way we can create applications for FFx mobile OS, is using HTML technologies.

1) Hardware access :

• To create Instagram like application, in order to store pictures being taken, application code need an access to device file system 
• To create dialer app, application code have to interact with underlying telephony hardware.

How do we interact with underlying hardware from Javascript, if applications are created using HTML technologies? - Mozilla created WebAPI specification, FFx OS implements WebAPI specification & expose them as JS libs.

2) Bootup process :

Since applications are created using HTML technologies, when user switch-on the device, in order to render HTML components  FFx OS bootstraps Gecko layout engine. Gecko layout engine reads content from "profile" directory, loads "system app", once "system app" is loaded, it launches "homescreen app", all other apps are launched from homescreen app.

3) System App + Homescreen app :

Both "system app" and "homescreen" are created using HTML technologies. 10000ft view of layout of index.html of "System app" will look like a) top "div" container holds code related to notification/pull-down menu b) bottom "div" container holds code related to keyboard (which is hidden by default) c) Middle "div" container act as place holder for "iframe" of apps being launched. When user launches an app, FFx OS creates an "iframe", loads the app in that "iframe" & place that "iframe" inside middle "div" container. "z-index" of recently launched apps "iframe" is kept higher than other launched apps "iframe", so that user sees apps that he launched recently. "z-index" management is completely abstracted from developers.

Homescreen app shows a) Dock of commonly used apps b) Grid of installed applications c) Grid paging, if grid can't fit installed apps in single page.

4) Demo of creating apps for FFx mobile : 

• Writing "helloworld" HTML page, test that in Firefox browser, add "manifest.webapp" to convert them as FFx mobile app. "manifest.webapp" is a JSON based structure that specifies a) app name (english and other languages) b) permissions c) Path to icon of the app d) web-activities declaration (web activity is similar to android Intent)
• Porting famous "todo" app from Backbone.js to FFx mobile.

5) Touch event to mouse & keyboard event :

"helloworld" and "todo" apps are created for mouse click & keyboard based input system of desktops. But they worked as-it-is in touch based device. When user interacts with touch screen, touch driver generates event that contains a) cartesian coordinates of touch point, b) touch pressure c) touch area. These events reach gecko and gecko understands what component it rendered at the touch point and triggeres mouse click / keyboard event at DOM element corresponding to component at touch point.

6)  Logical layers of FFx mobile OS:

FFx mobile has logical names to various components that we have discussed,

• Gonk - Device drivers (based on Android ICS drivers) + kernel
• Gecko - Layout engine
• Gaia - JS libs that expose underlying implementation of WebAPI spec + System App + Homescreen app

Here is presentation i used as supplement to my talk,