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.

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