Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
JavaScript Transformation - JSConf 2015
sebmck
May 31, 2015
Programming
21
1.8k
JavaScript Transformation - JSConf 2015
sebmck
May 31, 2015
Tweet
Share
More Decks by sebmck
See All by sebmck
JavaScript Transformation - React Europe 2015
sebmck
3
160
Babel - Facebook April 2015
sebmck
22
2.4k
Babel: Beyond the Basics - MelbJS March 2015
sebmck
11
1.3k
Other Decks in Programming
See All in Programming
【Scrum Fest Osaka 2022】スクラムチームに放り込まれた若手エンジニアの皆さん、どのように技術のキャッチアップをしていくかイメージはついていますか?
miiiki
0
120
Licences open source : entre guerre de clochers et radicalité
pylapp
2
510
[월간 데이터리안 세미나 6월] 스스로 성장하는 분석가 커리어 이야기
datarian
0
250
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
0
890
こそこそアジャイル導入しようぜ!
ichimichi
0
1.3k
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2.1k
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.9k
Deep Dive Into Google Zanzibar and its Concepts for Authorization Scenarios
dschenkelman
1
140
Node.jsデザインパターンを読んで
mmmommm
0
2.8k
Angular-basierte Micro Frontends mit Module Federation @API Summit
manfredsteyer
PRO
0
120
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
120
Jetpack Compose, 어디까지 알고 있을까?
jisungbin
0
130
Featured
See All Featured
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
For a Future-Friendly Web
brad_frost
166
7.4k
A Philosophy of Restraint
colly
192
15k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
The Cult of Friendly URLs
andyhume
68
4.8k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
The Language of Interfaces
destraynor
148
20k
Unsuck your backbone
ammeep
659
55k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Transcript
JavaScript transformation
Sebastian McKenzie @sebmck Web Content Optimisation @ CloudFlare
JavaScript transformation
JavaScript transformation myOldWeirdJavaScript(“whatever”); myNewTransformedJavaScript(“yay!”);
History
None
None
None
None
None
None
How?
Source code var foo = function foo() { return bar;
};
{ 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
AST Variable Declaration Program Variable Declarator Identifier Function Expression Block
Statement Return Statement Identifier
Transformer Manipulates AST Parser Turns code into an AST Generator
Turns AST back into code
Parser Transformer Generator
Function Declaration Block Statement Return Statement Program Variable Declaration Variable
Declarator Identifier Function Expression Block Statement Return Statement Identifier Traversal Visitor
Replacement [x, y] = calculateCoordinates();
Replacement var _ref = calculateCoordinates(); x = _ref[0]; y =
_ref[1];
Replacement doSomething([x, y] = calculateCoordinates());
Replacement doSomething(var _ref = calculateCoordinates()); x = _ref[0]; y =
_ref[1];);
Replacement var _ref; doSomething((_ref = calculateCoordinates(), x = _ref[0], y
= _ref[1], _ref));
Removal left + right; Right Left Binary Expression
Removal left +; Left Binary Expression
Removal left; Left
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 • …
• Transpilation (ie. ES2015 to ES5) • Application optimisation •
Browser compatibility • ??? ✨
None
None
• 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
None
None
ES2015 Arrow Functions var multiply = (num) => num *
num;
ES2015 Arrow Functions • Implicit return for expression bodies •
“Inherits” arguments and this binding • Cannot new it • No prototype
Implicit return for expression bodies var multiple = (num) =>
num * num; // turns into var multiply = function (num) { return num * num; };
ES2015 Arrow Functions • Implicit return for expression bodies •
“Inherits” arguments and this binding • Cannot new it • No prototype ✓
arguments and this var bob = { name: “Bob” friends:
[“Amy”], printFriends() { this.friends.forEach(f => console.log(this.name + " knows " + f) ); } };
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); }); } };
ES2015 Arrow Functions • Implicit return for expression bodies •
“Inherits” arguments and this binding • Cannot new it • No prototype ✓ ✓
no new var foo = () => {}; new foo;
// should be illegal!
no new function _construct(obj) { if (obj.name === “_arrow”) throw
new Error(“nope”); return new obj; } var foo = function _arrow() {}; _construct(foo);
no new function _construct(obj) { if (obj._arrow === “_arrow”) throw
new Error(“nope”); return new obj; } var foo = function () {}; foo._arrow = true; _construct(foo);
None
• Implicit return for expression bodies • “Inherits” arguments and
this binding • Cannot new it • No prototype ✗ ES2015 Arrow Functions ✓ ✓
no prototype var foo = () => {}; foo.prototype; //
should be undefined!
no prototype function _getPrototype(obj) { if (obj._arrow) { return undefined;
} else { return obj.prototype; } } var foo = function () {}; foo._arrow = true; _getPrototype(foo);
no prototype var bar = “prototype”; var foo = ()
=> {}; foo[bar];
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);
None
None
Do not use transpilers as a basis to learn new
language features
None
Compile-time vs Runtime function square(num) { return num * num;
} square(2); square(age);
None
JSX var foo = <div> <span className=“foobar”>{text}</span> </div>;
JSX Constant Elements function render() { return <div className="foo" />;
}
JSX Constant Elements var foo = <div className="foo" />; function
render() { return foo; }
JSX Constant Elements var Foo = require(“Foo”); function createComponent(text) {
return function render() { return <Foo>{text}</Foo>; }; }
JSX Constant Elements var Foo = require(“Foo”); function createComponent(text) {
var foo = <Foo>{text}</Foo>; return function render() { return foo; }; }
None
Precompiling tagged templates import hbs from “htmlbars-inline-precompile"; var a =
hbs`<a href={{url}}></a>`;
import hbs from “htmlbars-inline-precompile"; var a = Ember.HTMLBars.template(function() { /*
crazy HTMLBars template function stuff */ }); Precompiling tagged templates
• Shouldn’t rely on preprocessing for functionality • YOU can
make assumptions about your code • JS engine can’t be more lenient
None
None
Named function expressions var f = function g() {}; typeof
g === “function”; // true f === g; // false https://kangax.github.io/nfe/#jscript-bugs
What’s the solution?
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!
Result var f = function g() {}; // becomes var
f = (function () { function g() {} return g; })();
Emojification Emojification
ES2015 • Unicode code point escapes • var \u{1F605} =
“whatever"; • Emojis
None
None
None
How? $ npm install babel babel-plugin-emojification $ babel --plugins emojification
script.js
myOldWeirdJavaScript(“whatever”); myNewTransformedJavaScript(“yay!”);
None