Firefox OS@matenadasdi

Mate Nadasdi

Gaia - Gecko - GonkGaia: 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.

Application Sandbox

Simple web apps on your Phone!

Write your web app as you did before

Packaged Apps

Hosted Apps

App manifest file

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

Packaged apps - Types

• Privileged:o Approved by Firefox Marketplaceo App resources are signedo Allowed to use sensitive Web APIso Device permissions are explicit, user can change it in any time

• Certified:

o intended for critical system functiono Device permissions are implicit

• Plain:

o Marketplace signs it without any special authentication processo Cannot use sensitive Web APIs

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

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

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.

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)

Web activities

Share, pick an image, etc.

Delegating a task to another app

Register in app manifest or dynamically

Web API examples

Lets rock with HTML5 & CSS3

+

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

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

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)

A quick and common example(Basic todo application)

Quick Layout / Flow example

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

Debugging - Firefox Developer Tools

• Responsive design Mode

• Remote debugging

• Web inspector

Debugging - Firefox OS simulator

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

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