Successfully reported this slideshow.

Firefox OS - A (web) developers dream - muxCamp 2014

769 views

Published on

My Slides about Firefox OS - Presented at muxCamp 2014

Published in: Mobile, Technology, Design
  • Be the first to comment

  • Be the first to like this

Firefox OS - A (web) developers dream - muxCamp 2014

  1. 1. FIREFOX OS A (MOBILE) WEB DEVELOPERS DREAM CarstenSandtner( )2014-muxCampWorms2014@casarock
  2. 2. WHO AM I? Carsten Sandtner Head of Developmentat//mediaman GmbH Mozillarepresentative Javascriptenthusiastand web developer since 1998.
  3. 3. HTML5 BASED OPERATING SYSTEMS The full Safari engine is inside of iPhone. And so, you can write amazing Web 2.0 and Ajax apps thatlookexactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. They can make a call, they can send an email, they can lookup a location on Google Maps. And guess what? There’s no SDK thatyou need!
  4. 4. WEBOS Invented byPalm. Aimed atsmartphones and tablets. Launched 2009 Apps are written in HTML5 Palm sold to HP. HP to LG2013 First(mobile) OS with HTML5 UI! Enyo Framework stillalive
  5. 5. CHROMEOS ALinux distribution where Google Chrome is the "UI"layer Launched 2009 Desktop only! The browser is the OS (atleastUI) Stillalive. Chromebooks are available
  6. 6. WINDOWS 8(.1) Notthe OS, butFirstClass Apps in HTML5. Build Windows 8 Apps in HTML5, CSS and Javascript FirstClass Apps.
  7. 7. FIREFOX OS Fullyopen mobile operatingsystem based on web standards Firstversion released 2011 For smartphones and tablets Fullyweb based App development: JustHTML5
  8. 8. FIREFOX OS IN DETAIL
  9. 9. ARCHITECTURE
  10. 10. GONK Low levelOS of Firefox OS. Linux based on Android Open SourceProject
  11. 11. GECKO Wellknown renderingengine byMozilla
  12. 12. GAIA UI levelof Firefox OS Onlyinterface to the underlyingoperatingsystem and hardware
  13. 13. WEB APIS AND WEB ACTIVITIES Web APIs Access device hardware Provides access to datastorage Security-sensitive APIs need approvement Some are alreadystandard (W3C) Web Activities Access to sensible user data App requests datafrom an other app e.g. Dialanumber requests Phone app Onlyavailable for installed or higher privileged apps
  14. 14. APPS AND 3RD PARTY APPS EveryHTML5, Javascript, CSS based Apps for Firefox OS UsingWebAPIs and Web Activities
  15. 15. APP DEVELOPMENT JustOpen Web Apps
  16. 16. 3 DIFFERENT APP TYPES 1. hosted 2. privileged 3. certified Definition in webapp.manifest
  17. 17. THE WEB APP MANIFEST JSONConfiguration file Includes: permissions, author, description, type, icons, locale etc.
  18. 18. EXAMPLE (MINIMAL) { "name":"MyAwesomeApp", "description":"Myelevatorpitchgoeshere", "launch_path":"/", "icons":{ "128":"/img/icon-128.png" }, "developer":{ "name":"YourName", "url":"http://your-homepage-here.tld" }, "default_locale":"en" }
  19. 19. EXAMPLE PRIVILEGED APP { "name":"MyAwesomePrivilegedApp", .... "type":"privileged", "fullscreen":"true", "permissions":{ "contacts":{ "description":"Requiredforautocompletioninthesharescreen", "access":"readcreate" } }, "default_locale":"en", ... }
  20. 20. WEB APIS Open API specifications to access the hardware of devices Created with and submitted to standards bodies and other browser makers Secured bythree layer securitymodel
  21. 21. WEB APIS: HOSTED APPS Vibration API, Screen Orientation, Geolocation API, Mouse Lock API, Open WebApps, Network Information API, Battery Status API, Alarm API, Push Notifications API, WebFM API / FMRadio, WebPayment, IndexedDB, Ambientlightsensor, Proximitysensor, Notification.
  22. 22. WEB APIS: PRIVILEGED APPS Device Storage API, Browser API, TCP SocketAPI, Contacts API, systemXHR.
  23. 23. WEB APIS: CERTIFIED APPS WebTelephony, WebSMS, Idle API, Settings API, Power ManagementAPI, Mobile Connection API, WiFiInformation API, WebBluetooth, Permissions API, Network Stats API, CameraAPI, Time/Clock API, Attention screen, Voicemail.
  24. 24. Example: BatteryAPI varbattery=navigator.battery, info={ charging:battery.charging, chargingTime:parseInt(battery.chargingTime/60,10), dischargingTime:parseInt(battery.dischargingTime/60,10), level:Math.round(battery.level*100) };
  25. 25. EXAMPLE: GEOLOCATION API* navigator.geolocation.getCurrentPosition(handleLocation); functionhandleLocation(position){ varlatitude=position.coords.latitude; varlongitude=position.coords.longitude; /* coords.altitude coords.accuracy coords.altitudeAccuracy coords.heading coords.speed timestamp */ } *Ok,ok,notreallyanewone!
  26. 26. EXAMPLE: VIBRATION API varpattern=[200,100,200,200,100], vibrating=navigator.vibrate(pattern);
  27. 27. EXAMPLE: NOTIFICATION API Needs permissions granted byusers!(e.g. webapp.manifest) "permissions":{ "desktop-notification":{ "description":"Allowstodisplaynotificationsontheuser'sdesktop." } } //Atfirst,let'scheckifwehavepermissionfornotification //Ifnot,let'saskforit if(Notification&&Notification.permission!=="granted"){ Notification.requestPermission(function(status){ if(Notification.permission!==status){ Notification.permission=status; } }); } if(Notification&&Notification.permission==="granted"){ varn=newNotification("Hi!"); }
  28. 28. EXAMPLE: CONNECTION API Getinformation aboutcurrentconnection varconnection=window.navigator.mozConnection, data={ online:connection.bandwidth, metered:connection.metered }
  29. 29. EXAMPLE: AMBIENTLIGHT GetcurrentLux of ambientlight varresElement=document.querySelector("#results"); window.ondevicelight=function(event){ //Readouttheluxvalue varlux=event.value; };
  30. 30. EXAMPLE: CONTACTS API Read/Write/Delete Contacts -Permission required! "permissions":{ "contacts":{ "description":"ContactspermissionsisrequiredtowritecontactfromGoogletoyo "access":"readwrite"} } } varcontactData={ givenName:["John"], familyName:["Doe"] }; varperson=newmozContact(contactData);//FirefoxOS1.3takesaparameter //savethenewcontact varsaving=navigator.mozContacts.save(person); saving.onsuccess=function(){ console.log('newcontactsaved'); }; saving.onerror=function(err){ console.error(err); };
  31. 31. EXAMPLE: DEVICE STORAGE API Save/Read from sdcard, photo, music, video ... "permissions":{ "device-storage:pictures":{"access":"readwrite"}, "device-storage:sdcard":{"access":"readwrite"} } varsdcard=navigator.getDeviceStorage("sdcard"), file =newBlob(["Thisisatextfile."],{type:"text/plain"}), request=sdcard.addNamed(file,"my-file.txt"); request.onsuccess=function(){..} request.onerror=function(){..} varpics=navigator.getDeviceStorage('pictures'); //browsealltheimagesavailable varcursor=pics.enumerate(); cursor.onsuccess=function(){ varfile=this.result; console.log("Filefound:"+file.name); //checkifthereisotherresults if(!this.done){ //Thenwemovetothenextresult,whichcallthecursor //successwiththenextfileasresult. this.continue(); } }
  32. 32. AND THERE ARE MANY MORE! APIs atMDN
  33. 33. WEB ACTIVITIES
  34. 34. WEB ACTIVITIES configure, costcontrol, dial, open, pick, record, save- bookmark, share, view. New ones: f.e type: “websms/sms” or “webcontacts/contact”
  35. 35. EXAMPLE: DIAL A NUMBER vargetphoto=newMozActivity({ name:"pick", data:{ type:["image/png", "image/jpg", "image/jpeg"] } }); getphoto.onsuccess=function(){ varimg=document.createElement("img"); if(this.result.blob.type.indexOf("image")!=-1){ img.src=window.URL.createObjectURL(this.result.blob); } }; getphoto.onerror=function(){//error };
  36. 36. TOOLS&UTILS
  37. 37. TESTING Simulator Browser -It's aWeb App!
  38. 38. DEVELOPMENT No SDK! Use your favorite IDE/Editor It's HTML5!
  39. 39. DEBUGGING Developer tools in Firefox!(NOT!Firebug) Remote Debugger!
  40. 40. UI COMPONENTS http://buildingfirefoxos.com/
  41. 41. UI COMPONENTS - BRICK! http://mozilla.github.io/brick/
  42. 42. FIREFOX OS BOILERPLATE https://github.com/robnyman/Firefox-OS-Boilerplate-App
  43. 43. PHONEGAP AND CORDOVA http://build.phonegap.com/ http://cordova.apache.org/
  44. 44. HOW TO DISTRIBUTE YOUR APP
  45. 45. HOSTED APP Hostthe App on your web space Provide installation usingWebAPI
  46. 46. PRIVILEGED APP Distribute viaFirefox OS Marketplace
  47. 47. THANK YOU! Carsten Sandtner @casarock

×