We are proud to introduce sprockets-traceur - a gem that integrates with Google Traceur so that you can use ECMAScript 6 (JavaScript Next) features in your Rails application right now, without having to wait for browser vendors to catch up.

Why Google Traceur?

Google Traceur is a ECMAScript 6 to JavaScript transpiler, which implements most of the ES6 proposed language features. It is implemented as a node.js module.

Why ECMAScript 6?

ECMAScript 6 brings a number of exciting new features to JavaScript. Some of them, like classes, are syntactic sugar over patterns already established in JavaScript. Others, like generators, enable previously impossible APIs to be developed.

Let’s take a look at some of the new features of ECMAScript 6:

Classes

In JavaScript, the common way to define a class is:

function Library() {
  this.members = [];
}

Library.prototype.register = function(member) {
  // ...
}

In ES6, it takes a form more recognizable from other programming languages:

class Library {
  constructor() { 
    this.members = [];
  }

  register(member) {
    // ...
  }
}

Generators

Generators are arguably one of the most exciting features of ECMAScript 6. They make it possible to define functions, which yield control over their execution to the calling code.

function* callMe() {
  console.log('hello');
  yield 'world';
}

var gen = callMe();
// no output

// call next to step through the generator
gen.next(); 
// prints 'hello'
// returns {done: false, value: 'world'}

You can read more about generators here.

Fat arrows

This is another of the syntactic sugar changes introduced by ES6. They significantly shorten the syntax for defining single-expression functions, which are bound to the current object.

// the old way
var that = this;
doSomething(function() { that.done = true; }

// the new way
doSomething(() => this.done = true)

Modules

Another big change that ECMAScript 6 brings is the module system, similar to require.js or browserify.

Here’s how the module syntax will look like:

// in greeter.js

export var greeting = 'Hello';

export function greet(name) {
  console.log(greeting, name);
}

// in example.js
import {greet} from './greeter';

greet('World');

And much more…

In addition to the features mentioned above ECMAScript 6 introduces several other cool additions, such as: array comprehensions, block scoped variables, computed property names, default parameters, destructuring assignment, iterators, rest parameters, and even more.

You can read more about the ES6 features supported by sprockets-traceur here.

How do I use sprockets-traceur?

Excited about ES6? Want to try it today? It’s easy! Just append the following line to your Gemfile:

gem 'sprockets-traceur'

Add the following line to your application.js:

//= require traceur-runtime

Now every file with extension ‘.js.next’ or ‘.js.es6’ will be transpiled using Google Traceur.