FIREFOX OS

Answering global challenges

Christian Heilmann (@codepo8)
Developerweek, San Francisco, Feb. 2014
SOME FACTS…
★

Released in fourteen countries: Spain, Poland, Venezuela,
Colombia, Peru, Uruguay, Mexico, Brasil (more soo...
"Movistar offers the
ZTE Open for €69,
including €30 of
balance for prepaid
customers and a
4GB microSD card"
I LIVE BY THE RIVER…
PEOPLE ARE BUSY…
BENEFITS OF HTML5
★

In-built distribution - the web

★

Simple technologies used by lots of
developers

★

Evolution of e...
PROMISES OF HTML5
LOCKOUT
FIXING HTML ISSUES
FIREFOX OS
ARCHITECTURE
Third Party HTML5 Apps
GAIA
Web APIs / Web Actitivies
Gecko rendering engine
Linux/Gonk (ADB enabled)
-

+

=
PREDICTABLE HTML5 SUPPORT
SECURITY
AVOIDING USER OVERLOAD…

http://smus.com/installable-webapps/
APPLICATION MANIFEST
{

"version": "1.0",

"name": "MozillaBall",

"description": "Exciting Open Web development action!",...
APPLICATIONS
Web Content

Privileged Web App

Regular web content

More access, more
responsibility

Installed Web App

Ce...
APPLICATIONS
PERMISSIONS
"permissions": {

"contacts": {

"description": "Required for autocompletion in the share screen",

"access": ...
WEB APIS
WEB APIS (FOR ALL)
Vibration API (W3C)

Web Activities

Screen Orientation

Push Notifications API

Geolocation API

WebFM ...
BATTERY STATUS
API
BATTERY STATUS API
var battery = navigator.battery;

if (battery) {

var batteryLevel = Math.round(battery.level * 100) + ...
VIBRATION API
VIBRATION API
// Vibrate for one second

navigator.vibrate(1000);



// Vibration pattern [vibrationTime, pause,…]

naviga...
NETWORK
INFORMATION API
NETWORK INFORMATION API

var connection = window.navigator.mozConnection,

online = connection.bandwidth > 0,

metered = c...
PAGE VISIBILITY
PAGE VISIBILITY
document.addEventListener("visibilitychange", function () {

if (document.hidden) {

console.log("App is h...
PUSH
NOTIFICATIONS
PUSH NOTIFICATIONS (REQUEST)
PUSH NOTIFICATIONS (RECEIVE)
WEB APIS (PRIVILEGED APPS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
CONTACTS API
CONTACTS API
var contact = new mozContact();

contact.init({name: "Tom"});



var request = navigator.mozContacts.save(con...
WEB APIS (CERTIFIED APPS)
!

!

WebTelephony

WebBluetooth

WebSMS

Permissions API

Idle API

Network Stats API

Settings...
CERTIFIED APPS = THE OS :)
CERTIFIED APPS = THE OS :)
Dialer
!
Contacts
!
Settings
!
SMS
!
Web browser
!
Gallery
!
Video Player
!
Music Player
!
E-ma...
WEB
ACTIVITIES
GET A PHOTO?
var getphoto = new MozActivity({

name: "pick", 

data: {

type: ["image/png", "image/jpeg"], "image/jpg"]

}...
APP
DISTRIBUTION
FIREFOX OS MARKETPLACE

https://marketplace.firefox.com/
INSTALL FROM THE WEB…
DYNAMIC APP WEB SEARCH
DEVELOPMENT
ENVIRONMENT
DEVELOPER ENVIRONMENT
FIREFOX OS
BOILERPLATE APP

https://github.com/robnyman/Firefox-OS-Boilerplate-App
PROTOTYPING WITH JSFIDDLE
1. Write your code as a JSFiddle
2. Append /webapp.manifest to your Fiddle
URL and paste this li...
BUILDING
BLOCKS?
CERTIFIED APPS BUILDING BLOCKS

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

http://buildingfirefoxos.com/
MOZILLA BRICK

http://mozilla.github.io/brick/
MOZILLA BRICK
<x-flipbox>
<div>I'm the front face.</div>
<div>And I'm the back face.</div>
</x-flipbox>
!

//JavaScript
to...
WHAT’S
COOKING?
CORDOVA IMPLEMENTATION APIS
•

Camera

•

Contacts

•

Device

•

Device-motion

•

Geolocation

•

Orientation

•

Vibrat...
CORDOVA IMPLEMENTATION APIS
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$...
CAMERA API
$ cordova plugin add org.apache.cordova.camera
!

//Cordova code
navigator.camera.getPicture(function (src) {
v...
MORE WEB APIS…
Resource lock API

Spellcheck API

UDP Datagram Socket API

LogAPI

Peer to Peer API

Keyboard/IME API

Web...
APPMAKER!
Resource lock API

Spellcheck API

UDP Datagram Socket API

LogAPI

Peer to Peer API

Keyboard/IME API

WebNFC

...
DEVELOPER HUB

https://marketplace.firefox.com/developers/
MOZILLA DEVELOPER BLOG

https://hacks.mozilla.org/category/firefox-os/
FIREFOX OS VIDEO SERIES

https://hacks.mozilla.org/category/videoseries/
FIREFOX OS WIKI

https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
TO WRAP UP…
NOTHING IS WASTED…
!

Aquarium Plants (Android w/ hand-coded native wrapper)
Calc (iOS w/ hand-coded native wrapper)
Calcu...
THANKS!

CHRIS HEILMANN
@CODEPO8
Firefox OS - Answering global challenges
Firefox OS - Answering global challenges
Firefox OS - Answering global challenges
Firefox OS - Answering global challenges
Firefox OS - Answering global challenges
Firefox OS - Answering global challenges
Firefox OS - Answering global challenges
Firefox OS - Answering global challenges
Firefox OS - Answering global challenges
Firefox OS - Answering global challenges
Firefox OS - Answering global challenges
Upcoming SlideShare
Loading in...5
×

Firefox OS - Answering global challenges

6,227

Published on

An overview presentation of Firefox OS at the San Francisco Developer week

Published in: Education
1 Comment
31 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,227
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
115
Comments
1
Likes
31
Embeds 0
No embeds

No notes for slide

Firefox OS - Answering global challenges

  1. 1. FIREFOX OS Answering global challenges Christian Heilmann (@codepo8) Developerweek, San Francisco, Feb. 2014
  2. 2. 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
  3. 3. "Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"
  4. 4. I LIVE BY THE RIVER…
  5. 5. PEOPLE ARE BUSY…
  6. 6. BENEFITS OF HTML5 ★ In-built distribution - the web ★ Simple technologies used by lots of developers ★ Evolution of existing practices ★ Open, independent, standardised
  7. 7. PROMISES OF HTML5
  8. 8. LOCKOUT
  9. 9. FIXING HTML ISSUES
  10. 10. FIREFOX OS
  11. 11. ARCHITECTURE Third Party HTML5 Apps GAIA Web APIs / Web Actitivies Gecko rendering engine Linux/Gonk (ADB enabled)
  12. 12. - + =
  13. 13. PREDICTABLE HTML5 SUPPORT
  14. 14. SECURITY
  15. 15. AVOIDING USER OVERLOAD… http://smus.com/installable-webapps/
  16. 16. 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"
 }

  17. 17. 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
  18. 18. APPLICATIONS
  19. 19. PERMISSIONS "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  20. 20. WEB APIS
  21. 21. 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
  22. 22. BATTERY STATUS API
  23. 23. 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); }
  24. 24. VIBRATION API
  25. 25. 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);
  26. 26. NETWORK INFORMATION API
  27. 27. NETWORK INFORMATION API var connection = window.navigator.mozConnection,
 online = connection.bandwidth > 0,
 metered = connection.metered;

  28. 28. PAGE VISIBILITY
  29. 29. PAGE VISIBILITY document.addEventListener("visibilitychange", function () {
 if (document.hidden) {
 console.log("App is hidden");
 }
 else {
 console.log("App has focus");
 }
 });
  30. 30. PUSH NOTIFICATIONS
  31. 31. PUSH NOTIFICATIONS (REQUEST)
  32. 32. PUSH NOTIFICATIONS (RECEIVE)
  33. 33. WEB APIS (PRIVILEGED APPS) Device Storage API Browser API TCP Socket API Contacts API systemXHR
  34. 34. CONTACTS API
  35. 35. 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")
 };
  36. 36. 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
  37. 37. CERTIFIED APPS = THE OS :)
  38. 38. 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
  39. 39. WEB ACTIVITIES
  40. 40. 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 };
  41. 41. APP DISTRIBUTION
  42. 42. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  43. 43. INSTALL FROM THE WEB…
  44. 44. DYNAMIC APP WEB SEARCH
  45. 45. DEVELOPMENT ENVIRONMENT
  46. 46. DEVELOPER ENVIRONMENT
  47. 47. FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App
  48. 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. 49. BUILDING BLOCKS?
  50. 50. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  51. 51. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  52. 52. MOZILLA BRICK http://mozilla.github.io/brick/
  53. 53. 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/
  54. 54. WHAT’S COOKING?
  55. 55. CORDOVA IMPLEMENTATION APIS • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
  56. 56. CORDOVA IMPLEMENTATION APIS $ sudo npm install -g cordova $ cordova create hello com.example.hello HelloWorld $ cd hello $ cordova platform add firefoxos $ cordova prepare firefoxos
  57. 57. 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 });
  58. 58. 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
  59. 59. 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
  60. 60. DEVELOPER HUB https://marketplace.firefox.com/developers/
  61. 61. MOZILLA DEVELOPER BLOG https://hacks.mozilla.org/category/firefox-os/
  62. 62. FIREFOX OS VIDEO SERIES https://hacks.mozilla.org/category/videoseries/
  63. 63. FIREFOX OS WIKI https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
  64. 64. TO WRAP UP…
  65. 65. NOTHING IS WASTED… ! 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) https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/
  66. 66. THANKS! CHRIS HEILMANN @CODEPO8
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×