Chris Wolfe

Block-based programming is a recurring theme in discussions of computing education, and there are many pitches, tools, and research papers. The basic goal is simple: save learners from memorizing the textual syntax of a programming language so that they can focus on making the computer actually do something.

In thinking about block-based programming, I realized that many code editors already do something similar by auto-closing brackets and quotations. There is an obvious next step: recognize program structure while it is being typed and generate visible blocks. Done right, this hybrid would guide learners from dragging basic blocks out of a palette toward quickly typing code in a common programming language.

With this design in mind, I went looking for existing hybrid text- and block-based programming environments. The common approaches I found were more multi-mode than hybrid: either generating code from blocks (e.g. Google Blockly), or switching between block and text views (e.g. Pencil Code). An interesting outlier is Greenfoot's frame-based editing, which echoes many of my goals. Unfortunately Greenfoot uses a custom programming language, shortcut keys to create blocks for compound statements, and falls back to textual code completion for everything else.

None of the existing environments seem to support the smooth evolution from blocks to common-programming-language text that I have in mind. I expect early learners to often remember some, but not all, of the language syntax (e.g. being comfortable typing if (cond) but not for (init; cond; incr)). Similarly, more experienced developers might know the language syntax, but want more structure for new API calls or recommended snippets (e.g. JavaScript developers doing an Introduction to WebGL).

Please throw me a note if you know of an awesome tool I'm missing. Otherwise, I'm going to have to try building an html-embedded JavaScript editor using this hybrid block approach.