Hello FrankfurtJS

My name is

I work as a web-developer at
Opoloo.com in Mainz

Spezialised in
Frontend (HTML5, CSS3, JS)

But I also do a lot of
Backend (Ruby on Rails, PHP)

Firefox OS

App Development

Part #1

Firefox OS

What is it?


No, seriously.

  • Mobile OS by Mozilla
  • Written in HTML5, CSS3, Javascript and C++
  • Open Source
  • Based on Linux Kernel
  • Fully functional Smartphone OS

Statistics (2013)

  • ~ 300 million phones have been sold
  • Each of these sold phones was less than $100
  • 1% of the market goes to Firefox OS
  • > 200.000 individual apps


LG Fireweb
ZTE Open

Global Distribution

Firefox OS phones are getting really popular:

  • Software is free
  • Smartphones are cheap ($25 - $100)
  • Apps are easy to develop

What I think about it

That's what I'm going to show you 

As a web-developer I really love this new OS and developing apps for it.  Get ready for the awesomeness.

Part #2

Getting started

Getting started

It is really made for web-developers!

You don't need...

  • ...any strange IDE
  • ...to learn new languages
  • ...to wait ages to compile your code

Getting started

You only need...

  • ...your favorite editor (which is of course Sublime Text)
  • ...your well-known web-languages (such as HTML5, CSS3 & JS)
  • ...nothing more
  • ...well, maybe some time :P

Can't wait to start your app?

Me neither.

Part #3


1. App-Manifest

  "name": "Blip",
  "description": "Blip is a simple whack-a-mole game.",
  "launch_path": "/",
  "icons": {
    "128": "/img/icon-128.png"
  "developer": {
    "name": "Max Boll",
    "url": "http://myxotod.com"
  "default_locale": "en"
  • Located in the root directory
  • Served as a JSON file by your .htaccess
  • Includes basic information of your app
  • such as name, description, icons, blah blah blah 

2. Offline Cache (optional)

All your application data can be stored in the local storage of your device to provide faster and offline access for further app usage.

Let your HTML document know that there's a cache file:
 <html manifest="offline.appcache">

Fill it with paths/files that shall be cached:
 CACHE MANIFEST/assets/stylesheets/application.css/assets/javascripts/application.js/assets/images/picture-of-a-really-cool-cat.jpg

3. Javascript API

  • Check if your app is already installed on the device
  • Install it via your website with just one click... actually two...
  • Access native software/hardware functionality of the phone like vibration or the camera
  • Use plugins to make, for example, in-app-purchase possible

3. Javascript API

Check if the app is installed:
manifest: "http://domain.tld/manifest.webapp",is_installed: function() {  var request = navigator.mozApps.checkInstalled(this.manifest);  request.onsuccess = function() {    if (request.result) {      return true;    } else {      return false;    }  };  request.onerror = function() {    console.log(this.error.message);    return false;  };}, ...

3. Javascript API

Install the app via your browser:
manifest: "http://domain.tld/manifest.webapp",install: function() {  var request = navigator.mozApps.install(this.manifest);  request.onsuccess = function() {    return true;  };  request.onerror = function() {    console.log(this.error.name);    return false;  };}, ...

 3. Javascript API 

 Access the hardware (e.g.: vibrate) 
vibrate: function(ms) {  if ('vibrate' in navigator) {    navigator.vibrate(ms); // vibrate for X ms  }}, ...

4. Data storage

As always there are different ways to store data.

For example:
  1. HTML5 WebStorage (locally)
  2. External Database (via API)

Part #4

Spread the word

Publish the App

You have 2 options to publish / spread your app:

1. Submit the app the the official Mozilla Marketplace

2. Build a sweet landing page with an even sweeter install button.

Part #5


My prototype game

Blip Prototype

Blip Prototype

How it works

  • The game is also the landing page
  • You can open the website/game via mobile browser
  • Play within the browser or click "install"

This would be one way to build your app.

Another way

  • Build your landing page
  • Add the manifest file to the root directory
  • Place your app-files inside a sub-folder, e.g.:

/app              <-- Contains your app
/index.html       <-- The landing page
/manifest.webapp  <-- Your app manifest
To install your app via button click you need to adjust the manifest a little bit...
  "name": "Blip",
  "description": "Blip is a simple whack-a-mole game.",
  "launch_path": "/app",
  "icons": {
    "128": "/img/icon-128.png"
  }, ...


  • Not yet known/used by the masses
  • It is still in some kind of rough state
  • Super tough competition against iOS and Android

  • Open Source Software
  • Phones are pretty cheap
  • App development is just beautiful
  • Publishing apps has never been that easy
  • Fluid transition between websites and apps

Thank you guys!

Slides        => slid.es/myxotod/frankfurtjs-2/
Blip            => blip.myxotod.com
Blip Code => github.com/myxotod/blip


#2 FrankfurtJS 14.05.2014

By Max Boll

#2 FrankfurtJS 14.05.2014

These are the slides for my presentation at FrankfurtJS #2. It's all about the new Firefox OS and how to build apps on it.

  • 4,379