
Show HN: Interactive Abstract Syntax Tree Demonstration - azeirah
https://martijnbrekelmans.com/gifs/constructor-ast.mp4
======
azeirah
# ... Interactive Abstract Syntax Trees? What?!

As you may or may not know, compilers and interpreters "read" source-code by
first turning it into a data-structure called an "Abstract Syntax Tree".

## What am I looking at then?

I made a plugin for Sublime Text that renders this tree as a, real,
interactive, well... tree! You can use the mouse to zoom in and out, pan the
tree around, rotate the branches, and double click to use the selected branch
as the new root for the tree.

The video is a short demonstration of this plugin, and shows a short
interaction with the tree (with some tree-dancing halfway through!)

## Oh-my-god, why?!

Good question!

I'm still thinking about how I want to extend this concept to make it useful;
ie, as an interactive map of your programs, similar to the "minimap" concept
of Sublime Text, except 2d, and enriched with more information and data about
your program.

Right now, it's just a proof-of-concept, and it looks pretty cool already! So
I thought I'd share it here.

## Future

The somewhat longer-term goal is to extend this interactive vizualisation
concept with recorded data about your project

I'm already working on tools that capture runtime information, ie, I wrote a
tool that stores parsed PHP profile and trace files in a local sqlite db.

With recorded runtime data, it will become feasible to enrich the
visualisation : "15 exceptions happened at this branch", "this branch is very
slow", "this branch never got executed in the past month".

