JavaScript Transformation - JSConf 2015

Transcript

1. JavaScript transformation
2. Sebastian McKenzie @sebmck Web Content Optimisation @ CloudFlare
3. JavaScript transformation
4. JavaScript transformation myOldWeirdJavaScript(“whatever”); myNewTransformedJavaScript(“yay!”);
5. History
12. How?
13. Source code var foo = function foo() { return bar; };
14. { 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" } }] }] } }] }] } AST
15. AST Variable Declaration Program Variable Declarator Identifier Function Expression Block Statement Return Statement Identifier
16. Transformer Manipulates AST Parser Turns code into an AST Generator Turns AST back into code
17. Parser Transformer Generator
18. Function Declaration Block Statement Return Statement Program Variable Declaration Variable Declarator Identifier Function Expression Block Statement Return Statement Identifier Traversal Visitor
19. Replacement [x, y] = calculateCoordinates();
20. Replacement var _ref = calculateCoordinates(); x = _ref[0]; y = _ref[1];
21. Replacement doSomething([x, y] = calculateCoordinates());
22. Replacement doSomething(var _ref = calculateCoordinates()); x = _ref[0]; y = _ref[1];);
23. Replacement var _ref; doSomething((_ref = calculateCoordinates(), x = _ref[0], y = _ref[1], _ref));
24. Removal left + right; Right Left Binary Expression
25. Removal left +; Left Binary Expression
26. Removal left; Left
27. Uses • Transpilation • Application optimisation • Browser compatibility • Minification • Obfuscation • Hot reloading • Code coverage • Language experimentation • Conditional compilation • Dynamic polyfill inclusion • Module mocking • Code linting • Execution tracing • Intellisense • Profiling • Refactoring • Dependency analysis • Instrumentation • Module bundling • …
28. • Transpilation (ie. ES2015 to ES5) • Application optimisation • Browser compatibility • ??? ✨
31. • Additional standard lib methods • Arrow functions • Block scoping • Classes • Collections • Computed properties • Constants • Destructuring • Default and rest parameters • Generators • Iterators and for…of • Modules • Promises • Property method and value shorthand • Proxies • Spread • Sticky and unicode regexes • Symbols • Subclassable built-ins • Template literals • Better unicode support • Binary and octal literals • Reflect API • Tail calls
34. ES2015 Arrow Functions var multiply = (num) => num * num;
35. ES2015 Arrow Functions • Implicit return for expression bodies • “Inherits” arguments and this binding • Cannot new it • No prototype
36. Implicit return for expression bodies var multiple = (num) => num * num; // turns into var multiply = function (num) { return num * num; };
37. ES2015 Arrow Functions • Implicit return for expression bodies • “Inherits” arguments and this binding • Cannot new it • No prototype ✓
38. arguments and this var bob = { name: “Bob” friends: [“Amy”], printFriends() { this.friends.forEach(f => console.log(this.name + " knows " + f) ); } };
39. arguments and this var bob = { name: “Bob”, friends: [“Amy”], printFriends() { var _this = this; this.friends.forEach(function (f) { return console.log(_this.name + " knows " + f); }); } };
40. ES2015 Arrow Functions • Implicit return for expression bodies • “Inherits” arguments and this binding • Cannot new it • No prototype ✓ ✓
41. no new var foo = () => {}; new foo; // should be illegal!
42. no new function _construct(obj) { if (obj.name === “_arrow”) throw new Error(“nope”); return new obj; } var foo = function _arrow() {}; _construct(foo);
43. no new function _construct(obj) { if (obj._arrow === “_arrow”) throw new Error(“nope”); return new obj; } var foo = function () {}; foo._arrow = true; _construct(foo);
45. • Implicit return for expression bodies • “Inherits” arguments and this binding • Cannot new it • No prototype ✗ ES2015 Arrow Functions ✓ ✓
46. no prototype var foo = () => {}; foo.prototype; // should be undefined!
47. no prototype function _getPrototype(obj) { if (obj._arrow) { return undefined; } else { return obj.prototype; } } var foo = function () {}; foo._arrow = true; _getPrototype(foo);
48. no prototype var bar = “prototype”; var foo = () => {}; foo[bar];
49. no prototype function get(obj, key) { if (key === “prototype”) { return obj._arrow ? undefined : obj.prototype; } else { return obj[key]; } } var bar = “prototype”; var foo = () => {}; get(foo, bar);
52. Do not use transpilers as a basis to learn new language features
54. Compile-time vs Runtime function square(num) { return num * num; } square(2); square(age);
56. JSX var foo = <div> <span className=“foobar”>{text}</span> </div>;
57. JSX Constant Elements function render() { return <div className="foo" />; }
58. JSX Constant Elements var foo = <div className="foo" />; function render() { return foo; }
59. JSX Constant Elements var Foo = require(“Foo”); function createComponent(text) { return function render() { return <Foo>{text}</Foo>; }; }
60. JSX Constant Elements var Foo = require(“Foo”); function createComponent(text) { var foo = <Foo>{text}</Foo>; return function render() { return foo; }; }
62. Precompiling tagged templates import hbs from “htmlbars-inline-precompile"; var a = hbs`<a href={{url}}></a>`;
63. import hbs from “htmlbars-inline-precompile"; var a = Ember.HTMLBars.template(function() { /* crazy HTMLBars template function stuff */ }); Precompiling tagged templates
64. • Shouldn’t rely on preprocessing for functionality • YOU can make assumptions about your code • JS engine can’t be more lenient
67. Named function expressions var f = function g() {}; typeof g === “function”; // true f === g; // false https://kangax.github.io/nfe/#jscript-bugs
68. What’s the solution?
69. export function FunctionExpression(node, print) { if (!node.id) return; return t.callExpression( t.functionExpression(null, [], t.blockStatement([ t.toStatement(node), t.returnStatement(node.id) ])), [] ); } Automate it!
70. Result var f = function g() {}; // becomes var f = (function () { function g() {} return g; })();
71. Emojification Emojification
72. ES2015 • Unicode code point escapes • var \u{1F605} = “whatever"; • Emojis
76. How? $ npm install babel babel-plugin-emojification $ babel --plugins emojification script.js
77. myOldWeirdJavaScript(“whatever”); myNewTransformedJavaScript(“yay!”);