CascadiaJS '19 - When Porgs Scream at Webpack and Other Stories

When Porgs Scream
at Webpack and
other stories
CascadiaJS - Dominik Kundel
d-k.im/cascadia
Dominik Kundel | @dkundel | #cjs19 | #porgjs #coﬀeejs

View Slide

How many of you have a
microcontroller?

View Slide

Did you use it?

View Slide


View Slide

Dominik Kundel | @dkundel | #cjs19 |
console.log(`
Hi! I’m Dominik Kundel
`);
dkundel.com
@dkundel
[email protected]
github/dkundel
Developer Evangelist
!&& JavaScript Hacker
#porgjs #coﬀeejs

View Slide

I JavaScript

View Slide

What about Hardware?

View Slide

The Destiny of Hardware

View Slide

Simple LED demos

View Slide

It's not easy

View Slide

Preparation

View Slide

Costly

View Slide

No ⌘ + Z / Ctrl+Z

View Slide

Rewarding

View Slide

C/C++

View Slide

C/C++ ???

View Slide

Three ways to combine
JavaScript & Hardware

View Slide

1. APIs & Protocols
JavaScript 㱺 API 㱺 C/C++ 㱺 Hardware

View Slide

APIs & Protocols Option 1
Dedicated APIs
For example Particle Cloud API

View Slide

Particle Cloud API

View Slide

What is Particle?
▶ IoT hardware manufacturer
▶ Device management platform
▶ Provides API to interact with
deployed devices

View Slide

Particle Cloud API Example
curl https:!//api.particle.io/v1/devices/0123456789abcdef/brew \
-d access_token=123412341234 \
-d "args=coffee"
void setup()
{
!// register the cloud function
Particle.function("brew", brewCoffee);
}
int brewCoffee(String command)
{
if(command !== "coffee")
{
return 1;
}
else return -1;
}

View Slide

APIs & Protocols Option 2
MQTT
Lightweight machine-to-machine publish/subscribe messaging protocol

View Slide


View Slide

MQTT
▶ No need for IP address of a
device
▶ Scales to multiple devices
▶ Cross-platform / cross-language

View Slide

MQTT Example in JS
var mqtt = require('mqtt');
var client = mqtt.connect('mqtt:!//test.mqttbroker.example');
client.on('connect', function() {
client.subscribe('presence');
client.publish('presence', 'Hello mqtt');
});
client.on('message', function(topic, message) {
!// message is Buffer
console.log(message.toString());
client.end();
});

View Slide

MQTT Example in C++
#include
#include
#include
!// Update these with values suitable for your network.
byte mac[] = { 0xDE, 0xED, 0xBA, 0xFE, 0xFE, 0xED };
IPAddress ip(172, 16, 0, 100);
IPAddress server(172, 16, 0, 2);
void callback(char* topic, byte* payload, unsigned int length) {
Serial.print("Message arrived [");
Serial.print(topic);
Serial.print("] ");
for (int i=0;iSerial.print((char)payload[i]);
}
Serial.println();
}
EthernetClient ethClient;
PubSubClient mqttClient(ethClient);
void reconnect() {
!// Loop until we're reconnected
while (!mqttClient.connected()) {
Serial.print("Attempting MQTT connection!!...");
!// Attempt to connect
if (mqttClient.connect("arduinoClient")) {
Serial.println("connected");
!// Once connected, publish an announcement!!...
mqttClient.publish("outTopic","hello world");
!// !!... and resubscribe
mqttClient.subscribe("inTopic");
} else {
Serial.print("failed, rc=");
Serial.print(client.state());
Serial.println(" try again in 5 seconds");
!// Wait 5 seconds before retrying
delay(5000);
}
}
}
void setup()
{
Serial.begin(57600);
mqttClient.setServer(server, 1883);
mqttClient.setCallback(callback);
Ethernet.begin(mac, ip);
!// Allow the hardware to sort itself out
delay(1500);
}
void loop()
{
if (!mqttClient.connected()) {
reconnect();
}
mqttClient.loop();
}

View Slide

MQTT Subscribe
boolean rc = mqttClient.subscribe("myTopic");

View Slide

MQTT Setup
void setup()
{
Ethernet.begin(mac, ip);
!// Allow the hardware to sort itself out
delay(1500);
mqttClient.setServer(server, 1883);
if (mqttClient.connect("myClientID")) {
!// connection succeeded
}
}
void loop()
{
mqttClient.loop();
}

View Slide

MQTT Callback
void callback(char* topic, byte* payload, unsigned int length) {
!// Allocate the correct amount of memory for the payload copy
byte* p = (byte*)malloc(length);
!// Copy the payload to the new buffer
memcpy(p,payload,length);
!// Republish the received message
mqttClient.publish("outTopic", p, length);
!// Free the memory
free(p);
}
mqttClient.setCallback(callback);

View Slide

Example
▶ Twitch live lamp
▶ github.com/dkundel/twitch-live-
lamp

View Slide

Pros
▶ Lightweight, intuitive ways to
communicate between devices
▶ Move heavy business logic oﬀ
devices
▶ Programming language
independent

View Slide

Cons
▶ Still have to write C++ code for
the hardware
▶ Need to deploy/use a message
broker

View Slide

2. Tethered Nodebots
Node.js 㱺 Hardware

View Slide

serialport
serialport.io

View Slide

johnny-five
johnny-ﬁve.io

View Slide

johnny-five
▶ Talk to microcontrollers from
Node.js
▶ Use a familiar syntax
▶ Leverage the npm ecosystem
▶ Often tethered to a host machine

View Slide

Blink on an Arduino with C++
!// the setup function runs once when you press reset or power the board
void setup() {
!// initialize digital pin LED_BUILTIN as an output.
pinMode(LED_BUILTIN, OUTPUT);
}
!// the loop function runs over and over again forever
void loop() {
digitalWrite(LED_BUILTIN, HIGH); !// turn the LED on (HIGH is the voltage level)
delay(1000); !// wait for a second
digitalWrite(LED_BUILTIN, LOW); !// turn the LED off by making the voltage LOW
delay(1000); !// wait for a second
}

View Slide

Blink on an Arduino with J5
var five = require('johnny-five');
var board = new five.Board();
board.on('ready', function() {
var led = new five.Led(13);
led.blink(500);
});

View Slide

Button with C++
const int buttonPin = 2; !// the number of the pushbutton pin
const int ledPin = 13; !// the number of the LED pin
int buttonState = 0; !// variable for reading the pushbutton status
void setup() {
!// initialize the LED pin as an output:
pinMode(ledPin, OUTPUT);
!// initialize the pushbutton pin as an input:
pinMode(buttonPin, INPUT);
}
void loop() {
!// read the state of the pushbutton value:
buttonState = digitalRead(buttonPin);
!// check if the pushbutton is pressed. If it is, the buttonState is HIGH:
if (buttonState !== HIGH) {
!// turn LED on:
digitalWrite(ledPin, HIGH);
} else {
!// turn LED off:
digitalWrite(ledPin, LOW);
}
}

View Slide

Button with Johnny-Five
var five = require('johnny-five');
var board = new five.Board();
board.on('ready', function() {
var led = new five.Led(13);
var button = new five.Button(2);
button.on('press', () !=> {
led.on();
});
button.on('release', () !=> {
led.off();
});
});

View Slide

Example #porgjs
Building your own
custom peripheral

View Slide

Build a custom peripheral device that reacts on events on your computer
Goal of #porgjs

View Slide

Build a custom peripheral device that reacts on events on your computer
Goal of #porgjs
Hack a porg toy to scream whenever your build fails!

View Slide

Warning!
You might see the insides of a (toy) porg

View Slide


View Slide

Wireup
▶ Arduino
▶ Optocoupler (4N35)
▶ Resistor
▶ Green LED
▶ Cables

View Slide


View Slide

Demo
npm install porgjs
github.com/dkundel/porgjs

View Slide

Pros
▶ Hardware independent code with
J5
▶ Use familiar tools
▶ Bring your own editor/IDE
▶ Use the npm ecosystem
▶ Great website for beginners

View Slide

Cons
▶ Often tethered to a "host"
▶ Less examples than classic
Arduino projects

View Slide

3. "Untethered" Nodebots
JavaScript ⚭ Microcontroller

View Slide

JerryScript
Ultra-lightweight JavaScript engine
for the internet of things
jerryscript.net
Runtime: Samsung's IoT.js

View Slide

JerryScript
▶ Lightweight
▶ Small memory footprint
▶ Not every JavaScript feature
might be available
▶ Not very beginner friendly

View Slide

Espruino
Espruino is a JavaScript interpreter
for microcontrollers
www.espruino.com

View Slide

Esprunio
▶ Can run on ESP8266
▶ Has its own hardware versions
as well
▶ Open Source Code & Hardware
▶ Comes with its own IDE
▶ Limited npm support
▶ Does not work with Johnny-Five

View Slide

Neonious
A microcontroller board
programmable and debuggable out
of the box
www.neonious.com

View Slide

Neonious
▶ Has its own hardware. Can run
on ESP32 though
▶ Comes with its own IDE
▶ Supports TypeScript out of the
box
▶ Same API interface as Node.js
▶ Built-in Ethernet & WiFi

View Slide

Tessel
Tessel 2 is a robust IoT and robotics
development platform
tessel.io

View Slide

Tessel
▶ Run Node.js with (almost) the
entire npm ecosystem
▶ Compatible with J5
▶ Use your favorite toolchain &
editor
▶ Open Source Code & Hardware
▶ Tessel 2 is fairly expensive

View Slide

Example #coﬀeejs
JavaScript
meets
Coﬀee Machine

View Slide

Control an existing device programmatically
Goal of #coﬀeejs
Build a REST API implementing IETF RFC 2324

View Slide

Goal of #coﬀeejs
Build a REST API implementing HTCPCP

View Slide

Goal of #coﬀeejs
Build a REST API implementing HTCPCP
Build a REST API implementing Hyper Text Coﬀee Pot Control Protocol
www.ietf.org/rfc/rfc2324.txt

View Slide

Why Tessel?
▶ The coﬀee machine should work
untethered
▶ Use johnny-ﬁve to easily swap
microcontrollers
▶ It has to be internet connected
▶ Quick setup / easy development
▶ We need to build a server. npm
packages help

View Slide

Hacking It!

View Slide


View Slide

How I hacked a coﬀee
machine using JavaScript
bit.ly/coﬀee-js
github.com/dkundel/htcpcp-delonghi

View Slide

Pros
▶ Untethered systems running
JavaScript
▶ Familiar programming language
▶ Use familiar tools
▶ Bring your own Editor/IDE
▶ (Potentially) use the npm
ecosystem

View Slide

Cons
▶ Less ﬂexible on hardware
choices
▶ Missing cutting edge language
features
▶ Some docs better than others

View Slide

How to get started?

View Slide

Finding a project

View Slide

Use case driven learning

View Slide

Hack existing projects

View Slide

Electronics basics

View Slide

Useful things
▶ A digital multimeter (Volt, Amps,
Ohm)
▶ A breadboard
▶ Plenty of jumper wires
▶ A set of resistors
▶ A few LEDs
▶ A few Solid State Relays to
emulate switches/buttons

View Slide

Johnny-Five
Inventor's Kit
Available on Sparkfun

View Slide

Grove Starter Kit for
Arduino
Available at Seeed Studio

View Slide

Generic Arduino
Starter Kit
Elegoo UNO Starter Kit

View Slide

Resources
▶ d-k.im/cascadia
▶ bit.ly/coﬀeejs
▶ d-k.im/nodebots
▶ nodebots.io
▶ johnny-ﬁve.io
▶ tessel.io

View Slide

console.log(`
Thank You!
`);
dkundel.com
@dkundel
[email protected]
github/dkundel
d-k.im/cascadia

View Slide

CascadiaJS '19 - When Porgs Scream at Webpack and Other Stories

CascadiaJS '19 - When Porgs Scream at Webpack and Other Stories

Dominik Kundel

More Decks by Dominik Kundel

Other Decks in Programming

Featured

Transcript