Gaia - Gecko - GonkGaia:User interface application written in HTML on the top of the softwarestack. (mozChromeEvent and mozContentEvent)Gecko:Application runtime. Networking stack, graphics stack, layout engine, a JSvirtual machine, and porting layers, etc.Gonk:A linux kernel, hardware abstraction layer, a porting target of Gecko.
Simple web apps on your Phone!Write your web app as you did beforePackaged AppsHosted AppsApp manifest ﬁle
Packaged appsa zip containing your whole applicationhave access to sensitive APIs on deviceThe store cryptographically signs the zipwith its private key
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• Certiﬁed: 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
Hosted apps• Just like a regular website but application manifest ﬁle 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• Speciﬁes a set of Web Activities that the app supports
Web API Security levels• Granted by default Safe web APIs that dont expose privacy sensitive data. WebGL, fullscreen, etc.• Granted by user location, camera, ﬁle 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• Veriﬁed by signature Highly privileged APIs such as radio access (dialer)
Web activitiesShare, pick an image, etc.Delegating a task to another appRegister in app manifest or dynamically
Responsive design• There are lot of screen resolutions out there, and there will be more!• CSS3 media queries• device-pixel-ratio• Dont be shy to create a landscape layout with orientation media queries
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 modiﬁable (~4KB / origin)
A quick and common example (Basic todo application)
Performance tips• Use HTML comments to keep DOM node values in the memory• Use worker thread for background jobs• Feel the GPUs power, use transforms & animations• Use lazy load to speed up startups• visibilitychange event is our friend• The common one: Avoid unnecessary reﬂow / repaint• Do not load every script at startup• Every frontend performance tip could be listed here too
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
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.