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

Trees Everywhere - MilanoJS

Trees Everywhere - MilanoJS

Abstract Syntax Trees (or ASTs) are the core of most tools we use in JavaScript, from Babel to ESLint, from prettier to codemods.

In this talk we see what they are, how they power such tools and how to use them directly to develop custom solutions to everyday problems.

C2bb0454c4af1a61e7f173d54ce17b0b?s=128

Gabriele Petronella

June 14, 2017
Tweet

Transcript

  1. Trees everywhere Gabriele Petronella Software Engineer @ buildo

  2. me, hi! @gabro27 - MilanoJS 14/06/2017

  3. stuff I do (by day) @gabro27 - MilanoJS 14/06/2017

  4. stuff I do (by night) @gabro27 - MilanoJS 14/06/2017

  5. Why this talk @gabro27 - MilanoJS 14/06/2017

  6. @gabro27 - MilanoJS 14/06/2017

  7. More seriously @gabro27 - MilanoJS 14/06/2017

  8. Summary 1.AST? 2.AST workflows 3.A real-world example @gabro27 - MilanoJS

    14/06/2017
  9. Let's start from the answer const answer = 42; @gabro27

    - MilanoJS 14/06/2017
  10. Tokens const answer = 42 ; // | | |

    | | | | | | | // \_'const'_/ \_name_/ \_'='_/ \_num_/ \_';'_/ @gabro27 - MilanoJS 14/06/2017
  11. Grammar const answer = 42 ; // | | |

    | || // | \_Identifier__/ \_NumericLiteral_/| // | | | // | \_________VariableDeclarator________/ // | | // \____________VariableDeclaration____________/ @gabro27 - MilanoJS 14/06/2017
  12. So... AST? @gabro27 - MilanoJS 14/06/2017

  13. Abstract Syntax Tree @gabro27 - MilanoJS 14/06/2017

  14. Why Abstract? const answer = 42; const answer = 42

    const answer = 42 const answer = 42 @gabro27 - MilanoJS 14/06/2017
  15. AST? ASTs! parser AST ES2015 ES next acorn ESTree ✅

    ❌ babylon Babylon AST ✅ ✅ espree ESTree ✅ ❌ esprima ESTree ✅ ❌ flow ESTree + custom ✅ ✅ TypeScript TypeScript AST ✅ ✅ @gabro27 - MilanoJS 14/06/2017
  16. astexplorer.net @gabro27 - MilanoJS 14/06/2017

  17. AST Workflows @gabro27 - MilanoJS 14/06/2017

  18. basic @gabro27 - MilanoJS 14/06/2017

  19. babel @gabro27 - MilanoJS 14/06/2017

  20. demo: literal transformation @gabro27 - MilanoJS 14/06/2017

  21. codemod @gabro27 - MilanoJS 14/06/2017

  22. hey, doesn't babel do the same thing? @gabro27 - MilanoJS

    14/06/2017
  23. codemod tools » recast » jscodeshift @gabro27 - MilanoJS 14/06/2017

  24. eslint @gabro27 - MilanoJS 14/06/2017

  25. ESLint uses espree, so... What about ES next? @gabro27 -

    MilanoJS 14/06/2017
  26. babel-eslint @gabro27 - MilanoJS 14/06/2017

  27. demo: no-console- log @gabro27 - MilanoJS 14/06/2017

  28. What about eslint --fix @gabro27 - MilanoJS 14/06/2017

  29. prettier @gabro27 - MilanoJS 14/06/2017

  30. Prettier... for TS? @gabro27 - MilanoJS 14/06/2017

  31. Meanwhile in the real world @gabro27 - MilanoJS 14/06/2017

  32. // MyContainer.js import t from 'tcomb'; import container from 'buildo-react-container';

    import MyComponent from './MyComponent'; export default container(MyComponent, { connect: { isFlag: t.Boolean, name: t.String, label: t.maybe(t.String) } }); @gabro27 - MilanoJS 14/06/2017
  33. // state.js export default { isFlag: t.Boolean, name: t.String, label:

    t.maybe(t.String) } @gabro27 - MilanoJS 14/06/2017
  34. // MyContainer.js import t from 'tcomb'; import container from 'buildo-react-container';

    import MyComponent from './MyComponent'; export default container(MyComponent, { connect: ['isFlag', 'name', 'label'] }); @gabro27 - MilanoJS 14/06/2017
  35. DEMO @gabro27 - MilanoJS 14/06/2017

  36. We've seen @gabro27 - MilanoJS 14/06/2017

  37. AST: what and why @gabro27 - MilanoJS 14/06/2017

  38. Competing AST standards in JS @gabro27 - MilanoJS 14/06/2017

  39. Typical AST-based workflows @gabro27 - MilanoJS 14/06/2017

  40. going custom @gabro27 - MilanoJS 14/06/2017

  41. Some resources » astexplorer.net » Babel Handbook @gabro27 - MilanoJS

    14/06/2017
  42. Thank you @gabro27 - MilanoJS 14/06/2017

  43. Questions? ping me on Twitter: @gabro27 or @gabro on Slack

    (http://milanojs.herokuapp.com/) @gabro27 - MilanoJS 14/06/2017