1. Firefox OS:
HTML5 sur les stéroïdes
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
HTML5mtl
Montréal, Canada
2014-04-22

4. Creative Commons: http://j.mp/1ljZuJC

5. 38 milliards d’appareils
connectés d’ici 2020
ABI Research - 2013-05-09 - http://j.mp/38billion

6. Creative Commons: http://j.mp/1gP4X4K

8. Ce que vous méritez:
HTML5 sur les stéroïdes

10. Construit avec le Web
Utilisant HTML5, CSS3 et JavaScript
avec un nombre d’API
pour développer des applications.

11. C’est open source

12. Architecture

13. Bénéfices d’HTML5
ü Distribution intégrée – le Web
ü Technologies simples utilisées par plusieurs développeurs
ü Une évolution des pratiques existantes
ü Ouvert, indépendant, et standardisé

14. Quelques faits
§ 7 opérateurs mobiles & 4 partenaires fabricants
§ ZTE Open, Alcatel One Touch Fire, Geeksphone Keon,
Geeksphone Peak, LG FireWeb…
§ D’autres à venir: Huawei Y300, ZTE Open C, Alcatel One
Touche Fire C & E & S…
§ Vise les marchés émergents

18. Une application Firefox OS?
§ Une application “hosted” ou “packaged”
§ Utilisant
§ Vanilla HTML5
§ Librairies…
§ Regular API
§ Privileged API
§ Certified API

19. HTML5 + manifest (JSON) = Firefox OS app
{
"version": “42",
"name": ”My amazing app",
"launch_path": "/index.html",
"description": ”My super amazing app do super amazing things",
"icons": {
"16": "/images/logo16.png”,},
"developer": {
"name": ”Frédéric Harper",
"url": "http://outofcomfortzone.net",
},
"default_locale": "en",
"permissions": {
"geolocation": {
"description": ”Get the long/lat of the user"
}
}
}

20. DÉMO App Manager + Emberjs todomvc

21. Web APIs

22. Web APIs – Regular
• Alarm API
• Ambient light sensor
• Archive API
• Battery Status API
• Geolocation API
• IndexedDB
• Network Information API
• Notifications API
• Open WebApps
• Proximity sensor
• Push API
• Screen Orientation
• Vibration API
• Web Activities
• WebFM API
• WebPayment
packaged
hosted

23. Ambient Light Sensor

24. Ambient Light Sensor
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);
});

25. DÉMO Boilerplate – Ambient Light Sensor

26. Battery Status

27. Battery Status
var battery = navigator.battery;
if (battery) {
var batteryLevel = Math.round(battery.level * 100) + "%",
charging = (battery.charging)? “yes" : "no",
chargingTime = parseInt(battery.chargingTime / 60, 10,
dischargingTime = parseInt(battery.dischargingTime / 60, 10);
battery.addEventListener("levelchange", setStatus, false);
battery.addEventListener("chargingchange", setStatus, false);
battery.addEventListener("chargingtimechange", setStatus, false);
}

28. DÉMO Boilerplate – Battery status

29. Web APIs – Privileged
• Browser API
• Contacts API
• Device Storage API
• systemXHR
• TCP Socket API
packaged

30. Browser

31. Browser
<div>
<span id='location-bar'></span>
<button onclick='go_button_clicked()'>Go</button>
</div>
<div id='load-status'></div>
<div id='security-status'></div>
<img id='favicon'>
<div id='title'></div>
<iframe mozbrowser src=‘yoursite.com' id='browser'></iframe>

32. Browser
addEventListener('mozbrowserloadstart', function(e) {
//Do stuff
});
/*
Possible values:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/

33. Web APIs – Certified
• Camera API
• Idle API
• Mobile Connection API
• Network Stats API
• Permissions API
• Power Management API
• Settings API
• Time/Clock API
• Voicemail
• WebBluetooth
• WebSMS
• WebTelephony
• WiFi Information API
OS/OEM

34. Web Activities

35. Web Activities
• browse
• configure
• costcontrol
• dial
• open
• pick
• record
• save-bookmark
• share
• view
• update
• new
• mail
• websms/sms
• webcontacts/contact

36. Pick
var activity = new MozActivity({
name: "pick",
//Provide the data required
//by the filter of the activity
data: {
type: "image/jpeg"
}
});

37. Pick
activity.onsuccess = function () {
var img = document.createElement("img");
if (this.result.blob.type.indexOf("image") != -1) {
img.src = window.URL.createObjectURL(this.result.blob);
}
};
activity.onerror = function () {
//error
};

38. Dial
var call = new MozActivity({
name: "dial",
data: {
number: "+46777888999"
}
});

39. new webcontacts/contact
var newContact = new MozActivity({
name: "new",
data: {
type: "webcontacts/contact",
params: {
givenName: "Frédéric",
lastName: "Harper",
email: ”fharper@mozilla.com",
company: "Mozilla"
}
}
});

40. Web Activity Received Handler
"activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "inline",
"returnValue": true,
"href": "/index.html#pick"
}
}

41. N’oubliez pas de le gérer!
navigator.mozSetMessageHandler('activity', function(activityRequest) {
var option = activityRequest.source;
if (activityRequest.source.name === "pick") {
// Do something to handle the activity
if (picture) {
activityRequest.postResult(picture);
}
else {
activityRequest.postError("Unable to provide a picture");
}
}
});

42. Creative Commons: http://j.mp/1iZHGAW

43. Comment débuter

44. Creative Commons: http://j.mp/Ilm7wx

45. Cordova & Phonegap

46. API implémentés
• Camera
• Contacts
• Device
• Device-motion
• Geolocation
• Orientation
• Vibration

47. Camera API
$ cordova plugin add org.apache.cordova.camera
//Cordova code
navigator.camera.getPicture(function (src) {
var img = document.createElement('img');
img.id = 'slide';
img.src = src;
}, function () {}, {
destinationType: 1
});

48. Firefox OS App Manager + Simulator (1.2+)

49. Firefox Web Developer Tools

50. DÉMO Déboguer une application Firefox OS

54. En bonus

55. Prototypé avec JSFiddle
• Ajouté /webapp.manifest pour
installer une application dans le
Firefox OS simulator
• Ajouté /fxos.html pour obtenir
une page d’installation telle
une application Firefox OS
hosted.

59. Creative Commons: http://j.mp/1gIdcPF
Vers l'infini et plus
loin encore…

60. Plus d’API Web & fonctionnalités
• Calendar API
• FileHandle API Sync API
• Keyboard/IME API WebRTC
• HTTP-cache API
• Peer to Peer API
• Spellcheck API LogAPI
• Resource lock API
• UDP Datagram Socket API
• WebNFC
• WebUSB

61. Prochaine fois que vous
développerez une application…
Pensez au web en premier…

62. Ressources
Firefox OS Simulator
http://j.mp/fxosSimulator
Firefox OS App Manager
http://j.mp/fxosAppManager
Mozilla Developer Network
https://developer.mozilla.org
StackOverflow forum
http://j.mp/fxosStackOverflow
Firefox OS Boilerplate
http://j.mp/fxosBoilerplate
Firefox OS UI Component
http://buildingfirefoxos.com/
Mozilla Brick
http://j.mp/mozBrick
FireWatch
https://github.com/digitarald/firewatch

63. Vous planifiez
rendre votre
application
disponible sous
Firefox OS ou en
créer une nouvelle?
Faites-moi signe!

64. http://yuldev.ca

65. Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net