Mythical trees and where to find them

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