Inventing On Principle

Inspiration

• Bret Victor's Learnable Programming
• Bret Victor's Inventing On Principle
• Chris Granger's Lighttable

Foundation

• Esprima: JavaScript parser
• Escodegen: AST -> JavaScript generator
• CodeMirror: In Browser Code Editor
• Tangle.js: JavaScript Reactive Documents Library
• Underscore: JavaScript utility functions
• Backbone: JavaScript Framework
• jQuery: JavaScript DOM Library

References

• node-falafel
• jsbin
• Codebook
• learnjs.info
• AlgoView

Instructions

• Clone this repo
• Within the repo, run npm install && bower install
• run grunt server to run the app

Overview

At a high level, the app uses Esprima to parse the source code within the code editor, analyzes the source code to extract out variable and function declarations and inserts trace statements, execute the source code, and then visualize the information collected with an interactive interface

Parsing

Whenever there's a change in the source code, whether this is from the initial load of the template source file or actual editing, and there's no errors detected by JSHint, Esprima is used to parse the valid source code and the Abstract Syntax Tree (AST) is saved, along with other helpers attached to help transform the source code.

Analysis

Then, variable and function declarations are extracted by traversing the AST. These declarations are subsequently wrapped in models and rendered as high level views of the declarations.

At the same time, scope information for the source code is computed and is then used to produce a list of variables that need to can be traced. The actual tracing generation is laid out in tracer module. The logic under genTraces specifies all the various expression types and how their values should be collected. The inserted trace statements call methods on the tracer to collect information during run time.

Execution

The code is run using eval. Here, a reference to the global object _ is also passed in so the underscore library can be used in the source code

Visualization

The actual execution steps of the code are collected by tracing statements that make side effects and a slider is generated to allow for stepping through of the code path. At each step of the slider, the corresponding state at that step is rendered. There are 2 main ways of displaying this information:

1. the scoped variable information are directly displayed as raw JSON
2. for specific arrays, a D3 visualization is generated

Conclusion

This project is still in progress, with lots of room for improvement

• Generalizing visualization modules to visualize different kinds of data, such as arrays, objects, etc.
• Optimizing the control flow to be more resilient from errors
• More code transformation tools, such as refactoring
• Better displays of variable information and control flows