Screencast on YouTube: https://www.youtube.com/watch?v=GJ_5JKG4nFI Firefox OS is a new operating system aimed at emerging markets to replace feature phones with HTML5 based Smartphones whilst still being affordable. In this talk you'll see its architecture, how to take part in it and what it means to the evolution of HTML5 as a platform. A lot of promises have been made, here you can see HTML5 working without having to jump through hoops and abstractions.

1. FIREFOX OS
The platform HTML5 deserves
Christian Heilmann (@codepo8)
Øredev, Malmø, 7/11/13

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

3. PROMISES OF HTML5

4. LOCKOUT

5. FIREFOX OS

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

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

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

9. -
+
=

10. PREDICTABLE HTML5 SUPPORT

11. SECURITY

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

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

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

15. APPLICATIONS

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

17. WEB APIS

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

19. BATTERY STATUS
API

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

21. SCREEN
ORIENTATION API

22. SCREEN ORIENTATION API
// Portrait mode:
screen.mozLockOrientation("portrait");
/*
Possible values:
"landscape"
"portrait"
"landscape-primary"
"landscape-secondary"
"portrait-primary"
"portrait-secondary"
*/

23. VIBRATION API

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

25. NETWORK
INFORMATION API

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

27. ☼
AMBIENT LIGHT
EVENTS

28. AMBIENT LIGHT EVENTS
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);
});

29. PAGE VISIBILITY

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

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

32. CONTACTS API

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

34. WEB APIS (CERTIFIED APPS)
!
!
WebTelephony
WebBluetooth
WebSMS
Permissions API
Idle API
Network Stats API
Settings API
Camera API
Power Management API
Time/Clock API
Mobile Connection API
Attention screen
WiFi Information API
Voicemail

35. CERTIFIED APPS = THE OS :)

36. CERTIFIED APPS = THE OS :)
Dialer
!
Contacts
!
Settings
!
SMS
!
Web browser
!
Gallery
!
Video Player
!
Music Player
!
E-mail (POP, IMAP)
!
Calendar
Alarm Clock
!
Camera
!
Notes
!
First Run Experience
!
Notifications
!
Home Screen
!
Mozilla Marketplace
!
System Updater
!
Localization Support

37. WEB
ACTIVITIES

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

40. FIREFOX OS + ANDROID!

41. APP
DISTRIBUTION

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

43. INSTALL FROM THE WEB…

44. DYNAMIC APP WEB SEARCH

45. DEVELOPMENT
ENVIRONMENT

46. DEVELOPER ENVIRONMENT

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

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

49. BUILDING
BLOCKS?

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

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

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

53. WHAT’S
COOKING?

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

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

56. RESOURCES

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

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

59. FIREFOX OS VIDEO SERIES
https://hacks.mozilla.org/category/videoseries/

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

61. THANKS!
CHRIS HEILMANN
@CODEPO8