Your SlideShare is downloading. ×
0
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
Creating own language made easy
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

Creating own language made easy

3,971

Published on

Slides from my talk from #jQueryBulgaria 2013

Slides from my talk from #jQueryBulgaria 2013

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,971
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
25
Comments
0
Likes
10
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. Creating own language made easy Ingvar Stepanyan @RReverser
  • 2. Everything sucks
  • 3. Everything sucks – human version
  • 4. Everything sucks – developer version
  • 5. Scary magic ??? ?? ?
  • 6. Not so scary magic JS JS JS Parser Generator
  • 7. Parsers
  • 8. Parser generators  jison Bison in javascript, used by Coffeescript  PEG.js parser generator for JavaScript based on the parsing expression grammar formalism  OMeta/JS (source) metacompiler for many languages to many targets, including js.  languagejs - PEG parser written in JavaScript with first class errors  Canopy Self-hosting PEG parser compiler for JavaScript, influenced by Ruby parser generators such as Treetop and Citrus  JS/CC LALR(1) parser generator  jsparse PEG by Grandmaster Chris Double  ReParse parser combinator library for Javascript like Haskell's Parsec  p4js Monadic parser library for JavaScript  JSGLR Scannerless, Generalized Left-to-right Rightmost (SGLR) derivation parser for JavaScript  antlr has a javascript target  Cruiser.Parse LL(k) parser
  • 9. Parser generators Top-down (Jison) Bottom-up (PEG.js) start = additive %left "+" %left "*" additive = left:multiplicative "+" right:additive { return left + right; } / multiplicative %start program; multiplicative = left:primary "*" right:multiplicative { return left * right; } / primary program : expression { return $$ } ; primary = integer / "(" additive:additive ")" { return additive; } integer "integer" = digits:[0-9]+ { return parseInt(digits.join(""), 10); } %% expression : expression "+" expression -> $1 + $3 | expression "*" expression -> $1 * $3 | "(" expression ")" -> $2 | NUMBER -> $1 ;
  • 10. Choice ordering Top-down (Jison) Bottom-up (PEG.js) start = additive %left "+" %left "*" additive = left:multiplicative "+" right:additive { return left + right; } / multiplicative %start program; multiplicative = left:primary "*" right:multiplicative { return left * right; } / primary program : expression { return $$ } ; primary = integer / "(" additive:additive ")" { return additive; } integer "integer" = digits:[0-9]+ { return parseInt(digits.join(""), 10); } %% expression : expression "+" expression -> $1 + $3 | expression "*" expression -> $1 * $3 | "(" expression ")" -> $2 | NUMBER -> $1 ;
  • 11. Ambiguity if a then (if b then s) else s2 or if a then if b then s else s2: if a then (if b then s else s2) Top-down (Jison) Bottom-up (PEG.js) start = additive %left "+" %left "*" additive = left:multiplicative "+" right:additive { return left + right; } / multiplicative %start program; multiplicative = left:primary "*" right:multiplicative { return left * right; } / primary program : expression { return $$ } ; primary = integer / "(" additive:additive ")" { return additive; } integer "integer" = digits:[0-9]+ { return parseInt(digits.join(""), 10); } %% expression : expression "+" expression -> $1 + $3 | expression "*" expression -> $1 * $3 | "(" expression ")" -> $2 | NUMBER -> $1 ;
  • 12. Left recursion x=1-2-3 Top-down (Jison) Bottom-up (PEG.js) start = additive %left "+" %left "*" additive = left:multiplicative "+" right:additive { return left + right; } / multiplicative %start program; multiplicative = left:primary "*" right:multiplicative { return left * right; } / primary program : expression { return $$ } ; primary = integer / "(" additive:additive ")" { return additive; } integer "integer" = digits:[0-9]+ { return parseInt(digits.join(""), 10); } %% expression : expression "+" expression -> $1 + $3 | expression "*" expression -> $1 * $3 | "(" expression ")" -> $2 | NUMBER -> $1 ;
  • 13. Left recursion x=1-2-3 Top-down (Jison) Bottom-up (PEG.js) [ [ "x", "=", [ [ "1", "-", "2" ], "-", "3" ] "x", "=", [ "1", "-", [ "2", "-", "3" ] ] ] ]
  • 14. Summary choice Top-down (Jison) Bottom-up (PEG.js) start = additive %left "+" %left "*" additive = left:multiplicative "+" right:additive { return left + right; } / multiplicative %start program; multiplicative = left:primary "*" right:multiplicative { return left * right; } / primary program : expression { return $$ } ; primary = integer / "(" additive:additive ")" { return additive; } integer "integer" = digits:[0-9]+ { return parseInt(digits.join(""), 10); } %% expression : expression "+" expression -> $1 + $3 | expression "*" expression -> $1 * $3 | "(" expression ")" -> $2 | NUMBER -> $1 ;
  • 15. Jison syntax: helpers %{ var scope = {}; %} …
  • 16. Jison syntax: lexer … %lex %% s+ /* skip whitespace */ [A-Za-z_]w+ return 'ID'; d+ return ‘NUMBER’; [+*;=] return yytext; <<EOF>> return 'EOF'; /lex …
  • 17. Jison syntax: operator precedence … %left ';‘ %right ‘=‘ %left ‘+’ %left ‘*’ … /* “x=a*b+c” -> assign(“x”, “a*b+c”) -> assign(“x”, add(“a*b”, “c”)) -> assign(“x”, add(mul(“a”, “b”), “c”)) */
  • 18. Jison syntax: rules %start program program : stmt* EOF { return $1 } ; stmt : expr ‘;’ -> $1 ; expr : expression "+" expression -> $1 + $3 | expression "*" expression -> $1 * $3 | NUMBER -> $1 ;
  • 19. Code generation
  • 20. Methods  string concatenation  building AST object + escodegen (http://github.com/Constellation/escodegen)  using SourceNode from source-map (https://github.com/mozilla/source-map)
  • 21. Debugging: source maps
  • 22. Methods  string concatenation  building AST object + escodegen (http://github.com/Constellation/escodegen)  using SourceNode from source-map (https://github.com/mozilla/source-map)
  • 23. AST way
  • 24. Methods  string concatenation  building AST object + escodegen (http://github.com/Constellation/escodegen)  using SourceNode from source-map (https://github.com/mozilla/source-map)
  • 25. SourceNode  new SourceNode(line, column, filename, jsChunk)  line, column – position in original file  filename – name of original file  jsChunk – JavaScript code string, another SourceNode instance or array of those
  • 26. Resulting stack JS JS JS Jison sourcemap
  • 27. Live demo

×