"Any application that can be written in JavaScript, will eventually be written in JavaScript"

Atwood's Law

Text

A little background

Alex Saladrigas

Youtuber
Javascript developer
(Hopefully) future social entrepreneur

A little background

webBox

"A browser on a box"

Boot to Gecko

Web tech based

Javascript centred

Runcible

by Monohm

Gonk

Gecko

Gaia

Gonk

A miniature Linux distribution. Uses the Android Open Source Project Linux Kernel

Gecko

The web engine that runs all versions of Firefox

Gaia

All screens, window manager, all apps.

Everything you can see or touch.

100% HTML, CSS and Javascript

Where can I start?

Try the simulator inside Firefox

https://developer.mozilla.org/en/docs/Tools/WebIDE

Gonk

Gecko

Gaia

WebAPI

webAPIs

Full list at https://wiki.mozilla.org/WebAPI

webAPIs

var message = "Hi!";
var number = "1234"; 

navigator.mozMobileMessage.send(number, message);

webSMS

// Telephony object
var tel = navigator.mozTelephony;

// Place a call
tel.dial("123456789").then(function(call) {
  call.id;
});

webTelephony

var sdcard = navigator.getDeviceStorage("sdcard");
var file   = new Blob(["This is a text file."], {type: "text/plain"});

var request = sdcard.addNamed(file, "my-file.txt");

request.onsuccess = function () {
  var name = this.result;
  console.log('File "' + name + '" successfully wrote on the sdcard storage area');
}

deviceStorage

webAPIs - standarization

navigator.getBattery().then(function(battery) {

  console.log("Battery level: " + battery.level * 100 + "%");

});

Battery Status API


window.navigator.vibrate(200);

Vibration API

geolocation API

navigator.geolocation.getCurrentPosition(function(position) {

  do_something(position.coords.latitude, position.coords.longitude);

});

window.addEventListener('load', function startup() {
// define safelyLaunchFTU
function safelyLaunchFTU() {
  ...
}

if (Applications.ready) {
  safelyLaunchFTU();
} else {
  ...
}

window.addEventListener('ftudone', function doneWithFTU() {
window.removeEventListener('ftudone', doneWithFTU);
var lock = window.navigator.mozSettings.createLock();
lock.set({
'gaia.system.checkForUpdates': true
});
}

System App - The Backbone

// With all important event handlers in place, we can now notify
// Gecko that we're ready for certain system services to send us
// messages (e.g. the radio).
var evt = new CustomEvent('mozContentEvent',
{ bubbles: true, cancelable: false,
detail: { type: 'system-message-listener-ready' } });
window.dispatchEvent(evt);
}

System App - The Backbone

<div id="utility-tray" data-z-index-level="utility-tray">
  <div id="notifications-container">
    ...
  </div>
</div>

Notification Bar

statusbar.js

utility_tray.js

The Browser app

Browser app - Initial iframe

The Browser API

function createIFrame (url) {
  var iframe = document.createElement('iframe');
  iframe.setAttribute('mozbrowser', true);
  iframe.setAttribute('mozallowfullscreen', true);
  iframe.setAttribute('remote', true);
 
  if (url) {
    iframe.src = url;
  }
 
  return iframe;
}

function Tab (url) {
  this.iframe = createIFrame(url);
  this.title = null;
  this.url = url;
 
  this.iframe.addEventListener('mozbrowserloadstart', this);
  this.iframe.addEventListener('mozbrowserlocationchange', this);
  this.iframe.addEventListener('mozbrowsertitlechange', this);
  this.iframe.addEventListener('mozbrowserloadend', this);
  this.iframe.addEventListener('mozbrowsererror', this);
};

Window Management

System App DOM

Status bar, Lock Screen, etc

Especial iframe

App

Window Management - Lifecycle

App launch
Append iframe to System DOM tree
Start App opening animation
App opened
App close animation
App closed
Remove iframe from DOM tree
App terminated

Window Management - App Window

Web app

Priviledged app

Internal/Certified app

Web app

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