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.

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