FirefoxOS – Building a home screen

View Github Repository Open presentation in a new window

KevinGrandon

See all presentation from KevinGrandon

FirefoxOS – Building a home screen

0 1

slides-fxos-home-screen-velocity-2014

Slides for my Velocity 2014 talk

On Github KevinGrandon / slides-fxos-home-screen-velocity-2014

FirefoxOS

Building a home screen

 

 

Kevin Grandon

@kevining

So who am I? My name is Kevin Grandon. I work for Mozilla, and I'm a software engineer working on FirefoxOS.
I'm coming here today from beautiful San Francisco.
But generally it looks more like this, covered in fog.
Here's the Mozilla San Francisco office. In front of it there's a monument with the names of all of our employees, and our open source contributors.
I'm here today to talk to you about FxOS. My talk has changed significantly since the original proposal and is more technical in nature. We'll spend a few minutes chatting about what we're doing with FirefoxOS, then the majority of the talk will be some live coding examples. Who's heard of FxOS? FxOS is an open source mobile operating system by Mozilla.
It's built fully in web technologies, with HTML, CSS, and Javascript. It's powered by Gecko, the same rendering engine in Firefox Desktop.

Where is it?

  • 12 smartphones
  • 13 operators
  • 24 countries
We're growing fast. We're now shipped on 12 different smartphones, partnered with 13 different operators, in 24 countries.

Target Audiennce

  • Emerging Markets
  • First time smartphone users
We are currently not looking to compete with Android and iOS, we're targeting emerging markets and first time smartphone users. This is a market which is largely abandoned in the smartphone market. Earlier this year we shipped a $35 phone in India which will allow many people to have their very first internet connected device.

$35 smart phone

The Home Screen

My talk today was originally about building the FirefoxOS home screen. Today I'm going to show you how to build a home screen, and make your phone your own. I was chosen to build the FirefoxOS home screen because I loved hacking on my phone. I was originally doing performance work for Mozilla, but I had done several demos of custom home screens for the device. For our 2.0 launch we shipped a fresh re-design which I helped with.

1.0 - 1.4 home screen

Riverscreen - custom home screen

2.0 vertical home screen

And here's our 2.0 vertical home screen. It's veritcally scrolling and has larger, more visual icons. Vertically scrolling important because of edge gestures.

Replaceable Home Screens

  • Make your phone your own.
  • Upload your home screen to the marketplace.
One of the great upcoming features in FirefoxOS is the concept of replaceable home screens. You can fully make your phone your own, by creating your own home screen in javascript. This is a feature we're currently working on and is expected to ship in our next release.

How does it work?

How does it all work? WebAPIs allow access to the hardware.

What is an app anyway?

A website: <html>...</html>
A manifest: manifest.webapp
So what is an app? If you have a manifest, and a website, you can have an app. The manifest provides some metadata about your website, and can allow users to install it as an application. It lists the required permissions that your app needs as well as content such as icons and localized descriptions.

Web Manifest

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

WebAPI - Hardware Access

var battery = navigator.battery;

function updateBatteryStatus() {
  console.log("Battery status: " + battery.level * 100 + " %");

  if (battery.charging) {
    console.log("Battery is charging");
  }
}

battery.addEventListener("chargingchange", updateBatteryStatus);
battery.addEventListener("levelchange", updateBatteryStatus);
So how does your code interact with the phone hardware? We use a number of new API methods which we're currently trying to standardize. Some of these methods might allow you to take a picture with the camera, or read the contacts from the device.

WebAPI - Applications

var request = window.navigator.mozApps.getAll();
request.onsuccess = function(evt) {
	var apps = evt.target.result;
	// Render some apps.

	// Uninstall an app:
	apps[0].uninstall();
};
Here's how a home screen would access the apps of a device, using the mozapps webapi.

Time for some code.

Thanks!

Kevin Grandon

@kevining