Mythical trees and where to find them

An introduction to ASTs in JavaScript

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