Firefox OS and You: The Web's Best Little Secret Revealed

Firefox OS and You: The Web's Best Little Secret Revealed

pretty firefox

I'm Angelina Fabbro

I live in Vancouver, Canada

snuggly wuggly red panda

I help developers make wonderful things for Firefox OS

snuggly wuggly red panda

I have a secret to share with you.

happy critter

You are already a Firefox OS developer

happy critter

A simple test will confirm:

- Can you write a web application?

- Bonus points: Have you implemented a responsive website?

- If you answere YES to EITHER of these, you are most of the way there already.

Why should I care about having my app in the marketplace?

- Isn't being on the web good enough?

- Isn't a responsive website good enough?

Can HTML 5 beat Apple and Android?

Not our fight

apple vs. android

The web is becoming more 'native'

- asm.js & Emscripten

- What is 'native' even going to mean anymore?

- In five years..

- ...In ten years?

Planned or built-in obsolescence

Instilling in the buyer the desire to own something a little newer, a little better, a little sooner than is necessary.

Clifford Brooks Stevens, 1954

Clifford Brooks Stevens on Wikipedia - Planned Obsolescence on Wikipedia

But I am a web developer! I don't know how to make apps for a mobile phone

Like I said: If you can write a web app, you can write a Firefox OS app

Browsers are awesome - they play nice now!

(mostly)

Browser ponies

Familiar tools

Firefox devtools

Lots of code to help scaffold your project

  • Bootstrap
  • Grunt
  • Ember
  • Backbone
  • jQuery
  • Sencha
  • Hammer.js
  • Emmett
  • Compass
  • SASS
  • LESS
  • Zepto.js
  • Angular.js
  • Dart
  • Livescript
  • Jasmine
  • Node.js
  • Moustache

Cross-universe compatible!

html 9 boilerstrap

HTML9 Responsive Boilerstrap JS

But HTML5 can't do…

- Stop copying native apps

- Stop trying to homogenize the experience

- Stop buying into hype

- HTML5 on phones is it's own thing

- "Don't try and be original, just try and be good." - Paul Rand

Don't try this.

Don't try and be iOS or Android - be web!

Your time is valuable

FxOS Booth

But I am a web developer! I don't want a restrictive eco-system

icons for FxOS

Marketplace: On mobile

Firefox marketplace

Firefox Marketplace

Find apps by content

The search interface of Firefox OS

So how do I start?

The search interface of Firefox OS

Getting started is simple:

  1. Write a web application (FxOS is framework agnostic)
  2. Add an app manifest
  3. Deploy to your servers or submit to marketplace

The manifest

        {
          "name": "My App",
          "description": "My elevator pitch goes here",
          "launch_path": "/",
          "icons": { "128": "/img/icon-128.png" },
          "developer": {
            "name": "Your name or organization",
            "url": "http://your-homepage-here.org"
          }
        }
      

App manifest

Three levels of access…

  • Hosted apps - stored on your server, easy to upgrade, limited access.
  • Privileged apps - reviewed by the App store, uses a Content Security Policy, hosted on trusted server
  • Certified apps - part of the OS, only by Mozilla and partners

App permissions

Get at hardware features

Hardware API access

arewemobileyet.com

Web APIs (hosted apps)

  • Vibration API
  • Screen Orientation
  • Geolocation API
  • Mouse Lock API
  • Open WebApps
  • Network Information API
  • Battery Status API
  • Alarm API
  • Push Notifications API
  • WebFM API / FMRadio
  • WebPayment
  • IndexedDB
  • Ambient light sensor
  • Proximity sensor
  • Notification

Using WebAPIs to make the web layer more capable

Install apps from the web

        var installapp = navigator.mozApps.install(manifestURL);
        installapp.onsuccess = function(data) {
          // App is installed
        };
        installapp.onerror = function() {
         // App wasn't installed, info is in 
         // installapp.error.name
        };
        

Battery API

          var b = navigator.battery;
          if (b) {
            var level=Math.round(battery.level * 100) + "%",
                charging=(battery.charging) ? "" : "not ",
                chargeTime=parseInt(battery.chargingTime / 60, 10),
                dischargeTime=parseInt(battery.dischargingTime/60,10);
            b.addEventListener("levelchange", show);
            b.addEventListener("chargingchange", show);
            b.addEventListener("chargingtimechange", show);
            b.addEventListener("dischargingtimechange", show);
          }
        

Web APIs (privileged apps)

  • Device Storage API
  • Browser API
  • TCP Socket API
  • Contacts API
  • systemXHR

Using WebAPIs to make the web layer more capable

Contacts API

          var contact = new mozContact();
          contact.init({name: "Angelina"});
          var request = navigator.mozContacts.save(contact);
          request.onsuccess = function() {
            // contact generated
          };
          request.onerror = function() {
            // contact generation failed
          };
        

Web APIs (certified apps)

  • WebTelephony
  • WebSMS
  • Idle API
  • Settings API
  • Power Management API
  • Mobile Connection API
  • WiFi Information API
  • WebBluetooth
  • Permissions API
  • Network Stats API
  • Camera API
  • Time/Clock API
  • Attention screen
  • Voicemail

Using WebAPIs to make the web layer more capable

Why not all for hosted apps?

Sad cat

Web Activities

  • configure
  • costcontrol
  • dial
  • open
  • pick
  • record
  • save-bookmark
  • share
  • view
  • new, f.e type: “websms/sms” or “webcontacts/contact”

https://wiki.mozilla.org/WebAPI/WebActivities

Give access control to the user

Pick activity

Sending a number to the phone

        var call = new MozActivity({
          name: "dial",
          data: {
            number: "+1804100100"
          }
        });
      

Get an image from the phone (1/2)

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

Get an image from the phone (2/2)

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

I want to make something!

FxOS Phone

Developer Hub

Developer Hub

Firefox OS Developer Hub

Simulator in the browser

Simulator

Firefox OS Simulator 1.0 is here!

Firefox OS Boilerplate

Boilerplate App

Boilerplate App on GitHub

Phones for developers

Geeksphone

Geeksphone.com

Activities/Hosted Apps on Android

Don't have quite the same access to APIs, but one day?

app on android

Activities/Hosted Apps on Android

PhoneGap (soon?)

Foxkeh loves android

So many fun things are developing:

  • asm.js
  • WebRTC
  • GetUserMedia
  • CSS3 variables
  • Web components (ShadowDOM, Custom Elements, HTML Imports)
  • WebGL
  • Flexbox
  • Animations
  • Transforms
  • @supports

Extend The Web Forward

Extend the web forward

- Extensible Web Manifesto

- Reform how standards become standards

- Developers inform process by using prollyfills/polyfills

- Iteration vs. waterfall process

extensiblewebmanifesto.org

Thanks Brazil!

DA MAGICS