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
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 *
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
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
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.