My Slides about Firefox OS - Presented at muxCamp 2014

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