"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

WebAPI

WebAPI

WebAPI

WebAPI

webAPIs

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

Especial iframe

Especial iframe

App

App

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

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"
}
  • Vibration API
  • Screen Orientation
  • Geolocation API
  • Battery Status API
  • Alarm API
  • Push notifications API
  • Ambient Light Sensor
  • Proximity Sensor

Priviledged app

  • TCP Socket API
  • Device Storage API
  • Contacts API
  • Browser API
  • System XHR (non-same origin XMLHttpRequests)

manifest.webapp

main.js

Other resources

Internal/Certified app

  • webSMS
  • Settings API
  • Power Management API
  • Mobile Connection API
  • Wifi Information API
  • Web Bluetooth
  • Time/Clock API
  • Network Stats

manifest.webapp

main.js

Other resources

Firefox OS in the Future

Experimental New Version of Firefox OS

What now?

Download the source code

https://github.com/mozilla-b2g/gaia

What now?

Ask Questions

irc://irc.mozilla.org/gaia

Questions?

rasaladrigas@gmail.com

@sajirkun

FSF 2015

By sajirdalas

FSF 2015

  • 1,314