• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Firefox OS Weekend

Firefox OS Weekend






Total Views
Views on SlideShare
Embed Views



2 Embeds 212

https://twitter.com 211
https://abs.twimg.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Firefox OS Weekend Firefox OS Weekend Presentation Transcript

    • Firefox OS Mate Nadasdi @matenadasdi
    • 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.
    • Application Sandbox
    • Simple web apps on your Phone!Write your web app as you did beforePackaged AppsHosted AppsApp manifest file
    • 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• 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
    • 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 dont 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 activitiesShare, pick an image, etc.Delegating a task to another appRegister 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• Dont 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 GPUs 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