Everybody is talking about ES6, but is anyone out there using it in production? Mango recently started adopting ES6 features that make our front-end code easier to write and maintain. In this talk, I will explain why we decided to use ES6, how we started to use it in production (using npm, browserify and babel) and I'll explain what problems we found along the way and how we solved them. Links: https://getmango.com https://getmango.com/blog/writing-es6-modules-with-6to5/ http://kangax.github.io/compat-table/ https://github.com/zloirock/core-js https://github.com/mango/emitter http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts http://benmccormick.org/2015/04/07/es6-classes-and-backbone-js/

1. ES6 in Production
JSConf Uruguay 2015

2. - Made in Buenos Aires, Argentina
- Front-end Developer
- Working at Mango
@pazguille (twitter / github)
Guille Paz

3. #ES6inProd
Your feedback is welcome!

4. ES6

5. Hi!
https://getmango.com

6. Why?

7. Why?

8. Future
Why?

9. Why?
Code

10. Why?
● Write expressive code

11. Why?
● Write expressive code
● Easier to understand

12. Why?
● Write expressive code
● Easier to understand
● Standardizes commons practices

13. Why?
ES6 Modules

14. define('Slideout',
// Deps
['inherit', 'Emitter'],
// Slideout
function(inherit, Emitter) {
function Slideout(options) { … }
// Export
return Slideout;
});
Why?
AMD

15. // Deps
var inherit = require('inherit');
var Emitter = require('emitter');
// Slideout
function Slideout(options) { … }
// Export
module.exports = Slideout;
Why?
CommonJS

16. Why?
ES6 Modules
// Deps
import inherit from 'inherit';
import Emitter from 'emitter';
// Slideout
function Slideout(options) { … }
// Export
export default Slideout;

17. Why?
Classes

19. // Slideout
function Slideout(options) { … }
// Inherit from Emitter
inherit(Slideout, Emitter);
// Extend prototype
Slideout.prototype.open = function() { … };
Why?
Classes

20. // Slideout
class Slideout extends Emitter {
constructor(options={}) { … }
open() { … }
}
Why?
Classes

21. // Deps
var inherit = require('inherit');
var Emitter = require('emitter');
// Slideout
function Slideout(options) { … }
// Inherit from Emitter
inherit(Slideout, Emitter);
// Extend prototype
Slideout.prototype.open = function() { … };
// Export
module.exports = Slideout;
Why?

22. // Deps
var inherit = require('inherit');
var Emitter = require('emitter');
// Slideout
function Slideout(options) { … }
// Inherit from Emitter
inherit(Slideout, Emitter);
// Extend prototype
Slideout.prototype.open = function() { … };
// Export
module.exports = Slideout;
Why?
// Deps
import Emitter from 'emitter';
// Slideout
class Slideout extends Emitter {
constructor(options={}) { … }
open() { … }
}
// Export
export default Slideout;

23. Why?
Classes
arrow = > functions
Module Syntax
let/const
Rest Parameters
Templates Strings Default Parameters

24. getmango.com/blog
https://getmango.com/blog/writing-es6-modules-with-6to5/

25. How?

26. Transpilers
How?

27. How?
ES6 ES5

28. How?

29. How?

30. Build Process
How?

31. How?

32. browserify({'entries': opts.entries, 'debug': true})
.plugin('factor-bundle', {'outputs': opts.bundles})
.on('error', function(err) { … })
.bundle()
.pipe(fs.createWriteStream(opts.output));
How?

33. How?
Babelify

34. browserify({'entries': opts.entries, 'debug': true})
.plugin('factor-bundle', {'outputs': opts.bundles})
.transform('babelify')
.on('error', function(err) { … })
.bundle()
.pipe(fs.createWriteStream(opts.output));
How?

35. Browser
How?

36. How?
http://kangax.github.io/compat-table/es5/
ES5

37. Polyfills
How?

38. How?
http://kangax.github.io/compat-table/es6/
ES6

39. core-js
How?
https://github.com/zloirock/core-js

40. How?
es5.js
(IE < 9)
Custom build
https://github.com/zloirock/core-js

41. How?
es5.js
(IE < 9)
es6.js
(all)
Custom build
https://github.com/zloirock/core-js

42. index.html
How?
…
<!--[if lt IE 9]>
<script src="/js/es5.js"></script>
<![endif]-->
<script src="/js/es6.js"></script>
<script src="/js/build.js"></script>
</body>

45. Issues

46. Issues
Context

47. ~110 modules
Issues

48. Issues

49. ES5 / ES6
Issues

50. Dependencies
Issues

51. Issues
├─ src
├─ boot.js
└─ bus.js
├─ package.json
├─ test
└─ node_modules
├─ slideout
└─ emitter
Dashboard
ES6
ES6

52. Issues
bus.js
// Deps
import Emitter from 'emitter';
// bus
const bus = new Emitter();
// Export
export default bus;

53. Issues

54. …
exports['default'] = bus;
module.exports = exports['default'];
},{'emitter':2}],2:[function(require,module,exports){
class Emitter {
on(event, listener) {
…
Issues
output.js

56. Issues
Dashboard
├─ src
├─ boot.js
└─ bus.js
├─ package.json
├─ test
└─ node_modules
├─ slideout
└─ emitter
Babelify

57. Issues
Dashboard
├─ src
├─ boot.js
└─ bus.js
├─ package.json
├─ test
└─ node_modules
├─ slideout
└─ emitter
Babelify

58. Issues
Dashboard
├─ src
├─ boot.js
└─ bus.js
├─ package.json
├─ test
└─ node_modules
├─ slideout
└─ emitter
Babelify

59. global : true
Issues

60. browserify({'entries': opts.entries, 'debug': true})
.plugin('factor-bundle', {'outputs': opts.bundles})
.transform('babelify')
.on('error', function(err) { … })
.bundle()
.pipe(fs.createWriteStream(opts.output));
Issues

61. browserify({'entries': opts.entries, 'debug': true})
.plugin('factor-bundle', {'outputs': opts.bundles})
.transform('babelify', {'global': true})
.on('error', function(err) { … })
.bundle()
.pipe(fs.createWriteStream(opts.output));
Issues

62. …
exports['default'] = bus;
module.exports = exports['default'];
},{'emitter':2}],2:[function(require,module,exports){
var Emitter = (function () {
function Emitter() {
…
Issues
output.js

63. package.json
Issues

64. …
"browserify": {
"transform": ["babelify"]
},
…
Issues
Emitter.js - package.json

65. …
"browserify": {
"transform": ["babelify"]
},
"dependencies": {
"babelify": "6.0.2"
},
…
Issues
Emitter.js - package.json

66. Issues

67. Writing ES6
Issues

68. Publishing ES5
Issues

69. Issues
Module
├─ src
└─ index.js
├─ package.json
└─ test

70. Issues
Module
├─ src
└─ index.js
├─ package.json
└─ test
ES6

71. Issues
Module
ES5
├─ src
└─ index.js
├─ package.json
└─ test
├─ dist
└─ index.js

72. …
"main": "dist/index.js",
…
Issues
package.json

73. Issues
Compile Task
(npm, grunt, gulp, broccoli)

74. …
"main": "dist/index.js",
"script": {
"compile": "babel src --out-dir dist"
},
…
Issues
Compile Task

75. Issues
npm run compile

76. …
"main": "dist/index.js",
"script": {
"compile": "babel src --out-dir dist",
"prepublish": "npm run compile"
},
…
Issues
Prepublish Task

77. mango/emitter
Issues
https://github.com/mango/emitter

78. Inheritance
Issues

79. 'use strict';
var extend = require('extend');
// Inherits prototype properties
module.exports = function inherit(child, parent) {
extend(child.prototype, parent.prototype);
return parent.prototype;
};
Issues
inherit.js - ES5

80. Issues
Emitter.js - ES6
class Emitter {
constructor(options={}) { … }
on() { … }
emit() { … }
…
}
export default Emitter;

81. // Deps
var inherit = require('inherit');
var Emitter = require('emitter');
// Slideout
function Slideout(options) { … }
// Inherit from Emitter
inherit(Slideout, Emitter);
// Extend prototype
Slideout.prototype.open = function() { … };
// Export
module.export = Slideout;
Issues
Slideout.js - ES5

82. // Deps
var inherit = require('inherit');
var Emitter = require('emitter');
// Slideout
function Slideout(options) { … }
// Inherit from Emitter
inherit(Slideout, Emitter);
// Extend prototype
Slideout.prototype.open = function() { … };
// Export
module.export = Slideout;
Issues
Slideout.js - ES5

83. console.log(Slideout.prototype);
// { open: function }
Issues
Slideout.js - ES5

84. console.log(Emitter.prototype);
// { }
Issues
Emitter.js - ES6

85. Issues
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

86. Issues

87. class Emitter {
…
on() { … }
…
}
Issues
Emitter.js - ES6

88. class Emitter {
…
on() { … }
…
}
Issues
Emitter.js - ES5
function Emitter() {}
Object.defineProperties(Emitter.prototype, {
'on': {
'writable': true,
'configurable': true,
'enumerable': false,
'value': function on() {}
}
});

89. class Emitter {
…
on() { … }
…
}
Issues
Emitter.js - ES5
function Emitter() {}
Object.defineProperties(Emitter.prototype, {
'on': {
'writable': true,
'configurable': true,
'enumerable': false,
'value': function on() {}
}
});

90. Loose Mode
(babel)
Issues

91. Issues
es6.classes

92. browserify({'entries': opts.entries, 'debug': true})
.plugin('factor-bundle', {'outputs': opts.bundles})
.transform('babelify', {'global': true, 'loose': ['es6.classes']})
.on('error', function(err) { … })
.bundle()
.pipe(fs.createWriteStream(opts.output));
Issues
Build Process

93. class Emitter {
…
on() { … }
…
}
Issues
Emitter.js - ES5
var Emitter = (function () {
function Emitter() { … }
Emitter.prototype.on = function on() {};
…
return Emitter;
})();

94. console.log(Slideout.prototype);
// { open: function, on: function }
Issues
Slideout.js - ES5

95. Object.create
Issues

96. 'use strict';
var extend = require('extend');
// Inherits prototype properties.
module.exports = function inherit(child, parent) {
extend(child.prototype, parent.prototype);
return parent.prototype;
};
Issues
inherit.js - ES5

97. 'use strict';
// Inherits prototype properties.
module.exports = function inherit(child, parent) {
child.prototype = Object.create(parent.prototype);
return parent.prototype;
};
Issues
inherit.js - ES5

98. super() - this
Issues

99. class Slideout extends Emitter {
constructor(options={}) {
this._padding = options.padding;
…
}
}
Issues
Slideout.js - ES6

100. Line 12: 'this' is not allowed before super()
Issues

101. class Slideout extends Emitter {
constructor(options={}) {
this._padding = options.padding;
…
}
}
Issues
Slideout.js - ES6

102. class Slideout extends Emitter {
constructor(options={}) {
super(options);
this._padding = options.padding;
…
}
}
Issues
Slideout.js - ES6

103. Issues
https://twitter.com/jashkenas/status/585458831993528320

104. Issues
http://benmccormick.org/2015/04/07/es6-classes-and-backbone-js/

105. import & hoisting
Issues

106. import _ from 'i18n';
import translations from 'translations.json';
_.add(translations);
import login from './login';
…
Issues
Login View - ES6

107. import _ from 'i18n';
import translations from 'translations.json';
_.add(translations);
import login from './login';
…
Issues
Login View - ES6

108. Issues

109. Issues
Login View - ES5
var _import = require('i18n');
var _import2 = _interopRequireWildcard(_import);
var _translations = require('translations.json');
var _translations2 = _interopRequireWildcard(_translations);
var _login = require('./login');
var __login2 = _interopRequireWildcard(__login);
_import2['default'].add(_translations2['default']);

110. var _import = require('i18n');
var _import2 = _interopRequireWildcard(_import);
var _translations = require('translations.json');
var _translations2 = _interopRequireWildcard(_translations);
var _login = require('./login');
var __login2 = _interopRequireWildcard(__login);
_import2['default'].add(_translations2['default']);
Issues
Login View - ES5

111. Issues

112. Babel 4.1.7
Issues

113. Takeaway

114. ● Transpile to ES5 (Babel)
Takeaway

115. ● Transpile to ES5 (Babel)
● Use ES5/ES6 polyfills (core-js)
Takeaway

116. ● Transpile to ES5 (Babel)
● Use ES5/ES6 polyfills (core-js)
● Babelify: opts.global or package.json
Takeaway

117. Takeaway
● Transpile to ES5 (Babel)
● Use ES5/ES6 polyfills (core-js)
● Babelify: opts.global or package.json
● Write ES6, publish ES5 (compile task)

118. ● Transpile to ES5 (Babel)
● Use ES5/ES6 polyfills (core-js)
● Babelify: opts.global or package.json
● Write ES6, publish ES5 (compile task)
● Babel - loose mode (es6.classes, es6.modules, … )
Takeaway

119. Thank you!
<3