Using JavaScript 6: Getting started Today with Babel.js

There has been a lot of talk about the new version of JavaScript. Officially called ECMAScript 6, JavaScript 6 is a few months (sometime mid 2015) away from being officially a recommendation. Then starts the arduous march towards browser support. Many of browsers support a subset of JavaScript 6. How long to get 100% support is anyone’s guess. But don’t fret, we can use most of JavaScript 6 today.

I’d like to introduce you to Babel.js (formerly called 6to5) a JavaScript 6 to JavaScript 5 transpiler. Transpilers allow unsupported features to be used today while we wait for the browsers to implement JavaScript 6. Transpilers convert new JavaScript 6 features into JavaScript 5 syntax. Below I have a simple example of a JS6 class that is transpiled to the JS5 equivalent.

Getting started with Babel.js is mind numbingly simple. Thanks to Babel.js’s extensive documentation. I encourage you to visit their site.

I have copied the grunt instructions below.

Node

$ npm install --global babel

Usage

$ babel script.js

Grunt

$ npm install --save-dev grunt-babel

Gruntfile.js

module.exports = function(grunt){
    "use strict";

    grunt.loadNpmTasks('grunt-babel');

  grunt.initConfig({
    "babel": {
      options: {
        sourceMap: true
      },
      dist: {
        files: {
          "dist/app.js": "app.js"
        }
      }
    }
  });

  grunt.registerTask("default", ["babel"]);
}

Now that we have Babel.js installed let’s test it. I have created a JavaScript 6 class called Test.

class Test {

    getItems(){
        return [];

    }

    saveItem(item){

    }
}

Running Babel.js via Grunt outputs a new app.js, but with the equivalent JavaScript 5 syntax.

Transpiled app.js

"use strict";

var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); };

var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };

var Test = (function () {
    function Test() {
        _classCallCheck(this, Test);
    }

    _prototypeProperties(Test, null, {
        getItems: {
            value: function getItems() {
                return [];
            },
            writable: true,
            configurable: true
        },
        saveItem: {
            value: function saveItem(item) {},
            writable: true,
            configurable: true
        }
    });

    return Test;
})();

Babel.js is a great way to use the new features of JavaScript 6 today.

The biggest risk is if the features transpiled with BabelJs will behave the same as they will in the browser? There is always the chance they won’t. Babel.js claims their implementation is 100% spec compliant. This is good, but still a browser maker might interpret a spec differently (we’ve never seen that happen right?).

Worse case scenario is you have to move forward with BabelJs longer than you intended. Yes, you might have to rework some code, it’s the risk you take when using cutting edge tech.

There is no guarantee the browsers makers won’t implement features differently. Using Babel.js might save you during the round of browser releases supporting JavaScript 6.

I can envision a world where most websites a use a transpiler to use the latest features, because browsers tend to lag a few years behind.

In the end most advancements in programming languages make the developers more productive. The sooner we can use the new features the sooner we can realize productivity gains.