Master the Art of the AST

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

Slide 1

Slide 1

Slide 2

Slide 2

TAKE CONTROL OF YOUR JAVASCRIPT

Slide 3

Slide 3

Webpack Babel Uglifyjs Rollup ESLint Istanbul Ternjs 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 Front-End Tech-Lead at blog.cowchimp.com github.com/cowchimp @cowchimp

Slide 6

Slide 6

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

Slide 7

Slide 7

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

Slide 8

Slide 8

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

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

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

Slide 11

Slide 11

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

Slide 12

Slide 12

astexplorer.net

Slide 13

Slide 13

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

Slide 14

Slide 14

ESLint

Slide 15

Slide 15

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

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

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

Slide 27

Slide 27

jscodeshift

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

http://fav.me/d6qkcnq

Slide 36

Slide 36

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