Gas station without pumps

2012 July 4

blockly – A visual programming editor

Filed under: Uncategorized — gasstationwithoutpumps @ 18:06
Tags: , , , ,

Google has created a browser-based block programming language: blockly – A visual programming editor – Google Project Hosting.

The editor is clearly inspired by Scratch, both visually and in terms of the programming features they chose to implement:

A demo program for the maze-running example given on the Google projects web site. Click to enlarge.

I found the blockly editor very irritating to use (no cut and paste, every block had to be picked from a menu each time it was used) and the primitives provided for the maze demo rather limiting (the only conditional was testing one of the neighboring cells for having a wall).

Blockly may be a nice demo of what can be done in the browser these days, but it is way short of Scratch in terms of fun, education, or usefulness. If it is ever going to go anywhere, it needs to be an order of magnitude better.



  1. Blockly excels from my (developer) point of view in two ways: defining a DSL and compiling to javascript and/or xml. That I can easily create a DSL for my users to use means that I can make blockly pretty much as easy to program in as I like. That it compiles to javascript and xml means I can accept the xml, which is easy to validate and trust, and then compile that to javascript. Normally I could never, ever hope to have users program themselves and safely distribute that code, running, to other users, but with blockly I have a built-in valid-and-safe-programs-only filter.

    Maybe scratch had these things too, but seeing the blockly editor run and compile in pure JS is incredibly exciting for the future of customizable programs.

    I’ll agree that I’d never put the editor in my live site right now, but an order of magnitude of GENERAL improvement may not be necessary. I can spend a week tailoring the interface to my (the developer) specific needs for a lot of apps that don’t expect long or complex scripts.

    Comment by Riley Lark — 2012 July 6 @ 08:27 | Reply

  2. There is another webbased graphical programming tool called Visogram ( In contrast to Blockly it is dataflow-oriented – you let modules interact by connecting in- and outputs. One cool thing is that Visogram allows to create user interfaces to visualize things very easily. Interfaces are purely based on web standards and run on any device that comes with a web browser.

    Comment by Visogram — 2012 September 26 @ 07:43 | Reply

    • Note to other users: the comment from Visogram does appear to be advertising by the publishers of visogram, so should be taken with a grain of salt. I’ve not looked at visogram, and so I have no opinion on its suitability for teaching or doing programming.

      Comment by gasstationwithoutpumps — 2012 September 26 @ 08:43 | Reply

      • Surely this post was an advertisement, but to be honest, we do have not the PR power of Google’s Blockly ;)
        To comment on its suitability for teaching/programming: There are things that can be done very fast in Visogram, for example building up a visualization. On the other hand when it comes to complex logical programming structures, the graphical programs in Visogram might become confusing because there are a lot of connections and modules on the canvas.
        The idea to solve this is to develop complex program behavior (like interaction with hardware) in a textutual language like C# and bundle it into a module. Modules are the most important abstraction in Visogram – they will hide the complexity to the end-user.
        Note that Visogram is in its beta phase, so there still may be modules missing to make it comfortable in its usability. We encourage the community to contribute their custom modules as plugins: For example there is a Twitter plugin that lets you send tweets or subscribe for twitter streams.

        Comment by Visogram — 2012 September 28 @ 01:03 | Reply

  3. Related: Bret Victor’s thoughts on learning to code (and coding afterwards):

    Comment by Riley Lark — 2012 September 28 @ 09:01 | Reply

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a free website or blog at

%d bloggers like this: