Hello FrankfurtJS


My name is
Max

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?



IT'S AWESOME!

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

Smarthones

Alcatel
OneTouch
Fire
LG Fireweb
ZTE Open
Huawei
Y300II

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 
today.

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




App-Development

1. App-Manifest


/manifest.webapp
{
  "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.
BECAUSE YOU CAN GO CRAZY AND JUST INSTALL IT FROM YOUR BROWSER! <3<3<3

Part #5




Blip

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"
  }, ...
}

Conclusion


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

Positive
  • 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

www.myxotod.com
@MyXoToD


#2 FrankfurtJS 14.05.2014

By Max Boll

Made with Slides.com

#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,486

More from Max Boll