Артем Яворский "Compile like it's 2017"
0 likes357 views
The document discusses the evolution of JavaScript from ECMAScript 1 to ECMAScript 2017, detailing features introduced in various versions including classes, static methods, and the async/await pattern. It also covers the Babel tool for code transformation to support various JavaScript features across different browsers and environments, emphasizing compatibility and optimization strategies. Additionally, the document touches on dynamic analysis, styled-components, and the implications of utilizing various plugins and presets for effective JavaScript development.
![babel-plugin-trace-execution
"steps": [
{
"highlight": {
"start": 53,
"end": 80
},
"bindings": {
"list": [
"1",
"2",
"3"
],
"low": 0,
"high": 2
}
} //...
]](https://image.slidesharecdn.com/artemyavorsky-170422105213/85/Compile-like-it-s-2017-47-320.jpg)
![{
"presets": [
"react",
"es2015",
"es2016",
"es2017",
"stage-3"
]
}
.babelrc](https://image.slidesharecdn.com/artemyavorsky-170422105213/85/Compile-like-it-s-2017-63-320.jpg)
![Just set your targets
{
“targets”: {
“node”: 4,
“electron”: 1.5,
“browsers”: [
“safari 10”,
“last 2 chrome versions”,
“> 2%”
]
}
}](https://image.slidesharecdn.com/artemyavorsky-170422105213/85/Compile-like-it-s-2017-81-320.jpg)
![{
“targets”: {
“node”: 4,
“electron”: 1.5,
“browsers”: [
“safari 10”,
“last 2 chrome versions”,
“> 2%”
]
}
}](https://image.slidesharecdn.com/artemyavorsky-170422105213/85/Compile-like-it-s-2017-82-320.jpg)
![{
“targets”: {
“node”: 4,
“electron”: 1.5,
“browsers”: [
“safari 10”,
“last 2 chrome versions”,
“> 2%”
]
}
}](https://image.slidesharecdn.com/artemyavorsky-170422105213/85/Compile-like-it-s-2017-83-320.jpg)
![{
“targets”: {
“node”: 4,
“electron”: 1.5,
“browsers”: [
“safari 10”,
“last 2 chrome versions”,
“> 2%”
]
}
}](https://image.slidesharecdn.com/artemyavorsky-170422105213/85/Compile-like-it-s-2017-84-320.jpg)
![“browserslist”: […]
eslint-plugin-compat](https://image.slidesharecdn.com/artemyavorsky-170422105213/85/Compile-like-it-s-2017-93-320.jpg)
![“browsers”: [
“safari 10”,
“chrome 55”,
“> 2%”
]
configuration?](https://image.slidesharecdn.com/artemyavorsky-170422105213/85/Compile-like-it-s-2017-114-320.jpg)
![1000 items
IE 10
(w/ transform)
Chrome 57
(w/o transform)
const 5.6s 0.39s
`foo${bar}` 1.2s 0.39s
var [a] = [b] 5.55s 0.46s
class A extends B 9.01s 0.42s
for..of 13.05s 0.42s
generators 9.16s 0.58s
async/await 41.87s 0.62s
Compilation time](https://image.slidesharecdn.com/artemyavorsky-170422105213/85/Compile-like-it-s-2017-116-320.jpg)
Артем Яворский "Compile like it's 2017"
- 1. Compile like it’s 2017! Artem Yavorsky Hell Yeah LLC
- 2. Artem Yavorsky Software Attorney, Hell Yeah LLC
- 3. Day 🌞 Night 🌚 …
- 5. Compile like it’s 2017!
- 8. Background 1995. Mocha -> LiveScript -> Javascript 1997. ECMAScript 1 1998. ECMAScript 2 1999. ECMAScript 3 (regular expressions, try/catch, formatting for numeric output…)
- 9. ECMAScript 4
- 10. • classes • a module system • optional type annotations, static typing • generators and iterators • destructuring assignment • algebraic data types. October 2008
- 11. • classes • a module system • optional type annotations, static typing • generators and iterators • destructuring assignment • algebraic data types. October 2008 🚫
- 13. 2009: ECMAScript 5 •static Object methods: defineProperty, create, freeze, seal… •Array.prototype methods every, some , filter, map, reduce, forEach, indexOf… •strict mode •JSON.parse / JSON.stringify
- 14. ECMAScript 2015 aka ES6 Default function parameters Reset parametersSpread operator Object literal extensions for..of loopsOctal and binary literals Template literals Destructuring const let arrow functions class super generators typed arrays Map Set WeakMap WeakSet Proxy Reflect Promise Symbol Object static methods Function name property String.prototype methods RegExp.prototype properties Array static methods Number properties Array, RegExp, Function, Promise Subclassing new.target
- 18. Compiler!
- 21. Arrow functions Classes Default parameters Spread Rest Block binding Property method assigment Modules Template Literals Generators Destructuring assigment
- 25. Code Tokens
- 30. const a = 1; b(a);
- 31. const a = 1; b(a); VariableDeclaration VariableDeclarator ExpressionStatement CallExpression Program a 1 b arguments a
- 34. Tree Traversal
- 35. VariableDeclaration VariableDeclarator ExpressionStatement CallExpression Program a 1 b arguments a 1 2 3 4 5 6 7 8 9 Depth first ☝ const a = 1; b(a);
- 36. Visitors
- 37. const visitor = { CallExpression(path) { … }, NumericLiteral(path) { … }, FunctionDeclaration(path) { … } }
- 39. AST Code
- 40. astexplorer.net
- 41. plugins
- 42. export default function ({ types }) { return { pre() { … }, visitor: { BinaryExpression(path) { // Transform your code } }, post() { … }, } } Based on the visitor pattern
- 43. PLUGINS Syntax Transform Don’t change the code Teach Babel to read code syntax-flow syntax-jsx syntax-object-rest-spread Teach Babel to transpile code Code transformation as a result transform-flow-strip-types transform-es2015-classes transform-es2015-for-of
- 45. Not only 6to5
- 47. babel-plugin-trace-execution "steps": [ { "highlight": { "start": 53, "end": 80 }, "bindings": { "list": [ "1", "2", "3" ], "low": 0, "high": 2 } } //... ]
- 49. 🍹 const singaporeSling = {}; singaporeSling.gin = 40; singaporeSling.brandy = 30; singaporeSling.grenadine = 40; singaporeSling.cointreau = 50;
- 51. singaporeSling.tequila = 150; singaporeSling.tequila = 150; _track(singaporeSling, 'tequila', 150);
- 53. CSS in JS preprocessing
- 55. const Button = styled.button` font-size: 1em; background: ${props => props.primary && 'green'}; `
- 56. const Button = styled.button` font-size: 1em; background: ${props => props.primary && 'green'}; ` RUNTIME nesting a {&:hover {}} @global, :global(selector) :host() prefixer validation
- 57. const Button = styled.button` font-size: 1em; background: ${props => props.primary && 'green'}; ` RUNTIME nesting a {&:hover {}} @global, :global(selector) :host() prefixer validation <Button className="iSDleSN" />
- 59. const Button = styled.button` font-size: 1em; background: ${props => props.primary && 'green'}; ` COMPILATION nesting a {&:hover {}} @global, :global(selector) :host() prefixer validation bundle.js
- 60. •Server-side rendering •Better debug •Removes stylis from the runtime •Reduces bundle size •Minification Benefits
- 66. ESNEXT -> 5
- 69. • regenerator ES2015 Plugins • exponentiation-operator ES2016 Plugins • trailing-function-commas ES2017 Plugins • function-name • for-of • duplicate-keys • destructuring • computed-properties • classes • block-scoping • block-scoped-functions • arrow-functions • check-es2015-constants • sticky-regex • spread • shorthand-properties • parameters • object-super • literals • unicode-regex • typeof-symbol • template-literals • async-to-generator
- 70. • regenerator ES2015 Plugins • exponentiation-operator ES2016 Plugins • trailing-function-commas ES2017 Plugins • function-name • for-of • duplicate-keys • destructuring • computed-properties • classes • block-scoping • block-scoped-functions • arrow-functions • check-es2015-constants • sticky-regex • spread • shorthand-properties • parameters • object-super • literals • unicode-regex • typeof-symbol • template-literals • async-to-generator
- 71. • regenerator ES2015 Plugins • exponentiation-operator ES2016 Plugins • trailing-function-commas ES2017 Plugins • function-name • for-of • duplicate-keys • destructuring • computed-properties • classes • block-scoping • block-scoped-functions • arrow-functions • check-es2015-constants • sticky-regex • spread • shorthand-properties • parameters • object-super • literals • unicode-regex • typeof-symbol • template-literals • async-to-generator
- 72. • regenerator ES2015 Plugins • exponentiation-operator ES2016 Plugins • trailing-function-commas ES2017 Plugins • function-name • for-of • duplicate-keys • destructuring • computed-properties • classes • block-scoping • block-scoped-functions • arrow-functions • check-es2015-constants • sticky-regex • spread • shorthand-properties • parameters • object-super • literals • unicode-regex • typeof-symbol • template-literals • async-to-generator
- 73. • regenerator ES2015 Plugins • exponentiation-operator ES2016 Plugins • trailing-function-commas ES2017 Plugins • function-name • for-of • duplicate-keys • destructuring • computed-properties • classes • block-scoping • block-scoped-functions • arrow-functions • check-es2015-constants • sticky-regex • spread • shorthand-properties • parameters • object-super • literals • unicode-regex • typeof-symbol • template-literals • async-to-generator
- 74. • regenerator ES2015 Plugins • exponentiation-operator ES2016 Plugins • trailing-function-commas ES2017 Plugins • function-name • for-of • duplicate-keys • destructuring • computed-properties • classes • block-scoping • block-scoped-functions • arrow-functions • check-es2015-constants • sticky-regex • spread • shorthand-properties • parameters • object-super • literals • unicode-regex • typeof-symbol • template-literals • async-to-generator
- 75. • regenerator ES2015 Plugins • exponentiation-operator ES2016 Plugins • trailing-function-commas ES2017 Plugins • function-name • for-of • duplicate-keys • destructuring • computed-properties • classes • block-scoping • block-scoped-functions • arrow-functions • check-es2015-constants • sticky-regex • spread • shorthand-properties • parameters • object-super • literals • unicode-regex • typeof-symbol • template-literals • async-to-generator
- 76. • regenerator ES2015 Plugins • exponentiation-operator ES2016 Plugins • trailing-function-commas ES2017 Plugins • function-name • for-of • duplicate-keys • destructuring • computed-properties • classes • block-scoping • block-scoped-functions • arrow-functions • check-es2015-constants • sticky-regex • spread • shorthand-properties • parameters • object-super • literals • unicode-regex • typeof-symbol • template-literals • async-to-generator 11
- 77. • regenerator ES2015 Plugins • exponentiation-operator ES2016 Plugins • trailing-function-commas ES2017 Plugins • function-name • for-of • duplicate-keys • destructuring • computed-properties • classes • block-scoping • block-scoped-functions • arrow-functions • check-es2015-constants • sticky-regex • spread • shorthand-properties • parameters • object-super • literals • unicode-regex • typeof-symbol • template-literals • async-to-generator 11
- 78. What about Chrome 45 or Safari 8?
- 79. Firefox, Chrome, Safari and IE10 browsers all have the ability to update themselves. You can be pretty confident that if your code runs on your browser, it's going to run on your customer's browser too. Rob Eisenberg, 2014
- 80. babel-preset-env
- 81. Just set your targets { “targets”: { “node”: 4, “electron”: 1.5, “browsers”: [ “safari 10”, “last 2 chrome versions”, “> 2%” ] } }
- 82. { “targets”: { “node”: 4, “electron”: 1.5, “browsers”: [ “safari 10”, “last 2 chrome versions”, “> 2%” ] } }
- 83. { “targets”: { “node”: 4, “electron”: 1.5, “browsers”: [ “safari 10”, “last 2 chrome versions”, “> 2%” ] } }
- 84. { “targets”: { “node”: 4, “electron”: 1.5, “browsers”: [ “safari 10”, “last 2 chrome versions”, “> 2%” ] } }
- 86. Data from ES6 Compat table
- 88. Same targets for all things
- 96. 22: navigator.serviceWorker ^^^^^^^^^^^^^ `ServiceWorker` is not supported in IE 11 and Edge 15 😢 “browserslist”: “last 1 version”
- 101. { “engines”: { “node”: ”>= 4” } } package.json
- 102. Uglify JSES6 💔
- 106. Uglify JSpreset-env ❤ { “targets”: { “uglify”: true } }
- 107. NODE_ENVpreset-env ❤
- 112. process.env.NODE_ENV === 'production' ? { uglify: true, ie: 11, ... } : { chrome: 58 };
- 114. “browsers”: [ “safari 10”, “chrome 55”, “> 2%” ] configuration?
- 116. 1000 items IE 10 (w/ transform) Chrome 57 (w/o transform) const 5.6s 0.39s `foo${bar}` 1.2s 0.39s var [a] = [b] 5.55s 0.46s class A extends B 9.01s 0.42s for..of 13.05s 0.42s generators 9.16s 0.58s async/await 41.87s 0.62s Compilation time
- 117. 1000 items IE 10 (w/ transform) Chrome 57 (w/o transform) `foo${bar}` 22kb 11kb class A extends B 255kb 23kb for..of 602kb 22kb generators 330kb 29kb async/await 533kb 35kb Compilation result size
- 122. Built-ins
- 123. Analyze code import polyfills Analyze targets
- 124. Old browsers
- 125. Latest browsers
- 126. Trade-offs Extra code Extra time Extra bugs
- 127. Trade-offs Extra code Extra time Extra bugs (at least on the Babel side) 🙄