Master the Art of the AST - Full Stack Fest 2017

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.

Transcript

3. //TODO Write linting rules to enforce your team’s code conventions ESTree- based AST + Visitor Pattern Write your own javascript transpiling code Write powerful “code-mods” to automatically refactor thousands of legacy scripts from ES5 to ES6 ESLint jscodeshift
4. Webpack Babel Uglifyjs Rollup ESLint Istanbul Ternjs jscodeshift
5. Abstract Syntax Tree http://flic.kr/p/gC4EkS cb
6. var foo = 'bar'; Program Variable Declaration Body Kind Declarations Variable Declarator Id Init Identifier Literal
7. { "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "foo" }, "init": { "type": "Literal", "value": "bar" } } ], "kind": "var" } ] } var foo = 'bar';
8. http://flic.kr/p/3xNFue cbd Parse Traverse Manipulate Generate code I/ { O {
9. http://flic.kr/p/3xNFue cbd Parse I/ { O {
10. astexplorer.net
11. http://flic.kr/p/3xNFue cbd Traverse I/ { O {
12. ESLint
13. piggy·back (verb)
14. piggy·back (verb)
15. piggy·back (verb)
16. piggy·back (verb) window Acme window.Acme
17. This code is a simplified version of the eslint-plugin-piggyback plugin: https://github.com/cowchimp/eslint-plugin-piggyback
22. http://flic.kr/p/s8G9qy cb
23. http://flic.kr/p/3xNFue cbd Manipulate I/ { O {
28. http://flic.kr/p/3xNFue cbd Generate code I/ { O {
29. jscodeshift
38. github.com/cowchimp/awesome-ast blog.cowchimp.com @cowchimp