Keynote at Codebits in Portugal, April 2014, explaining the how and why of Firefox OS and how to use it. Video: https://videos.sapo.pt/ZYQyY57ZlB6lhgIdBzrs

1. Christian Heilmann (@codepo8)
Sapo Codebits, Lisbon, Portugal, April 2014
FIREFOX OS
HTML5 FOR A TRULY WORLD-WIDE-WEB

5. I LIVE BY THE RIVER…

14. PEOPLE ARE BUSY…

15. BENEFITS OF HTML5
★ In-built distribution - the web
★ Simple technologies used by lots of
developers
★ Evolution of existing practices
★ Open, independent, standardised

16. PROMISES OF HTML5

17. LOCKOUT

21. FIXING HTML ISSUES

22. FIREFOX OS

23. SOME FACTS…
★ Released in fourteen countries: Spain, Poland, Venezuela,
Colombia, Peru, Uruguay, Mexico, Brasil (more soon)
★ Released with 7 mobile operator partners, 3 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

24. "Movistar offers the
ZTE Open for €69,
including €30 of
balance for prepaid
customers and a
4GB microSD card"

25. ARCHITECTURE
Linux/Gonk (ADB enabled)
Gecko rendering engine
Third Party HTML5 Apps
Web APIs / Web Actitivies
GAIA

26. - + =

27. PREDICTABLE HTML5 SUPPORT

28. SECURITY

29. AVOIDING USER OVERLOAD…
http://smus.com/installable-webapps/

30. 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"
}

31. Privileged Web App
More access, more
responsibility
Web Content
Regular web content
APPLICATIONS
Installed Web App
A regular web app
Certified Web App
Device-critical
applications

32. APPLICATIONS

33. PERMISSIONS
"permissions": {
"contacts": {
"description": "Required for autocompletion in the share screen",
"access": "readcreate"
},
"alarms": {
"description": "Required to schedule notifications"
}
}

34. CROSS-PLATFORM

35. WEB APIS

36. WEB APIS (FOR ALL)
Vibration API (W3C)
Screen Orientation
Geolocation API
Mouse Lock API (W3C)
Open WebApps
Network Information API (W3C)
Battery Status API (W3C)
Alarm API
Web Activities
Push Notifications API
WebFM API
WebPayment
IndexedDB (W3C)
Ambient light sensor
Proximity sensor
Notification

37. BATTERY STATUS
API

38. 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);
}

39. VIBRATION API

40. 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);

41. NETWORK
INFORMATION API

42. NETWORK INFORMATION API
var connection = window.navigator.mozConnection,
online = connection.bandwidth > 0,
metered = connection.metered;

43. PAGE VISIBILITY

44. PAGE VISIBILITY
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
console.log("App is hidden");
}
else {
console.log("App has focus");
}
});

45. PUSH
NOTIFICATIONS

46. WEB APIS (PRIVILEGED APPS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR

47. CONTACTS API

48. 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")
};

49. CERTIFIED APPS = THE OS :)

50. WEB
ACTIVITIES

52. 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
};

53. APP
DISTRIBUTION

54. FIREFOX OS MARKETPLACE
https://marketplace.firefox.com/

55. INSTALL FROM THE WEB…

56. DYNAMIC APP WEB SEARCH

57. DEVELOPMENT
ENVIRONMENT

58. DEVELOPER ENVIRONMENT

59. FIREFOX OS
BOILERPLATE APP
https://github.com/robnyman/Firefox-OS-Boilerplate-App

60. PROTOTYPING WITH JSFIDDLE
https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/
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

61. BUILDING
BLOCKS?

62. CERTIFIED APPS BUILDING BLOCKS
http://buildingfirefoxos.com/

63. CERTIFIED APPS BUILDING BLOCKS
http://buildingfirefoxos.com/

64. MOZILLA BRICK
http://mozilla.github.io/brick/

65. MOZILLA BRICK
<x-flipbox>
<div>I'm the front face.</div>
<div>And I'm the back face.</div>
</x-flipbox>
!
//JavaScript
toggleButton.addEventListener("click", function() {
flipBox.toggle();
});
http://mozilla.github.io/brick/

66. CORDOVA IMPLEMENTATION APIS
• Camera
• Contacts
• Device
• Device-motion
• Geolocation
• Orientation
• Vibration

67. CORDOVA IMPLEMENTATION APIS
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add firefoxos
$ cordova prepare firefoxos

68. 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
});

69. WHAT’S
COOKING?

70. MORE WEB APIS…
Resource lock API
UDP Datagram Socket API
Peer to Peer API
WebNFC
WebUSB
HTTP-cache API
Calendar API
Spellcheck API
LogAPI
Keyboard/IME API
WebRTC
FileHandle API
Sync API

71. APPMAKER!
Resource lock API
UDP Datagram Socket API
Peer to Peer API
WebNFC
WebUSB
HTTP-cache API
Calendar API
Spellcheck API
LogAPI
Keyboard/IME API
WebRTC
FileHandle API
Sync API

72. WHERE TO
GET INFO?

73. https://marketplace.firefox.com/developers/
DEVELOPER HUB

74. https://hacks.mozilla.org/category/firefox-os/
MOZILLA DEVELOPER BLOG

75. http://mozilla.github.io/app-basics-videos/
FIREFOX OS VIDEO SERIES

76. https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
FIREFOX OS WIKI

77. TO WRAP UP…

78. https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/
!
Aquarium Plants (Android w/ hand-coded native wrapper)
Calc (iOS w/ hand-coded native wrapper)
Calcula Hipoteca (Amazon Appstore)
Captain Rogers (HTML5 Desktop)
Cartelera Panama (Appcelerator Titanium)
Fresh Food Finder (PhoneGap)
Picross (WebOS)
Reditr (Chrome Dev Store)
Speed Cube Timer (Blackberry Webworks)
Squarez (C++)
Touch 12i (Windows Phone/ HTML5)
NOTHING IS WASTED…

79. THANKS!
CHRIS HEILMANN
@CODEPO8