A presentation at JavaScript Israel in in Tel Aviv-Yafo, Israel by Yonatan Mevorach
//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
//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
//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 • Javascript infrastructure at • code, blog, speak, repeat blog.cowchimp.com github.com/cowchimp @cowchimp
Webpack Babel Uglifyjs Rollup ESLint Istanbul Ternjs jscodeshift
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
DEMO 1\3 ESLint and then… Questions?
astexplorer.net/#/bF7PLcS6GQ
astexplorer.net/#/rKC56tJvJJ
astexplorer.net/#/x9ULEp6XWw
cb http://flic.kr/p/s8G9qy
I/ { Manipulate O{ cbd http://flic.kr/p/3xNFue
DEMO 2\3 and then… Questions?
astexplorer.net/#/aV9EoqGS2Q
astexplorer.net/#/D8mMdOO1gz
I/ { O { Generate code cbd http://flic.kr/p/3xNFue
jscodeshift
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
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
DEMO 3\3 jscodeshift and then… Questions?
astexplorer.net/#/1WJItUlZFN
astexplorer.net/#/sAVP0oNPMd
github.com/cowchimp/awesome-ast blog.cowchimp.com @cowchimp yonatan@sears.co.il
Think about the new tools that are taking over the Javascript ecosystem: Babel, Typescript, Rollup, ESLint, and smarter IDEs. What do they all have in common: they all take Javascript source code as input, and some emit Javascript code as output. 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.
for free. You
can too.