Embed Size (px)
Citation preview
YOUR CODE IS NOT A STRINGINGVAR STEPANYAN
YOUR CODE IS NOT A STRING
SOURCE MAPS - EPIC WIN IN DEBUGGING
YOUR CODE IS NOT A STRING
SOURCE MAPS - EPIC WIN IN DEBUGGING
YOUR CODE IS NOT A STRING
BUILDERS - EPIC FAIL FOR DEBUGGING
umdify:
// UMD definition
output += '(function(root, factory) {\n'; output += ' if (typeof define === "function" && define.amd) {\n'; output += ' define([' + depNames.join(', ') + '], factory);\n';
output += ' } else if (typeof exports === "object") {\n'; output += ' module.exports = factory(require);\n'; …
YOUR CODE IS NOT A STRING
BUILDERS - EPIC FAIL FOR DEBUGGING
grunt-amd-wrap:
var srcText = grunt.file.read(file.src[0]); var destText = amdWrap(srcText);
YOUR CODE IS NOT A STRING
BUILDERS - EPIC FAIL FOR DEBUGGING
super-duper-universal-transformer:
function transform(srcText) { return 'var answer = 42;'; }
IT HAS A SOULYOUR CODE IS NOT A STRING
YOUR CODE IS NOT A STRING
YOU ARE PERFORMING PARSING RIGHT NOW
YOUR CODE IS NOT A STRING
YOU ARE PERFORMING PARSING RIGHT NOW
YOUR CODE IS NOT A STRING
WE ARE ALL PARSERS
In computer science, an abstract syntax tree (AST), or justsyntax tree, is a tree representation of the abstract syntacticstructure of source code written in a programminglanguage. Each node of the tree denotes a constructoccurring in the source code.
The syntax is "abstract" in not representing every detailappearing in the real syntax. For instance, groupingparentheses are implicit in the tree structure, and a syntacticconstruct like an if-condition-then expression may bedenoted by means of a single node with three branches.
YOUR CODE IS NOT A STRING
WE ARE ALL PARSERS
In computer science, an abstract syntax tree (AST), or justsyntax tree, is a tree representation of the abstract syntacticstructure of source code written in a programminglanguage. Each node of the tree denotes a constructoccurring in the source code.
The syntax is "abstract" in not representing every detailappearing in the real syntax. For instance, groupingparentheses are implicit in the tree structure, and a syntacticconstruct like an if-condition-then expression may bedenoted by means of a single node with three branches.
Para
grap
hs
YOUR CODE IS NOT A STRING
WE ARE ALL PARSERS
In computer science, an abstract syntax tree (AST), or justsyntax tree, is a tree representation of the abstract syntacticstructure of source code written in a programminglanguage. Each node of the tree denotes a constructoccurring in the source code.
The syntax is "abstract" in not representing every detailappearing in the real syntax. For instance, groupingparentheses are implicit in the tree structure, and a syntacticconstruct like an if-condition-then expression may bedenoted by means of a single node with three branches.
Para
grap
hs
Sentences
YOUR CODE IS NOT A STRING
WE ARE ALL PARSERS
In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the abstract syntactic structure of source code written in a programming language. Each node of the tree denotes a constructoccurring in the source code.
The syntax is "abstract" in not representing every detailappearing in the real syntax. For instance, groupingparentheses are implicit in the tree structure, and a syntacticconstruct like an if-condition-then expression may bedenoted by means of a single node with three branches.
Para
grap
hs
Words and Punctuators
YOUR CODE IS NOT A STRING
HOW DO WE READ TEXTS?
WORDS AND PUNCTUATION SENTENCES PARAGRAPHSPHRASES
YOUR CODE IS NOT A STRING
HOW DO WE READ CODE?
WORDS AND PUNCTUATION STATEMENTS FUNCTIONSEXPRESSIONS
YOUR CODE IS NOT A STRING
HOW DO COMPILERS READ CODE?
WORDS AND PUNCTUATION STATEMENTS FUNCTIONSEXPRESSIONS
YOUR CODE IS NOT A STRING
HOW DO COMPILERS READ CODE?
WORDS AND PUNCTUATION STATEMENTS FUNCTIONSEXPRESSIONS
LEXING PARSING(TOKENS) (SYNTACTIC NODES)
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
var answer = 42;
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
76 61 72 20 61 6E 73 77 65 72 20 3D 20 34 32 3B
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ v
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ va
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ a
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ an
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ ans
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ answ
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ answe
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ answer
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ answer
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ answer
‣ =
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ answer
‣ =
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ answer
‣ =
‣ 4
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ answer
‣ =
‣ 42
YOUR CODE IS NOT A STRING
LEXING INTO TOKENS
v a r a n s w e r = 4 2 ;
‣ var
‣ answer
‣ =
‣ 42
‣ ;
YOUR CODE IS NOT A STRING
PARSING INTO SYNTAX TREE
‣ var
‣ answer
‣ =
‣ 42
‣ ;
Literal
Identifier
VariableDeclarator VariableDeclaration
YOUR CODE IS NOT A STRING
FILE-BASED BUILDERS
Transforming AST
Generating code
Parsing code
Reading file
Writing file
Plugin
YOUR CODE IS NOT A STRING
STREAMING BUILDERS
Transforming AST
Generating code
Parsing code
Reading file
Writing file
Plugin
YOUR CODE IS NOT A STRING
TRANSPILERS
Transforming AST
Generating code
Parsing code
Reading file
Writing file
Plugin
YOUR CODE IS NOT A STRING
AST TOOLING
▸ Minifiers (UglifyJS supports transforming AST)
▸ Linters (you can write own rules for ESLint!)
▸ Babel (you can write own transpiler plugins!)
▸ Facebook Codemod (you can patch entire codebase!)
▸ Any-to-JS compilers (CoffeeScriptRedux, JSX, …)
▸ Bundlers (WebPack, Browserify combine ASTs)
YOUR CODE IS NOT A STRING
HOMOICONICITY (CODE == AST)
(+ (+ 2 3) 7)
YOUR CODE IS NOT A STRING
HOMOICONICITY (CODE == AST)
<html><head> <title>your title here</title></head><body bgcolor="ffffff"> <center> <img src="clouds.jpg" align="bottom" /> </center> <hr /> <a href="http://somegreatsite.com">link name</a> is a link <h1>this is a header</h1> <h2>this is a medium header</h2> <a href="mailto:[email protected]">[email protected]</a></body></html>
YOUR CODE IS NOT A STRING
ECMASCRIPT SYNTAX SPEC
http://rreverser.com/ecmascript-syntax-graph/
YOUR CODE IS NOT A STRING
ECMASCRIPT SYNTAX SPEC
YOUR CODE IS NOT A STRING
PARSERS PRODUCING JAVASCRIPT ASTS
‣ JavaScript ‣ SpiderMonkey: Reflect.parse – Mozilla's Parser API ‣ Esprima – most popular ECMAScript parser in JS ‣ Acorn – faster alternative ECMAScript parser in JS ‣ UglifyJS – has own parser with custom AST format ‣ Traceur – has ES6 parser that can be used separately as well ‣ …
‣ CoffeeScript ‣ CoffeeScriptRedux – rewrite of CS compiler that internally uses CS AST with conversion
to JS AST ‣ JSX ‣ esprima-fb – Facebook's fork of Esprima Harmony branch
YOUR CODE IS NOT A STRING
SPIDERMONKEY PARSER API
YOUR CODE IS NOT A STRING
ESTREE - JAVASCRIPT AST SPECIFICATION
YOUR CODE IS NOT A STRING
ESTREE - JAVASCRIPT AST SPECIFICATION
https://github.com/estree/estree
‣ Literal { value, raw }
‣ Identifier { name }
‣ MemberExpression { object, property, computed }
‣ BinaryExpression { left, operator, right }
‣ …
YOUR CODE IS NOT A STRING
ASTEXPLORER - AST PLAYGROUND
http://astexplorer.net/
YOUR CODE IS NOT A STRING
BABEL PLUGIN TEMPLATE
https://github.com/RReverser/babel-plugin-hello-world
QUESTIONS? @RReverser
