Firefox OS - A (web) developers dream - muxCamp 2014

47
FIREFOX OS A (MOBILE) WEB DEVELOPERS DREAM Carsten Sandtner ( ) 2014 - muxCamp Worms 2014 @casarock

description

My Slides about Firefox OS - Presented at muxCamp 2014

Transcript of Firefox OS - A (web) developers dream - muxCamp 2014

Page 1: Firefox OS - A (web) developers dream - muxCamp 2014

FIREFOX OSA (MOBILE) WEB DEVELOPERS DREAM

Carsten Sandtner ( ) 2014 - muxCamp Worms 2014@casarock

Page 2: Firefox OS - A (web) developers dream - muxCamp 2014

WHO AM I?Carsten Sandtner

Head of Development at //mediaman GmbHMozilla representative

Javascript enthusiast and web developer since 1998.

Page 3: Firefox OS - A (web) developers dream - muxCamp 2014

HTML5 BASED OPERATING SYSTEMS

The full Safari engine is inside of iPhone. And so,you can write amazing Web 2.0 and Ajax apps

that look exactly and behave exactly like apps onthe iPhone. And these apps can integrate

perfectly with iPhone services. They can make acall, they can send an email, they can look up a

location on Google Maps. And guess what?There’s no SDK that you need!

Page 4: Firefox OS - A (web) developers dream - muxCamp 2014

WEBOSInvented by Palm. Aimed at smartphones and tablets.

Launched 2009Apps are written in HTML5Palm sold to HP. HP to LG 2013First (mobile) OS with HTML5 UI!Enyo Framework still alive

Page 5: Firefox OS - A (web) developers dream - muxCamp 2014

CHROMEOSA Linux distribution where Google Chrome is the "UI" layer

Launched 2009Desktop only!The browser is the OS (at least UI)Still alive. Chromebooks are available

Page 6: Firefox OS - A (web) developers dream - muxCamp 2014

WINDOWS 8(.1)Not the OS, but First Class Apps in HTML5.

Build Windows 8 Apps in HTML5, CSS and JavascriptFirst Class Apps.

Page 7: Firefox OS - A (web) developers dream - muxCamp 2014

FIREFOX OSFully open mobile operating system based on web standards

First version released 2011For smartphones and tabletsFully web basedApp development: Just HTML5

Page 8: Firefox OS - A (web) developers dream - muxCamp 2014

FIREFOX OSIN DETAIL

Page 9: Firefox OS - A (web) developers dream - muxCamp 2014

ARCHITECTURE

Page 10: Firefox OS - A (web) developers dream - muxCamp 2014

GONKLow level OS of Firefox OS. Linux based on Android Open

SourceProject

Page 11: Firefox OS - A (web) developers dream - muxCamp 2014

GECKOWell known rendering engine by Mozilla

Page 12: Firefox OS - A (web) developers dream - muxCamp 2014

GAIAUI level of Firefox OS

Only interface to the underlying operating system and hardware

Page 13: Firefox OS - A (web) developers dream - muxCamp 2014

WEB APIS AND WEB ACTIVITIESWeb APIs

Access device hardwareProvides access to data storageSecurity - sensitive APIs need approvementSome are already standard (W3C)

Web ActivitiesAccess to sensible user dataApp requests data from an other appe.g. Dial a number requests Phone appOnly available for installed or higher privileged apps

Page 14: Firefox OS - A (web) developers dream - muxCamp 2014

APPS AND 3RD PARTY APPSEvery HTML5, Javascript, CSS based Apps for Firefox OS

Using WebAPIs and Web Activities

Page 15: Firefox OS - A (web) developers dream - muxCamp 2014

APP DEVELOPMENTJust Open Web Apps

Page 16: Firefox OS - A (web) developers dream - muxCamp 2014

3 DIFFERENT APP TYPES1. hosted2. privileged3. certified

Definition in webapp.manifest

Page 17: Firefox OS - A (web) developers dream - muxCamp 2014

THE WEB APP MANIFESTJSON Configuration fileIncludes: permissions, author, description, type, icons, localeetc.

Page 18: Firefox OS - A (web) developers dream - muxCamp 2014

EXAMPLE (MINIMAL){ "name": "My Awesome App", "description": "My elevator pitch goes here", "launch_path": "/", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "Your Name", "url": "http://your-homepage-here.tld" }, "default_locale": "en"}

Page 19: Firefox OS - A (web) developers dream - muxCamp 2014

EXAMPLE PRIVILEGED APP{ "name": "My Awesome Privileged App", .... "type": "privileged", "fullscreen": "true", "permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" } }, "default_locale": "en", ...}

Page 20: Firefox OS - A (web) developers dream - muxCamp 2014

WEB APISOpen API specifications to access the hardware of devices

Created with and submitted to standards bodies and otherbrowser makers

Secured by three layer security model

Page 21: Firefox OS - A (web) developers dream - muxCamp 2014

WEB APIS: HOSTED APPSVibration API, Screen Orientation, Geolocation API, MouseLock API, Open WebApps, Network Information API, BatteryStatus API, Alarm API, Push Notifications API, WebFM API /FMRadio, WebPayment, IndexedDB, Ambient light sensor,Proximity sensor, Notification.

Page 22: Firefox OS - A (web) developers dream - muxCamp 2014

WEB APIS: PRIVILEGED APPSDevice Storage API, Browser API, TCP Socket API, ContactsAPI, systemXHR.

Page 23: Firefox OS - A (web) developers dream - muxCamp 2014

WEB APIS: CERTIFIED APPSWebTelephony, WebSMS, Idle API, Settings API, PowerManagement API, Mobile Connection API, WiFi InformationAPI, WebBluetooth, Permissions API, Network Stats API,Camera API, Time/Clock API, Attention screen, Voicemail.

Page 24: Firefox OS - A (web) developers dream - muxCamp 2014

Example: Battery APIvar battery = navigator.battery, info = { charging: battery.charging, chargingTime: parseInt(battery.chargingTime / 60, 10), dischargingTime: parseInt(battery.dischargingTime / 60, 10), level: Math.round(battery.level * 100) };

Page 25: Firefox OS - A (web) developers dream - muxCamp 2014

EXAMPLE: GEOLOCATION API*navigator.geolocation.getCurrentPosition(handleLocation);

function handleLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; /* coords.altitude coords.accuracy coords.altitudeAccuracy coords.heading coords.speed timestamp */}

*Ok, ok, not really a new one!

Page 26: Firefox OS - A (web) developers dream - muxCamp 2014

EXAMPLE: VIBRATION APIvar pattern = [200, 100, 200, 200, 100], vibrating = navigator.vibrate(pattern);

Page 27: Firefox OS - A (web) developers dream - muxCamp 2014

EXAMPLE: NOTIFICATION APINeeds permissions granted by users! (e.g. webapp.manifest)"permissions": { "desktop-notification": { "description": "Allows to display notifications on the user's desktop." }}

// At first, let's check if we have permission for notification// If not, let's ask for itif (Notification && Notification.permission !== "granted") { Notification.requestPermission(function (status) { if (Notification.permission !== status) { Notification.permission = status; }});}

if (Notification && Notification.permission === "granted") { var n = new Notification("Hi!");}

Page 28: Firefox OS - A (web) developers dream - muxCamp 2014

EXAMPLE: CONNECTION APIGet information about current connection

var connection = window.navigator.mozConnection, data = { online: connection.bandwidth, metered: connection.metered }

Page 29: Firefox OS - A (web) developers dream - muxCamp 2014

EXAMPLE: AMBIENTLIGHTGet current Lux of ambient light

var resElement = document.querySelector("#results");window.ondevicelight = function (event) { // Read out the lux value var lux = event.value;};

Page 30: Firefox OS - A (web) developers dream - muxCamp 2014

EXAMPLE: CONTACTS APIRead/Write/Delete Contacts - Permission required!

"permissions": { "contacts":{ "description": "Contacts permissions is required to write contact from Google to your Firefox OS phone", "access": "readwrite" } }}

var contactData = { givenName: ["John"], familyName: ["Doe"]};

var person = new mozContact(contactData); // Firefox OS 1.3 takes a parameter// save the new contactvar saving = navigator.mozContacts.save(person);

saving.onsuccess = function() { console.log('new contact saved');};

saving.onerror = function(err) { console.error(err);};

Page 31: Firefox OS - A (web) developers dream - muxCamp 2014

EXAMPLE: DEVICE STORAGE APISave/Read from sdcard, photo, music, video ...

"permissions": { "device-storage:pictures":{ "access": "readwrite" }, "device-storage:sdcard":{ "access": "readwrite" }}

var sdcard = navigator.getDeviceStorage("sdcard"), file = new Blob(["This is a text file."], {type: "text/plain"}), request = sdcard.addNamed(file, "my-file.txt");

request.onsuccess = function () {..}request.onerror = function () {..}

var pics = navigator.getDeviceStorage('pictures');// browse all the images availablevar cursor = pics.enumerate();cursor.onsuccess = function () { var file = this.result; console.log("File found: " + file.name);

// check if there is other results if (!this.done) { // Then we move to the next result, which call the cursor // success with the next file as result. this.continue(); }}

Page 32: Firefox OS - A (web) developers dream - muxCamp 2014

AND THERE ARE MANY MORE!APIs at MDN

Page 33: Firefox OS - A (web) developers dream - muxCamp 2014

WEB ACTIVITIES

Page 34: Firefox OS - A (web) developers dream - muxCamp 2014

WEB ACTIVITIESconfigure, costcontrol, dial, open, pick, record, save-bookmark, share, view.

New ones: f.e type: “websms/sms” or “webcontacts/contact”

Page 35: Firefox OS - A (web) developers dream - muxCamp 2014

EXAMPLE: DIAL A NUMBERvar getphoto = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] }});

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 36: Firefox OS - A (web) developers dream - muxCamp 2014

TOOLS&UTILS

Page 37: Firefox OS - A (web) developers dream - muxCamp 2014

TESTINGSimulatorBrowser - It's a Web App!

Page 38: Firefox OS - A (web) developers dream - muxCamp 2014

DEVELOPMENTNo SDK!Use your favorite IDE/EditorIt's HTML5!

Page 39: Firefox OS - A (web) developers dream - muxCamp 2014

DEBUGGINGDeveloper tools in Firefox! (NOT! Firebug)Remote Debugger!

Page 40: Firefox OS - A (web) developers dream - muxCamp 2014

UI COMPONENTS

http://buildingfirefoxos.com/

Page 41: Firefox OS - A (web) developers dream - muxCamp 2014

UI COMPONENTS - BRICK!

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

Page 42: Firefox OS - A (web) developers dream - muxCamp 2014

FIREFOX OS BOILERPLATE

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

Page 43: Firefox OS - A (web) developers dream - muxCamp 2014

PHONEGAP AND CORDOVA

http://build.phonegap.com/http://cordova.apache.org/

Page 44: Firefox OS - A (web) developers dream - muxCamp 2014

HOW TO DISTRIBUTE YOUR APP

Page 45: Firefox OS - A (web) developers dream - muxCamp 2014

HOSTED APPHost the App on your web spaceProvide installation using WebAPI

Page 46: Firefox OS - A (web) developers dream - muxCamp 2014

PRIVILEGED APPDistribute via Firefox OS Marketplace

Page 47: Firefox OS - A (web) developers dream - muxCamp 2014

THANK YOU!Carsten Sandtner

@casarock