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

Master the Art of the AST - Javascript Israel June '16

Master the Art of the AST - Javascript Israel June '16

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

June 28, 2016
Tweet

Transcript

  1. None
  2. //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
  3. //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 ESLint 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 • Javascript infrastructure at • code, blog, speak,

    repeat blog.cowchimp.com github.com/cowchimp @cowchimp
  6. Webpack Babel Uglifyjs Rollup ESLint Istanbul Ternjs jscodeshift

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

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

    Variable Declarator Id Init Identifier Literal
  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. { "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [

    { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "foo" }, "init": { "type": "Literal", "value": "bar" } } ], "kind": "var" } ] } var foo = 'bar';
  11. http://flic.kr/p/3xNFue cbd Parse Traverse Manipulate Generate code I/ { O

    {
  12. http://flic.kr/p/3xNFue cbd Parse I/ { O {

  13. astexplorer.net

  14. http://flic.kr/p/3xNFue cbd Traverse I/ { O {

  15. ESLint

  16. None
  17. DEMO 1\3 and then… Questions? ESLint

  18. astexplorer.net/#/bF7PLcS6GQ

  19. astexplorer.net/#/rKC56tJvJJ

  20. astexplorer.net/#/x9ULEp6XWw

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

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

  23. None
  24. DEMO 2\3 and then… Questions?

  25. astexplorer.net/#/aV9EoqGS2Q

  26. astexplorer.net/#/D8mMdOO1gz

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

  28. jscodeshift

  29. 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
  30. 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
  31. DEMO 3\3 and then… Questions? jscodeshift

  32. astexplorer.net/#/1WJItUlZFN

  33. astexplorer.net/#/sAVP0oNPMd

  34. github.com/cowchimp/awesome-ast blog.cowchimp.com @cowchimp yonatan@sears.co.il