Mythical trees and where to find them

Mythical trees and where to find them

An introduction to ASTs in JavaScript

C2bb0454c4af1a61e7f173d54ce17b0b?s=128

Gabriele Petronella

November 11, 2017
Tweet

Transcript

  1. Mythical Trees and where to find them Gabriele Petronella Software

    Engineer @ buildo
  2. me, hi! @gabro27 - Codemotion 11/11/2017

  3. stuff I do (by day) @gabro27 - Codemotion 11/11/2017

  4. stuff I do (by night) @gabro27 - Codemotion 11/11/2017

  5. Why this talk @gabro27 - Codemotion 11/11/2017

  6. Agenda 1.AST 2.AST workflows 3.A real-world example @gabro27 - Codemotion

    11/11/2017
  7. Let's start from the answer const answer = 42; @gabro27

    - Codemotion 11/11/2017
  8. Tokens const answer = 42 ; // | | |

    | | | | | | | // \_'const'_/ \_name_/ \_'='_/ \_num_/ \_';'_/ @gabro27 - Codemotion 11/11/2017
  9. Grammar const answer = 42 ; // | | |

    | || // | \_Identifier__/ \_NumericLiteral_/| // | | | // | \_________VariableDeclarator________/ // | | // \____________VariableDeclaration____________/ @gabro27 - Codemotion 11/11/2017
  10. So... AST? @gabro27 - Codemotion 11/11/2017

  11. Abstract Syntax Tree @gabro27 - Codemotion 11/11/2017

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

    const answer = 42 const answer = 42 @gabro27 - Codemotion 11/11/2017
  13. AST in JavaScript @gabro27 - Codemotion 11/11/2017

  14. AST? ASTs! parser AST ES2017 ES next acorn ESTree ✅

    only stage-4 babylon Babylon AST ✅ ✅ espree ESTree ✅ same as acorn esprima ESTree ✅ ❌ flow ESTree + custom ✅ ✅ TypeScript TypeScript AST ✅ ✅ @gabro27 - Codemotion 11/11/2017
  15. astexplorer.net @gabro27 - Codemotion 11/11/2017

  16. AST Workflows @gabro27 - Codemotion 11/11/2017

  17. basic @gabro27 - Codemotion 11/11/2017

  18. babel @gabro27 - Codemotion 11/11/2017

  19. demo: literal transformation @gabro27 - Codemotion 11/11/2017

  20. codemod @gabro27 - Codemotion 11/11/2017

  21. hey, doesn't babel do the same thing? @gabro27 - Codemotion

    11/11/2017
  22. codemod tools » recast » jscodeshift @gabro27 - Codemotion 11/11/2017

  23. eslint @gabro27 - Codemotion 11/11/2017

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

    Codemotion 11/11/2017
  25. babel-eslint @gabro27 - Codemotion 11/11/2017

  26. demo: no-console- log @gabro27 - Codemotion 11/11/2017

  27. What about eslint --fix @gabro27 - Codemotion 11/11/2017

  28. prettier @gabro27 - Codemotion 11/11/2017

  29. Prettier... for TS? @gabro27 - Codemotion 11/11/2017

  30. Meanwhile in the real world @gabro27 - Codemotion 11/11/2017

  31. // 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 - Codemotion 11/11/2017
  32. // state.js export default { isFlag: t.Boolean, name: t.String, label:

    t.maybe(t.String) } @gabro27 - Codemotion 11/11/2017
  33. // 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 - Codemotion 11/11/2017
  34. DEMO @gabro27 - Codemotion 11/11/2017

  35. We've seen @gabro27 - Codemotion 11/11/2017

  36. AST: what and why @gabro27 - Codemotion 11/11/2017

  37. Competing AST standards in JS @gabro27 - Codemotion 11/11/2017

  38. Typical AST-based workflows @gabro27 - Codemotion 11/11/2017

  39. Some resources » astexplorer.net » Babel Handbook @gabro27 - Codemotion

    11/11/2017
  40. Thank you @gabro27 - Codemotion 11/11/2017

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

    (http://milanojs.herokuapp.com/) PS: wanna work on this stuff? We're hiring! @gabro27 - Codemotion 11/11/2017