June 08, 2015
Abstract syntax trees are data structures widely used in compilers, due to their property of representing the structure of program code. An AST is usually the result of the syntax analysis phase of a compiler. It often serves as an intermediate representation of the program through several stages that the compiler requires, and has a strong impact on the final output of the compiler.
If you have the AST, of the code you’re working on, then you can do other things besides linting. You can do transformation! (Another way you might be using ASTs and not know it, is minification - see UglifyJS).
Regenerating the code from the syntax tree permits interesting options to those who want to take advantage of it. Let’s take a look at a great example that I came across in a JSConf EU 2013 talk about Parsing, Compiling, and Static Metaprogramming by Patrick Dubroy:
With this example, using Esprima, you can insert console.log statments for every function - allowing to more easily debug your program. With this approach you didn’t have to manually type console.log() in every function, it is doing that for you automatically, by parsing the AST, then finding functions in that tree, and inserting console log functions, via transformation.
Another similiar article that got me interested in writing about it was Etsy’s blog post, Transitioning to SCSS at Scale. Using ReworkCSS, that converts their CSS into an AST, they were able to migrate to using SCSS. Pretty amazing considering it was 400,000+ lines of CSS split over 2000+ files. It took a lot of work for them to change their build workflow to enable this, including diffing the old CSS with the new SCSS using ASTs, but it wouldn’t be possible at scale without ASTs.