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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide