Tweet
Tweet

Slide 1

Slide 1 text

Sebastian McKenzie @sebmck

Slide 2

Slide 2 text

JAVASCRIPT TRANSFORMATION

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

WHAT IS CODE TRANSFORMATION?

Slide 10

Slide 10 text

myOldWeirdJavaScript(“whatever”); myNewTransformedJavaScript(“yay!”);

Slide 11

Slide 11 text

HOW DOES IT WORK?

Slide 12

Slide 12 text

var foo = function foo() { return bar; }; Source code

Slide 13

Slide 13 text

AST Abstract Syntax Tree

Slide 14

Slide 14 text

{ type: "Program", body: [{ type: "VariableDeclaration" kind: "var", declarations: [{ type: "VariableDeclarator", id: { type: "Identifier", name: "foo" }, init: { type: “FunctionExpression", id: { type: “Identifier”, name: “foo” }, params: [], body: [{ type: "BlockStatement", body: [{ type: "ReturnStatement", argument: { type: "Identifier", name: "bar" } }] }] } }] }] } Data structure

Slide 15

Slide 15 text

Identifier Graph Variable Declaration Program Variable Declarator Identifier Function Expression Block Statement Return Statement Identifier

Slide 16

Slide 16 text

List • Program • VariableDeclaration • VariableDeclarator • Identifier • FunctionExpression • Identifier • BlockStatement • ReturnStatement • Identifier

Slide 17

Slide 17 text

Parser Turns code into an AST Transformer Manipulates AST Generator Turns AST back into code Parser Turns code into an AST Transformer and Generator Traverses AST and manipulates it via strings jstransform Parser Turns code into an AST

Slide 18

Slide 18 text

Lexical Analysis Turn code into a stream of tokens Syntactic Analysis Turn tokens into a tree Parser Turns code into an AST

Slide 19

Slide 19 text

Turn your code into tokens LEXICAL ANALYSIS

Slide 20

Slide 20 text

foo = 1 + “bar”; What is a token?

Slide 21

Slide 21 text

foo = 1 + “bar”; What is a token? Identifier Punctuator Number String 1. Identifier 2. Punctuator<=> 3. Number<1> 4. Punctuator<+> 5. String 6. Puncutator<;>

Slide 22

Slide 22 text

SYNTACTIC ANALYSIS Turn the tokens into a tree

Slide 23

Slide 23 text

class Foo extends Bar {} Syntactic analysis

Slide 24

Slide 24 text

class Foo extends Bar {} pp.parseClassDeclaration = function () { let node = this.startNode(); this.expect(tt._class); node.id = this.parseIdentifier(); if (this.type === tt._extends) { this.next(); node.superClass = this.parseExprSubscripts(); }; node.body = this.parseClassBody(); return this.finishNode(node, "ClassDeclaration"); }; Identifier Punctuator Keyword 1. Keyword 2. Identifier 3. Keyword 4. Identifier 5. Punctuator<{> 6. Punctuator<}> Syntactic analysis

Slide 25

Slide 25 text

pp.parseClassDeclaration = function () { let node = this.startNode(); this.expect(tt._class); node.id = this.parseIdentifier(); if (this.type === tt._extends) { this.next(); node.superClass = this.parseExprSubscripts(); }; node.body = this.parseClassBody(); return this.finishNode(node, "ClassDeclaration"); }; 1. Keyword 2. Identifier 3. Keyword 4. Identifier 5. Punctuator<{> 6. Punctuator<}> Syntactic analysis

Slide 26

Slide 26 text

pp.parseClassDeclaration = function () { let node = this.startNode(); this.expect(tt._class); node.id = this.parseIdentifier(); if (this.type === tt._extends) { this.next(); node.superClass = this.parseExprSubscripts(); }; node.body = this.parseClassBody(); return this.finishNode(node, "ClassDeclaration"); }; 1. Keyword 2. Identifier 3. Keyword 4. Identifier 5. Punctuator<{> 6. Punctuator<}> Syntactic analysis

Slide 27

Slide 27 text

pp.parseClassDeclaration = function () { let node = this.startNode(); this.expect(tt._class); node.id = this.parseIdentifier(); if (this.type === tt._extends) { this.next(); node.superClass = this.parseExprSubscripts(); }; node.body = this.parseClassBody(); return this.finishNode(node, "ClassDeclaration"); }; 1. Keyword 2. Identifier 3. Keyword 4. Identifier 5. Punctuator<{> 6. Punctuator<}> Syntactic analysis

Slide 28

Slide 28 text

pp.parseClassDeclaration = function () { let node = this.startNode(); this.expect(tt._class); node.id = this.parseIdentifier(); if (this.type === tt._extends) { this.next(); node.superClass = this.parseExprSubscripts(); }; node.body = this.parseClassBody(); return this.finishNode(node, "ClassDeclaration"); }; 1. Keyword 2. Identifier 3. Keyword 4. Identifier 5. Punctuator<{> 6. Punctuator<}> Syntactic analysis

Slide 29

Slide 29 text

pp.parseClassDeclaration = function () { let node = this.startNode(); this.expect(tt._class); node.id = this.parseIdentifier(); if (this.type === tt._extends) { this.next(); node.superClass = this.parseExprSubscripts(); }; node.body = this.parseClassBody(); return this.finishNode(node, "ClassDeclaration"); }; 1. Keyword 2. Identifier 3. Keyword 4. Identifier 5. Punctuator<{> 6. Punctuator<}> Syntactic analysis

Slide 30

Slide 30 text

pp.parseClassDeclaration = function () { let node = this.startNode(); this.expect(tt._class); node.id = this.parseIdentifier(); if (this.type === tt._extends) { this.next(); node.superClass = this.parseExprSubscripts(); }; node.body = this.parseClassBody(); return this.finishNode(node, "ClassDeclaration"); }; 1. Keyword 2. Identifier 3. Keyword 4. Identifier 5. Punctuator<{> 6. Punctuator<}> Syntactic analysis

Slide 31

Slide 31 text

pp.parseClassDeclaration = function () { let node = this.startNode(); this.expect(tt._class); node.id = this.parseIdentifier(); if (this.type === tt._extends) { this.next(); node.superClass = this.parseExprSubscripts(); }; node.body = this.parseClassBody(); return this.finishNode(node, "ClassDeclaration"); }; 1. Keyword 2. Identifier 3. Keyword 4. Identifier 5. Punctuator<{> 6. Punctuator<}> Syntactic analysis

Slide 32

Slide 32 text

pp.parseClassDeclaration = function () { let node = this.startNode(); this.expect(tt._class); node.id = this.parseIdentifier(); if (this.type === tt._extends) { this.next(); node.superClass = this.parseExprSubscripts(); }; node.body = this.parseClassBody(); return this.finishNode(node, "ClassDeclaration"); }; 1. Keyword 2. Identifier 3. Keyword 4. Identifier 5. Punctuator<{> 6. Punctuator<}> Syntactic analysis

Slide 33

Slide 33 text

{ type: "ClassDeclaration", start: 0, end: 23, id: { type: “Identifier", start: 6, end: 9, name: “Foo" }, superClass: { type: “Identifier", end: 21, start: 18, name: “Bar" }, body: { type: “ClassBody", start: 21, end: 23, body: [] } } Syntactic analysis

Slide 34

Slide 34 text

Identifier Class Declaration Identifier Class Body Syntactic analysis

Slide 35

Slide 35 text

Transformer Manipulates AST Traversal Visit the tree Static Analysis Infer what nodes represent

Slide 36

Slide 36 text

TRAVERSAL Walking the tree

Slide 37

Slide 37 text

Visitor • Controls traversal state • Interface for visiting, replacing and removing nodes • Consolidates visiting logic

Slide 38

Slide 38 text

Traversal Visitor Variable Declaration Program Variable Declarator Identifier Function Expression Block Statement Return Statement Identifier

Slide 39

Slide 39 text

STATIC ANALYSIS Infer what your code does by how it looks

Slide 40

Slide 40 text

var foo = bar + “”; Type inference Variable Declaration Program Variable Declarator Identifier Binary Expression Literal Identifier

Slide 41

Slide 41 text

Transpilation var [x, y] = [1, 2]; var _ref = [1, 2]; var x = _ref[0]; var y = _ref[1];

Slide 42

Slide 42 text

Transpilation var [x, y] = [1, 2]; var x = 1; var y = 2;

Slide 43

Slide 43 text

PATHS Bidirectional reactive AST abstraction

Slide 44

Slide 44 text

Identifier Function Expression Block Statement Return Statement Identifier Unidirectional tree Variable Declaration Program Variable Declarator Identifier Identifier

Slide 45

Slide 45 text

Path Path Path Path Variable Declaration Program Variable Declarator Function Expression Identifier

Slide 46

Slide 46 text

Identifier Variable Declaration Program Variable Declarator Identifier Function Expression Block Statement Return Statement Identifier argument body[0] Root declarations [0] id init body body[0] id Bidirectional tree

Slide 47

Slide 47 text

Path • Abstraction for dealing with node relationships • Constant, same-instance always • Reactive to tree changes - propagates updates

Slide 48

Slide 48 text

CONTEXTLESS REPLACEMENT Transforming broken code

Slide 49

Slide 49 text

Replacement [x, y] = calculateCoordinates();

Slide 50

Slide 50 text

Path-based replacement var _ref = calculateCoordinates(); x = _ref[0]; y = _ref[1];

Slide 51

Slide 51 text

Path-based replacement doSomething([x, y] = calculateCoordinates());

Slide 52

Slide 52 text

Path-based replacement doSomething(var _ref = calculateCoordinates()); x = _ref[0]; y = _ref[1];);

Slide 53

Slide 53 text

Path-based replacement var _ref; doSomething((_ref = calculateCoordinates(), x = _ref[0], y = _ref[1], _ref));

Slide 54

Slide 54 text

Style Inference Retain input style in output Code Generation Turn the tree into code Generator Turns AST back into code

Slide 55

Slide 55 text

Transformer Manipulates AST Generator Turns AST back into code Parser Turns code into an AST Lexical Analysis Turn code into tokens Syntactic Analysis Turn tokens into a tree Traversal Visit the tree Static Analysis Infer what nodes represent Code Generation Turn the tree into code Style Inference Retain input style in output

Slide 56

Slide 56 text

HOW’S THIS USEFUL?

Slide 57

Slide 57 text

JSX OPTIMISATION

Slide 58

Slide 58 text

CONSTANT ELEMENTS A React element is conceptually equivalent if all it’s values are the same.

Slide 59

Slide 59 text

Constant value types function render() { return
; } render() === render();

Slide 60

Slide 60 text

var _ref = React.createElement("div", { className: “foo" }); function render() { return _ref; } React 0.14 Constant hoisting function render() { return React.createElement("div", { className: “foo" }); } React <= 0.13

Slide 61

Slide 61 text

INLINE ELEMENTS Building elements ahead of time

Slide 62

Slide 62 text

Inline elements
{bar}

Slide 63

Slide 63 text

Inline elements ({ type: "div", props: { className: "foo", children: [ bar, { type: Baz, props: {}, key: "baz", ref: null } ] }, key: null, ref: null })

Slide 64

Slide 64 text

SYNTAX EXTENSIONS

Slide 65

Slide 65 text

DISCLAIMER ES7 DOES NOT MEAN WHAT YOU THINK IT DOES

Slide 66

Slide 66 text

class Counter extends React.Component { static propTypes = { initialCount: React.PropTypes.number }; static defaultProps = { initialCount: 0 }; state = { count: this.props.initialCount }; } Class properties

Slide 67

Slide 67 text

function autobind(target, key, descriptor) { return { get: function () { return descriptor.value.bind(this); } }; } class Person { @autobind getFullName() { return `${this.firstName} ${this.lastName}`; } } Decorators

Slide 68

Slide 68 text

class Counter extends React.Component { tick() { this.setState({ count: this.state.count + 1 }); } render() { return
Clicks: {this.state.count}
; } } Bind syntax

Slide 69

Slide 69 text

THE FUTURE • Dead code elimination/minification • Constant folding/static evaluation • Static analysis/linting

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Thank you!