$30 off During Our Annual Pro Sale. View Details »

JavaScript Syntax Tree Demystified

JavaScript Syntax Tree Demystified

Presented at jQuery SF 2015 in San Francisco.

The structure of any valid JavaScript program can be represented by a syntax tree. In this talk, we will cover the basics of syntax parsing process using Esprima and the popular abstract syntax tree format ESTree. Among other benefits, such a syntax tree can be used to perform any syntactical analysis on the code. This talk will continue to cover the use of Esprima in JSCS, a popular tool to check and enforce coding style for JavaScript program.

Ariya Hidayat

June 23, 2015
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

  1. JavaScript Syntax Tree Demystified

    View Slide

  2. @ariyahidayat @mikesherov
    PhantomJS Esprima

    View Slide

  3. Composable
    De-facto Interface

    View Slide

  4. SpiderMonkey
    Reflect.js
    Escodegen
    Esprima

    View Slide

  5. SpiderMonkey
    Reflect.js
    Esprima
    Escodegen
    Escope
    Esmangle
    Istanbul
    Acorn
    Babel
    JSCS
    js2coffee
    Webpack
    ast-query
    recast
    falafel
    ESLint
    Esformatter
    Jsfmt
    Require.js
    Blanket
    MetaJS
    Ibrik
    JSDoc
    Rocambole
    JSComplexity
    Plato

    View Slide

  6. Parsing

    View Slide

  7. Parser
    Interpreter
    Run-time
    Libraries
    var answer = 42;
    alert(answer);

    View Slide

  8. JavaScript Execution Visualization
    int3.github.io/metajs/

    View Slide

  9. Parser
    Execution
    Static analysis
    Transformatio
    n

    View Slide

  10. “jQuery is cool”
    jQuery is cool
    separator
    word
    jQuery is cool
    Subject Adjective
    Verb

    View Slide

  11. var answer = 42;
    keyword
    identifier
    equal sign
    number
    semicolon

    View Slide

  12. var answer = 42;
    var answer = 42;
    var answer = 42 ;
    var answer = 42 ;
    same tokens

    View Slide

  13. var answer = 42;
    Variable
    Declaration
    Initializer
    Identifier
    syntax tree

    View Slide

  14. var answer = 42;
    alert(answer);
    Program
    Variable
    Declaration
    Call
    Expression
    Initializer
    Identifier
    answer 42
    Arguments
    Identifier
    alert answer

    View Slide

  15. Syntax Tree Visualization
    esprima.org/demo/parse.html
    var answer = 42
    github.com/estree/estree

    View Slide

  16. Stray Logging
    function detect_console(code) {
    function check(node) {
    if (node.type === 'CallExpression') {
    if (node.callee.type === 'MemberExpression') {
    if (node.callee.object.name === 'console') {
    alert('console call at line', node.loc.start.line);
    }
    }
    }
    }
    var tree = esprima.parse(code, { loc: true });
    estraverse.traverse(tree, { enter:check });
    }
    http://ariya.ofilabs.com/2013/04/automagic-removal-of-javascript-logging.html

    View Slide

  17. Style Checking

    View Slide

  18. A Note on Style...
    “Arguments over style are pointless. There
    should be a style guide, and you should follow it”
    - Rebecca Murphey
    “Have the robots do it.”
    - Someone, probably.

    View Slide

  19. A Rose By Any Other Name...
    var answer = 6 * 7;
    var answer=6*7

    View Slide

  20. Inspecting The Tree
    var answer = 6 * 7;
    literal
    literal
    6 7
    var answer=6*7
    Binary
    Expression
    Variable
    Declaration
    Identifier
    answer
    *

    View Slide

  21. View Slide

  22. Using Ranges
    literal
    literal
    6 7
    var answer=6*7
    Binary
    Expression
    *
    range: 11-14
    range: 11-12 range: 13-14

    View Slide

  23. Using Ranges
    literal
    literal
    6 7
    var answer = 6 * 7;
    Binary
    Expression
    *
    range: 13-18
    range: 13-14 range: 17-18

    View Slide

  24. Using Ranges
    literal
    literal
    6 7
    var answer = 6* 7;
    Binary
    Expression
    *
    range: 13-18
    range: 13-14 range: 17-18

    View Slide

  25. View Slide

  26. Using Tokens
    literal
    literal
    6 7
    *
    range: 13-14 range: 17-18
    6 7
    *
    13-14 17-18
    ...
    Tokens
    Tree
    14-15

    View Slide

  27. Tying Tokens To The Tree
    literal
    literal
    *
    Tree
    6 7
    *
    13-14 17-18
    Tokens
    14-15

    View Slide

  28. View Slide

  29. JSCS
    A Javascript Style Guide Enforcer
    https://github.com/jscs-dev/node-jscs

    View Slide

  30. JSCS File Object
    Walks AST, creates annotations, API for traversal

    View Slide

  31. JSCS Error Object
    Assertion Library, Error Retrieval and Addition API

    View Slide

  32. JSCS Rule Object

    View Slide

  33. YOU CAN SHOULD
    CONTRIBUTE
    https://github.com/jquery/esprima/issues
    https://github.com/jscs-dev/node-jscs/issues
    https://github.com/estree/estree/issues

    View Slide

  34. @ariyahidayat @mikesherov
    Thank You
    Some artworks are from http://openclipart.org.

    View Slide