Esprima – What is that ?
https://github.com/ariya/esprima
http://esprima.org
What is Esprima
Esprima is an ECMAScript parser written in ECMAScript
(Javascript)
Esprima produces a source tree of your ...
Availabilty
Esprima is available:
✔

on Browser

✔

as a node package

✔

through module loader(RequireJS)

✔

as Bower co...
Usage
esprima.parse(code, options);
This produces a sytax tree format that is compatible with
Parser API of SpiderMonkey (...
Usage (parameters)
code is the actual JavaScript code as string.
options parameter can have following:
loc - when true, no...
Example
esprima.parse('var answer = 42;');
Outputs:
{

}

"type": "Program",
"body": [{
"type": "VariableDeclaration",
"ki...
How can it help
●

Check for general bad practices
–
–
–

●

Identify Double Negatives - component.setHidden(false);
Ident...
Applications
●

http://nornagon.github.io/scrubby/

●

https://github.com/jedhunsaker/codepainter

●

https://github.com/c...
escodegen
https://github.com/Constellation/escodegen

escodegen generates the ecmascript code from Abstract
Source Tree (t...
Similar things
●

acorn.js http://marijnhaverbeke.nl/acorn/

●

Traceur-compiler https://github.com/google/traceur-compile...
References
●

Esprima - http://esprima.org

●

Presentation by Ariya Hidayat http://www.youtube.com/watch?v=ACYZFkvq0Sk

●...
Upcoming SlideShare
Loading in …5
×

Esprima - What is that

2,530 views

Published on

A quick introduction to the JavaScript parser - Esprima

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,530
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Esprima - What is that

  1. 1. Esprima – What is that ? https://github.com/ariya/esprima http://esprima.org
  2. 2. What is Esprima Esprima is an ECMAScript parser written in ECMAScript (Javascript) Esprima produces a source tree of your JavaScript code (in json format), which in turn can be traversed to analyze the code for various aspects. Also static code analysis can be applied to give an insight to the code. It can help to determine meta information about the Javascript code. Full support for ECMAScript 5.1 - Any Javascript code written in EcmaScript 5.1 or below can be parsed throgh current version of Esprima(v1.0.4).
  3. 3. Availabilty Esprima is available: ✔ on Browser ✔ as a node package ✔ through module loader(RequireJS) ✔ as Bower component ✔ with Yeoman
  4. 4. Usage esprima.parse(code, options); This produces a sytax tree format that is compatible with Parser API of SpiderMonkey (Mozilla). Options parameter can be provided to generate the detailed syntax tree. esprima.tokenize(code, options); This produces an array of tokens used in JavaScript Program
  5. 5. Usage (parameters) code is the actual JavaScript code as string. options parameter can have following: loc - when true, nodes have line and column-based location info range - when true, nodes have an index-based location range (array) raw – when true, literals have extra property to store the verbatim source tokens – when true, an extra array is provided containing all found tokens comment – when true, an extra array is provided containing all line and block comments tolerant - when true, an extra array containing all errors found, attempts to continue parsing when an error is encountered All are set to false by default.
  6. 6. Example esprima.parse('var answer = 42;'); Outputs: { } "type": "Program", "body": [{ "type": "VariableDeclaration", "kind": "var", "declarations": [{ "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "answer" }, "init": { "type": "Literal", "value": 42, "raw": "42" } }] }]
  7. 7. How can it help ● Check for general bad practices – – – ● Identify Double Negatives - component.setHidden(false); Identify declared, but not called functions; Identify code/comment ratio Tool to create utilities as: – – – Syntax validator Code Autocomplete Function Instrumentation
  8. 8. Applications ● http://nornagon.github.io/scrubby/ ● https://github.com/jedhunsaker/codepainter ● https://github.com/coveraje/coveraje ● https://github.com/ariya/esmorph
  9. 9. escodegen https://github.com/Constellation/escodegen escodegen generates the ecmascript code from Abstract Source Tree (the source tree generated from Esprima) escodegen.generate({ type: 'BinaryExpression', operator: '+', left: { type: 'Literal', value: 40 }, right: { type: 'Literal', value: 2 } }); produces the string '40 + 2'
  10. 10. Similar things ● acorn.js http://marijnhaverbeke.nl/acorn/ ● Traceur-compiler https://github.com/google/traceur-compiler Traceur is a JavaScript.next-to-JavaScript-of-today compiler ● ZeParser https://github.com/qfox/ZeParser ● Narcissus https://github.com/mozilla/narcissus ● UglifyJS 2 https://github.com/mishoo/UglifyJS2
  11. 11. References ● Esprima - http://esprima.org ● Presentation by Ariya Hidayat http://www.youtube.com/watch?v=ACYZFkvq0Sk ● Parser API by Mozilla https://developer.mozilla.org/en-US/docs/SpiderMonkey/Parser_API

×