JavaScript on Microcontrollers

A presentation at Mobile Era in November 2019 in Oslo, Norway by Niels Leenheer

Slide 1

Slide 1

JavaScript on Microcontrollers

Slide 2

Slide 2

Hi, I’m Niels.

Slide 3

Slide 3

I am so happy to be back at Mobile Era again. How many of you saw my talk last year? It was about connecting hardware to the web. About WebBluetooth and there were a lot of hardware demos. And doing hardware demo’s is crazy scary. Anything can go wrong. Somebody might hijack your drone. Thanks again Johannes.

So this was my heartbeat last year. Live on the screen. 140. Pretty high. But today we’re going to go even one step further. We’re not only going to demo hardware, we’re going to make and program hardware. All using JavaScript.

Slide 4

Slide 4

Last year, after the conference a couple of the speakers had a little trip to the Troms area and we went watching the northern lights. It was amazing.

Slide 5

Slide 5

On the way back we had a little accident. We hit a patch of ice. Started skidding across the road and ended up in a ditch. Everybody was alright. Funny thing. I was wearing a heart rate monitor and have a recording of my heart rate during the accident. And it didn’t go over 80.

Giving a talk with some hardware demo’s… 140…. Being in an accident and having your life flash before your…. 80. I don’t even want to know my heart rate right now….

Slide 6

Slide 6

Anyway. I’m Dutch. I’m from the Netherlands. Some people also call it Holland. Those people would be wrong…. You’ve definitely heard of the capital Amsterdam. Which is known for it’s Cana…. Canals. Yeah.

Quite often when I fly out to a conference from Amsterdam there will be a sniffer dogs waiting to see if some of the tourist brought some of that canals with them. Also just to be clear. To make certain I don’t waste anybody’s time today. We are not for sale.

Slide 7

Slide 7

I am a Mozilla Tech Speaker, Google Developer Expert.

Slide 8

Slide 8

I tweet at @html5test

Slide 9

Slide 9

I love the web. I’ve been a web developer since 1994. I written my first HTML 25 years ago. Yes I am old. I love HTML, I love CSS and I even love JavaScript. Okay, grown to love it.

Slide 10

Slide 10

And I love electronics. When I was a teenager I had this cardboard electronics set with all kinds of different components…

Slide 11

Slide 11

And you could connect them together with clipping wires between some springs. You could build a radio or even a transmit morse code.

Slide 12

Slide 12

And this is what I have now. Still some components to connect together with some wires. But the components have become much more advanced. Instead of transistors and diodes and resistors, we now play with microcontrollers and all kinds of sensors. And everything works together.

Slide 13

Slide 13

I know some of you are thinking, why should I care about this? I am a web developer, I don’t have anything to do with electronics. And you’re right.

Slide 14

Slide 14

But when you connect devices to the web you get the Internet of Things. You get devices that talk to servers, and even directly to browsers. And there things start to get interesting for web developers.

Slide 15

Slide 15

First of all, having a little bit of knowledge about IoT and connected devices is very useful…

Slide 16

Slide 16

…because these kinds of devices will only become more pervasive and there is a good chance that you will encounter this in your job in the future. Maybe not programming devices, but building apps and interfaces that talk to devices. Technologies like WebUSB and WebBluetooth are being rolled out to browsers and it makes sense for us to at least know about it.

Slide 17

Slide 17

But it is also extremely interesting because there is a lot of engineering directed towards connected devices. This is where technological innovation happens extremely fast. If you want to know about cutting-edge stuff, this is the place to be.

Slide 18

Slide 18

And finally, it is also a lot of fun to play with this technology. Even if you will never use this in your day-job, it is just an amazing experience to… let say to build a web app that talks to a microcontroller to drive around a toy car.

Slide 19

Slide 19

The main issue I’ve seen when web developers start playing with microcontrollers and IoT is the barrier of having to lean C. Now C and Javascript may look quite similar syntacticly, but is a completely different beast.

You not only need to learn C, but also low level programming concepts like memory management and pointers. Even though I learned this back in school 25 years ago, – I am a dinosaur – I hate this.

What if we could just use a language that we already know? What if we did not need to worry about those low-level concepts?

Slide 20

Slide 20

What if we could JavaScript on Microcontrollers? And not only that, what if we could leverage the browser to connect to these microcontrollers and let them extend each others capabilities.

Slide 21

Slide 21

This is all fine and well, but…..

Slide 22

Slide 22

Microcontrollers are slow. They are really slow. And when I say slow, that really does not convey the idea how slow they actually are. They are slooooooooow. Take for example the slowest computer you can buy today. The Raspberry Pi.

Slide 23

Slide 23

This is the Zero W, which is slow. Raspberry Pi’s are all slow, but this is the slowest they make. It is still a great little computer. It runs Linux, can use Node.js and even run a full browser like Chrome or Firefox. But this is a computer. It is not a microcontroller.

Slide 24

Slide 24

This is a microbit. It is a little board created for schoolchildren. And it runs at just 16 MHz and has only 16 KB of RAM. Sorry, Max… KiBiByte. It is slow. But it is not even by far the slowest microcontroller you can find. But it is fast enough to run JavaScript.

Slide 25

Slide 25

Now comparing it the Raspberry Pi. That is 60 times faster than a Microbit.

Slide 26

Slide 26

And it has way more memory. So the microbit is on a completely different level.

Slide 27

Slide 27

When I started working with computers, 32 years ago, back in 1987 – I know, I am really old – we had an Apple Mac Plus.

Slide 28

Slide 28

It was a fantastic computer back at the time and I learned programming on it. It was pretty slow. Even back then. I still loved it. It booted up from a floppy disk and after a couple of minutes you could remove the OS floppy and insert an application floppy. Then start the application.

And whenever the app needed something from the OS that wasn’t already loaded in memory, you had two swap floppies again. Eject the app floppy and insert the OS floppy. And vice versa again. It was awful and fantastic at the same time.

But… this 30 year old computer is more advanced than most microcontrollers. Probably about as fast as a micro:bit. Definitely more memory. It had a whopping 1 MB of RAM. And here we are 30 years later and we are going to run JavaScript on something less advanced than this…. THING….

Slide 29

Slide 29

Are you crazy? Two years ago when I started playing with microcontrollers I would have said yes. But there are very good reasons why running JavaScript on microcontrollers is brilliant.

Slide 30

Slide 30

JavaScript is easy…

Slide 31

Slide 31

…well compared to C. Two years ago I created a gadget for showing notifications from my home automation system on a 8 by 8 pixel LED screen. Whenever I get mail - you know physical mail - actual letters - in my physical mailbox - it shows me a little icon of a mailbox. So I can go outside and fetch it…

Slide 32

Slide 32

And the pixel display. It is actual ceiling light that I “improved”. It shows me a little icon of a mailbox. I wrote it in C. It took me 877 of code. Excluding all kinds of libraries I had to use. Today we are going to recreate that project in JavaScript and it is going to take less than 30 lines of code.

Slide 33

Slide 33

Microcontrollers are very power efficient. I can run JavaScript on a tiny little Bluetooth enabled board and power it using a coin cell battery. And it can run for months. Slow is a good thing, because when we make things faster, they usually require more power.

Slide 34

Slide 34

And microcontrollers are fast enough. Yes they are slow, but we only have to solve very small problems. Microcontrollers are fast enough for everything I am going to show today.

Slide 35

Slide 35

And finally they do not need an operating system. At least not in the traditional sense. That may sound bad, but is actually fantastic. Because when I flick the powerswitch, I do not want my Linux powered lamp to take…

Slide 36

Slide 36

45 seconds to boot before the lights turn on.

Slide 37

Slide 37

So let’s take a look at how we can get JavaScript on our microcontrollers. There are lots of different projects, in various stages of maturity and each supporting different types of microcontrollers.

Slide 38

Slide 38

But we’re going to focus on…. Espruino. Is an open source project. But you can also buy hardware with Espruino already installed. So it is plug and play. There are also has versions that you can flash yourself on your own hardware.

Slide 39

Slide 39

And it is an interpreter that supports most of JavaScript, even some ES6 features like arrow functions and so. And it even have REPL functionality. So connect to your computer using a USB cable or using Bluetooth and you can execute commands on the microcontroller just like you would in the console of a browser.

Slide 40

Slide 40

It supports multiple types of microcontrollers, like the ones based on the ESP chipset family from Espressif. This is basically a WiFi or WiFi + Bluetooth chipset that includes a small microprocessor.

It was originally intended to be used to add WiFi capabilities to existing microcontrollers like the Arduino. But in its own right is also a pretty powerful microcontroller.

Slide 41

Slide 41

The most famous example of an ESP based microcontroller is the NodeMCU. But there are many other cheap microcontroller boards that you can buy for a few euro from sites like AliExpress or in your local electronics store.

Slide 42

Slide 42

One other chipset that is supported by Espruino is the Nordic nRF52 family. These are a little bit more expensive than the ESP ranging from 15 to 40 euro each. I’ll go over some options…

Slide 43

Slide 43

Like the Puck.js, which is basically a tiny button with a coin cell battery. And it runs Espruino.

Slide 44

Slide 44

And the Pixl.js which has a screen, so you can program little games on it. And also it is Arduino pin compatible, which means you can use all kinds of Arduino shields like motor controllers – which is exactly what I used in one of the demos.

Slide 45

Slide 45

But also the micro:bit, but I would not recommend using this except for the most basic projects. The other devices are faster, have more memory and are much more capable.

Slide 46

Slide 46

Thingy:52And finally the Nordic Thingy:52 which is a device created by Nordic, the same company that creates the nRF chipset. It packs an amazing amount of sensors, a button, a led and rechargeable battery, all of which you can use from Espruino. I actually have a couple of these with me, to give away. If you’d like to start playing with this, come up to me after the talk and I might have one for you.

Slide 47

Slide 47

Time for the demo’s. The fun part of this talk. I hope…

Slide 48

Slide 48

But I do have some warnings to give. This is cutting-edge stuff. Hardware demo’s with experimental technology. And most of it using Bluetooth, a wireless connection…. And Bluetooth uses the same frequency as WiFi, so with a room full of WiFi devices there is lots of opportunity for interference. So this is moment where my heart rate goes through the roof.

Slide 49

Slide 49

Slide 50

Slide 50

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Slide 61

Slide 61

Slide 62

Slide 62

Slide 63

Slide 63

Slide 64

Slide 64

Slide 65

Slide 65