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

Master the Art of the AST - Javascript Israel June '16

Master the Art of the AST - Javascript Israel June '16

Think about the new tools that are taking over the Javascript ecosystem: Babel, Typescript, Rollup, ESLint, and smarter IDEs.
What do they all have in common: they all take Javascript source code as input, and some emit Javascript code as output.
This talk will be a deep dive into the basic building block all these tools share: Transforming your code into a JS Abstract Syntax Tree (AST).
You'll learn to read, traverse, and manipulate the AST so you can extend Babel by writing your own plugins, or by writing a custom ESLint rules to enforce your team's code conventions.
You'll also learn how to create super powerful "code-mods" to automatically convert thousands of legacy ES5 scripts to ES6 in seconds.

cowchimp

June 28, 2016
Tweet

More Decks by cowchimp

Other Decks in Programming

Transcript

  1. //TODO
    Write linting rules to enforce
    your team’s code conventions
    Write your own javascript
    transpiling code
    Write powerful “code-mods”
    to automatically refactor
    thousands of legacy scripts
    from ES5 to ES6

    View full-size slide

  2. //TODO
    Write linting rules to enforce
    your team’s code conventions
    Write your own javascript
    transpiling code
    Write powerful “code-mods”
    to automatically refactor
    thousands of legacy scripts
    from ES5 to ES6
    ESLint
    jscodeshift

    View full-size slide

  3. //TODO
    Write linting rules to enforce
    your team’s code conventions
    ESTree-
    based AST
    +
    Visitor
    Pattern
    Write your own javascript
    transpiling code
    Write powerful “code-mods”
    to automatically refactor
    thousands of legacy scripts
    from ES5 to ES6
    ESLint
    jscodeshift

    View full-size slide

  4. Yonatan
    Mevorach
    • Javascript
    infrastructure
    at
    • code, blog,
    speak, repeat
    blog.cowchimp.com
    github.com/cowchimp
    @cowchimp

    View full-size slide

  5. Webpack
    Babel
    Uglifyjs
    Rollup
    ESLint
    Istanbul
    Ternjs
    jscodeshift

    View full-size slide

  6. Abstract
    Syntax
    Tree
    http://flic.kr/p/gC4EkS
    cb

    View full-size slide

  7. var foo = 'bar'; Program
    Variable
    Declaration
    Body
    Kind Declarations
    Variable
    Declarator
    Id Init
    Identifier Literal

    View full-size slide

  8. {
    "type": "Program",
    "body": [
    {
    "type": "VariableDeclaration",
    "declarations": [
    {
    "type": "VariableDeclarator",
    "id": {
    "type": "Identifier",
    "name": "foo"
    },
    "init": {
    "type": "Literal",
    "value": "bar"
    }
    }
    ],
    "kind": "var"
    }
    ]
    }
    var foo = 'bar';

    View full-size slide

  9. {
    "type": "Program",
    "body": [
    {
    "type": "VariableDeclaration",
    "declarations": [
    {
    "type": "VariableDeclarator",
    "id": {
    "type": "Identifier",
    "name": "foo"
    },
    "init": {
    "type": "Literal",
    "value": "bar"
    }
    }
    ],
    "kind": "var"
    }
    ]
    }
    var foo = 'bar';

    View full-size slide

  10. http://flic.kr/p/3xNFue
    cbd
    Parse
    Traverse
    Manipulate
    Generate code
    I/ {
    O {

    View full-size slide

  11. http://flic.kr/p/3xNFue
    cbd
    Parse
    I/ {
    O {

    View full-size slide

  12. astexplorer.net

    View full-size slide

  13. http://flic.kr/p/3xNFue
    cbd
    Traverse
    I/ {
    O {

    View full-size slide

  14. DEMO 1\3
    and then…
    Questions?
    ESLint

    View full-size slide

  15. astexplorer.net/#/bF7PLcS6GQ

    View full-size slide

  16. astexplorer.net/#/rKC56tJvJJ

    View full-size slide

  17. astexplorer.net/#/x9ULEp6XWw

    View full-size slide

  18. http://flic.kr/p/s8G9qy
    cb

    View full-size slide

  19. http://flic.kr/p/3xNFue
    cbd
    Manipulate
    I/ {
    O {

    View full-size slide

  20. DEMO 2\3
    and then…
    Questions?

    View full-size slide

  21. astexplorer.net/#/aV9EoqGS2Q

    View full-size slide

  22. astexplorer.net/#/D8mMdOO1gz

    View full-size slide

  23. http://flic.kr/p/3xNFue
    cbd
    Generate code
    I/ {
    O {

    View full-size slide

  24. Babel jscodeshift
    Input ➡ Output Javascript ➡ Javascript Javascript ➡ Javascript
    Plugin-based Yes Yes
    Building Block AST-to-AST Transform function AST-to-AST Transform function
    Endorsed by Facebook Facebook
    http://flic.kr/p/91r3Wz
    cb

    View full-size slide

  25. Babel jscodeshift
    Input ➡ Output Javascript ➡ Javascript Javascript ➡ Javascript
    Plugin-based Yes Yes
    Building Block AST-to-AST Transform function AST-to-AST Transform function
    Endorsed by Facebook Facebook
    http://flic.kr/p/91r3Wz
    cb
    Goal Compiler "Codemod" (refactoring)
    Example Use ES6 ➡ ES5 ES5 ➡ ES6
    Output level Lower level than source Same level as source
    Output readability Best-effort (boilerplate code) High
    Usage frequency All the time One-time

    View full-size slide

  26. DEMO 3\3
    and then…
    Questions?
    jscodeshift

    View full-size slide

  27. astexplorer.net/#/1WJItUlZFN

    View full-size slide

  28. astexplorer.net/#/sAVP0oNPMd

    View full-size slide

  29. github.com/cowchimp/awesome-ast
    blog.cowchimp.com @cowchimp
    [email protected]

    View full-size slide