Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FIREFOX OS The platform HTML5 deserves Christian Heilmann (@codepo8) Øredev, Malmø, 7/11/13
BENEFITS OF HTML5 ★ In-built distribution - the web ★ Simple technologies used by lots of developers ★ Evolution of e...
PROMISES OF HTML5
LOCKOUT
FIREFOX OS
SOME FACTS… ★ Released in eight countries: Spain, Poland, Venezuela, Colombia, Peru, Uruguay, Mexico, Brasil (more soon) ...
"Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"
ARCHITECTURE Third Party HTML5 Apps GAIA Web APIs / Web Actitivies Gecko rendering engine Linux/Gonk (ADB enabled)
- + =
PREDICTABLE HTML5 SUPPORT
SECURITY
AVOIDING USER OVERLOAD… http://smus.com/installable-webapps/
APPLICATION MANIFEST {
 "version": "1.0",
 "name": "MozillaBall",
 "description": "Exciting Open Web development action!",...
APPLICATIONS Web Content Privileged Web App Regular web content More access, more responsibility Installed Web App Ce...
APPLICATIONS
PERMISSIONS "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": ...
WEB APIS
WEB APIS (FOR ALL) Vibration API (W3C) Web Activities Screen Orientation Push Notifications API Geolocation API WebFM ...
BATTERY STATUS API
BATTERY STATUS API var battery = navigator.battery;
 if (battery) {
 var batteryLevel = Math.round(battery.level * 100) + ...
SCREEN ORIENTATION API
SCREEN ORIENTATION API // Portrait mode:
 screen.mozLockOrientation("portrait");
 
 /* 
 Possible values:
 "landscape" 
 "...
VIBRATION API
VIBRATION API // Vibrate for one second
 navigator.vibrate(1000);
 
 // Vibration pattern [vibrationTime, pause,…]
 naviga...
NETWORK INFORMATION API
NETWORK INFORMATION API var connection = window.navigator.mozConnection,
 online = connection.bandwidth > 0,
 metered = c...
☼ AMBIENT LIGHT EVENTS
AMBIENT LIGHT EVENTS window.addEventListener("devicelight", function (event) {
 // The level of the ambient light in lux ...
PAGE VISIBILITY
PAGE VISIBILITY document.addEventListener("visibilitychange", function () {
 if (document.hidden) {
 console.log("App is h...
WEB APIS (PRIVILEGED APPS) Device Storage API Browser API TCP Socket API Contacts API systemXHR
CONTACTS API
CONTACTS API var contact = new mozContact();
 contact.init({name: "Tom"});
 
 var request = navigator.mozContacts.save(con...
WEB APIS (CERTIFIED APPS) ! ! WebTelephony WebBluetooth WebSMS Permissions API Idle API Network Stats API Settings...
CERTIFIED APPS = THE OS :)
CERTIFIED APPS = THE OS :) Dialer ! Contacts ! Settings ! SMS ! Web browser ! Gallery ! Video Player ! Music Player ! E-ma...
WEB ACTIVITIES
GET A PHOTO? var getphoto = new MozActivity({
 name: "pick", 
 data: {
 type: ["image/png", "image/jpeg"], "image/jpg"]
 }...
FIREFOX OS + ANDROID!
APP DISTRIBUTION
FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
INSTALL FROM THE WEB…
DYNAMIC APP WEB SEARCH
DEVELOPMENT ENVIRONMENT
DEVELOPER ENVIRONMENT
FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App
PROTOTYPING WITH JSFIDDLE 1. Write your code as a JSFiddle 2. Append /webapp.manifest to your Fiddle URL and paste this li...
BUILDING BLOCKS?
CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
MOZILLA BRICK http://mozilla.github.io/brick/
WHAT’S COOKING?
MORE WEB APIS… Resource lock API Spellcheck API UDP Datagram Socket API LogAPI Peer to Peer API Keyboard/IME API Web...
APPMAKER! Resource lock API Spellcheck API UDP Datagram Socket API LogAPI Peer to Peer API Keyboard/IME API WebNFC ...
RESOURCES
DEVELOPER HUB https://marketplace.firefox.com/developers/
MOZILLA DEVELOPER BLOG https://hacks.mozilla.org/category/firefox-os/
FIREFOX OS VIDEO SERIES https://hacks.mozilla.org/category/videoseries/
FIREFOX OS WIKI https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
THANKS! CHRIS HEILMANN @CODEPO8
Øredev2013 - FirefoxOS - the platform HTML5 deserves
Upcoming SlideShare
Loading in …5
×

Øredev2013 - FirefoxOS - the platform HTML5 deserves

6,284 views

Published on

Screencast on YouTube: https://www.youtube.com/watch?v=GJ_5JKG4nFI

Firefox OS is a new operating system aimed at emerging markets to replace feature phones with HTML5 based Smartphones whilst still being affordable. In this talk you'll see its architecture, how to take part in it and what it means to the evolution of HTML5 as a platform. A lot of promises have been made, here you can see HTML5 working without having to jump through hoops and abstractions.

Published in: Education, Technology
License: CC Attribution-ShareAlike License
no profile picture user

  • Login to see the comments

Show More

Øredev2013 - FirefoxOS - the platform HTML5 deserves

  1. 1. FIREFOX OS The platform HTML5 deserves Christian Heilmann (@codepo8) Øredev, Malmø, 7/11/13
  2. 2. BENEFITS OF HTML5 ★ In-built distribution - the web ★ Simple technologies used by lots of developers ★ Evolution of existing practices ★ Open, independent, standardised
  3. 3. PROMISES OF HTML5
  4. 4. LOCKOUT
  5. 5. FIREFOX OS
  6. 6. SOME FACTS… ★ Released in eight countries: Spain, Poland, Venezuela, Colombia, Peru, Uruguay, Mexico, Brasil (more soon) ★ 18 mobile operator partners, 6 hardware partners ★ Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak, LG Fireweb… ★ Aimed at emerging markets/low end market ★ Aimed to be an alternative to feature phones and unavailable closed environments. ★ Open source - it is all on GitHub
  7. 7. "Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"
  8. 8. ARCHITECTURE Third Party HTML5 Apps GAIA Web APIs / Web Actitivies Gecko rendering engine Linux/Gonk (ADB enabled)
  9. 9. - + =
  10. 10. PREDICTABLE HTML5 SUPPORT
  11. 11. SECURITY
  12. 12. AVOIDING USER OVERLOAD… http://smus.com/installable-webapps/
  13. 13. APPLICATION MANIFEST {
 "version": "1.0",
 "name": "MozillaBall",
 "description": "Exciting Open Web development action!",
 "icons": {
 "16": "/img/icon-16.png",
 "48": "/img/icon-48.png",
 "128": "/img/icon-128.png"
 },
 "developer": {
 "name": "Mozilla Labs",
 "url": "http://mozillalabs.com"
 },
 "installs_allowed_from": ["*"],
 "appcache_path": "/cache.manifest",
 "locales": {
 "es": {
 "description": "¡Acción abierta emocionante del desarrollo del Web!",
 "developer": {
 "url": "http://es.mozillalabs.com/"
 }
 }
 },
 "default_locale": "en"
 }

  14. 14. APPLICATIONS Web Content Privileged Web App Regular web content More access, more responsibility Installed Web App Certified Web App A regular web app Device-critical applications
  15. 15. APPLICATIONS
  16. 16. PERMISSIONS "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  17. 17. WEB APIS
  18. 18. WEB APIS (FOR ALL) Vibration API (W3C) Web Activities Screen Orientation Push Notifications API Geolocation API WebFM API Mouse Lock API (W3C) WebPayment Open WebApps IndexedDB (W3C) Network Information API (W3C) Ambient light sensor Battery Status API (W3C) Proximity sensor Alarm API Notification
  19. 19. BATTERY STATUS API
  20. 20. BATTERY STATUS API var battery = navigator.battery;
 if (battery) {
 var batteryLevel = Math.round(battery.level * 100) + "%",
 charging = (battery.charging)? "" : "not ",
 chargingTime = parseInt(battery.chargingTime / 60, 10),
 dischargingTime = parseInt(battery.dischargingTime / 60, 10);
 
 // Set events
 battery.addEventListener("levelchange", setStatus, false);
 battery.addEventListener("chargingchange", setStatus, false);
 battery.addEventListener("chargingtimechange", setStatus, false);
 battery.addEventListener("dischargingtimechange", setStatus, false); }
  21. 21. SCREEN ORIENTATION API
  22. 22. SCREEN ORIENTATION API // Portrait mode:
 screen.mozLockOrientation("portrait");
 
 /* 
 Possible values:
 "landscape" 
 "portrait"
 "landscape-primary"
 "landscape-secondary"
 "portrait-primary"
 "portrait-secondary"
 */
  23. 23. VIBRATION API
  24. 24. VIBRATION API // Vibrate for one second
 navigator.vibrate(1000);
 
 // Vibration pattern [vibrationTime, pause,…]
 navigator.vibrate([200, 100, 200, 100]);
 
 // Vibrate for 5 seconds
 navigator.vibrate(5000);
 
 // Turn off vibration
 navigator.vibrate(0);
  25. 25. NETWORK INFORMATION API
  26. 26. NETWORK INFORMATION API var connection = window.navigator.mozConnection,
 online = connection.bandwidth > 0,
 metered = connection.metered;

  27. 27. ☼ AMBIENT LIGHT EVENTS
  28. 28. AMBIENT LIGHT EVENTS window.addEventListener("devicelight", function (event) {
 // The level of the ambient light in lux // The lux values for "dim" typically begin below 50,
 // and the values for "bright" begin above 10000
 console.log(event.value);
 });
  29. 29. PAGE VISIBILITY
  30. 30. PAGE VISIBILITY document.addEventListener("visibilitychange", function () {
 if (document.hidden) {
 console.log("App is hidden");
 }
 else {
 console.log("App has focus");
 }
 });
  31. 31. WEB APIS (PRIVILEGED APPS) Device Storage API Browser API TCP Socket API Contacts API systemXHR
  32. 32. CONTACTS API
  33. 33. CONTACTS API var contact = new mozContact();
 contact.init({name: "Tom"});
 
 var request = navigator.mozContacts.save(contact);
 request.onsuccess = function() {
 console.log("Success");
 };
 
 request.onerror = function() {
 console.log("Error")
 };
  34. 34. WEB APIS (CERTIFIED APPS) ! ! WebTelephony WebBluetooth WebSMS Permissions API Idle API Network Stats API Settings API Camera API Power Management API Time/Clock API Mobile Connection API Attention screen WiFi Information API Voicemail
  35. 35. CERTIFIED APPS = THE OS :)
  36. 36. CERTIFIED APPS = THE OS :) Dialer ! Contacts ! Settings ! SMS ! Web browser ! Gallery ! Video Player ! Music Player ! E-mail (POP, IMAP) ! Calendar Alarm Clock ! Camera ! Notes ! First Run Experience ! Notifications ! Home Screen ! Mozilla Marketplace ! System Updater ! Localization Support
  37. 37. WEB ACTIVITIES
  38. 38. GET A PHOTO? var getphoto = new MozActivity({
 name: "pick", 
 data: {
 type: ["image/png", "image/jpeg"], "image/jpg"]
 }
 });
 ! getphoto.onsuccess = function () { var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); } }; getphoto.onerror = function () { // error };
  39. 39. FIREFOX OS + ANDROID!
  40. 40. APP DISTRIBUTION
  41. 41. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  42. 42. INSTALL FROM THE WEB…
  43. 43. DYNAMIC APP WEB SEARCH
  44. 44. DEVELOPMENT ENVIRONMENT
  45. 45. DEVELOPER ENVIRONMENT
  46. 46. FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App
  47. 47. PROTOTYPING WITH JSFIDDLE 1. Write your code as a JSFiddle 2. Append /webapp.manifest to your Fiddle URL and paste this link into the Firefox OS simulator to install the app 3. Alternatively, append /fxos.html to your Fiddle URL to get an install page like a typical Firefox OS hosted application https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/
  48. 48. BUILDING BLOCKS?
  49. 49. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  50. 50. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  51. 51. MOZILLA BRICK http://mozilla.github.io/brick/
  52. 52. WHAT’S COOKING?
  53. 53. MORE WEB APIS… Resource lock API Spellcheck API UDP Datagram Socket API LogAPI Peer to Peer API Keyboard/IME API WebNFC WebRTC WebUSB FileHandle API HTTP-cache API Sync API Calendar API
  54. 54. APPMAKER! Resource lock API Spellcheck API UDP Datagram Socket API LogAPI Peer to Peer API Keyboard/IME API WebNFC WebRTC WebUSB FileHandle API HTTP-cache API Sync API Calendar API
  55. 55. RESOURCES
  56. 56. DEVELOPER HUB https://marketplace.firefox.com/developers/
  57. 57. MOZILLA DEVELOPER BLOG https://hacks.mozilla.org/category/firefox-os/
  58. 58. FIREFOX OS VIDEO SERIES https://hacks.mozilla.org/category/videoseries/
  59. 59. FIREFOX OS WIKI https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
  60. 60. THANKS! CHRIS HEILMANN @CODEPO8

×