Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mythical trees and where to find them

Mythical trees and where to find them

An introduction to ASTs in JavaScript

Gabriele Petronella

November 11, 2017
Tweet

More Decks by Gabriele Petronella

Other Decks in Programming

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