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

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

For many web developers the world of hardware is very intimidating. There is no easy way to go back from a broken to a working project state. You break something, you replace it — there is no Ctrl/Cmd + z. However, getting a project to work is incredibly fun and rewarding. In this talk we'll be talking about different ways you can use your JavaScript knowledge to build your own hardware projects.

0722ad084c65f6177d80cf793cfbd013?s=128

Dominik Kundel

November 08, 2019
Tweet

Transcript

  1. When Porgs Scream at Webpack and other stories CascadiaJS -

    Dominik Kundel d-k.im/cascadia Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs
  2. How many of you have a microcontroller? Dominik Kundel |

    @dkundel | #cjs19 | #porgjs #coffeejs
  3. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Did

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

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

    JavaScript
  7. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs What

    about Hardware?
  8. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs The

    Destiny of Hardware
  9. Simple LED demos Dominik Kundel | @dkundel | #cjs19 |

    #porgjs #coffeejs
  10. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs It's

    not easy
  11. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Preparation

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

  13. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs No

    ⌘ + Z / Ctrl+Z
  14. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Rewarding

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

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

    ???
  17. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Three

    ways to combine JavaScript & Hardware
  18. 1. APIs & Protocols JavaScript 㱺 API 㱺 C/C++ 㱺

    Hardware Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs
  19. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs APIs

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

    #porgjs #coffeejs
  21. What is Particle? Dominik Kundel | @dkundel | #cjs19 |

    #porgjs #coffeejs ▶ IoT hardware manufacturer ▶ Device management platform ▶ Provides API to interact with deployed devices
  22. 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; }
  23. APIs & Protocols Option 2 MQTT Lightweight machine-to-machine publish/subscribe messaging

    protocol Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs
  24. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

  25. MQTT Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

    ▶ No need for IP address of a device ▶ Scales to multiple devices ▶ Cross-platform / cross-language
  26. 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(); });
  27. MQTT Example in C++ Dominik Kundel | @dkundel | #cjs19

    | #porgjs #coffeejs #include <SPI.h> #include <Ethernet.h> #include <PubSubClient.h> !// 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<length;i!++) { Serial.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(); }
  28. MQTT Subscribe Dominik Kundel | @dkundel | #cjs19 | #porgjs

    #coffeejs boolean rc = mqttClient.subscribe("myTopic");
  29. 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(); }
  30. 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);
  31. Example ▶ Twitch live lamp ▶ github.com/dkundel/twitch-live- lamp Dominik Kundel

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

    | @dkundel | #cjs19 | #porgjs #coffeejs
  33. Pros ▶ Lightweight, intuitive ways to communicate between devices ▶

    Move heavy business logic off devices ▶ Programming language independent Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs
  34. Cons ▶ Still have to write C++ code for the

    hardware ▶ Need to deploy/use a message broker Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs
  35. 2. Tethered Nodebots Node.js 㱺 Hardware Dominik Kundel | @dkundel

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

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

    johnny-five.io
  38. 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
  39. 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 }
  40. 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); });
  41. 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); } }
  42. 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(); }); });
  43. Example #porgjs Building your own custom peripheral Dominik Kundel |

    @dkundel | #cjs19 | #porgjs #coffeejs
  44. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Build

    a custom peripheral device that reacts on events on your computer Goal of #porgjs
  45. 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!
  46. Warning! You might see the insides of a (toy) porg

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

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

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

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

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

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

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

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

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

  56. Wireup ▶ Arduino ▶ Optocoupler (4N35) ▶ Resistor ▶ Green

    LED ▶ Cables Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs
  57. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

  58. Demo npm install porgjs github.com/dkundel/porgjs Dominik Kundel | @dkundel |

    #cjs19 | #porgjs #coffeejs
  59. 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
  60. Cons ▶ Often tethered to a "host" ▶ Less examples

    than classic Arduino projects Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs
  61. 3. "Untethered" Nodebots JavaScript ⚭ Microcontroller Dominik Kundel | @dkundel

    | #cjs19 | #porgjs #coffeejs
  62. JerryScript Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

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

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

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

    Espruino is a JavaScript interpreter for microcontrollers www.espruino.com
  66. 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
  67. Neonious Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

    A microcontroller board programmable and debuggable out of the box www.neonious.com
  68. 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
  69. Tessel Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs

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

    Tessel 2 is a robust IoT and robotics development platform tessel.io
  71. 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
  72. Example #coffeejs JavaScript meets Coffee Machine Dominik Kundel | @dkundel

    | #cjs19 | #porgjs #coffeejs
  73. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Control

    an existing device programmatically Goal of #coffeejs Build a REST API implementing IETF RFC 2324
  74. 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
  75. 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
  76. 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
  77. Hacking It! Dominik Kundel | @dkundel | #cjs19 | #porgjs

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

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

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

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

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

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

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

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

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

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

  88. How I hacked a coffee machine using JavaScript bit.ly/coffee-js github.com/dkundel/htcpcp-delonghi

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

    ▶ Less flexible on hardware choices ▶ Missing cutting edge language features ▶ Some docs better than others
  91. How to get started? Dominik Kundel | @dkundel | #cjs19

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

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

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

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

    #coffeejs
  96. 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
  97. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Johnny-Five

    Inventor's Kit Available on Sparkfun
  98. Dominik Kundel | @dkundel | #cjs19 | #porgjs #coffeejs Grove

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

    Arduino Starter Kit Elegoo UNO Starter Kit
  100. 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
  101. console.log(` Thank You! `); dkundel.com @dkundel dkundel@twilio.com github/dkundel d-k.im/cascadia Dominik

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