Updated Date: 2015-02-20

Coming into 2015, the next generation of Javascript – ES6 (ECMAScript 6th Edition) should not still sound like something from the future. Actually, according to Allen Wirfs-Brock (the editor of the ECMAScript 6 specification), ES6 has been scheduled for release in mid 2015.

Using ES6 is the coming trend. The next major releases of AugularJS and Ember.js will be even based on ES6.

Right now, it is a good time to start to get familiar with ES6, since it is basically “done” – its feature set is frozen, and mostly being refined now.

In the several coming posts, I will share my learning experiences as well as the notes (test cases) about all major features of ES6. Hopefully, it can also help others to get ready for the new era of ES6 – the more powerful Javascript.

First, we will start with “How to use ES6 today”.

1. What is ES6

In short, ES6 (ECMAScript 6, code-named “Harmony“) is the upcoming sixth major release of the ECMAScript language specification, which is also referred as “Javascript 2.0”. For the big picture of the ES6, you can check its wiki for details in terms of Requirements, Goals, Means and Themes. One of the Goals is to be a better language for writing:

  • complex applications;
  • libraries (possibly including the DOM) shared by those applications;
  • code generators targeting the new edition.

The ES6 specification is still under draft, being updated in a regular basis.

1.1 ES6 Compatibility

Since ES6 is till in draft, the support of ES6 varies widely from engine to engine. The “ECMAScript 6 compatibility table” (from Kangax) can help tell us which ES6 features are supported in which browsers as well as engines.

2. Using ES6

Here, we talk about three ways to try and use ES6:

  • Natively in Browser
  • Natively in Node.js
  • Transpilation (ES6 to ES5)

2.1 ES6 in Browsers

In order to try ES6 features, you should use the browsers under unstable release channels, like Chrome Canary, Firefox Nightly.

Specifically, if you are using Chrome, you will need to “enable” the support since most of the ES6 features are hidden behind a feature toggle.

Open Chrome, and browse to chrome://flags and find the section titled Enable Experimental JavaScript. Make sure it is enabled.

2.2 ES6 in Node.js

In order to use ES6 in Node.js, you need to specify set the --harmony flag when running js script, like

node --harmony index.js

Here is the full list of all available “harmony” related flags that can be used:

$ 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))

2.3 Transpilation

By doing Transpilation, ES6 code can be compiled into ES5 code so that any modern browsers can run with it. This is currently most common way to try and use ES6, even in the real production trail.

There are three important ES6-to-ES5 transpilers:

Traceur is the most popular pure ECMAScript 6 compiler. Although Traceur doesn’t support all of the features specified by ES6, and some of the implementations differ slightly from the spec (see here foe more details), but it is still a good compiler for use to start for learning.

Traceur can be used in two ways: “In browser as a JavaScript library” and “In building process“.

Using Traceur as a JavaScript library

Load the JS file traceur.js directly in the browser as any other normal JS files.

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<~-- The "bootstrap.js" is to help compile the code down to vanilla Javascript -->
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>

After it, when writing JS code, you need to use the script type module instead of text/javascript.

Here is an example code from Traceur’s Getting Started page.

<!DOCTYPE html>
<html>
  ...
  <body>
    <h1 id="message"></h1>
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script>
        // Turns on all experimental features of Traceur if needed. 
        traceur.options.experimental = true;
    </script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script type="module">
      class Greeter {
        constructor(message) {
          this.message = message;
        }

        greet() {
          var element = document.querySelector('#message');
          element.innerHTML = this.message;
        }
      };

      var greeter = new Greeter('Hello, world!');
      greeter.greet();
    </script>
    ...
  </body>
</html>

This way is very useful when you just need a quick run of ES6 code, especially in some online Javascript editors, like Plunker.

Using Traceur in Building Process

By using Traceur-based plugins in some build tools (like Grunt, Gulp, Broccoli, etc) will help automatically compile ES6 files to ES5 files before deploying them to browsers.

Check es6-tools for more details about these plugins.

3. My ES6 Adventure

During my learning of ES6, I’m using Traceur’s Gulp plugin and Karma to build a test environment to test each feature of ES6.

You can find all my test cases from Github. It will be updated according to my learning process.

About how to set up a Gulp-Traceur-Karma Boilerplate, please see my another post.

4. References

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>