Master the Art of the AST

A presentation at Codemotion Tel Aviv in March 2017 in Tel Aviv-Yafo, Israel by Yonatan Mevorach

TAKE CONTROL OF YOUR JAVASCRIPT

Webpack Babel Uglifyjs Rollup ESLint Istanbul Ternjs jscodeshift

//TODO Write linting rules to enforce your team’s code conventions ESLint ESTreebased AST Write your own javascript transpiling code Write powerful “code-mods” to automatically refactor thousands of legacy scripts from ES5 to ES6
Visitor Pattern jscodeshift

Yonatan Mevorach Front-End Tech-Lead at blog.cowchimp.com github.com/cowchimp @cowchimp

Abstract Syntax Tree cb http://flic.kr/p/gC4EkS

var foo = 'bar'; Program Body Variable Declaration Kind Declarations Variable Declarator Id Init Identifier Literal

var foo = 'bar'; { "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "foo" }, "init": { "type": "Literal", "value": "bar" } } ], "kind": "var" } ] }

var foo = 'bar'; { "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "foo" }, "init": { "type": "Literal", "value": "bar" } } ], "kind": "var" } ] }

I/ { O{ Parse Traverse Manipulate Generate code cbd http://flic.kr/p/3xNFue

I/ { O{ Parse cbd http://flic.kr/p/3xNFue

astexplorer.net

I/ { Traverse O{ cbd http://flic.kr/p/3xNFue

ESLint

This code is a simplified version of the eslint-plugin-piggyback plugin: https://github.com/cowchimp/eslint-plugin-piggyback

cb http://flic.kr/p/s8G9qy

I/ { Manipulate O{ cbd http://flic.kr/p/3xNFue

I/ { O { Generate code cbd http://flic.kr/p/3xNFue

jscodeshift

http://fav.me/d6qkcnq

github.com/cowchimp/awesome-ast blog.cowchimp.com @cowchimp yonatan@sears.co.il

Yonatan Mevorach
@cowchimp

1 / 36

Think about the new tools that are taking over the Javascript ecosystem: Babel, Typescript, Rollup, ESLint, and smarter IDEs. This talk will be a deep dive into the basic building block all these tools share: Transforming your code into a JS Abstract Syntax Tree (AST). You'll learn to read, traverse, and manipulate the AST so you can extend Babel by writing your own plugins, or by writing a custom ESLint rules to enforce your team's code conventions. You'll also learn how to create super powerful "code-mods" to automatically convert thousands of legacy ES5 scripts to ES6 in seconds.