Phoenix JavaScript

Luis Montes

@MONTESLU

LOVE

Arduino

C/C++

Mobile Apps!

198830 reasons why

but I still need native apps

For Gaming!

Unreal Engine 4

but I still need native apps

For the Camera!

Web RTC

Camera and Mic

navigator.getUserMedia(constraints, successCallback, errorCallback);

function success(stream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(stream);
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
}

RTC Peer Connections

Peer to Peer Data Channel

How about:

• GPS data
• Accelerometers
• High performance Audio

Yup:

navigator.geolocation.getCurrentPosition(myCallback);

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

var myContext = new AudioContext();

IoT WtF?

Web 2.0

Connecting 50 Billion devices...

Transports:

• AJAX
• WebSockets
• MQTT
• COAP
• Many others

IoT platforms:

• Octoblu (Skynet)
• Amazon AWS IoT
• IBM Bluemix
• Many others

JavaScript and Hardware

In the beginning...

node serialport

Arduino

+

Firmata

Johnny-Five

var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {

  var led = new five.Led(13);

  // "blink" the led in 500ms on-off phase periods
  led.blink(500);
});

Hardware APIs

Other Boards:

• Raspberry Pi
• Beagle Bone
• Intel Edison/Galileo
• LightBlue Bean
• Tessel 2
• Particle Photon
• many others...

Node-Red

Chromebots

The Web is getting closer...

but the web couldn't possibly :

BLE Devices:

• Advertising packet
• Services
• Characterisics
• Descriptors

Node.js:

Browser behind a flag:

navigator.bluetooth;

Acting like an app.

manifest.json

<link rel="manifest" href="/manifest.json">

{
  "short_name": "Luis's Amaze App",
  "name": "Luis's magic unicorn app.",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    ...
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

Work offline

HTTPS Only

Service Worker

Register ServiceWorker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('myServiceWorker.js')
  .then(function(reg) {
    console.log('Yey serivceworker!', reg);

  }).catch(function(err) {
    console.log('Boo no serviceWorker!', err);
  });
}

myServiceWorker.js

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('static-v1')
    .then(function(cache) {
      return cache.addAll([
        '/',
        '/myScript.js',
        '/css/styles.css',
        new Request('//storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css', {mode: 'no-cors'})
      ]);
    })
  );
});

handling fetches

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

debugging:

Cloud Messaging

update manifest

"gcm_sender_id": "123456789012",
"gcm_user_visible_only": true

update client registraion

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('myServiceWorker.js')
  .then(function(registration) {
		return registration.pushManager.subscribe({userVisibleOnly: true});
  })
  .then(function(subscription){
		isPushEnabled = true;
		sendSubscriptionToServer(subscription);
	});
}

push event in ServiceWorker

self.addEventListener('push', function(event) {
  var title = 'Yay a message.';
  var body = 'We have received a push message.';
  var icon = '/images/icon-192x192.png';
  var tag = 'simple-push-demo-notification-tag';

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag
    })
  );
});

Messaging Demo

Bridging Communication

• A page can postMessage() to the ServiceWorker
• The ServiceWorker can message its page
• Another client or IoT cloud can post to the ServiceWorker

Browser-based IoT

I just like this picture, ok?

Thank You!

Luis Montes

@MONTESLU