Your SlideShare is downloading. ×
0
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Firefox OS - A (web) developers dream - muxCamp 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

335

Published on

My Slides about Firefox OS - Presented at muxCamp 2014

My Slides about Firefox OS - Presented at muxCamp 2014

Published in: Mobile, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
335
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. FIREFOX OS A (MOBILE) WEB DEVELOPERS DREAM CarstenSandtner( )2014-muxCampWorms2014@casarock
  • 2. WHO AM I? Carsten Sandtner Head of Developmentat//mediaman GmbH Mozillarepresentative Javascriptenthusiastand web developer since 1998.
  • 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. 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. 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. WINDOWS 8(.1) Notthe OS, butFirstClass Apps in HTML5. Build Windows 8 Apps in HTML5, CSS and Javascript FirstClass Apps.
  • 7. FIREFOX OS Fullyopen mobile operatingsystem based on web standards Firstversion released 2011 For smartphones and tablets Fullyweb based App development: JustHTML5
  • 8. FIREFOX OS IN DETAIL
  • 9. ARCHITECTURE
  • 10. GONK Low levelOS of Firefox OS. Linux based on Android Open SourceProject
  • 11. GECKO Wellknown renderingengine byMozilla
  • 12. GAIA UI levelof Firefox OS Onlyinterface to the underlyingoperatingsystem and hardware
  • 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. APPS AND 3RD PARTY APPS EveryHTML5, Javascript, CSS based Apps for Firefox OS UsingWebAPIs and Web Activities
  • 15. APP DEVELOPMENT JustOpen Web Apps
  • 16. 3 DIFFERENT APP TYPES 1. hosted 2. privileged 3. certified Definition in webapp.manifest
  • 17. THE WEB APP MANIFEST JSONConfiguration file Includes: permissions, author, description, type, icons, locale etc.
  • 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. EXAMPLE PRIVILEGED APP { "name":"MyAwesomePrivilegedApp", .... "type":"privileged", "fullscreen":"true", "permissions":{ "contacts":{ "description":"Requiredforautocompletioninthesharescreen", "access":"readcreate" } }, "default_locale":"en", ... }
  • 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. 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. WEB APIS: PRIVILEGED APPS Device Storage API, Browser API, TCP SocketAPI, Contacts API, systemXHR.
  • 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. 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. 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. EXAMPLE: VIBRATION API varpattern=[200,100,200,200,100], vibrating=navigator.vibrate(pattern);
  • 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. EXAMPLE: CONNECTION API Getinformation aboutcurrentconnection varconnection=window.navigator.mozConnection, data={ online:connection.bandwidth, metered:connection.metered }
  • 29. EXAMPLE: AMBIENTLIGHT GetcurrentLux of ambientlight varresElement=document.querySelector("#results"); window.ondevicelight=function(event){ //Readouttheluxvalue varlux=event.value; };
  • 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. 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. AND THERE ARE MANY MORE! APIs atMDN
  • 33. WEB ACTIVITIES
  • 34. WEB ACTIVITIES configure, costcontrol, dial, open, pick, record, save- bookmark, share, view. New ones: f.e type: “websms/sms” or “webcontacts/contact”
  • 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. TOOLS&UTILS
  • 37. TESTING Simulator Browser -It's aWeb App!
  • 38. DEVELOPMENT No SDK! Use your favorite IDE/Editor It's HTML5!
  • 39. DEBUGGING Developer tools in Firefox!(NOT!Firebug) Remote Debugger!
  • 40. UI COMPONENTS http://buildingfirefoxos.com/
  • 41. UI COMPONENTS - BRICK! http://mozilla.github.io/brick/
  • 42. FIREFOX OS BOILERPLATE https://github.com/robnyman/Firefox-OS-Boilerplate-App
  • 43. PHONEGAP AND CORDOVA http://build.phonegap.com/ http://cordova.apache.org/
  • 44. HOW TO DISTRIBUTE YOUR APP
  • 45. HOSTED APP Hostthe App on your web space Provide installation usingWebAPI
  • 46. PRIVILEGED APP Distribute viaFirefox OS Marketplace
  • 47. THANK YOU! Carsten Sandtner @casarock

×