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

Master the Art of the AST - Codemotion 2017

Master the Art of the AST - Codemotion 2017

Think about the new tools that are taking over the Javascript ecosystem: Babel, Typescript, Rollup, ESLint, and smarter IDEs.
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

March 30, 2017
Tweet

More Decks by cowchimp

Other Decks in Programming

Transcript

  1. TAKE
    CONTROL
    OF YOUR
    JAVASCRIPT

    View full-size slide

  2. Webpack
    Babel
    Uglifyjs
    Rollup
    ESLint
    Istanbul
    Ternjs
    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
    Front-End
    Tech-Lead
    at
    blog.cowchimp.com
    github.com/cowchimp
    @cowchimp

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. {
    "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

  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. http://flic.kr/p/3xNFue
    cbd
    Parse
    Traverse
    Manipulate
    Generate code
    I/ {
    O {

    View full-size slide

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

    View full-size slide

  11. astexplorer.net

    View full-size slide

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

    View full-size slide

  13. This code is a simplified version of the eslint-plugin-piggyback plugin:
    https://github.com/cowchimp/eslint-plugin-piggyback

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. http://fav.me/d6qkcnq

    View full-size slide

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

    View full-size slide