Firefox OS

meets

Ember Fest 2014

Francisco Jordano

@mepartoconmigo

Working and Loving Firefox OS

a framework for creating ambitious web applications

Firefox OS: the web is the platform

the web is ready for do magic things

at mozilla we believe the web is what you need in any device

universal access to the web from the web

lots of partners and devices

First Firefox OS phone under 33$

  • Dual SIM
  • 128 MB Ram
  • SDCARD 4GB
  • 2 MP Camera
  • 1 GHz processor

Firefox OS Flame

Developer's reference device

  • 1.2 GHz dual core
  • 4.5” screen (FWVGA)
  • 5MP rear camear with flash
  • 2MP frontal camera
  • Dual sim
  • 1GB RAM (adjustable)

https://hacks.mozilla.org/2014/05/flame-firefox-os-developer-phone/

How does Firefox OS work?

What do I have to learn ?

What do I need to create a Web App?

just a manifest file!

a ... what?

{
    "version": "1",
    "name": "My Web App",
    "launch_path": "/index.html",
    "description": "This is my fantastic web application that runs everywere",
    "icons": {
        "64": "/images/logo64.png",
        "128": "/images/logo128.png"
    },
    "developer": {
        "name": "Open Web Lover",
        "url": "http://mozilla.com"
    },
    "installs_allowed_from": ["*"],
    "default_locale": "en",
    "permissions": {
        "desktop-notification": {
            "description" : "To show notifications"
        },
        "geolocation": {
            "description" : "Marking out user location"
        }
    }
}

a simple json file called manifest.json

We are defining new sets of

Web APIs

and we are working with the community to standardise them

var call = navigator.mozTelephony.dial('555-333-222-666');
call.onconnected = function onConnected(evt) {
	console.log('Better start to speak now');
};

call.ondisconnected = function onDisconnected(evt) {
	console.log('Call too long, dude, your bill is getting a bit crazy');
};

call.onerror = function onError(evt) {
	console.log('This is embarrassing');
};

Making a call with Telephony API

var sms = navigator.mozMobileMessage.send('555-333-222-666', 
	"Mum I'm OK, I finished all the vegies");

sms.onsucces = function onSuccess(evt) {
	console.log('Now your mum can go to sleep happy');
};

sms.onerror = function onError(evt) {
	console.log('Problems ahead');
};

Sending a SMS to your mum

window.addEventListener('userproximity', function(event) {
  if (event.near) {
    // let's power off the screen
    navigator.mozPower.screenEnabled = false;
  } else {
    // Otherwise, let's power on the screen
    navigator.mozPower.screenEnabled = true;
  }
});

Don't hang out when you get your face close to the screen

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

// save the new contact
var saving = navigator.mozContacts.save(person);

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

Play with your contacts list

We have the tools

https://developer.mozilla.org/en-US/docs/WebAPI

Permissions

  • Designed to protect users privacy
  • Associated with the APIs used in our APP
  • Declared in the application manifest
"permissions": {
    "desktop-notification": {
        "description" : "To show notifications"
    },
    "geolocation": {
        "description" : "Marking out user location"
    }
}

Permissions

Type web: Traditional web content

Type privileged: New apis and features

privileged apps are reviewed by mozilla and can be distributed only from the mozilla marketplace

New permission model

Designed to give user total control over privacy and data.

More features to know!

Make other apps work for you!

Web Activities

var activity = new MozActivity({
  name: 'pick',
  data: {
    type: 'webcontacts/contact'
  }
});
activity.onsuccess = function onSuccess() { 
	var contact = this.result;
	console.log(contact.name);
};

or you could let other apps use yours

window.navigator.mozSetMessageHandler('activity', function activityHandler(activity) {
    activity.postSuccess({contact: {
        'name': 'Pedro'
    }});
});

https://github.com/arcturus/defining-web-activities

Push Notifications

Simple Push API

http://slides.com/franciscojordano/firefox-os-push-notifications#/

Web Components

<gaia-header id='details-view-header' action="back">
   <button id="edit-contact-button" 
            role="menuitem" 
            data-icon="edit-contact" 
            data-l10n-id="edit"></button>
</gaia-header>

ServiceWorkers: close to land

Developer Tools

Debug the apps with the tools that you know

Check the performance of your app

https://www.npmjs.org/package/firewatch

Even more tools

https://www.npmjs.org/package/generator-firefoxos

https://www.npmjs.org/package/grunt-firefoxos

https://www.npmjs.org/package/node-firefoxos-cli

App Distribution

http://marketplace.mozilla.com

It will run in your android phone too!

Freedom to distribute your webapp


var request = navigator.mozApps.install("http://mywebapp.com/manifest.webapp");
request.onsuccess = function() {
  // great - display a message, or redirect to a launch page
};
request.onerror = function() {
  // whoops - this.error.name has details
};

Create your own install button from your web page

Ember tricks for Firefox OS

Packaged apps

  • Are privileged apps
  • Security in place
  • Very restrictive content security policy (CSP)

Precompile your Handlebars templates

npm install -g ember-precompile

ember-precompile template... [-f OUTPUT_FILE]

Avoid the use of inline scripting

or ... dynamically load them ... but

Fetch data from the outside world

"permissions": {
    "systemXHR":{}
}

You need to ask for an extra permission in your manifest.json and ...

jQuery helper

$.ajaxSetup( {
  xhr: function() {
    return new window.XMLHttpRequest( {
      mozSystem: true
    } );
  }
} );

Tell jQuery that you want to build XMLHttpRequest object with an specific config option

http://bugs.jquery.com/ticket/13862

Made with Slides.com