Transcript
Page 1: Firefox OS - HTML5 for a truly world-wide-web

Christian Heilmann (@codepo8) Sapo Codebits, Lisbon, Portugal, April 2014

FIREFOX OS HTML5 FOR A TRULY WORLD-WIDE-WEB

Page 2: Firefox OS - HTML5 for a truly world-wide-web
Page 3: Firefox OS - HTML5 for a truly world-wide-web
Page 4: Firefox OS - HTML5 for a truly world-wide-web
Page 5: Firefox OS - HTML5 for a truly world-wide-web

I LIVE BY THE RIVER…

Page 6: Firefox OS - HTML5 for a truly world-wide-web
Page 7: Firefox OS - HTML5 for a truly world-wide-web
Page 8: Firefox OS - HTML5 for a truly world-wide-web
Page 9: Firefox OS - HTML5 for a truly world-wide-web
Page 10: Firefox OS - HTML5 for a truly world-wide-web
Page 11: Firefox OS - HTML5 for a truly world-wide-web
Page 12: Firefox OS - HTML5 for a truly world-wide-web
Page 13: Firefox OS - HTML5 for a truly world-wide-web
Page 14: Firefox OS - HTML5 for a truly world-wide-web

PEOPLE ARE BUSY…

Page 15: Firefox OS - HTML5 for a truly world-wide-web

BENEFITS OF HTML5

★ In-built distribution - the web

★ Simple technologies used by lots of developers

★ Evolution of existing practices

★ Open, independent, standardised

Page 16: Firefox OS - HTML5 for a truly world-wide-web

PROMISES OF HTML5

Page 17: Firefox OS - HTML5 for a truly world-wide-web

LOCKOUT

Page 18: Firefox OS - HTML5 for a truly world-wide-web
Page 19: Firefox OS - HTML5 for a truly world-wide-web
Page 20: Firefox OS - HTML5 for a truly world-wide-web
Page 21: Firefox OS - HTML5 for a truly world-wide-web

FIXING HTML ISSUES

Page 22: Firefox OS - HTML5 for a truly world-wide-web

FIREFOX OS

Page 23: Firefox OS - HTML5 for a truly world-wide-web

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

Page 25: Firefox OS - HTML5 for a truly world-wide-web

ARCHITECTURE

Linux/Gonk (ADB enabled)

Gecko rendering engine

Third Party HTML5 Apps

Web APIs / Web Actitivies

GAIA

Page 26: Firefox OS - HTML5 for a truly world-wide-web

- + =

Page 27: Firefox OS - HTML5 for a truly world-wide-web

PREDICTABLE HTML5 SUPPORT

Page 28: Firefox OS - HTML5 for a truly world-wide-web

SECURITY

Page 29: Firefox OS - HTML5 for a truly world-wide-web

AVOIDING USER OVERLOAD…

http://smus.com/installable-webapps/

Page 30: Firefox OS - HTML5 for a truly world-wide-web

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

Page 31: Firefox OS - HTML5 for a truly world-wide-web

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

Page 33: Firefox OS - HTML5 for a truly world-wide-web

PERMISSIONS

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

Page 34: Firefox OS - HTML5 for a truly world-wide-web

CROSS-PLATFORM

Page 35: Firefox OS - HTML5 for a truly world-wide-web

WEB APIS

Page 36: Firefox OS - HTML5 for a truly world-wide-web

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

Page 37: Firefox OS - HTML5 for a truly world-wide-web

BATTERY STATUS API

Page 38: Firefox OS - HTML5 for a truly world-wide-web

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

Page 39: Firefox OS - HTML5 for a truly world-wide-web

VIBRATION API

Page 40: Firefox OS - HTML5 for a truly world-wide-web

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

Page 41: Firefox OS - HTML5 for a truly world-wide-web

NETWORK INFORMATION API

Page 42: Firefox OS - HTML5 for a truly world-wide-web

NETWORK INFORMATION API

var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered;

Page 43: Firefox OS - HTML5 for a truly world-wide-web

PAGE VISIBILITY

Page 44: Firefox OS - HTML5 for a truly world-wide-web

PAGE VISIBILITY

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

Page 45: Firefox OS - HTML5 for a truly world-wide-web

PUSH NOTIFICATIONS

Page 46: Firefox OS - HTML5 for a truly world-wide-web

WEB APIS (PRIVILEGED APPS)

Device Storage API

Browser API

TCP Socket API

Contacts API

systemXHR

Page 47: Firefox OS - HTML5 for a truly world-wide-web

CONTACTS API

Page 48: Firefox OS - HTML5 for a truly world-wide-web

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

Page 49: Firefox OS - HTML5 for a truly world-wide-web

CERTIFIED APPS = THE OS :)

Page 50: Firefox OS - HTML5 for a truly world-wide-web

WEB ACTIVITIES

Page 51: Firefox OS - HTML5 for a truly world-wide-web
Page 52: Firefox OS - HTML5 for a truly world-wide-web

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

Page 53: Firefox OS - HTML5 for a truly world-wide-web

APP DISTRIBUTION

Page 54: Firefox OS - HTML5 for a truly world-wide-web

FIREFOX OS MARKETPLACE

https://marketplace.firefox.com/

Page 55: Firefox OS - HTML5 for a truly world-wide-web

INSTALL FROM THE WEB…

Page 56: Firefox OS - HTML5 for a truly world-wide-web

DYNAMIC APP WEB SEARCH

Page 57: Firefox OS - HTML5 for a truly world-wide-web

DEVELOPMENT ENVIRONMENT

Page 58: Firefox OS - HTML5 for a truly world-wide-web

DEVELOPER ENVIRONMENT

Page 59: Firefox OS - HTML5 for a truly world-wide-web

FIREFOX OS BOILERPLATE APP

https://github.com/robnyman/Firefox-OS-Boilerplate-App

Page 60: Firefox OS - HTML5 for a truly world-wide-web

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

Page 61: Firefox OS - HTML5 for a truly world-wide-web

BUILDING BLOCKS?

Page 62: Firefox OS - HTML5 for a truly world-wide-web

CERTIFIED APPS BUILDING BLOCKS

http://buildingfirefoxos.com/

Page 63: Firefox OS - HTML5 for a truly world-wide-web

CERTIFIED APPS BUILDING BLOCKS

http://buildingfirefoxos.com/

Page 64: Firefox OS - HTML5 for a truly world-wide-web

MOZILLA BRICK

http://mozilla.github.io/brick/

Page 65: Firefox OS - HTML5 for a truly world-wide-web

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/

Page 66: Firefox OS - HTML5 for a truly world-wide-web

CORDOVA IMPLEMENTATION APIS

• Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration

Page 67: Firefox OS - HTML5 for a truly world-wide-web

CORDOVA IMPLEMENTATION APIS

$ sudo npm install -g cordova

$ cordova create hello com.example.hello HelloWorld

$ cd hello

$ cordova platform add firefoxos

$ cordova prepare firefoxos

Page 68: Firefox OS - HTML5 for a truly world-wide-web

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

Page 69: Firefox OS - HTML5 for a truly world-wide-web

WHAT’S COOKING?

Page 70: Firefox OS - HTML5 for a truly world-wide-web

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

Page 71: Firefox OS - HTML5 for a truly world-wide-web

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

Page 72: Firefox OS - HTML5 for a truly world-wide-web

WHERE TO GET INFO?

Page 73: Firefox OS - HTML5 for a truly world-wide-web

https://marketplace.firefox.com/developers/

DEVELOPER HUB

Page 74: Firefox OS - HTML5 for a truly world-wide-web

https://hacks.mozilla.org/category/firefox-os/

MOZILLA DEVELOPER BLOG

Page 75: Firefox OS - HTML5 for a truly world-wide-web

http://mozilla.github.io/app-basics-videos/

FIREFOX OS VIDEO SERIES

Page 76: Firefox OS - HTML5 for a truly world-wide-web

https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS

FIREFOX OS WIKI

Page 77: Firefox OS - HTML5 for a truly world-wide-web

TO WRAP UP…

Page 78: Firefox OS - HTML5 for a truly world-wide-web

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…

Page 79: Firefox OS - HTML5 for a truly world-wide-web

THANKS! CHRIS HEILMANN @CODEPO8


Recommended