 So welcome everyone to When Pork Scream at Webpack and other stories. I want to start with a question. How many of you have some sort of microcontroller at home or like a Raspberry Pi, Arduino, anything like that? Now keep your hand up if you ever actually used it for anything but a blinking LED. All right, that's a few people, but not too many. And so over the next 30 minutes, I want to use the time to, on the one hand, hopefully inspire you to use the hardware you have at home or get some if you don't. And also give you an idea of how you can approach this. Before we start, I want to introduce myself. My name is Dominic. I work as a developer evangelist at Twilio. How many of you have heard of Twilio? All right, cool. That means like most people stop by the booth. If you don't know about Twilio, we're a developer platform that gives you APIs to send and receive SMS, include phone calls, email, any kind of communication into your apps. And I'm a JavaScript developer. I love writing JavaScript for things like from everything from servers to browsers to building CLIs with it. And so at one point, I was thinking, how can I use the same skills that I have and actually control hardware with it? Because similar to a lot of you, I had a lot of hardware at home that was just gathering dust in a drawer. And so or at most was used for an LED demo. And I wanted to go further than this, more than like go into the manufacturer's website, copy paste some code and be like, cool, that worked. I'll do something at one point with it. But I don't know as much, at least for me, I always thought of like hardware hacking as being not as easy as say like just hacking together a new website because there's a lot of things that kind of play into it. One of the things is preparation. Like if I wanna build a new website, like I can just grab everything from the internet, I'm good. But for hardware hacking, you often need the right components and then you also need to buy them. So it's gonna be often definitely more costly than all the free tiers that a lot of cloud hosts these days have. The thing that scared me the most though is the fact that there's no command Z or control Z. There's no git revert. If you screw something up, you screw something up. I was at a hackathon where someone burned through all of their resistors at 2 a.m. And at that point, they had to stop because there's no shop open at 2 a.m. that can sell you some resistors. But I also found that even though it's very difficult to get started with, it can be incredibly rewarding. These days, especially with things like hot module reloading and stuff like that, I feel like we grew a bit numb to successes of the code that we're writing. Like I'm writing some code. I'm like going into the browser and already executed. And so being able to interact with the physical world and writing some code, running it, and then seeing it actually do something, at least for me is incredibly rewarding. However, one of the things that always got me stuck is this IDE. If you ever tried to do anything with hardware, it's likely that you interacted with the Arduino IDE. I don't have a problem with it per se. It's just the fact that most of it is written in CC++ and I don't really remember most CC++ from university. And so I would just look there and have no idea what's happening. So I wanna show you three ways that you can combine your existing JavaScript skills with hardware. And the first one is through APIs and protocols. So at that point, basically what's happening is all your major business logic is in JavaScript. And then you use APIs to interact with the hardware by interfacing with a very simple piece of code in CC++ that will just interact with the components and then send the data back via the same protocol. One way to do this is through dedicated APIs. So some providers like Particle actually provide you with an API that they have. If you're not familiar with Particle, they're an IoT hardware manufacturer that focuses on having a device management platform. So meaning if you have your devices all deployed, you can still have remote update them and you can control them using their API. So the way that would work is like the bottom part is CC++ code where you would define a function like brew and then it can get some arguments and then you trigger a certain function. And then you trigger it using an HTTP call. So via a curl or JavaScript or whatever programming language you want. And that means that you can have like very, very simple hardware component interactions on the CC++ side that often are like sufficient enough to just copy paste. And then you can have all your business logic and everything in a language that you're familiar with in the cloud. The Particle API is proprietary for their stuff but there is another way to do this in a very similar way that's called MQTT which is a lightweight machine to machine protocol. And it works on publishing and subscribing. So basically as you can subscribe to certain topics which are basically channels on a message broker and then any kind of device can publish to that message broker an event and everyone who subscribed to that type of event will then be notified about it. The nice thing is that that means that you do not need to know the IP address of every single device. You only need to have some way to identify the message broker. So as long as you have a URL for that you don't can have as many devices as you want that can just talk to that message broker. And that means it scales really well to multiple devices. And because it's a protocol it's cross platform and it's cross language meaning you can use it in any language that you feel comfortable with. So for example there's an MQTT library in fact there's multiple ones but there is one is literally just called MQTT so I picked that one that has all you have to do is you connect to your MQTT broker and once you're connected you can subscribe to topics you can publish to topics and then you get an event handler that is being triggered whenever there is a new message on that topic. And then we can do things with it like logging it. You can do the same thing in C++ just looks a bit longer. But ultimately it's the same thing. You subscribe to topics when you set up your code you connect to a server and then the only difference is you have to call this loop function on a regular basis which on Arduino some stuff it's gonna do it automatically for you as long as you put into this global loop function. And then whenever something comes in you actually get a callback trigger that you can do stuff with. Again the only difference is you need to handle memory dealing with memory but ultimately it's very much the same thing. And so I used that approach to build what I call the Twitch life lamp. When I lived in Berlin my flatmate was streaming regularly on Twitch and I wanted to be aware of when he's online so I'm not bothering him when I'm coming home and stuff. And so I built this little lamp that basically started glowing and pulsing whenever he was online and the way that worked was basically I had a small JavaScript code running in the cloud that regularly checked if he was online or offline and as soon as that changed it would emit an event to the MQTT message broker. And then I had literally just a few lines that I copy pasted from like two blog posts together. One was about controlling that LED matrix that I had flying around from a previous event. And one was how to read from an MQTT broker. And then based on these two I just stitched them together and uploaded them on what is called an ESPA 266 which is a $2 microcontroller, super cheap to get, has Wi-Fi on it so it's super convenient. You can order them in bulk on Alibaba if you want to. And the nice thing about it is it's a very lightweight intuitive way to communicate between devices. And it allows you to kind of like move all the heavy business logic away from having to write that in C++. You can use it in JavaScript, you can reuse that code easily, you can rely on your NPM ecosystem. And it's programming language independent so you don't even have to use Node if you want to use like a different backend like .NET or something, you can do that. Con, you still have to write some C++ and if you're using MQTT you either need to deploy or use like cloud message broker. So the next version of this is Tethered Notebot. So basically what I mean with that is you have some Node.js running on a computer that can run Node.js and then it's controlling hardware directly that is connected to your laptop. And that's possible through a library called SerialPort that ultimately is the foundation for another library called Johnny5. And Johnny5 allows you to talk to microcontrollers using Node.js. Using a familiar syntax that we'll see in a second and it allows you to leverage the entire NPM ecosystem because it's running on a machine with actual Node.js. But you have to often have it tethered to a host machine because if you have an Arduino for example that cannot run Node.js, you have to have a machine connected to it that can run Node.js. If you're using something like a Raspberry Pi or a Tesla that I'll talk about later, on those ones you can actually just run Johnny5 directly on it and don't have to have anything tethered but if you're using an Arduino like the demo I'm gonna show you, you will have to have a tethered. So the reason why I think this is a great solution is this is an example of a blinking demo in C++. And I think JavaScript is a natural fit for hardware because a lot of the things we do are event driven. And so one, this is the same example of like doing a blink in Johnny5. So we're initializing a board instance and then we create an LED, sorry for the type with the capital C there. But then we create this LED and we tell it to blink. But the power comes really when it's event driven. So this is the code for a button but really all it does is it in a loop, it regularly checks if a button is being pressed and if so we'll turn the LED on and if it's not pressed we'll turn the LED off. The same thing in Johnny5 looks like this. We have an event ready handler and then we create a new button instance and there we have a press event and a release event and then we just call on or off on the LED. And so I think that's much more readable at least for me and much more intuitive. And so this gets me to the port part of this. So basically the idea here was to build my own custom peripheral. Largely because I had a debate with a colleague who was like what's the point of like having to connect your like an Arduino to your laptop permanently if you like why would you do that in the first place? And so my argument was like well you could build like custom peripheral that like works for your use case. So in my case I wanted to have something that react on the events on my computer or more precisely I wanted to hack a pork toy that screams whenever my build fails. And so warning you will see the insights of a toy pork so it should be fine. But this is the little fellow that I ordered of Amazon. It's just like a Disney toy that had one characteristic which made me buy it which was it can already yell at you and waddle around by pushing its belly. It has like a button there. So what I did is I removed the first screws that I could find which were at the battery compartment and then loosened the fur that was around it so I was able to like remove that and remove it further. And then ultimately I got into the insights of a pork which I expected to be more interesting. But then continued to take it apart. Ultimately it came down to this chip which is basically the entire brain of the pork toy. And one thing that is in the bottom is where you see the S1. That's where the switch was. Basically whenever you press the belly basically that was what was executed. And so what I did is I kind of followed the lines and I soldered in a really horrible job two cables on either end of that switch because the idea was like if I can bridge this switch then I can trigger it programmatically. And then I had this one chip like basically I created this wiring which uses a chip called the optocoupler which is basically like a way for me to trigger a switch programmatically. So this was the wire up. I put an LED in because I think LEDs are sort of the console log of hardware hacking. So it's a good way for me to figure out if stuff is working. And so really then I just have this four and three five which is the optocoupler which will then trigger the button press. I kind of tore the wires back through the fur and like wrapped everything back up and then had this part ready to code. And so I created this library called porkjs and I figured I'm gonna rather show you than keep talking about it. So I'm gonna jump out of my slides. And so I have a basic web app here that uses webpack right now to compile. And so if I open this, now where did my terminal go? There we go. And run webpack right now. It builds cool. So I brought my little friend here. I'm gonna hold him up largely so that it's part of the recording as well. But if you wanna see him more later, I can do that as well. So basically what I did is I created this CLI that can execute any arbitrary command. And if it fails, it will start yelling. If it succeeds, it won't. So if I run it right now, nothing will happen because it worked. But if I screw up any of the imports, for example, and then execute this again, I'm gonna hold him here. You'll see him yelling and waddling around. See, all right. Typically he screams once more, let's see. I don't know why they, there we go. Cool, all right. He's your calm down now, so you might talk. All right, there we go, see. All right, so, but the nice thing is the code for this is actually very easy. Like I'm doing a couple of things to check if a command failed or succeeded. But ultimately, all it comes down to is I have a board and I have a pin and I'm using the Johnny 5 library for that. And then one thing that I'll need is a quick helper function here. Probably my most written function. And I know there is NPM modules for this. Cool, and then basically what we do is we create a new board instance. And because I'm using an Arduino, by default I don't need to pass anything in here. But if I would want to use a different board, there's a bunch of plugins that you can use to communicate to different boards using Johnny 5. And then when the board is ready, what I'll do is I'll need an async function here. I'll create a new pin instance. And what I wanna do is I wanna specify that this is on pin four, that's where I connected my optocoupler to. And I need to set the mode to pin dot output. And then all we have to do is we have to set the pin to high and because I'm simulating a button press, you never press any button within like one millisecond. So we're gonna sleep for like 500 milliseconds, should be fine. And then we'll set the pin back to low and that basically finishes pressing the button. So now if I go and run that code, I should do, yeah, sometimes it's, so because I'm simulating the button press, like it literally does the same thing that it typically would do. But you can see it's interacting again. And so really the library that I wrote around it then just does like things like executing commands and parsing the result and stuff like that. Chill, chill, having a time out. All right, cool, he has opinions. All right, let's get back into the slides. Cool, all right. So the pros of like having a tethered notepad is that it's hardware-independent code using Johnny5, which means that we can swap this out with various different other microcontrollers later and reuse the existing ones, which is nice. Can use familiar tools. I was using VS Code, I was using NPM, I was just using normal things that I'm used to. I can bring my own editor and IDE. I can use the entire NPM ecosystem. You can webpack it and roll up it if you want to. And the website of Johnny5 is great for beginners. As for cons, you often have to be tethered to a host unless you use something like a Raspberry Pi. And there's less examples than a classic Arduino project. Like there was no blog post I could read on how to control a port. And then the third option is untethered notepads. And that basically means we're running JavaScript on the microcontroller. One of the ways to do that is using something like JerryScript, which is a project from Samsung. It's an open source lightweight engine that has a small memory footprint so it fits on things like an ESPA266. But not every JavaScript feature might be available there and the website is not really beginner-friendly considering that most of the documentation is still written in C++ and then you basically just have a JavaScript string in it. An alternative is the Esprino, for example, which is a JavaScript interpreter for microcontrollers specifically designed for things like the ESPA266 but they also have their own hardware. And so that project is completely open source and open source code and open source hardware. And it comes with its own IDE, which is, it does the job but it's much more in the realm of like an Arduino IDE. It has limited NPM support because it doesn't actually implement all the APIs that Node has and therefore not every package might work. And it does not work with Johnny5. There is a project that I haven't tried myself yet but I do have the board flying around because they gave them out at JSConf EU two years ago called Neonyes. And they have their own hardware but it can run on like an ESPA32 which is the follow-up from the A266. And it comes with its own IDE but the cool thing is it supports TypeScript out of the box and it actually has the same API interface as Node.js which means that you can use the NPM ecosystem and it has built an Ethernet and Wi-Fi so that's super useful. And then the last one that I personally like a lot is the Tesla2. The Tesla2 actually looks like this and the nice thing is it has USB-A ports. It has Ethernet and it has like sort of the common things you want like Wi-Fi and analog and digital pins. And the nice thing is it runs actual Node.js which means you can use almost the entire NPM ecosystem except of some like native dependencies. It's compatible with Johnny 5 and you can bring your own favorite tool chain and tools because all it uses to interact with the microcontroller is a CLI. And it's open source code and hardware which is nice. Unfortunately there's no company right now backing this anymore. It's just a couple of folks who have been maintaining this in their free time which means that it's unfortunately more expensive than the other components because there's no company behind it backing it. But I used it to build this project called CoffeeJS and basically the goal there was, I told you I work at Twilio and everything we do our REST API so every time I look at something I'm like why is there no REST API for that? And so the idea was to control an existing device programmatically and build an REST API and specifically I wanted to build a REST API that implements the IETF RFC 2324. There's one person nodding who knows what that is. If you're not familiar with that that's the RFC that suggested the HTC PCP. If you're not familiar with that that's the Hypertext CoffeePod Control Protocol that was announced on April 1st, 1998. If you ever seen the status code 418 I'm a teapot that comes from that thing. And it basically is just like an April Fool's joke explaining how a protocol for coffee should look like. Why did I use a Tesla? One, the coffee machine should work untethered. If I have to connect my laptop so that my roommate can get a coffee that's not really effective for anyone especially because that coffee machine was my roommate's one. And I wanted to use Johnny 5 so I can easily swap out microcontroller. So if I wanna use the Tesla for something else because I told you it's not that inexpensive I'm able to kind of swap it out. It has to be internet connected because I wanted to build an API and if it doesn't have internet connection how does the API work? It should have a quick and easy setup for development. Largely because I did this on a Friday night with a couple of beers and my roommates so I didn't wanna spend an entire evening trying to set up Raspbian on a Raspberry Pi and SSHing in and so the fact Tesla has a CLI that just says T2 upload and it just uploads the code to the device was super useful and we needed to build a server so NPM packages were really helpful for that. So how did we build it? Well we took the coffee machine and we did what every person that doesn't have an electrical engineering degree does and just rip everything apart. And so that's the coffee machine without walls and that's the site that was interesting for us. Specifically the top left corner was what was interesting for us because that's where the microcontroller was which is the brain of the entire operation. The buttons were accessible on the outside and then there was this thing that labeled interesting cable. Largely because that cable wasn't soldered on either side it was completely pluggable which meant that I could take it out and I could take out the buttons. So those were the buttons after I took off the casing and that was a control plate and the idea was that if we can simulate the protocol that is being sent on the bottom part of this we can simulate any button press. And so what we did is we jammed a bunch of cables into the other end of that cable and we're just trying to figure out what happens if I like put power on one pin and then like press a button on the other and like can I measure that? And our initial idea was like is this like a binary kind of protocol? Unfortunately it wasn't. So at one point I think at like 2 a.m. or something we started drawing diagrams. You can see that that was at 2 a.m. And so we were able to get a couple of ideas from this. At least we managed to figure out all the LEDs and how to control those. At least all of those that we didn't burn through yet. And ultimately we cleaned this up a bit and noticed a couple of things that we hadn't noticed. Like if you look at this and you actually understand something about hardware you would notice that the things that say D4, D3 and stuff like that on it we initially thought they were the same as like the black things with the silver edges which is resistors. They are not, they are diodes. Diodes work like LEDs in the sense that like they only let current flow in one direction and using that knowledge we're able to kind of clean up the diagram a bit and get a better idea of what happens. Since it wasn't then a binary protocol like I had hoped for we opted for a different version and that is using relays which are basically switches that you can programmatically control but they deal with higher current than an optocoupler would do for example. These are also the things that if you ever aren't in an old car and like you're doing your like turn on your turning indicator and it's clicking that's because the relay is clicking because it basically just uses magnets inside. And again LEDs for console logging. And so based on that we kind of locked everything back up wired it out through the hole that was left because we took the buttons out stick a sticker on it. We intentionally didn't put this inside the coffee machine because I don't trust myself and the device that handles water should not have my hacky hardware in it. So we kind of wired that on the outside. And then I wrote like an API around that. The code is very similar to what I showed you earlier because I'm using Johnny five. So there's a blog post about this as well as the code is on GitHub if you want to check that out. I'll tweet all the resources afterwards as well if you want to check that out but effectively the code works very similar. I set up an HPP server and then the code itself is again like setting pins to a high and low. All right, what are the pros and cons of this? One, you can have an untethered system running JavaScript. So that's great. And you can use again your familiar programming tools and the editors and you could potentially use the entire NPM ecosystem as long as it's not either a library that is way too big to load by the Tesla or it's a native dependency that doesn't work on it. Problem is you're less flexible on hardware choice because you need to find something that can actually execute node. And you might miss cutting edge language features because all of these different solutions often have an interpreter that lacks a couple of versions behind node or even behind JavaScript. And some docs are better than others, I figured out. All right, so how do you get started? The first thing is you should find a project that you wanna do. And I suggest to do use case-driven learning. Don't try to get your degree first in electrical engineering and then try to do this. Find a project that has a smaller scope and start learning the basics around that. I like hacking existing projects. What I mean by that is like, as you can see both of these things, I didn't design an entire circuit from scratch. I took something that was existing and kind of started just fooling around with it by taking a part in intercepting signals and stuff. You should learn the electronics basics though. So if things like resistance and amperage like current and voltage don't tell you anything, I'd recommend reading up on those and getting an idea of how they're interplaying just so you get a basic idea of how circuits work. Useful things that you should have at home before you get started are things like a digital multimeter so you can measure a volt, amps, and ohm. A breadboard, which is basically a way for you to create circuits without having to solder, which is super useful. Jumper wires, which are the wires that go into this breadboard. A set of resistors, you can get like a giant pack of various different ones for like $3 everywhere. A few LEDs and in my opinion, one thing that is helpful for a lot of project is the solid state relays, which to emulate have buttoned presses and stuff like that. Basically what I used in the project. There's a Johnny Five Inventors kit. That's what I got that comes with the Tesla. Again, it's a bit more expensive because it has a Tesla in it. There's these things called growth kits from Seed Studio. The cool thing here is that they use like a, it's unfortunately proprietary, like a proprietary kind of plug thing. But the nice thing is if you're, like if you still feel uncomfortable and about connecting different components, they only allow you to put cables in in one way and no other way, which means that it's very hard to kind of screw this up. Unfortunately, you need to get their components so it's a bit more pricey. But really you can get any generic Arduino starter kit and you can see they contain most of the components that I've been talking about. As for resources, so I put the slides, I uploaded the slides already. If you wanna check those out, I'm gonna tweet the link out as well. I recommend reading the blog post about the coffee machine hack because it describes a bit more in depth of like the highs and lows of like that night of hacking. I wrote a blog post of generally getting started with notepads, so that's great if you just wanna get like the very basic of like let's control an Arduino using Johnny Five. And then the documentation of notepads, Johnny Five and Tesla are all fantastic for beginners. And with that, I would like to thank you all for your attention. And if you have any questions, I'll be packing up my booth. So if you're free to drop by, ask me any questions and then I unfortunately have to head out. Thank you very much. Thank you. Thank you.