A web-based alternative to Scratch

Educational programming tools are all the rage. Educators and computer scientists agree that the current computer science curriculum  – as in "teaching students how to use Word, Excel, and PowerPoint" – is a woefully inadequate way of getting students interested in computers and does nothing to help develop real-life computer engineering skills.

Also, a growing school of thought proposes that computer programming should become a core part of children's education, much the way English and mathematics are now. Not to turn all kids into computer scientists, but because programming is an excellent way to develop logical reasoning and math-related skills that are not so easily acquired via other subjects.

That's why stuff like the original Squeak Etoys [1], which later morphed into Scratch [2], exist. Scratch has become the staple educational software for the Raspberry Pi, the staple educational hardware, and has generated several clones. One of these clones is called Snap! [3], and it's interesting for several reasons. First, it is written entirely in JavaScript. This means you can run it in a web browser (albeit not any web browser and on any platform, as you will see later) with no extra software needed (Figure 1). This also means it's cross-platform. Regardless of whether your computer runs GNU/Linux, Mac OS X, Windows, or whatever, if it has a modern, JavaScript-enabled browser, such as Firefox, Chrome/Chromium, Midori, and the like, Snap! will work on it.

Figure 1: Snap! is a JavaScript implementation of Scratch that works in a web browser.

Second, Snap! is easily modified and extended: You can build your own blocks, and you do so just by right-clicking on the workspace and selecting make a block from the pop-up menu. This approach leads to some interesting possibilities and has made Snap! the tool of choice for educational projects that need their own, tailor-made, visual programming language. Currently, Snap! extensions are available for the NXT/Lego Mindstorms hardware, the Hummingbird educational development board, the Arduino, and so on.

Heavy Lifting

Interestingly, there is no Snap! extension for the Raspberry Pi – probably because of the caveat regarding using such a JavaScript-heavy language. In it's current state of development, it is practically unusable on the Pi. If you try to open a web page containing an instance of Snap! in your Pi, your CPU load indicator will become a solid block of green and will stay that way until you close the page. Meanwhile, everything on your Pi will become slow and laggy. Dragging and dropping blocks onto the workspace is a painful procedure that can take up to 20 seconds to register on the visual interface. Clearly, Scratch is the superior alternative if you are working directly on the Pi.

So, why bother with Snap! at all? After all, Scratch is, er, snappier, and it has already been adapted to the hardware. But, there are reasons to use Snap!. I already listed two reasons above – namely, it's ridiculously cross-platform and is very easy to expand. A third reason, derived from the first, is that, if you set up a Snap! server on your Raspberry Pi, for example, you can program your Pi, including its GPIOs, remotely, even from your smartphone (Figure 2). How cool is that?

Figure 2: Snap! works happily on most smart mobile devices, such as smartphones and tablets.

Then, of course, there's the "we-do-it-because-we-can" reason, which should resonate with a lot of readers.

Light Speed

Using the Pi as a Snap! server still makes sense. Even if it is not currently practical to code Snap! directly on the Pi, you can leverage Snap!'s elegant approach to language extension and assemble your scripts from another computer that can handle the heavy JavaScript load. With a bit of Python and XmlFu, you can also access most, if not all, of the Rasp Pi's unique characteristics  – namely, its I/O pins.

Unfortunately, how you go about doing this is woefully (and unsurprisingly) undocumented. To quote the current Snap! 4.0 manual: "The idea is that you run a separate program that both interfaces with the device and provides a local HTTP server that Snap! can use to make requests to the device."

And, apart from a vague promise that the situation will improve with time, that's it.

In this article, I'll shed some light on how all this is done. I'll start by running a version of Snap! on the Pi and have the Pi act as a server. Later, you'll see how to create an extension that uses the Rasp Pi's bits and pieces.

First, you can grab all the files you need to run a stock version of Snap! on your local network, either by using Git,

$ git clone https://github.com/jmoenig/Snap--Build-Your-Own-Blocks.git

or by grabbing the ZIP file from the GitHub page [4] with the Download ZIP button.

If you already have a web server running on your Pi, make a Snap directory in the server's root and copy the files you will find in the Snap download directory to it.

$ sudo mkdir /var/www/Snap
$ sudo cp -Rv Snap--Build-Your-Own-Blocks/* /var/www/Snap/

Then, point your browser on your other computer to http://<RPi's IP>/Snap/snap.html, and you're good to go. You can skip to the next section.

If you're not running your own web server, doing so is dead easy. A good choice is lighttpd because, as its name suggests, it's very light and will not overload your Pi. Besides, for serving a bunch of JavaScript, it's all you'll need.

Open a terminal window and type:

$ sudo apt-get lighttpd

Once installation is finished, the server will already be running. You can check by pointing Midori on your Pi to 127.0.0.1 (or, from another computer, pointing your web browser to your Pi's IP). If you see something like what is shown in Figure 3, everything is fine.

Figure 3: You can use lighttpd, a lightweight web server, on your Pi to serve up Snap! on your local network.

Once lighttpd is installed, you can copy the Snap! files to your web directory as explained above.