class Animal
# `@` is a reference to `this`
constructor: (@name) ->
move: (meters) ->
# String interpolation
alert @name + " moved #{meters}m."
# Class inheritance support
class Snake extends Animal
move: ->
# No need of parentheses nor semicolons
alert "Slithering..."
super 5
class Horse extends Animal
move: ->
alert "Galloping..."
super 45
sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"
sam.move()
tom.move()
Slide 17
Slide 17 text
# `::` is a reference to the object’s `prototype`
String::dasherize = ->
# No need to use `return`
this.replace /_/g, "-"
Slide 18
Slide 18 text
›❯ Fat arrow;
›❯ Array ranges;
›❯ Destructuring of arrays and objects;
›❯ String interpolation;
›❯ Heredoc.
Slide 19
Slide 19 text
Node.js and Harmony
Slide 20
Slide 20 text
Harmony is the code-name
for the 6th version of ECMAScript standard (ES6)
Slide 21
Slide 21 text
Very influenced by CoffeeScript and CommonJS
Slide 22
Slide 22 text
ES6 Features
Slide 23
Slide 23 text
›❯ Block scope;
›❯ Arrow functions;
›❯ Function parameters;
›❯ Object literals;
›❯ Template strings;
›❯ Better async with Promises and Generators;
›❯ Classes and inheritance;
›❯ Module syntax;
›❯ Module loader.
Slide 24
Slide 24 text
Block scope
Slide 25
Slide 25 text
With `let` and `const`
we don’t have to worry about hoisting anymore
Slide 26
Slide 26 text
No more `var self = this;` madness
Slide 27
Slide 27 text
// ES5
function test() {
'use strict';
if (true) {
var foo = 'bar';
}
console.log(foo); // bar
}
Slide 28
Slide 28 text
// ES6
function test() {
if (true) {
let foo = 'bar';
}
console.log(foo); // ReferenceError: foo is not defined
}
Slide 29
Slide 29 text
Arrow functions
Slide 30
Slide 30 text
/**
* Arrow functions
*/
let sum = (x, y) => x + y;
sum(5, 5); // 10
[1, 2, 3].map(x => x * 2); // 2 4 6
// ES5 multiline through string concatenation
var markup = '' +
'' +
'' +
' ' +
'
GURU-SP
' +
' ' +
'' +
'';
Slide 40
Slide 40 text
// ES5 multiline through escaping new lines
var markup = '\
\
\
\
GURU-SP
\
\
';
Slide 41
Slide 41 text
// ES5 multiline using an array
var markup = [
'',
'',
'',
'
GURU-SP
',
'',
''
].join('\n');
Slide 42
Slide 42 text
// Way better in ES6!
var markup = `
GURU-SP
`
// String interpolation
let name = 'John Doe';
let age = 42;
let greetings = `My name is ${name} and I am ${age}`;
Slide 43
Slide 43 text
Better async (with Generators and Promises)
Slide 44
Slide 44 text
Generators have the ability of controlling
the whole execution flow of a function
Slide 45
Slide 45 text
// The `*` indicates that this function is a generator
let iterate = function* () {
let index = 0;
while(true) {
// `yield` will stop the generator and wait for an “answer” to continue
yield index += 5;
}
}
// Create the iterator
let iterator = iterate();
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 15, done: false }
Slide 46
Slide 46 text
Promises really come in handy
when dealing with async code as well
Slide 47
Slide 47 text
// Simple XHR request implementation
function ping(url) {
// Return a new promise
return new Promise(function(resolve, reject) {
var request = new XMLHttpRequest();
request.open('GET', url);
request.onload = function() {
if (request.status == 200) {
// Resolve the promise with the response text
resolve(request.response);
} else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(request.statusText));
}
};
// Make the actual request
request.send();
});
}
ES6 offers a way of using
classical class-based architecture
Slide 51
Slide 51 text
// The good old prototypal inheritance
function Color() {}
Color.prototype.setHexa = function(code) {
this.hexa = code;
}
Color.prototype.toString = function() {
return this.hexa;
}
function Yellow() {
this.setHexa('#ffd200');
}
function Blue() {
this.setHexa('#00cdfa');
}
Yellow.prototype = Object.create(Color.prototype);
Blue.prototype = Object.create(Color.prototype);
var x = new Yellow();
var y = new Blue();
console.log(x.toString()); // #ffd200
console.log(y.toString()); // #00cdfa
Slide 52
Slide 52 text
class Color {
set hexa(code) { this._hexa = code; }
get hexa() { return this._hexa; }
toString() {
return this.hexa;
}
}
class Yellow extends Color {
constructor() {
this.hexa = '#ffd200';
}
}
class Blue extends Color {
constructor() {
this.hexa = '#00cdfa';
}
}
let x = new Yellow();
let y = new Blue();
console.log(x.toString()); // #ffd200
console.log(y.toString()); // #00cdfa
Slide 53
Slide 53 text
Module syntax
Slide 54
Slide 54 text
JavaScript has no native module system implementation
(until now)
Slide 55
Slide 55 text
We rely on other techniques to write modular code
Slide 56
Slide 56 text
/**
* Example of CommonJS module
*/
// Self contained module, the file itself is a clojure
// List of module’s dependencies
var IO = require('fs/io');
var pluck = require('helpers').pluck;
// Exports the public API
module.exports = {
toString: function() {
return 42;
}
};
Slide 57
Slide 57 text
/**
* Example of AMD module
*/
// Pass on a list of dependencies and the module implementation
define(['fs/io', 'helpers/pluck'], function(IO, pluck) {
// Module implementation goes here
// Exports the public API
return {
toString: function() {
return 42;
}
}
});
Slide 58
Slide 58 text
// Import a module from a package
import 'io' from 'fs/io';
// Named imports
import {pluck, sort} from 'helpers';
// Wildcard and module aliasing
import * as core from 'core';
// Exports `toString` to the public API
export let toString = () => 42;
// Exports a constant to the public API
export const PI = 3.14;
// You can also export a module default function
export default function() {
console.log('Default function!');
}
Slide 59
Slide 59 text
Module loader
Slide 60
Slide 60 text
ES6 provides a way of dynamically loading modules
Slide 61
Slide 61 text
The module loading is async but the implementation
has a synchronous nature
Slide 62
Slide 62 text
// Dynamically imports a module
System.import('path/to/module')
.then(module => {
// Do something with the module
});
Slide 63
Slide 63 text
You can use promises to load a batch of modules
Slide 64
Slide 64 text
Promise.all(
['pluck', 'format', 'reduce'].map(module => System.import(module)))
.then(([pluck, format, reduce]) => {
// Modules available in for implementation
}
);
Slide 65
Slide 65 text
ES6 today
Slide 66
Slide 66 text
You can use ES6 today by using a transpiler
Slide 67
Slide 67 text
The most popular ones are Babel and Traceur
Slide 68
Slide 68 text
Babel is going to be part of the next Sprockets release