Master the Art of the AST

A presentation at JavaScript Israel in June 2016 in Tel Aviv-Yafo, Israel by Yonatan Mevorach

Slide 1

Slide 1

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

//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

Slide 5

Slide 5

Yonatan Mevorach • Javascript infrastructure at • code, blog, speak, repeat blog.cowchimp.com github.com/cowchimp @cowchimp

Slide 6

Slide 6

Webpack Babel Uglifyjs Rollup ESLint Istanbul Ternjs jscodeshift

Slide 7

Slide 7

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

Slide 8

Slide 8

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

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

astexplorer.net

Slide 14

Slide 14

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

Slide 15

Slide 15

ESLint

Slide 16

Slide 16

Slide 17

Slide 17

DEMO 1\3 ESLint and then… Questions?

Slide 18

Slide 18

astexplorer.net/#/bF7PLcS6GQ

Slide 19

Slide 19

astexplorer.net/#/rKC56tJvJJ

Slide 20

Slide 20

astexplorer.net/#/x9ULEp6XWw

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

Slide 24

Slide 24

DEMO 2\3 and then… Questions?

Slide 25

Slide 25

astexplorer.net/#/aV9EoqGS2Q

Slide 26

Slide 26

astexplorer.net/#/D8mMdOO1gz

Slide 27

Slide 27

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

Slide 28

Slide 28

jscodeshift

Slide 29

Slide 29

Babel jscodeshift Input ➡ Output Javascript ➡ Javascript Javascript ➡ Javascript Plugin-based Yes Yes Building Block AST-to-AST Transform function AST-to-AST Transform function Endorsed by Facebook Facebook cb http://flic.kr/p/91r3Wz

Slide 30

Slide 30

Babel jscodeshift Input ➡ Output Javascript ➡ Javascript Javascript ➡ Javascript Plugin-based Yes Yes Building Block AST-to-AST Transform function AST-to-AST Transform function Endorsed by Facebook Facebook Goal Compiler "Codemod" (refactoring) Example Use ES6 ➡ ES5 ES5 ➡ ES6 Output level Lower level than source Same level as source Output readability Best-effort (boilerplate code) High Usage frequency All the time One-time cb http://flic.kr/p/91r3Wz

Slide 31

Slide 31

DEMO 3\3 jscodeshift and then… Questions?

Slide 32

Slide 32

astexplorer.net/#/1WJItUlZFN

Slide 33

Slide 33

astexplorer.net/#/sAVP0oNPMd

Slide 34

Slide 34

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