TidyBlocks: Structure

The structure of the code in TidyBlocks is dictated by three things:

  1. The architecture of Blockly.
  2. Our experience generating JavaScript directly from blocks.
  3. Our desire to write comprehensive unit tests.

Rather than describing these at a high level, let's have a look at a simple pipeline that loads a data set, filters it, and generates a plot:

A Three-Stage Pipeline

All of this is fair bit of code---at the time of writing, the breakdown is:

Component Lines
./libs 2991
./libs/ui 739
./blocks 1639
./test 3998
Total 9367

However, a lot of it is repetitive: block definitions and arithmetic operations, for example, are all close siblings even after common code is factored out.

So suppose you decide to add a new block to an existing category. The steps you have to go through are:

  1. Add the block's definition and code generation function to a file in ./blocks.js.
  2. Add a reference to the block to the XML in ./index.js.
  3. Create a subclass of TransformBase or one of the Expr family of classes (./libs/expr.js) that implements the block's action. Be sure to add that class to the exports at the bottom of ./libs/transform.js, ./libs/op.js, or ./libs/value.js so that Restore can create it from JSON.
  4. Add tests to make sure that:
    • The block generates the right JSON.
    • Restore can turn that JSON into a runnable object.
    • The object's action does what it's supposed to do.

This isn't trivial, but it's less work than Version 1 required, and we think it's a solid base for future work.

— Greg Wilson / 2020-07-28