Learn the Basics of JavaScript with MakeCode

Without a doubt, one of the most valuable skills in our modern day world is being able to program.

We are surrounded by technology; being able to program it bends it to your will. There are countless ways to get started being a programmer but few are as exciting as working with microcontrollers. These tiny computing devices allow you to both interact with a virtual world and reach out into the physical world.

MakeCode, a new coding environment from Microsoft, isn’t the first block programming language, but it’s the best implemented solution I have seen. These languages don’t rely strictly on the user knowing extensive specific syntax but instead allow them to build applications by stacking commands together in a drag and drop interface (Figure A).

Think about writing code from scratch like being a poet; you have the entire English language at your disposal, but finding the right words and making them flow is a skill that takes time and patience to master. On the other hand, block programming is like magnetic poetry stuck to your friend’s refrigerator. Even the most mirthful partygoer can assemble a limerick or two from the available words to brighten their host’s cleanup efforts when found the next day.

One of the numerous features that helps MakeCode rise above the pack is that it doesn’t just leave you stuck in block land — you can seamlessly switch back and forth to an actual code window. When you add a block to the program (Figure B) and switch over to code view, the equivalent function displays in JavaScript (JS), the language behind MakeCode (Figure C). Of course if you then make changes to that code in JS and switch back to the block window, the blocks will be updated with these changes. This ability to flip-flop helps those new to programming get started with blocks but quickly pick up JS syntax that can be used in writing applications outside of MakeCode.

JavaScript is a foundation technology of the modern internet. It allows developers to write rich applications that don’t have to always rely on the server to do the computing but allow some of the work to be done locally in the browser. Gmail, Facebook, Makezine.com, even MakeCode’s own site rely on JavaScript to be able to function. For those of you who are programmers and want to “nerd out,” the MakeCode team even implemented a compiler that takes the code created by the user and prepares it for the chosen dev board in JS — no need for a trip back to the server.

Board Support

Designed for physical computing, there are a few boards currently supported by MakeCode, including the BBC micro:bit, Adafruit’s Circuit Playground Express, the Chibi Chip, and SparkFun’s SAMD21 dev board. While most of these systems are currently in beta, the micro:bit is the best supported. This little powerhouse of a board is great for getting started. While your standard Arduino Uno has a single controllable LED built in, the micro:bit has a 5×5 LED matrix, built-in accelerometer (shake and movement), magnetometer (compass and metal detector), two buttons, light and temperature sensors, and even Bluetooth Low Energy radio. All of these together mean that a lot of projects can be completed without ever plugging in another component.

The implementation of MakeCode fully supports these components and, in the case of the radio, even adds some functionality to the board, allowing two micro:bits to communicate between each other without ever going through the standard pairing process required for most Bluetooth devices. The combination of MakeCode and micro:bit is easy to get started with and yet quite powerful; when I was selecting a platform to teach 200 Saudi Arabian teenagers about working with microcontrollers, I chose this pair.

Getting started with MakeCode and its supported platforms is easy. There are no downloads, no drivers, no real setup. MakeCode runs entirely in browser, so you only need an internet connection to use it. Thanks to the built-in simulator, you don’t even need an actual board.

Making Code

Let’s test it out. First, go to makecode.com and select the board you want to use. I will be using the micro:bit for all examples here. Once the new project is open, a simple interface will greet you with a simulated dev board on the left, a list of commands in the middle, and a code window containing your first two blocks on the right (Figure D). These starter blocks will be vaguely familiar to anyone who has ever done any Arduino programming before; “Start” and “Forever” are the MakeCode equivalent of “Start” and “Loop” — these two functions are the base of every application. Any code that is added to the “Start” block will execute whenever the device is turned on, restarted, or reset. This makes it easy to add code that you only want to execute once for things like setting the initial position of a motor or turning on a sensor. The “Forever” block executes after start but runs over and over without stopping until the device is turned off or reset (at which point start will run, followed by forever again).

Adding code to these first two blocks is as simple as dragging and dropping. Between the code window and the simulation, you will find the commands to build your application. These are broken up into groups of like commands. For the micro:bit this includes Basic, Input, Music, LED, Radio, Loops, Logic, Variables, Math, and Advanced (I will leave you to explore that on your own). If you don’t find the command you are looking for in a given group, don’t forget to click on the “more” button. Also remember to scroll through the options as some might be hidden off your screen.

On the micro:bit, MakeCode allows you to access the LED array in a variety of ways that take much of the work out of using it. Not only can you toggle each LED individually, but you can also show or scroll full words, sentences, and icons across the matrix. All without the user needing to create a buffer or individually controlling each LED in the matrix (Figure E).

Stacking Blocks

The MakeCode blocks snap together, stacking to make the final application. Some blocks fit inside others and have shapes that help indicate this. One complaint I have is that sometimes the block shapes are too similar; it’s hard to know which block will or won’t work. I would love a system where clicking on a block or an empty socket will change the available items to only show those options that can be used with the item that was clicked. This would be very similar in my opinion to how intellisense works in Microsoft’s professional development tools.

Each time a block is added or a variable is changed, the simulation window automatically updates, showing how the code will work on the board. I was really impressed the first time I was shown that not only will it do so with the components on the board, but it will also show you how to hook up basic external components to help the user also learn circuits. I envision a future where more sensors and outputs are supported, giving the user a great way to develop their entire project virtually before ever buying a single piece of hardware.

MakeCode works great on mobile devices too!

Once complete, the compiled application can be downloaded to your computer or uploaded directly to the device. MakeCode-compatible devices show up as flash storage drives on your computer, meaning they do not require drivers to get working. All that is needed to program the device itself is to copy the .hex file that downloaded from the page to the device while it is plugged into USB. Drag, drop, done. The device will then begin running the code that was copied to it.

If I had to leverage any real criticism against the system, it would be that it makes the device a bit unresponsive. This is probably something someone new to using microcontrollers would never notice but to those familiar with their real-time snappiness, the extra weight of all of the code that makes things easy, makes the end device slow.

Outlook

I’m really hoping that Microsoft commits to MakeCode and continues to improve it. For those of you who are looking at getting started with microcontrollers and especially those of you who are educators and might be working with large groups, give the blocks a shot, you might find they help you build tomorrow’s software architects.