BlockLike.js Aims to Make it Easier to Go from MIT Scratch to JavaScript Programming

BlockLike.js is an educational JavaScript library that attempts to extend the block-based Scratch learning experience to JavaScript text-based programming.

Scratch is a visual programming environment that aims to help kids learn the foundations of coding by creating interactive stories, games, and animations. According to BlockLike.js creator Ron Ilan, while Scratch does a great job enabling the learning experience, the gap with text-based programming remains large. Web programming in particular, notwithstanding its appeal as an accessible environment, is hard to crack for beginners, says Ilan.

I realized, that if we want to progress, we need something that will help us bridge the gap between Scratch and the web. Something that will be to JavaScript what training wheels are for bikes.

The relationship between Scratch and BlockLike.js is close enough that you could say there is a direct mapping of abstractions. Scratch makes basic objects available to users including Sprites, Costumes, Backdrops, and others, which can be manipulated to change their position, movement, and looks. It also provides control blocks corresponding to loops, if-then-else conditionals, waits, etc.

BlockLike.js defines objects, methods, and patterns that resemble Scratch's in an attempt to make the transition from one environment to the other smooth.

What you've learned, practiced and mastered at Scratch is transferable. Scratch and BlockLike.js are meant to be used simultaneously. You can try something in Scratch and then immediately translate it to the web. You can go the other way if you like. At the basic level they are interchangeable.

So, BlockLike.js provides sprites, costumes and backdrops, a stage, events, and more. The following snippet shows how you can create a stage and populate it with a few sprites, customize them and change their state in response to an event:

let stage = new blockLike.Stage();

let sprite = new blockLike.Sprite();
sprite.addTo(stage);

let backdrop = new blockLike.Backdrop();
backdrop.addTo(stage);

let costume = new blockLike.Costume();
costume.addTo(sprite);

sprite.whenClicked(function() {
 while(true){
   this.nextCostume();
   this.move(10);
   this.wait(0.2);
 }
});

One major difference between Scratch and JavaScript lays with their handling of loops, says Ilan. Scratch carries through what is inherently a paced execution. That means that a Scratch block will run as a standalone step producing a side effect in the UI. This applies even to loop blocks and is key to create animation effects. A bare-bones JavaScript loop, on the other hand, just gobbles the main thread and runs to completion without ever stopping.

To handle such paced behaviour, BlockLike.js does not define an event loop, as is common in GUI frameworks or game engines. Instead, it uses JavaScript async/await abstractions to enable a paced execution. This requires the programmer to explicitly use the wait operation to relinquish control and give the UI a chance to refresh itself:

sprite.whenClicked(function() {
 while(true) {
   this.changeY(10);
   this.wait(0.2);
   this.changeY(-10);
   this.wait(0.2);
 }
});

For the same reason, you can define JavaScript functions, corresponding to Scratch custom blocks, as you would normally do, but you are expected to call them using the invoke method.

To get started with BlockLike.js, you can use it from CodePen.io and access its extensive documentation. The project is also available on GitHub.