Yes, but... this is the future!

Bye Bye Coffeescript?

Introducing                  

http://babeljs.io/

Babel is a transpiler for JavaScript best known for its ability to turn ES2015 into code that runs in your browser today

const input = [1, 2, 3];
console.log(
  input.map(item => item + 1)
);

var input = [1, 2, 3];
console.log(input.map(
  function (item) {
    return item + 1;
  }
));

TRANSPILE

Classes

class Person {

  constructor(firstName, lastName, age=18) {
    this._firstName = firstName;
    this._lastName = lastName;
    this._age = age;
  }

  getIdentityCard() {
    // ....
  }

}

class FriendlyGuy extends Person {

  constructor(firstName, lastName, age=18) {
    super(firstName, lastName, age);
    this._friends = [];
  }

  getIdentityCard() {
    // ....
  }

  addFriend(friend) {
    // ....
  }

}

Generators

  
  // .....

  pullEar() {
    let that = this;
    var pullEarActions = {
      [Symbol.iterator]: function*() {
        for (let i = 1; i <= that._age; i++) {
          yield i;
        }
      }
    };
    return pullEarActions;
  }

  // .....

Install BABEL CORE

npm install babel --save-dev

<script src="node_modules/babel/polyfill.js">
</script>

OR USING MODULES IMPORT... (COMING SOON)

Template Strings

console.log(`I am ${this._firstName} !`);

ARROWS

  
  // ......

  showFriends() {
    this._friends.forEach(f =>
      console.log(
        // Use this._firstName and
        // f._firstName
      )
    );
  }

  // .......

NOTE: Unlike functions, arrows share the same lexical ""this"" as their surrounding code

Shorthand object literals

// .....

getIdentityCard() {
  let name = this._firstName;
  name += ' ' + this._lastName;
  let age = this._age;
  return {name, age}
}

// .....

{ name: 'Andrea', AGE: 28 }

Modules

export class Person {
  // .....
}

person.es6.js

import {Person} from './person.es6';
import '../node_modules/babel/polyfill'

export class FriendlyGuy extends Person {
    // ....
}

friendlyguy.es6.js

import {FriendlyGuy} from './friendlyguy.es6';

export function main() {
    let andrea = new FriendlyGuy('Andrea', 'Stagi', 28);
    let mark = new FriendlyGuy('Mark', 'Iozz', 27);
    let matt = new FriendlyGuy('Matt', 'Lap', 29);

    andrea.addFriend(mark);
    andrea.addFriend(mark);
    andrea.showFriends();
    mark.showFriends();

    for (var age of andrea.pullEar()) {
      // truncate the sequence at 15
      if (age == 15) {
        break;
      }
      console.log(`${age}!!`);
    }
    console.log(mark.getIdentityCard());
}

window.main = main;

ES5

BABELIFY

ES2015 CODE with IMPORT

Browserify