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.
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
10.
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
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)
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
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
