No More Blockly.js? Drag and Drop SVGs Pt. 1

.static { cursor: not-allowed; } .draggable { cursor: move; } svg { margin:0 auto; } The blockly.js library was a great starting point for the TidyBlocks project, but after working extensively with it there are some major limitiations [mainly the lack of accessbility to the source code and the inablity to use modern bundlers]. Thus begins a new project: creating a drag and drop block library of my own.

Unit Tests

I want to cover a topic I was SUPER intimidated by and never exposed to but now have come to love very much - unit tests! I’m going to explain the families or suites of unit tests we use in TidyBlocks rather than speak in abstractions. That way, if you want to add a new function or embelish on an existing block, you’ll have an outlined workflow for how to add the proper testing to make sure your code is doing what you think it should.

TidyBlocks Framework

Dragging the colors dataset block into the workspace and hitting run produces a table in the bottom right corner. This only requires three user movements: a click, a drag and drop, and another click. We can leverage these three movements to understand the basic architecture of how a pipeline of blocks within TidyBlocks runs. In my post laying out how blockly works, you have block code to design a block (the data block is yellow and doesn’t accept inputs, for example) and behind the scenes you have the block’s generator code.

Creating a TidyBlocks Block

The TidyBlocks project is open source - meaning I’d love for people to contribute! I’ve posted in abstractions in order to solidify a mental model of how blockly works, but I want to make this more concrete with an example. In this post I will outline the architecture of the TidyBlocks repository by walking you through all the files needed to: Create the shape of the text block Create the JavaScript code to be executed when the text block runs Have that block show up in the GUI’s toolbox blocks The blocks folder contains a single script for each block’s shape.

One Month Later: Blocks!

Once I had a conceptual framework of blocks in place I could hit the ground running creating blocks that would simulate functions in dplyr. DATA First off was a data set block. I created a block with a cap because data blocks shouldn’t have any inputs. The generator code was as simple as it only needs to return iris. Let’s not demean getting a simple UI together with a dataframe that dynamically updated when you hit the run button!

Baby’s First Module

Modules are self contained scripts with their own distinct functionality. This allows for the addition or removal of modules as neccessary. It is easy enough to require modules using Node.js, but in the browser they behave very weirdly based on what browser you’re using. One of the quirks of JavaScripts! A book is organized into chapters, a good program is divided into modules. In my blockly big picture post I used an inelegant hack within the CreateDataSet block to include the stringified class code into the block itself.

Blockly: The Big Picture

Driven by my Aha moment from week two that the code behind blockly blocks is entirely separate from the javascript code that the blocks run, I wanted to outline a mental model of blockly using a simple example visualized below: Where We’re Heading Simulating Blocks OUR MISSION We’re going to simulate 3 blocks: CreateDataSet a dataset block that contains data (the number 0) IncrementDataSet an intermediate transformation block (a step function to increase the data by 1) DisplayDataSet a display block (a pop up alert of our new value).

Week 2: Humble Pie

I spent the beginning of the week pouring over the Blockly documentation which is sparse, at best. The Google team does a great job of explaining how to create a single block, but I struggled to create a big picture of how blocks interact. After arranging a call with whom I thought was a developer of Blockly, Beka turned out to be an incredibly knowledgeable and driven high school student!

From R to Data-Forge

Before I officially begin my internship with RStudio, I’m familiarizing myself with the data-forge.js. These are functions that can transform data frames in a similar matter to the functions of the tidyverse and even use the same language! I’ll be keeping a table here (and updating the third column, javascript for blocks!) as my internship progresses!

My First Week at RStudio

This past week was my first as an intern at RStudio where I’m designing a prototype for a visual programming language: a block-based version of the Tidyverse. Prior to my official start date with R Studio, I spent my summer familiarizing myself with JavaScript and design considerations when building a user interface. The end goal of the internship is obvious: a working proof of concept where I envision each block as a step in a chain of Tidy functions.