Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Master the Art of the AST (and Take Control of Your JS!)

Master the Art of the AST (and Take Control of Your JS!)

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.

940e4866e4f95fbabbe5334d0a4a0de1?s=128

cowchimp

March 30, 2016
Tweet

Transcript

  1. None
  2. TAKE CONTROL OF YOUR JAVASCRIPT

  3. Webpack Babel Uglifyjs Rollup ESLint Istanbul Ternjs jscodeshift

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

  5. var foo = 'bar'; Program Variable Declaration Body Kind Declarations

    Variable Declarator Id Init Identifier Literal
  6. { "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [

    { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "foo" }, "init": { "type": "Literal", "value": "bar" } } ], "kind": "var" } ] } var foo = 'bar';
  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. http://flic.kr/p/AjFHKW cb Esprima Espree Acorn Babylon Shift ESTree Spec

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

  13. ESLint

  14. DEMO 1\3 and then… Questions? ESLint

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

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

  17. None
  18. DEMO 2\3 and then… Questions?

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

  20. jscodeshift

  21. DEMO 3\3 and then… Questions? jscodeshift

  22. 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 http://flic.kr/p/91r3Wz cb
  23. 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 http://flic.kr/p/91r3Wz cb 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
  24. github.com/cowchimp/awesome-ast blog.cowchimp.com @cowchimp