ES6 right now
By @johnkpaul
Who?
John K. Paul
Penton Media
I ♥ JavaScript
@johnkpaul
john@johnkpaul.com
johnkpaul.com
ECMAScript 6
- a hell of a long time coming
- ES3 - 1999
- ES5 - 2009
- ES6 - 2014...?
- But who cares about dates?
ES6
- block scoped variables
- array comprehensions
- template strings
- generators/iterators
- destructuring assignment
block scoped variables
var arr = [1,2,3];
var o = [];
for(var i = 0; i<arr.length;i++) {
var val = arr[i];
o.push(function(){ alert(val); });
}
o.forEach(function(func){ func(); });
array comprehensions
var arr = [1, 2, 3, 4];
var doubled = [for (x of arr) 2*x];
doubled.forEach(alert);
lamda / fat arrow
'use strict';
var double = (x) => x * 2;
alert(double(10));
/*
var alertHandle;
var obj = {
twitter: 'johnkpaul',
init: function(){
alertHandle = () =>
alert(this.twitter);
}
};
obj.init();
alertHandle();
*/
destructuring assignment
var arr = [1, 2, 3];
func(arr);
function func([fst, snd, thd]){
alert(fst);
alert(thd);
}
/* REST PARAMETERS vvv
function destructure(...args){
var [options, callback] = args;
alert(options.v);
alert(typeof callback);
}
var o = {v: true}
destructure(o, () => $.noop);
*/
template strings
var first = "John K."
var last = "Paul";
var t = `I'm ${first} ${last}!`;
alert(t);
function* inf(){
var i = 0;
while(true){
yield ++i;
}
}
for(var x of inf()){
alert(x);
if(x > 3) { break; }
}
Excited?
There's a whole new language out there
and I didn't even touch on half of the features
Envious?
node --harmony
node has very different needs
How can we go on?
- transpilers
- shims
Traceur
grunt-traceur
by Aaron Frost
grunt.initConfig({
traceur: {
options: {
sourceMaps: true,
experimental: true,
blockBinding: true
},
custom: {
files:{
'build/': ['js/**/*.js'] // dest : [source files]
}
},
}
});
grunt.loadNpmTasks('grunt-traceur');
es6ify
by Thorsten Lorenz
browserify transform
var es6ify = require('es6ify');
var browserify = require('browserify');
browserify()
.add(es6ify.runtime)
.transform(es6ify)
.require(require.resolve('./src/main.js'), { entry: true })
.bundle({ debug: true }) //create source maps
.pipe(fs.createWriteStream(bundlePath));
sourcemaps
shims
no build step needed!
- Number.isNaN()
- String.prototype.contains()
- String.prototype.codePointAt()
- Array.from()
- Object.is()
- Map()
- Set()
- Promise()
What you should do
- Play around in the traceur repl
- Install ES6 Repl Chrome Extension
- Read up on ES6 features
- Read Ariya Hidayat
- Read Axel Rauschmayer
- Read Addy Osmani
- Add a branch with an ES6 transpiler