Creating own language made easy
Upcoming SlideShare
Loading in...5
×
 

Creating own language made easy

on

  • 3,656 views

Slides from my talk from #jQueryBulgaria 2013

Slides from my talk from #jQueryBulgaria 2013

Statistics

Views

Total Views
3,656
Views on SlideShare
2,591
Embed Views
1,065

Actions

Likes
8
Downloads
15
Comments
0

6 Embeds 1,065

http://rreverser.com 1041
https://twitter.com 17
http://lanyrd.com 3
http://translate.googleusercontent.com 2
http://www.linkedin.com 1
https://rreverser.azurewebsites.net 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creating own language made easy Creating own language made easy Presentation Transcript

  • Creating own language made easy Ingvar Stepanyan @RReverser
  • Everything sucks
  • Everything sucks – human version
  • Everything sucks – developer version
  • Scary magic ??? ?? ?
  • Not so scary magic JS JS JS Parser Generator
  • Parsers
  • 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
  • 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 ;
  • 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 ;
  • 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 ;
  • 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 ;
  • Left recursion x=1-2-3 Top-down (Jison) Bottom-up (PEG.js) [ [ "x", "=", [ [ "1", "-", "2" ], "-", "3" ] "x", "=", [ "1", "-", [ "2", "-", "3" ] ] ] ]
  • 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 ;
  • Jison syntax: helpers %{ var scope = {}; %} …
  • Jison syntax: lexer … %lex %% s+ /* skip whitespace */ [A-Za-z_]w+ return 'ID'; d+ return ‘NUMBER’; [+*;=] return yytext; <<EOF>> return 'EOF'; /lex …
  • 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”)) */
  • Jison syntax: rules %start program program : stmt* EOF { return $1 } ; stmt : expr ‘;’ -> $1 ; expr : expression "+" expression -> $1 + $3 | expression "*" expression -> $1 * $3 | NUMBER -> $1 ;
  • Code generation
  • Methods  string concatenation  building AST object + escodegen (http://github.com/Constellation/escodegen)  using SourceNode from source-map (https://github.com/mozilla/source-map)
  • Debugging: source maps
  • Methods  string concatenation  building AST object + escodegen (http://github.com/Constellation/escodegen)  using SourceNode from source-map (https://github.com/mozilla/source-map)
  • AST way
  • Methods  string concatenation  building AST object + escodegen (http://github.com/Constellation/escodegen)  using SourceNode from source-map (https://github.com/mozilla/source-map)
  • 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
  • Resulting stack JS JS JS Jison sourcemap
  • Live demo