An introduction to ES6 Part 1: Using ES6 Today

By: James Allardice

Tags:

  • es6
  • javascript

We like to keep up to date with the latest technologies at Global Personals and JavaScript is no exception to that. Over the next few weeks we’ll be introducing you to the evolving ES6 standard and showing you how you can start using the code of the future today.

Since it’s always helpful to try out new concepts as you learn about them, we are going to look at how you can run ES6 code in modern JavaScript environments right now. Then, as we progress through the rest of the series, you’ll be able to play around with the new ideas as you read.

What is ES6?

ECMAScript 6 (ES6, often referred to as “Harmony”) is the upcoming sixth major release of the ECMAScript language specification. ECMAScript is the “proper” name for the language commonly referred to as JavaScript. I won’t go into the history of these names, but if you’re interested there’s plenty of information around the web.

The draft ES6 specification is updated regularly and is a great way to really get to grips with the details of the language. If you’re interested in the direction the spec is taking, the es-discuss mailing list and its associated summary Twitter feed are the places to go, along with the ES Wiki.

ES6 in the browser

Let’s have a look at how you start using ES6 today, in the environment that many JavaScripters are most comfortable in: the browser. Unsuprisingly, support varies wildly from engine to engine, with Mozilla tending to lead the way. You can use the ES6 compatibility table to get an idea of the features supported by the browser you’re using right now.

For the best support you’ll probably want to be running the unstable release channel of your favourite browser e.g. Chrome Canary or Firefox Nightly. This means you’ll have access to the latest features as soon as they’re implemented, rather than having to wait for a public stable release.

Note that if you’re using Chrome most of the ES6 features are hidden behind a feature toggle. Browse to chrome://flags, find the section titled “Enable Experimental JavaScript” and enable it to turn on support:

Experimental JavaScript

ES6 in Node.js

This section would be better titled “ES6 in V8”, but since Node.js is by far the most popular platform running Google’s V8 engine, I’ll focus on that.

When you run Node.js you can specify numerous options inherited from V8. Use the --v8-options flag to display the full list. You will notice that there’s a group of V8 options prefixed with --harmony_. These options can be set to opt- in to various ES6 features:

$ node --v8-options | grep harmony
  --harmony_typeof #(enable harmony semantics for typeof)
  --harmony_scoping #(enable harmony block scoping)
  --harmony_modules #(enable harmony modules (implies block scoping))
  --harmony_proxies #(enable harmony proxies)
  --harmony_collections #(enable harmony collections (sets, maps, and weak maps))
  --harmony #(enable all harmony features (except typeof))

I recommend using the --harmony flag to opt-in to all available ES6 features (you may have noticed from the above snippet that this option does not enable ES6 typeof semantics. This is because the proposal has since been rejected from the ES6 spec).

Transpilation

The approaches discussed previously are great for testing ES6 code you’re currently working on, or for quickly trying out new features, but in the browser they are nowhere near ready for production use. Hardly anyone who visits your web page will be using the nightly build of Chrome or Firefox, and even fewer will have experimental JavaScript enabled.

That doesn’t mean you can’t start preparing your codebase for the future though. Traceur is a project by Google designed to take ES6 code and give you back ES5 code that’s compatible with modern browsers in their default settings (the settings your users will have). Traceur doesn’t support all of the features specified by ES6, and some of the implementations differ slightly from the spec, but the project is very active and features are updated on a regular basis.

Traceur is available as a JavaScript library that can be included on any web page to automatically transpile the contents of text/traceur type script tags. This usage is not recommended because the browser will be doing a whole lot of unnecessary extra work. A better solution is to integrate the transpilation process into your build. As Grunt has become the de facto standard build tool for JavaScript, we’ll look at that one in particular.

A Grunt plugin for Traceur is already available and is actively developed. You can install it in the usual way (with npm install --save-dev grunt-traceur) and easily integrate it into your existing Gruntfile:

grunt.initConfig({
    traceur: {
        app: {
            files:{
                "build/": ["es6/**/*.js"]
            }
        }
    }
});
grunt.loadNpmTasks("grunt-traceur");

The above example will take all *.js files within the es6 directory, transpile them to ES5 and place the output files in the build directory.

An example

Here’s a very basic example demonstrating just a few of the ES6 features you’ll learn about throughout this series. You can have a look at the transpiled code in action on JSBin.

class Person {                                          // The 'class' keyword
    constructor(name, age) {                            // Constructors
        this.name = name;
        this.age = age;
    }
}

class Developer extends Person {                        // The 'extends' keyword
    constructor(name, age, ...languages) {              // Rest parameters
        super(name, age);                               // Super calls
        this.languages = [...languages];                // The spread operator
    }
    printLanguages() {                                  // Short method definitions
        for(let lang of this.languages) {               // The for..of loop
            console.log(lang);
        }
    }
}

let me = new Developer("James", 23, "ES5", "ES6");     // Block scoping

Come back soon for the next part, where we’ll start to look at some actual ES6 code. Follow us on twitter to be notified when it’s posted, and don’t forget we’re hiring


About the Author

James Allardice

James Allardice is a Senior JavaScript Developer at Venntro. He is passionate about clean, maintainable JavaScript and is regularly on the lookout for ways to improve the JavaScript development process. He's currently interested in JSHint, Grunt, AngularJS and ECMAScript6.