ES6 in Production [JSConfUY2015]

ES6 in Production
JSConf Uruguay 2015

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

#ES6inProd
Your feedback is welcome!

Hi!
https://getmango.com

Why?
● Write expressive code

Why?
● Easier to understand

Why?
● Easier to understand
● Standardizes commons practices

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

// Deps
var inherit = require('inherit');
var Emitter = require('emitter');
// Slideout
// Export
module.exports = Slideout;
Why?
CommonJS

Why?
ES6 Modules
// Deps
import inherit from 'inherit';
import Emitter from 'emitter';
// Slideout
// Export
export default Slideout;

ES6 in Production [JSConfUY2015]

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

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

// Deps
// Slideout
// Extend prototype
// Export
Why?

// Deps
// Slideout
// Extend prototype
// Export
Why?
// Deps
// Slideout
open() { … }
}
// Export
export default Slideout;

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

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

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

.transform('babelify')
.bundle()
How?

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

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

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

How?
es5.js
(IE < 9)
Custom build

How?
es5.js
(IE < 9)
es6.js
(all)
Custom build

index.html
How?
…

<script src="/js/es6.js"></script>
<script src="/js/build.js"></script>
</body>

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

Issues
bus.js
// Deps
// bus
const bus = new Emitter();
// Export
export default bus;

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

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

.transform('babelify')
.bundle()
Issues

.transform('babelify', {'global': true})
.bundle()
Issues

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

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

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

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

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

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

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

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

…
"script": {
"compile": "babel src --out-dir dist"
},
…
Issues
Compile Task

…
"script": {
"compile": "babel src --out-dir dist",
"prepublish": "npm run compile"
},
…
Issues
Prepublish Task

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

'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

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

// Deps
// Slideout
// Extend prototype
// Export
module.export = Slideout;
Issues
Slideout.js - ES5

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

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

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

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

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

.transform('babelify', {'global': true, 'loose': ['es6.classes']})
.bundle()
Issues
Build Process

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

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

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

'use strict';
// Inherits prototype properties.
child.prototype = Object.create(parent.prototype);
};
Issues
inherit.js - ES5

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

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

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

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

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

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

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']);

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

● Transpile to ES5 (Babel)
Takeaway

● Use ES5/ES6 polyfills (core-js)
Takeaway

● Babelify: opts.global or package.json
Takeaway

Takeaway
● Write ES6, publish ES5 (compile task)

● Write ES6, publish ES5 (compile task)
● Babel - loose mode (es6.classes, es6.modules, … )
Takeaway

ES6 in Production [JSConfUY2015]

More Related Content

What's hot (20)

Similar to ES6 in Production [JSConfUY2015] (20)

More from Guillermo Paz (7)

Recently uploaded (20)

ES6 in Production [JSConfUY2015]