Master the Art of the AST - Codemotion 2017

Think about the new tools that are taking over the Javascript ecosystem: Babel, Typescript, Rollup, ESLint, and smarter IDEs.
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.

Transcript

2. TAKE CONTROL OF YOUR JAVASCRIPT
3. Webpack Babel Uglifyjs Rollup ESLint Istanbul Ternjs jscodeshift
4. //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
5. Yonatan Mevorach Front-End Tech-Lead at blog.cowchimp.com github.com/cowchimp @cowchimp
6. Abstract Syntax Tree http://flic.kr/p/gC4EkS cb
7. var foo = 'bar'; Program Variable Declaration Body Kind Declarations Variable Declarator Id Init Identifier Literal
8. { "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "foo" }, "init": { "type": "Literal", "value": "bar" } } ], "kind": "var" } ] } var foo = 'bar';
9. { "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "foo" }, "init": { "type": "Literal", "value": "bar" } } ], "kind": "var" } ] } var foo = 'bar';
10. http://flic.kr/p/3xNFue cbd Parse Traverse Manipulate Generate code I/ { O {
11. http://flic.kr/p/3xNFue cbd Parse I/ { O {
12. astexplorer.net
13. http://flic.kr/p/3xNFue cbd Traverse I/ { O {
14. ESLint
15. This code is a simplified version of the eslint-plugin-piggyback plugin: https://github.com/cowchimp/eslint-plugin-piggyback
20. http://flic.kr/p/s8G9qy cb
21. http://flic.kr/p/3xNFue cbd Manipulate I/ { O {
26. http://flic.kr/p/3xNFue cbd Generate code I/ { O {
27. jscodeshift
35. http://fav.me/d6qkcnq
36. github.com/cowchimp/awesome-ast blog.cowchimp.com @cowchimp yonatan@sears.co.il