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.

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

June 23, 2015
Tweet

Transcript

  1. JavaScript Syntax Tree Demystified

  2. @ariyahidayat @mikesherov PhantomJS Esprima

  3. Composable De-facto Interface

  4. SpiderMonkey Reflect.js Escodegen Esprima

  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
  6. Parsing

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

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

  9. Parser Execution Static analysis Transformatio n

  10. “jQuery is cool” jQuery is cool separator word jQuery is

    cool Subject Adjective Verb
  11. var answer = 42; keyword identifier equal sign number semicolon

  12. var answer = 42; var answer = 42; var answer

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

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

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

  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
  17. Style Checking

  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.
  19. A Rose By Any Other Name... var answer = 6

    * 7; var answer=6*7
  20. Inspecting The Tree var answer = 6 * 7; literal

    literal 6 7 var answer=6*7 Binary Expression Variable Declaration Identifier answer *
  21. None
  22. Using Ranges literal literal 6 7 var answer=6*7 Binary Expression

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

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

    7; Binary Expression * range: 13-18 range: 13-14 range: 17-18
  25. None
  26. Using Tokens literal literal 6 7 * range: 13-14 range:

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

    7 * 13-14 17-18 Tokens 14-15
  28. None
  29. JSCS A Javascript Style Guide Enforcer https://github.com/jscs-dev/node-jscs

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

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

  32. JSCS Rule Object

  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

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