Top Banner
FIREFOX OS Answering global challenges Christian Heilmann (@codepo8) Developerweek, San Francisco, Feb. 2014
77

Firefox OS - Answering global challenges

Aug 19, 2014

Download

Education

An overview presentation of Firefox OS at the San Francisco Developer week
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Firefox OS - Answering global challenges

FIREFOX OSAnswering global challenges

Christian Heilmann (@codepo8) Developerweek, San Francisco, Feb. 2014

Page 2: Firefox OS - Answering global challenges

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 4: Firefox OS - Answering global challenges

I LIVE BY THE RIVER…

Page 5: Firefox OS - Answering global challenges
Page 6: Firefox OS - Answering global challenges
Page 7: Firefox OS - Answering global challenges
Page 8: Firefox OS - Answering global challenges
Page 9: Firefox OS - Answering global challenges
Page 10: Firefox OS - Answering global challenges
Page 11: Firefox OS - Answering global challenges

PEOPLE ARE BUSY…

Page 12: Firefox OS - Answering global challenges
Page 13: Firefox OS - Answering global challenges

BENEFITS OF HTML5

★ In-built distribution - the web

★ Simple technologies used by lots of developers

★ Evolution of existing practices

★ Open, independent, standardised

Page 14: Firefox OS - Answering global challenges

PROMISES OF HTML5

Page 15: Firefox OS - Answering global challenges

LOCKOUT

Page 16: Firefox OS - Answering global challenges
Page 17: Firefox OS - Answering global challenges
Page 18: Firefox OS - Answering global challenges
Page 19: Firefox OS - Answering global challenges

FIXING HTML ISSUES

Page 20: Firefox OS - Answering global challenges

FIREFOX OS

Page 21: Firefox OS - Answering global challenges

ARCHITECTURE

Linux/Gonk (ADB enabled)

Gecko rendering engine

Third Party HTML5 Apps

Web APIs / Web Actitivies

GAIA

Page 22: Firefox OS - Answering global challenges

- + =

Page 23: Firefox OS - Answering global challenges

PREDICTABLE HTML5 SUPPORT

Page 24: Firefox OS - Answering global challenges

SECURITY

Page 25: Firefox OS - Answering global challenges

AVOIDING USER OVERLOAD…

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

Page 26: Firefox OS - Answering global challenges

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 27: Firefox OS - Answering global challenges

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 29: Firefox OS - Answering global challenges

PERMISSIONS

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

Page 30: Firefox OS - Answering global challenges

WEB APIS

Page 31: Firefox OS - Answering global challenges

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 32: Firefox OS - Answering global challenges

BATTERY STATUS API

Page 33: Firefox OS - Answering global challenges

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 34: Firefox OS - Answering global challenges

VIBRATION API

Page 35: Firefox OS - Answering global challenges

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 36: Firefox OS - Answering global challenges

NETWORK INFORMATION API

Page 37: Firefox OS - Answering global challenges

NETWORK INFORMATION API

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

Page 38: Firefox OS - Answering global challenges

PAGE VISIBILITY

Page 39: Firefox OS - Answering global challenges

PAGE VISIBILITY

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

Page 40: Firefox OS - Answering global challenges

PUSH NOTIFICATIONS

Page 41: Firefox OS - Answering global challenges

PUSH NOTIFICATIONS (REQUEST)

Page 42: Firefox OS - Answering global challenges

PUSH NOTIFICATIONS (RECEIVE)

Page 43: Firefox OS - Answering global challenges

WEB APIS (PRIVILEGED APPS)

Device Storage API

Browser API

TCP Socket API

Contacts API

systemXHR

Page 44: Firefox OS - Answering global challenges

CONTACTS API

Page 45: Firefox OS - Answering global challenges

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 46: Firefox OS - Answering global challenges

!

WebTelephony

WebSMS

Idle API

Settings API

Power Management API

Mobile Connection API

WiFi Information API

WEB APIS (CERTIFIED APPS)!

WebBluetooth

Permissions API

Network Stats API

Camera API

Time/Clock API

Attention screen

Voicemail

Page 47: Firefox OS - Answering global challenges

CERTIFIED APPS = THE OS :)

Page 48: Firefox OS - Answering global challenges

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

Page 49: Firefox OS - Answering global challenges

WEB ACTIVITIES

Page 50: Firefox OS - Answering global challenges
Page 51: Firefox OS - Answering global challenges

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 52: Firefox OS - Answering global challenges

APP DISTRIBUTION

Page 53: Firefox OS - Answering global challenges

FIREFOX OS MARKETPLACE

https://marketplace.firefox.com/

Page 54: Firefox OS - Answering global challenges

INSTALL FROM THE WEB…

Page 55: Firefox OS - Answering global challenges

DYNAMIC APP WEB SEARCH

Page 56: Firefox OS - Answering global challenges

DEVELOPMENT ENVIRONMENT

Page 57: Firefox OS - Answering global challenges

DEVELOPER ENVIRONMENT

Page 58: Firefox OS - Answering global challenges

FIREFOX OS BOILERPLATE APP

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

Page 59: Firefox OS - Answering global challenges

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 60: Firefox OS - Answering global challenges

BUILDING BLOCKS?

Page 61: Firefox OS - Answering global challenges

CERTIFIED APPS BUILDING BLOCKS

http://buildingfirefoxos.com/

Page 62: Firefox OS - Answering global challenges

CERTIFIED APPS BUILDING BLOCKS

http://buildingfirefoxos.com/

Page 63: Firefox OS - Answering global challenges

MOZILLA BRICK

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

Page 64: Firefox OS - Answering global challenges

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 65: Firefox OS - Answering global challenges

WHAT’S COOKING?

Page 66: Firefox OS - Answering global challenges

CORDOVA IMPLEMENTATION APIS

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

Page 67: Firefox OS - Answering global challenges

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 - Answering global challenges

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 - Answering global challenges

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 70: Firefox OS - Answering global challenges

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 71: Firefox OS - Answering global challenges

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

DEVELOPER HUB

Page 72: Firefox OS - Answering global challenges

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

MOZILLA DEVELOPER BLOG

Page 73: Firefox OS - Answering global challenges

https://hacks.mozilla.org/category/videoseries/

FIREFOX OS VIDEO SERIES

Page 74: Firefox OS - Answering global challenges

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

FIREFOX OS WIKI

Page 75: Firefox OS - Answering global challenges

TO WRAP UP…

Page 76: Firefox OS - Answering global challenges

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 77: Firefox OS - Answering global challenges

THANKS! CHRIS HEILMANN @CODEPO8