Firefox OS

Web Native

Les Orchard / @lmorchard

self.conference / Detroit / May 30, 2014

Who am I?

Me, cat pirate

{computer,web,mad} scientist

{tech,scifi} writer

home{brew,roast}er

Mozillian

Hi, my name is Les Orchard Here, you can see me in my natural habitat working at home with a cat climbing me. I’ve been a computer nerd since the 80’s, I found the web when I was in college in the 90’s, and that's what I've been doing ever since. These days I also like tinkering with random gadgets and electronics with blinking things I’ve gotten a few tech books published. I write little scifi stories, but I haven't gotten any of those published. I make beer and I roast coffee. Oh, and I work for Mozilla. Six years this month.

What do I do?

Though I work at Mozilla, I don't work on Firefox. Though I have submitted a few pull requests to Firefox OS, I'm not a main contributor by a long shot. Anybody here could fork the repo on GitHub and do the same thing. Mainly, I'm a web developer. And, right now, I'm working on developer.mozilla.org - or MDN. MDN is a big community maintained body of documentation for the Open Web. So, as context for this talk, I guess I want to say I'm mainly interested in Firefox OS as a fan and a web developer. I just think all this stuff is really cool, and that's why I work at Mozilla. I'm hoping this doesn't come off as a sales pitch, even if most of what I'm talking about is free.

Agenda

Mozilla & Firefox OS

Apps & the Open Web

Web APIs & Web Activities

Developer Tools

Seriously, what about native?

What is Mozilla?

“Our mission is to promote openness, innovation & opportunity on the Web.”

Mozilla Dino Head

We exist to bring an open and free and user-centric internet to everyone - Since anyone can implement the web, no single party can control it. - Mozilla's goal is to keep it that way - Firefox exists to be at least one of many independent implementations. - We fight to keep proprietary technologies - like patent encumbered video codecs - from becoming essential components of the web We don't always win, but we fight. - Firefox OS was created, in part, to carry that mission onto mobile devices. (The dino head logo is officially deprecated, but I still really like it.)

What is Mozilla?

“As a result of the intense competition among browser makers — a fight incited by Mozilla, then joined by Apple, Google and, lately, by Microsoft, whose share of the browser market has plummeted in the last decade — desktop web browsers have improved vastly over the past few years. They’re now ferociously fast, they can load and keep open hundreds of tabs, they’re extremely stable and they’re capable of handling highly complex websites.”

— Farhad Manjoo
(The New York Times, 2 May 2014)

What is Mozilla?

“The success of our mission depends on participation from people like you.”

What is Mozilla?

What is Firefox OS?

“Firefox OS is a new mobile operating system, developed by Mozilla, and based on Linux and the Gecko engine that powers Firefox.”

Firefox OS logo

What is Firefox OS?

“Mozilla’s strategy has been to build Firefox OS primarily for emerging markets, where there are still billions of people who have yet to experience their first smartphone.”

What is Firefox OS?

~7 mobile operator partners, ~3 hardware partners

What is Firefox OS?

Gonk

Linux & Hardware Abstraction

Gecko

Firefox Core Engine

Gaia

Homescreen & Core Apps

Now, going under the hood, what is Firefox OS? Android - Java + Firefox = Firefox OS Gonk Linux kernel tweaks & drivers from the Android Open Source Project Mainly a device porting layer, an adapter between hardware and Gecko Benefit from work in Android on hardware abstraction & low-level tools Gecko - Firefox core engine FirefoxOS is AKA Boot to Gecko Gaia - Core apps & overall UI, all HTML5

What are Apps?

Appetizers!

What are Apps?

~~Appetizers!~~

No!

What are Apps?

Applications

“...an "app" is really much more than just a shortened slang term. It's not just the term that's shortened, and it's not just the term that's slanged. It's also the application itself that's shortened and slanged...”
— Ian Bogost (21 Jan 2011)

- App is short for "application". - But, there's a reason why we have a special word that's caught on. - Apps are a shortening of the very idea of applications. - It's like buying a single instead of the whole album. - I took that notion from Ian Bogost - http://www.bogost.com/blog/what_is_an_app.shtml - Ian Bogost is the video game researcher who brought us Cow Clicker, a deconstructive parody of all Facebook games and addictive apps

What are Apps?

Single task

Limited attention

Focused UX

Touch UI

Cost $1 to $5
($50 is really pushing it)

Apps tend to be focused on a single task Apps tend to have UI simplified for mobile and touch and smaller screens Apps tend to accommodate limited attention Apps tend to cost $1 or $5 or maybe $10, but that's pushing it Anyone remember the $50 Wolfram Alpha app that came out in Fall 2009? By spring 2010 it was $2 And actually, if you remember even farther back, PalmOS had apps. But, they sold for prices anywhere from $10 to $100. And, sometimes, you had to buy them on CDs that they sold in malls and you installed them with a HotSync cradle. ... Man, it's great living in the future.

What's the Open Web?

What isn't the Open Web?

Apple owns iOS and the underlying APIs & frameworks - This translates into a captive App Store audience and taking a 30% cut. - Apple also restricts what you can buy and install based on where you are in the world - If you're outside the US, you might be out of luck. - That’s not to say you get nothing. The App Store is an undeniably effective machine for marketing and distributing iOS apps. - But, it's also the only way to market & distribute iOS apps. - And iOS apps only work on Apple devices.

What isn't the Open Web?

Google's Android is nifty, and it's published as open source. That's not bad. Like Apple, Google takes a 30% cut of apps sold through the Play Store - And, again, you get marketing and distribution help. Android works on many vendors' devices - you can even install an alternative App Store from Amazon. That's all miles better than Apple, IMO. But, and I'm really sorry if this sounds like FUD, there are catches that worry me: - For example, Android software runs on Dalvik. - Dalvik is a reimplementation of Java. - They call it a "cleanroom" reimplementation, but that's in dispute. - Java is not entirely a free and open industry standard. - Java has complex licensing. Some of it is under the GPL. Some of it is not. Sun Microsystems wanted to encourage Java's spread, yet still have ways to tap in and make money. - These days, Oracle owns Java. They disagree that Google should be free to employ a clone of Java without paying a great deal of money for it. - http://arstechnica.com/information-technology/2010/08/oracles-java-lawsuit-undermines-its-open-source-credibility/ - http://www.itworld.com/mobile-wireless/278559/java-creator-unhappy-oracle-trial-outcome Apple & Google & Oracle are big companies, so they can fight this out. - But, personally, I hate feeling like my career & industry is underfoot for those fights.

What is the Open Web?

Apps on the Web

- Remember back when the iPhone first came out? Steve Jobs said iPhone apps *were* web apps - These things are as valid now as they were back in 2007. - On the Open Web, you don't need a gatekeeper. Just come to my site and you're running my code, from anywhere in the world. - That's called Code on Demand - Most iOS and Android apps require a full redownload to install a new version. - Some larger games only ship a patcher to the store and do their own resource management internally - I mean, I guess that's better than buying CDs at the mall and using a Palm HotSync cradle to install apps. - On the web, you don't need to download the whole thing, just fetch the code updates you need. You can do this with individual resources, or bundle things up. - Remember emerging markets and low bandwidth? - The web has mechanisms for caching and offline access - That's like the #1 question I hear.

The Web Wasn't Ready

“Telling developers that web apps are iPhone apps just doesn’t fly. Think about it this way: If web apps —

which are only accessible over a network;

which don’t get app icons in the iPhone home screen;

which don’t have any local data storage

— are such a great way to write software for iPhone,
then why isn’t Apple using this technique for any of their own iPhone apps?”

— John Gruber
(Daring Fireball, 11 Jun 2007)

HTML5 APIs

localStorage		Offline
IndexedDB		AppCache
History		Video
Geolocation		Audio
Touch Events		Canvas
Drag and Drop		WebGL
Web Workers		Media Capture
Web Sockets		WebRTC

And this is what happened. Things have changed since 2007. HTML5 brought with it a raft-load of new APIs that most of the browser makers started implementing. Now, web apps *do* work offline and they *do* have local data storage. In fact, they now have access to all sorts of capabilities like multimedia, 2D & 3D graphics, as well as a growing array of ways to communicate over the web. (ramble about some APIs if there's time?) And there's a bunch of APIs I'm leaving out. But, there's still a lot of work left to do.

"Add to home screen"

Remember that thing about web apps not showing up on home screens? Well, you've been able to put an icon on the home screen from mobile browsers for awhile now. It's hard to discover, but it mostly works. Apple even established an HTML link relation (apple-touch-icon) for specifying what that icon should look like. But really that's the bare minimum of what you need to "install" a web app: It's a bookmark. But, there's definitely room for improvement.

Adaptive App Search

But, since these are just web apps, Firefox OS does something interesting on the home screen. This is called "adaptive app search": you can search for and launch apps and content right from the home screen without bookmarking or formally installing them first. There's that code-on-demand thing that the web's good at. If you like what you find, you can add it to your home screen for easy access later. (This is a press release photo, by the way, so it's a bit of a glamour shot. I have a real phone on me, so I can show you how it works later. It's pretty much like that though.)

Build Your Own Marketplace

Run Everywhere a Bunch of Places

The Open Web App Manifest

https://my-app.example.com/manifest.webapp

Content-Type: application/x-web-app-manifest+json


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

Installing an Open Web App


var manifestUrl = 'https://my-app.example.com/manifest.webapp';

var request = window.navigator.mozApps.install(manifestUrl);

request.onsuccess = function () {
  // Save the App object that is returned
  var appRecord = this.result;
  alert('Installation successful!');
};

request.onerror = function () {
  // Display the error information from the DOMError object
  alert('Install failed, error: ' + this.error.name);
};

Web APIs

Web Activities	Network Information	Battery Status
Screen Orientation	Device Orientation	Ambient Light
Proximity Sensor	Device Storage	FM Radio
Alarm	Vibration	Notifications
Gamepad	Payment	TCP Sockets
Telephony	SMS	Push

Web APIs

Vibration API


window.navigator.vibrate(200);
window.navigator.vibrate([200, 100, 200]);

Web APIs

Battery Status API


var battery = navigator.battery ||
              navigator.mozBattery || navigator.webkitBattery;

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);
updateBatteryStatus();

Web APIs

Screen Orientation API


/* For portrait, we want the tool bar on top */
@media screen and (orientation: portrait) {
  #toolbar { width: 100%; }
}

/* For landscape, we want the tool bar stick on the left */
@media screen and (orientation: landscape) {
  #toolbar { position: fixed; width: 2.65em; height: 100%; }
}


var screen = window.screen;

screen.addEventListener("orientationchange", function () {
  console.log("The orientation of the screen is: " +
              screen.orientation);
});

screen.lockOrientation('landscape');

Web APIs

Device Orientation API


function handleOrientation(event) {
  var absolute = event.absolute;
  var z_rot    = event.alpha;
  var x_rot    = event.beta;
  var y_rot    = event.gamma;

  // Do stuff with the new orientation data
}

window.addEventListener("deviceorientation", handleOrientation,
                        true);

Web Activities

So this is a particularly interesting Web API. It enables you to call on other apps as APIs. But, you as the app developer don't need to be aware of any other apps in particular. It centers around activities, like picking an image. Multiple apps can register to handle that activity, but the user gets to choose which one will satisfy the request. In other words, it means that this app here on the left can delegate finding an image to one of the apps listed on the right. It also helps reduce the number of apps that need access to hardware. If I can just pick an image from the gallery or launch the camera app, then my app doesn't need camera hardware access itself. This API is inspired by Intents on Android, and in fact I think there is work to allow web apps on Android to use Intents via the Web Activities API.

Web Activities


{
  // Other App Manifest related stuff

  // Activity registration
  "activities": {

    // The name of the activity to handle (here "pick")
    "pick": {
      "href": "./pick.html",
      "disposition": "inline",
      "filters": {
        "type": ["image/*","image/jpeg","image/png"]
      },
      "returnValue": true
    }
  }
}

Web Activities


navigator.mozSetMessageHandler('activity', function(activityRequest) {
  var option = activityRequest.source;

  if (option.name === "pick") {
    // Do something to handle the activity
    ...

    // Send back the result
    if (picture) {
      activityRequest.postResult(picture);
    } else {
      activityRequest.postError("Unable to provide a picture");
    }
  }
});

Web Activities


var activity = new MozActivity({
  // Ask for the "pick" activity
  name: "pick",

  // Provide the data required by 
  // the filters of the activity
  data: { type: "image/jpeg" }
});

activity.onsuccess = function() {
  var picture = this.result;
  console.log("A picture has been retrieved");
};

activity.onerror = function() {
  console.log(this.error);
};

Packaged Apps

“A packaged app is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest, and so on) contained in a zip file, instead of having its resources on a Web server.”

Privileged Apps

“A privileged app is one that makes use of privileged APIs ... When submitted to the Firefox Marketplace, privileged apps are approved using a special process. This process gives users of the app a level of assurance that the app has been carefully reviewed for potential security, privacy and capability issues.”

So, with signed, packaged apps in mind: Firefox OS restricts usage of a handful of Web APIs. Only packaged apps that have been reviewed by the Firefox Marketplace team can use these select APIs. These apps are called Privileged apps. For the most part, these APIs include things that access your personal data like contacts or files in device storage such as photos or music. This sounds a bit like the approval-based app store model used by Apple and Google. But, keep in mind that most apps can get away with never touching privileged APIs. In fact, for the most part, they can get delegated access to sensitive data by using Web Activities that call on already-approved core apps.

Permissions


"permissions": {
  "contacts": {
    "description": "Required for autocompletion",
    "access": "readcreate"
  },
  "alarms": {
    "description": "Required to schedule notifications"
  }
}

Certified Apps

“A certified app is one that makes used of certified APIs, APIs that offer access to critical system function such as the default dialer or the system settings app on a device. ... A certified app must be approved for a device by the OEM or carrier.”

Developer tools

{ live demo goes here }

Now, I'm going to attempt to show a quick live demo of the Developer Tools in Firefox with a real Firefox OS device. In case it fails, I have some boring backup screenshots to show. But let's hope it works. - install fxos simulator addon - install fxos simulators (1.4, 2.0, adb helper) - show phone connection - install the fxos boilerplate app https://github.com/robnyman/Firefox-OS-Boilerplate-App - install on phone - modify live DOM on phone - use Photo Booth to show the changes?

Developer tools

What about native?

Thank you!

Les Orchard / @lmorchard