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

Master the Art of the AST - Codemotion 2017

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.

940e4866e4f95fbabbe5334d0a4a0de1?s=128

cowchimp

March 30, 2017
Tweet

More Decks by cowchimp

Other Decks in Programming

Transcript

  1. None
  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
  16. None
  17. None
  18. None
  19. None
  20. http://flic.kr/p/s8G9qy cb

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

  22. None
  23. None
  24. None
  25. None
  26. http://flic.kr/p/3xNFue cbd Generate code I/ { O {

  27. jscodeshift

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. http://fav.me/d6qkcnq

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