Adoption of Babel 6 is widespread, with more than 1,450 Babel plugins and 800 presets registered on npm today. But, as with all good things, progress is coming and Babel 7 will be released soon. I'm going to start with Babel 7 changes explanation. Then, let's meet our most powerful and flexible preset - babel-preset-env aka autoprefixer for Babel. I'll show how to decrease compilation time for development environment. How to compile for production with safety and get the lowest possible bundle size at the same time. I'll work through some gotchas like dealing with ES2015 code and UglifyJS. I will try to explain why you don't need to support Chrome 45 and Safari 6. And for an extra treat, I'll show how to build and serve user agent-specific bundles. Oh, and I'll have plenty of Babel stickers too!

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!

6. Back to 199x-200x

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

22. Parse
Compilation stages
Transform Generate

23. Parse
Lexical
analysis
Syntactic

24. Parse
Lexical
analysis
Syntactic
Parse
Lexical
analysis
Syntactic

25. Code Tokens

27. Parse
Lexical
analysis
Syntactic
Parse
Lexical
analysis
Syntactic

28. Tokens
Abstract
Syntax
Tree

30. const a = 1;
b(a);

31. const a = 1;
b(a);
VariableDeclaration VariableDeclarator
ExpressionStatement CallExpression
Program
a
1
b
arguments a

32. Parse
Compilation stages
Transform Generate

33. Transform
AST NEW AST

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) {
…
}
}

38. Parse
Compilation stages
Transform Generate

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

46. illustrated-algorithms.now.sh
Illustrated algorithms

47. babel-plugin-trace-execution
"steps": [
{
"highlight": {
"start": 53,
"end": 80
},
"bindings": {
"list": [
"1",
"2",
"3"
],
"low": 0,
"high": 2
}
} //...
]

48. Simple dynamic analysis

49. 🍹
const singaporeSling = {};
singaporeSling.gin = 40;
singaporeSling.brandy = 30;
singaporeSling.grenadine = 40;
singaporeSling.cointreau = 50;

50. 🤕
singaporeSling.tequila = 150;

51. singaporeSling.tequila = 150;
singaporeSling.tequila = 150;
_track(singaporeSling, 'tequila', 150);

52. fromjs.com
Fromjs

53. CSS in JS preprocessing

54. styled-components

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" />

58. babel-plugin-styled-components

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

61. (plugins lists)
presets

63. {
"presets": [
"react",
"es2015",
"es2016",
"es2017",
"stage-3"
]
}
.babelrc

64. babel-preset-latest

66. ESNEXT -> 5

68. Trade-offs
Extra code
Extra time
Extra bugs

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%”
]
}
}

85. It’s like autoprefixer!

86. Data from ES6 Compat table

87. kangax.github.io/compat-table

88. Same targets for all things

89. browserslist .babelrc .eslintrc

93. “browserslist”: […]
eslint-plugin-compat

95. eslint-plugin-compat

96. 22: navigator.serviceWorker
^^^^^^^^^^^^^
`ServiceWorker` is not supported in IE 11 and
Edge 15 😢
“browserslist”: “last 1 version”

97. No Errors!
“browserslist”: “chrome 57”

98. engines/devEngines
docs.npmjs.com/files/package.json#engines

101. {
“engines”: {
“node”: ”>= 4”
}
}
package.json

102. Uglify JSES6 💔

104. SyntaxErrorNo ES6to5
transformations
=

106. Uglify JSpreset-env ❤
{
“targets”: {
“uglify”: true
}
}

107. NODE_ENVpreset-env ❤

108. DEVELOPMENT PRODUCTION

109. DEVELOPMENT PRODUCTION
SPEED

110. DEVELOPMENT PRODUCTION
SPEED RELIABILITY

111. 11
Uglify JS
DEVELOPMENT PRODUCTION

112. process.env.NODE_ENV === 'production'
? { uglify: true, ie: 11, ... }
: { chrome: 58 };

113. even create-react-app!

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)
🙄

128. github.com/babel/babel-preset-env

129. Thanks!
Artem Yavorsky
yavorsky_
yavorsky