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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Grammar
   const answer = 42 ;
   // | | | | ||
   // | \_Identifier__/ \_NumericLiteral_/|
   // | | |
   // | \_________VariableDeclarator________/
   // | |
   // \____________VariableDeclaration____________/
   @gabro27 - Codemotion 11/11/2017
   

   View Slide

10. So... AST?
    @gabro27 - Codemotion 11/11/2017
    

    View Slide

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

    View Slide

12. Why Abstract?
    const answer = 42;
    const answer = 42
    const answer =
    42
    const
    answer
    =
    42
    @gabro27 - Codemotion 11/11/2017
    

    View Slide

13. AST in JavaScript
    @gabro27 - Codemotion 11/11/2017
    

    View Slide

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
    

    View Slide

15. astexplorer.net
    @gabro27 - Codemotion 11/11/2017
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. ESLint uses espree, so...
    What about ES next?
    @gabro27 - Codemotion 11/11/2017
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

32. // state.js
    export default {
    isFlag: t.Boolean,
    name: t.String,
    label: t.maybe(t.String)
    }
    @gabro27 - Codemotion 11/11/2017
    

    View Slide

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
    

    View Slide

34. DEMO
    @gabro27 - Codemotion 11/11/2017
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide