EcmaScript 2015

AKA EcmaScript 6

What is it?

What's new?

• Template strings
• Classes
• static methods
• Modules
• Set, Map and weak
• Promises
• iterator syntax

Template strings

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
      

Classes

class Animal {
  constructor(name, sound) {
    this.name = name;
    this.sound = sound;
  }

  speak() {
    console.log('The ' + this.name + ' says ' + this.sound +'.');
  }
}
var p = new Animal('pig', 'oink');
      

Inheritance

class Cat extends Animal {
  speak() {
    console.log('Mau!')
  }
}
var gorby = new Cat('Gorbypuff', 'meow');
      

Parameters

function f(a = 7, b = 3) {
  return a + b;
}
f() // 10
      

Rest parameter

function f(a, b, ...rest) {
  return a + b + rest.length
}
f(3, 5, 'one', 'two') // 10
      

Static methods

class Eightball {
  static question(r1) {
    console.log("nope");
  }
}
Eightball.question("Am I the greatest programmer ever?")
      

Modules

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
      

Set, Map and Weak*

      entries()
      keys()
      values()
      forEach()
      has()
      get()
      set()
      delete()
      clear()
      

Promises

var promise = new Promise( function (resolve, reject) {
   if (something) {
     resolve("IT works");
   } else {
     reject("Failure buddy!");
   }
});

myMethod().then(callbackSuccess).catch(callbackFail);
      

New iterator syntax

for (let word of ["one", "two", "three"])
    alert(word);

let s = new Set([3, 4, 5]);
for (let value of s)
    alert(value);

let m = new Map([['red', 'rojo'], ['blue', 'azul']]);
for (let [name, value] of m)
    alert(name + " = " + value);
      

Generators

function* anotherGenerator(i) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}

function* generator(i){
  yield i;
  yield* anotherGenerator(i);
  yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20
      

Who is using it?

• NPM
• Ember
• React
• Angular 2*
• Bootstrap
• All the hot web properties

How do we use it in Rails?

• Babel JavaScript transpiler: https://babeljs.io/
• sprockets-es6 gem: https://github.com/TannerRogalsky/sprockets-es6/

# Gemfile
gem 'sprockets', '>= 3.0.0'
gem 'sprockets-es6'
      

gem 'sass-rails', github: 'rails/sass-rails'
gem 'sprockets', github: 'rails/sprockets'
gem 'sprockets-rails', github: 'rails/sprockets-rails'
gem 'babel-transpiler'
      

// app/assets/manifest.js
//
// JS bundles
//= link ./javascripts/standalone-jquery.js
//= link ./javascripts/application.js
//= link ./javascripts/settings.js
//
// CSS bundles
//= link ./stylesheets/application.css
//= link ./stylesheets/settings.css
//
// Pull in all app/assets/images/ since app/views may link to them
//= link_tree ./images
      

      config.assets.precompile = ["manifest.js"]
      

Just one problem...

At least three solutions

• Ignore them
• AMD - include almond.js in the stack
• Common-JS - gem sprockets-commonjs

# config/initializers/assets.rb
Rails.application.config.assets.configure do |env|
  es6amd = Sprockets::BabelProcessor.new('modules' => 'amd', 'moduleIds' => true)
  # Replace the default transformer to transpile each `.es6` file with `define`
  # and `require` from the AMD spec.
  # Just be sure to add `almond.js` to the application and
  # require it before requiring other assets on `application.js`
  env.register_transformer 'application/ecmascript-6', 'application/javascript', es6amd
end
      

Fin.