Your SlideShare is downloading. ×
0
Esprima - What is that
Esprima - What is that
Esprima - What is that
Esprima - What is that
Esprima - What is that
Esprima - What is that
Esprima - What is that
Esprima - What is that
Esprima - What is that
Esprima - What is that
Esprima - What is that
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Esprima - What is that

1,424

Published on

A quick introduction to the JavaScript parser - Esprima

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
1,424
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Esprima – What is that ? https://github.com/ariya/esprima http://esprima.org
  • 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. Availabilty Esprima is available: ✔ on Browser ✔ as a node package ✔ through module loader(RequireJS) ✔ as Bower component ✔ with Yeoman
  • 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. 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. 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. 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. Applications ● http://nornagon.github.io/scrubby/ ● https://github.com/jedhunsaker/codepainter ● https://github.com/coveraje/coveraje ● https://github.com/ariya/esmorph
  • 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. 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. 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

×