This presentation was used during a lecture I delivered in Hive Pilani 2015 on Firefox OS and Firefox OS App Development for newbies. The presentation aims to educate the audience enough to smooth the move to actual Firefox OS Development. The presentation therefore covers topics such as - Architecture, Bootstrap Process, Layer View of the OS etc.

1. {

2.  Alternatives: Microsoft Windows, UNIX,
Linux, MAC OS
 Goal – Pursue the goal of building a complete,
standalone operating system for the open web.
 By Web Developers. For Web Developers
 Motivated by a desire to demonstrate that the
standards-based open web has the potential to
be a competitive alternative to existing single
vendor app dev stacks offered by the dominant
mobile OS
Why a new OS?

3. Apps
Make or Break an Mobile
OS Platform

4.  Code Name – Boot 2 Gecko (B2G)
 For Smartphones and Tablet Computers (as of
now)
 Uses completely open standards and there’s no
proprietary software or tech involved
 Active development forums and community.
A new Revolution
Introduction

5. Architecture

6. A First Look

7.  GONK - platform denomination for a
combination of the Linux kernel and the HAL
from Android.
 Gecko - the web browser engine and
application run-time services layer
 Gaia - an HTML5 layer and user-interface
system.
Core Technologies

8. A Closer Look at the
Architecture

9.  Primary Bootloader
 Then, the OS is loaded
 Bootloaders get strapped on is succession till,
 Execution is handed over to the OS.
 The bootloaders usually display the first splash
screen seen by the user during device startup;
this is typically a vendor logo.
 The bootloaders implement flashing an image
to the device. Different devices use different
protocols
 By the end of the bootstrapping process, the
modem image is usually loaded and running
on the modem processor.
Bootstrap Process

10.  Gonk layer based on the Linux Kernel derived
from the Android Open Source Project.
 Executes init.rc (initial process) succeeded by
init.b2g.rc (B2G essential process loader)
Gonk

11. Gecko

12.  Can be thought of as Firefox browser without
the chrome.
 Provides interfaces to APIs , IO Services,
Rendering and Content Layout
 Implements Secutrity Framework
 Rendering – OpenGL 2.0 to draw GL context
wrapping hardware frame buffers.
 Provides support for the trifecta of open
standards – HTML, CSS, Javascript, XUL,
(eXtended User Interface Language)
Gecko

13. Gaia – The User Interface Layer

14.  Set of applications that run locally on a B2G
Device.
 Its only interface to the underlying operating
system and hardware is through standard Web
APIs, which are implemented by Gecko.
 Gaia be run on Firefox OS devices, but also on
other operating systems and in other web
browsers! – Write once … Run Everywhere
 Basic Apps – Browser, Calendar, Calculator,
Camera, Email, Radio, Gallery
Gaia

15.  All Device makers except Google has inked a
deal with it to protect themselves against the
possible patent infringement suits.
 Moreover, some members of the Android
ecosystem are more equal than others.
 Google has “preferred” partners who get a
“sneak peak” at Android during development
modifying the “level” playing field.
 Our Beloved Firefox OS has NONE of that.
Why Again??

16.  Get the Codebase from https://github.com/mozilla
 Study the Codebase with help from Mozilla MDN -
https://developer.mozilla.org/en-US/Firefox_OS
 Follow Bugs on Mozilla’s BugZilla (Issue Tracker) -
https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox
%20OS
 Easy Beginner Bugs - http://www.joshmatthews.net/bugsahoy/
 Do QA by Testing Bugs reported on BugZilla and earn rewards!
Starting Development

17. {

18. Apps
Make or Break an Mobile
OS Platform

19.  Facilitate Developers
 Development of Firefox OS is App Developer
oriented
 Use of Open Web Standard => No Extra
knowledge needed to get started.
 Vey Easy to use Web API
 Established and enthusiastic community
developers like us!
Marketplace Design

20. IDEA MATTERS!

21.  HTML / HTML5
 CSS / CSS3
 Javascript
 Idea
Pre-requisites

22.  Firefox OS – Emulator
 Firefox OS Simulator
 Text Editor
Development Tools

23.  App has a File system associated with it.
 Manifest.webapp
 Index.html (landing page)
 And so on…
 Advantage – Simpler File System than Android
Apps.
 Faster Agile Development Cycle.
App Dev File System

24. {
"name": "Hello World",
"description": "Hello World App",
"launch_path": "/index.html",
"icons": {
"128": "/icon.png"
},
"developer": {
"name": "Nilay Binjola",
"url": https://github.com/nitral"
},
"default_locale": "en"
}
An Example Manifest

25. <html>
<body>
<h1>Hello World!</h1>
<button id="alertButton">Make an
Alert!</button>
<script src="./alert.js"></script>
</body>
</html>
Simple Hello World Markup

26. document.getElementById("alertButton").addEv
entListener("click", popAlert, false);
function popAlert() {
alert("Hello World! Alert!!");
}
Alert Pop-up Javascript

27.  Local/Packaged Apps – Like the Hello World Apps.
(Lack Dynamic Customization)
 Hosted Apps – Cannot exploit rich Interfaces
provided by devices
 Hybird Apps – Mixture of both to get best of both
worlds.
 Used by many App designers and companies like
Amazon
 Firefox OS is ideal for this.
App Design Paradigms

28.  Plain Packaged – No permissions needed. No
sensitive API used.
 Privileged Apps – Special process of evaluation
in Marketplace.
 Access to sensitive APIs
 Include them in “permissions” key in your
Manifest.webapp
 Certified – System Level Permissions.
Type of Packaged Apps

29.  AJAX – Async Javascript and XML
 Known as SystemXHR (Cross Origin
Anonymous XHR)
 For privileged apps.
Most Widely Used Permission

30. IDEA MATTERS!

31. Let the Hacking Begin!