A presentation at Full Stack Fest in in Barcelona, Spain by Yonatan Mevorach
//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
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" } ] }
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
piggy·back (verb)
piggy·back (verb)
piggy·back (verb)
piggy·back (verb) window.Acme Acme window
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
github.com/cowchimp/awesome-ast @cowchimp blog.cowchimp.com
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 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.