This document provides an overview of Firefox OS, including: 1. The main software components - Gaia (user interface), Gecko (application runtime), and Gonk (Linux kernel and hardware abstraction layer). 2. Application types - packaged apps, hosted apps, and their differences in terms of access to APIs, permissions, and distribution. 3. Key concepts like the app manifest, web activities, and the application sandbox. 4. Examples of web APIs and their different permission levels. 5. Tips for developing responsive web apps, using single page applications, client-side data handling, and performance optimization. 6. Debugging tools like the Firefox Developer Tools and Firefox OS

1. Firefox OS
Mate Nadasdi
@matenadasdi

2. Gaia - Gecko - Gonk
Gaia:
User interface application written in HTML on the top of the software
stack. (mozChromeEvent and mozContentEvent)
Gecko:
Application runtime. Networking stack, graphics stack, layout engine, a JS
virtual machine, and porting layers, etc.
Gonk:
A linux kernel, hardware abstraction layer, a porting target of Gecko.

4. Application Sandbox

5. Simple web apps on your Phone!
Write your web app as you did before
Packaged Apps
Hosted Apps
App manifest file

6. Packaged apps
a zip containing your whole application
have access to sensitive APIs on device
The store cryptographically signs the zip
with its private key

7. Packaged apps - Types
• Privileged:
o Approved by Firefox Marketplace
o App resources are signed
o Allowed to use sensitive Web APIs
o Device permissions are explicit, user can change it in any time
• Certified:
o intended for critical system function
o Device permissions are implicit
• Plain:
o Marketplace signs it without any special authentication process
o Cannot use sensitive Web APIs

8. Hosted apps
• Just like a regular website but application manifest
file is essential
• App manifest needs to be on the same origin
• Optional Appcache manifest
• Lower Web API permissions
• one-app-per-origin policy

9. App Manifest
• JSON
• application/x-web-app-manifest+json mime-type
• all paths must be absolute
• list all Web API permissions
• Specifies a set of Web Activities that the app
supports

11. Web API
• Simple Javascript APIs
• Lot of mobile phone features implemented
• Simple feature detection is a good practice: if ('vibrate' in
navigator)
WebRT APIs (Permissions-based APIs)
• Permissions needs to be listed in app manifest
• There are only certified app APIs: WebSMS, WebTelephony,
Idle, etc.

12. Web API Security levels
• Granted by default
Safe web APIs that don't expose privacy sensitive data. WebGL, fullscreen, etc.
• Granted by user
location, camera, file system access
• Granted when installed
No quota for localStorage, IndexedDB, offline cache
• Granted by authorized store
Privacy and security sensitive APIs such as Contacts API
• Verified by signature
Highly privileged APIs such as radio access (dialer)

13. Web activities
Share, pick an image, etc.
Delegating a task to another app
Register in app manifest or dynamically

14. Web API examples

15. +
Lets rock with HTML5 & CSS3

16. Responsive design
• There are lot of screen resolutions out there, and there will be more!
• CSS3 media queries
• device-pixel-ratio
• Don't be shy to create a landscape layout with orientation media
queries

17. Single page application
• Based on JavaScript framework
• Navigation should be handled with History API
• Views will be rendered from JavaScript templates,
or AJAX request html responses
• Routing is handled on client side

18. Data handling on client side
• IndexedDB
o Asnyc, transactional, noSQL
o asks for permission over ~50MB
• Application cache: Cache / Network / fallback (~5 MB /
origin)
• LocalStorage - Permanent ( ~5 MB / Origin )
• SessionStorage - Session only ( System memory )
• Cookies - Not modifiable (~4KB / origin)

19. A quick and common example
(Basic todo application)

20. Quick Layout / Flow example

21. Performance tips
• Use HTML comments to keep DOM node values in the memory
• Use worker thread for background jobs
• Feel the GPU's power, use transforms & animations
• Use lazy load to speed up startups
• visibilitychange event is our friend
• The common one: Avoid unnecessary reflow / repaint
• Do not load every script at startup
• Every frontend performance tip could be listed here too

24. Debugging - Firefox Developer Tools
• Responsive design Mode
• Remote debugging
• Web inspector

25. Debugging - Firefox OS simulator

26. Share our applications with the world!
• For hosted applications just provide an url with a valid app
manifest
• Packaged applications should be uploaded to the marketplace
• To update your application just upload a new manifest, or upload
a new zip containing the new version
• Firefox OS phone polls for app changes once per a day

27. Thanks!
Special thanks to David Walsh and Christian Heilmann for the review