Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

How many of you have a microcontroller? Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 3

Slide 3 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Did you use it?

Slide 4

Slide 4 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 5

Slide 5 text

Dominik Kundel | @dkundel | #cjs19 | console.log(` Hi! I’m Dominik Kundel `); dkundel.com @dkundel dkundel@twilio.com github/dkundel Developer Evangelist !&& JavaScript Hacker #porgjs #coffeejs

Slide 6

Slide 6 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs I JavaScript

Slide 7

Slide 7 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs What about Hardware?

Slide 8

Slide 8 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs The Destiny of Hardware

Slide 9

Slide 9 text

Simple LED demos Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 10

Slide 10 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs It's not easy

Slide 11

Slide 11 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Preparation

Slide 12

Slide 12 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Costly

Slide 13

Slide 13 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs No ⌘ + Z / Ctrl+Z

Slide 14

Slide 14 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Rewarding

Slide 15

Slide 15 text

C/C++ Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 16

Slide 16 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs C/C++ ???

Slide 17

Slide 17 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Three ways to combine JavaScript & Hardware

Slide 18

Slide 18 text

1. APIs & Protocols JavaScript 㱺 API 㱺 C/C++ 㱺 Hardware Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 19

Slide 19 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs APIs & Protocols Option 1 Dedicated APIs For example Particle Cloud API

Slide 20

Slide 20 text

Particle Cloud API Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 21

Slide 21 text

What is Particle? Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs ▶ IoT hardware manufacturer ▶ Device management platform ▶ Provides API to interact with deployed devices

Slide 22

Slide 22 text

Particle Cloud API Example Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs 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; }

Slide 23

Slide 23 text

APIs & Protocols Option 2 MQTT Lightweight machine-to-machine publish/subscribe messaging protocol Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 24

Slide 24 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 25

Slide 25 text

MQTT Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs ▶ No need for IP address of a device ▶ Scales to multiple devices ▶ Cross-platform / cross-language

Slide 26

Slide 26 text

MQTT Example in JS Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs 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(); });

Slide 27

Slide 27 text

MQTT Example in C++ Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs #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;i

Slide 28

Slide 28 text

MQTT Subscribe Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs boolean rc = mqttClient.subscribe("myTopic");

Slide 29

Slide 29 text

MQTT Setup Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs 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(); }

Slide 30

Slide 30 text

MQTT Callback Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs 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);

Slide 31

Slide 31 text

Example ▶ Twitch live lamp ▶ github.com/dkundel/twitch-live- lamp Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 32

Slide 32 text

Example ▶ Twitch live lamp ▶ github.com/dkundel/twitch-live- lamp Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 33

Slide 33 text

Pros ▶ Lightweight, intuitive ways to communicate between devices ▶ Move heavy business logic off devices ▶ Programming language independent Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 34

Slide 34 text

Cons ▶ Still have to write C++ code for the hardware ▶ Need to deploy/use a message broker Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 35

Slide 35 text

2. Tethered Nodebots Node.js 㱺 Hardware Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 36

Slide 36 text

serialport serialport.io Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 37

Slide 37 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs johnny-five johnny-five.io

Slide 38

Slide 38 text

johnny-five ▶ Talk to microcontrollers from Node.js ▶ Use a familiar syntax ▶ Leverage the npm ecosystem ▶ Often tethered to a host machine Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 39

Slide 39 text

Blink on an Arduino with C++ Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs !// 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 }

Slide 40

Slide 40 text

Blink on an Arduino with J5 Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs var five = require('johnny-five'); var board = new five.Board(); board.on('ready', function() { var led = new five.Led(13); led.blink(500); });

Slide 41

Slide 41 text

Button with C++ Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs 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); } }

Slide 42

Slide 42 text

Button with Johnny-Five Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs 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(); }); });

Slide 43

Slide 43 text

Example #porgjs Building your own custom peripheral Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 44

Slide 44 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Build a custom peripheral device that reacts on events on your computer Goal of #porgjs

Slide 45

Slide 45 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs 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!

Slide 46

Slide 46 text

Warning! You might see the insides of a (toy) porg Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 47

Slide 47 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 48

Slide 48 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 49

Slide 49 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 50

Slide 50 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 51

Slide 51 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 52

Slide 52 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 53

Slide 53 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 54

Slide 54 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 55

Slide 55 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 56

Slide 56 text

Wireup ▶ Arduino ▶ Optocoupler (4N35) ▶ Resistor ▶ Green LED ▶ Cables Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 57

Slide 57 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 58

Slide 58 text

Demo npm install porgjs github.com/dkundel/porgjs Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 59

Slide 59 text

Pros ▶ Hardware independent code with J5 ▶ Use familiar tools ▶ Bring your own editor/IDE ▶ Use the npm ecosystem ▶ Great website for beginners Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 60

Slide 60 text

Cons ▶ Often tethered to a "host" ▶ Less examples than classic Arduino projects Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 61

Slide 61 text

3. "Untethered" Nodebots JavaScript ⚭ Microcontroller Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 62

Slide 62 text

JerryScript Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Ultra-lightweight JavaScript engine for the internet of things jerryscript.net Runtime: Samsung's IoT.js

Slide 63

Slide 63 text

JerryScript Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs ▶ Lightweight ▶ Small memory footprint ▶ Not every JavaScript feature might be available ▶ Not very beginner friendly

Slide 64

Slide 64 text

Espruino Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Espruino is a JavaScript interpreter for microcontrollers www.espruino.com

Slide 65

Slide 65 text

Espruino Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Espruino is a JavaScript interpreter for microcontrollers www.espruino.com

Slide 66

Slide 66 text

Esprunio Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs ▶ 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

Slide 67

Slide 67 text

Neonious Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs A microcontroller board programmable and debuggable out of the box www.neonious.com

Slide 68

Slide 68 text

Neonious Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs ▶ 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

Slide 69

Slide 69 text

Tessel Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Tessel 2 is a robust IoT and robotics development platform tessel.io

Slide 70

Slide 70 text

Tessel Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Tessel 2 is a robust IoT and robotics development platform tessel.io

Slide 71

Slide 71 text

Tessel Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs ▶ 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

Slide 72

Slide 72 text

Example #coffeejs JavaScript meets Coffee Machine Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 73

Slide 73 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Control an existing device programmatically Goal of #coffeejs Build a REST API implementing IETF RFC 2324

Slide 74

Slide 74 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Control an existing device programmatically Goal of #coffeejs Build a REST API implementing IETF RFC 2324 Build a REST API implementing HTCPCP

Slide 75

Slide 75 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Control an existing device programmatically Goal of #coffeejs Build a REST API implementing IETF RFC 2324 Build a REST API implementing HTCPCP Build a REST API implementing Hyper Text Coffee Pot Control Protocol www.ietf.org/rfc/rfc2324.txt

Slide 76

Slide 76 text

Why Tessel? Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs ▶ The coffee machine should work untethered ▶ Use johnny-five to easily swap microcontrollers ▶ It has to be internet connected ▶ Quick setup / easy development ▶ We need to build a server. npm packages help

Slide 77

Slide 77 text

Hacking It! Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 78

Slide 78 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 79

Slide 79 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 80

Slide 80 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 81

Slide 81 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 82

Slide 82 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 83

Slide 83 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 84

Slide 84 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 85

Slide 85 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 86

Slide 86 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 87

Slide 87 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 88

Slide 88 text

How I hacked a coffee machine using JavaScript bit.ly/coffee-js github.com/dkundel/htcpcp-delonghi Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 89

Slide 89 text

Pros Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs ▶ Untethered systems running JavaScript ▶ Familiar programming language ▶ Use familiar tools ▶ Bring your own Editor/IDE ▶ (Potentially) use the npm ecosystem

Slide 90

Slide 90 text

Cons Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs ▶ Less flexible on hardware choices ▶ Missing cutting edge language features ▶ Some docs better than others

Slide 91

Slide 91 text

How to get started? Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 92

Slide 92 text

Finding a project Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 93

Slide 93 text

Use case driven learning Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 94

Slide 94 text

Hack existing projects Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 95

Slide 95 text

Electronics basics Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 96

Slide 96 text

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 Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

Slide 97

Slide 97 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Johnny-Five Inventor's Kit Available on Sparkfun

Slide 98

Slide 98 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Grove Starter Kit for Arduino Available at Seeed Studio

Slide 99

Slide 99 text

Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Generic Arduino Starter Kit Elegoo UNO Starter Kit

Slide 100

Slide 100 text

Resources Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs ▶ d-k.im/cascadia ▶ bit.ly/coffeejs ▶ d-k.im/nodebots ▶ nodebots.io ▶ johnny-five.io ▶ tessel.io

Slide 101

Slide 101 text

console.log(` Thank You! `); dkundel.com @dkundel dkundel@twilio.com github/dkundel d-k.im/cascadia Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs