Using ECMAScript6 today

1. Introduction#

Although ECMAScript6 has not been officially released yet, we can play around with new language features today. There are tools such as Traceur or Babel which are able to convert ECMAScript6 into ECMASciprt5, thus we are able to run the code in every browser. So let’s try to run the snippet below, which leverages destructuring assignment using those tools

1
(function () {
2
    var obj = {
3
        firstProp: 1,
4
        secondProp: 2
5
    }, array = [1, 2, 3];
6

7
    //Destructuring array
8
    var [x,y,z] = array;
9

10
    console.log('Destructuring array');
11
    console.log('Value of x = ' + x);
12
    console.log('Value of y = ' + y);
13
    console.log('Value of z = ' + z);
14

15
    console.log('Destructuring object');
16
    var { secondProp: b,firstProp: a } = obj;
17
    console.log('Value of firstProp = ' + a);
18
    console.log('Value of secondProp = ' + b);
19

20
}());

2. Using `Traceur`#

I’ll start from Traceur first. First of all we have to install it, so run in console (I am using gulp as my build system)

npm install gulp-traceur --save-dev

Then we have to write simple gulp task which:

grabs all of our js files
runs the code analysis using JsHint
transpiles source files into valid ECMAScript5
concatenates the result into single file
generates source maps (for debugging proposes)

1
var gulp = require('gulp');
2
var sourcemaps = require('gulp-sourcemaps');
3
var traceur = require('gulp-traceur');
4
var concat = require('gulp-concat');
5
var jshint = require('gulp-jshint');
6

7
return gulp.src('app/*.js')
8
           .pipe(jshint())
9
           .pipe(jshint.reporter('jshint-stylish'))
10
           .pipe(jshint.reporter('fail'))
11
           .pipe(sourcemaps.init())
12
           .pipe(traceur())
13
           .pipe(concat('app.all.js'))
14
           .pipe(sourcemaps.write('.'))
15
           .pipe(gulp.dest('dest'));

Having our result file ready, now we can add a script tag in html pointing to app.all.js. However at this point in the runtime we will get an error.

$traceurRuntime is not defined

Quick look at the generated app.all.js file reveals the problem

1
"use strict";
2
(function() {
3
  var $__1,
4
      $__2;
5
  var obj = {
6
    firstProp: 1,
7
    secondProp: 2
8
  },
9
      array = [1, 2, 3];
10
  var $__0 = array,
11
      x = ($__1 = $__0[$traceurRuntime.toProperty(Symbol.iterator)](), ($__2 = $__1.next()).done ? void 0 : $__2.value),
12
      y = ($__2 = $__1.next()).done ? void 0 : $__2.value,
13
      z = ($__2 = $__1.next()).done ? void 0 : $__2.value;
14
  console.log('Destructuring array');
15
  console.log('Value of x = ' + x);
16
  console.log('Value of y = ' + y);
17
  console.log('Value of z = ' + z);
18
  console.log('Destructuring object');
19
  var $__3 = obj,
20
      b = $__3.secondProp,
21
      a = $__3.firstProp;
22
  console.log('Value of firstProp = ' + a);
23
  console.log('Value of secondProp = ' + b);
24
}());
25

26
//# sourceMappingURL=app.all.js.map

Transpiled code has references to $traceurRuntime objects, so in order to make our code work, we have to add additional script tag pointing to traceur-runtime.js. You can easily get the sources with bower, just run in console

npm install bower --save-dev
bower install  traceur-runtime

Now everything should work and in console we’ll get expected result

As you could see in example above Traceur generates overcomplicated code which makes debugging of the original sources (using source maps) a painful process. Just take a look at the following screenshot

fortunately Babel doesn’t seem to have these drawbacks.

3. Using `Babel`#

Let’s modify our gulp build script to use Babel instead of Traceur

npm install gulp-babel --save-dev

1
var gulp = require('gulp');
2
var sourcemaps = require('gulp-sourcemaps');
3
var babel= require('gulp-babel');
4
var concat = require('gulp-concat');
5
var jshint = require('gulp-jshint');
6

7
return gulp.src('app/*.js')
8
           .pipe(jshint())
9
           .pipe(jshint.reporter('jshint-stylish'))
10
           .pipe(jshint.reporter('fail'))
11
           .pipe(sourcemaps.init())
12
           .pipe(babel())
13
           .pipe(concat('app.all.js'))
14
           .pipe(sourcemaps.write('.'))
15
           .pipe(gulp.dest('dest'));

And basically that all, we are ready to go. Babel doesn’t require any runtime dependencies, generated code is simple

1
'use strict';
2

3
(function () {
4
    var obj = {
5
        firstProp: 1,
6
        secondProp: 2
7
    },
8
        array = [1, 2, 3];
9

10
    //Destructuring array
11
    var x = array[0];
12
    var y = array[1];
13
    var z = array[2];
14

15
    console.log('Destructuring array');
16
    console.log('Value of x = ' + x);
17
    console.log('Value of y = ' + y);
18
    console.log('Value of z = ' + z);
19

20
    console.log('Destructuring object');
21
    var b = obj.secondProp;
22
    var a = obj.firstProp;
23

24
    console.log('Value of firstProp = ' + a);
25
    console.log('Value of secondProp = ' + b);
26
})();
27
//# sourceMappingURL=app.all.js.map

and even source maps seem to work correctly.

So when it comes to me I choose Babel.

Source code for this post can be found here

1. Introduction#

2. Using Traceur#

3. Using Babel#

2. Using `Traceur`#

3. Using `Babel`#