firefox os for developers - mobile world congress - 2014-02-26

UNLEASH THE FUTURE

Firefox OS for developers

Making HTML5 work

Firefox OS is HTML5(and not just a bad host for an HTML5 event)

Firefox OS keeps HTML5 promises(Works offline, store-independent distribution, simple update mechanisms)

Firefox OS empowers HTML5(Web APIs, Web Activities, shared research findings into low-end device performance)

Firefox OS is 100% open(Open Source, all tech are standard proposals)

Firefox OS is a shared effort(All partners of Mozilla have engineers on the project)

The step from site to app is simple(define a manifest)

{ "name": "MozMonument", "description": "A simple search application to find your name on the Monument outside the Mozilla San Francisco office", "launch_path": "/mobilefinder.html", "icons": { "128": "/128.png", "90": "/90.png", "60": "/60.png" }, "developer": { "name": "Christian Heilmann", "url": "http://christianheilmann.com" }, "locales": { "en": { "name": "MozMonument" } }, "default_locale": "en", "fullscreen": "true"}

Privileged Web App

More access, more responsibility

Web Content

Regular web content

Installed Web App

A regular web app

Certified Web App

Device-critical applications

Application levels / security model

You already use the developer tool(the browser is input and output)

Firefox Developer Tools

Build with Firefox

Tools for the Web

Instant Feedback

Full device and tools integration

Helping developers hands-on

Technical Evangelists teamWe are here to help you

StackOverflow

We are actively answering questions

PhoneGapPorting PhoneGap apps to Firefox OS

Cordova implementation APIs

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

$ sudo npm install -g cordova

$ cordova create hello com.example.hello HelloWorld

$ cd hello

$ cordova platform add firefoxos

$ cordova prepare firefoxos

Get ready!

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

Camera API

Mozilla Brickhttp://mozilla.github.io/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(); });

Brick

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

Apps Partner Engineering teamHelping brands port to Firefox OS

Phones for AppsGetting phones into the porters’ hands

Building an app?Please let me know!

Resources!

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

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

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

Thanks!