Your SlideShare is downloading. ×
0
Firefox OS  Mate Nadasdi  @matenadasdi
Gaia - Gecko - GonkGaia:User interface application written in HTML on the top of the softwarestack. (mozChromeEvent and mo...
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 sig...
Packaged apps - Types•   Privileged:     o   Approved by Firefox Marketplace     o   App resources are signed     o   Allo...
Hosted apps•   Just like a regular website but application manifest    file is essential•   App manifest needs to be on the...
App Manifest•   JSON•   application/x-web-app-manifest+json mime-type•   all paths must be absolute•   list all Web API pe...
Web API•       Simple Javascript APIs•       Lot of mobile phone features implemented•       Simple feature detection is a...
Web API Security levels•   Granted by default    Safe web APIs that dont expose privacy sensitive data. WebGL, fullscreen,...
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•   devic...
Single page application•   Based on JavaScript framework•   Navigation should be handled with History API•   Views will be...
Data handling on client side• IndexedDB   o   Asnyc, transactional, noSQL   o   asks for permission over ~50MB• Applicatio...
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•   Fe...
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•   Pack...
Thanks!Special thanks to David Walsh and Christian Heilmann for the review
Firefox OS Weekend
Firefox OS Weekend
Firefox OS Weekend
Firefox OS Weekend
Upcoming SlideShare
Loading in...5
×

Firefox OS Weekend

1,508

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,508
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Firefox OS Weekend"

  1. 1. Firefox OS Mate Nadasdi @matenadasdi
  2. 2. 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.
  3. 3. Application Sandbox
  4. 4. Simple web apps on your Phone!Write your web app as you did beforePackaged AppsHosted AppsApp manifest file
  5. 5. Packaged appsa zip containing your whole applicationhave access to sensitive APIs on deviceThe store cryptographically signs the zipwith its private key
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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.
  10. 10. 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)
  11. 11. Web activitiesShare, pick an image, etc.Delegating a task to another appRegister in app manifest or dynamically
  12. 12. Web API examples
  13. 13. +Lets rock with HTML5 & CSS3
  14. 14. 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
  15. 15. 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
  16. 16. 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)
  17. 17. A quick and common example (Basic todo application)
  18. 18. Quick Layout / Flow example
  19. 19. 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
  20. 20. Debugging - Firefox Developer Tools• Responsive design Mode• Remote debugging• Web inspector
  21. 21. Debugging - Firefox OS simulator
  22. 22. 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
  23. 23. Thanks!Special thanks to David Walsh and Christian Heilmann for the review
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×