Slide 1

Slide 1 text

ES6 for Rubyists @rafaelrinaldi

Slide 2

Slide 2 text

@rafaelrinaldi

Slide 3

Slide 3 text

http://netshoes.com.br

Slide 4

Slide 4 text

http://sp.femug.com

Slide 5

Slide 5 text

http://zofe.com.br

Slide 6

Slide 6 text

ES6 ❤ Ruby

Slide 7

Slide 7 text

JavaScript is awesome but also kind of awkward

Slide 8

Slide 8 text

“Toy language” legacy

Slide 9

Slide 9 text

The web evolved really fast

Slide 10

Slide 10 text

XMLHttpRequest, jQuery, MooTools…

Slide 11

Slide 11 text

CoffeeScript

Slide 12

Slide 12 text

Largely inspired by Ruby

Slide 13

Slide 13 text

Transpiles to vanilla JavaScript

Slide 14

Slide 14 text

Adopted by Rails on version 3.1

Slide 15

Slide 15 text

Big influence on the future of JavaScript

Slide 16

Slide 16 text

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

Slide 31

Slide 31 text

Function parameters

Slide 32

Slide 32 text

/** * Default parameters */ function printNumber(number=42) { console.log(number); } printNumber(); // 42 printNumber(3.14); // 3.14

Slide 33

Slide 33 text

/** * Named parameters */ function addUser(id, {name, age}) { console.log(name, age); } addUser(1, {name: 'John Doe', age: 42}); // John Doe 42

Slide 34

Slide 34 text

/** * Rest parameters */ function setupList(id, ...values) { console.log(id, values); } setupList('colors', 'red', 'green', 'blue'); //[ 'red', 'green', 'blue' ]

Slide 35

Slide 35 text

/** * Spread operator */ let colors = ['red', 'green', 'blue']; function setupList(id, ...values) { console.log(id, values); } setupList('colors', ...colors); // [ 'red', 'green', 'blue' ]

Slide 36

Slide 36 text

Object literals

Slide 37

Slide 37 text

/** * Object literals */ let object = { // Equivalent of `foo: foo` foo, // Method shorthand bar() { return 'baz'; }, // Computed property name ['id-' + (() => 42)()]: 'foo' };

Slide 38

Slide 38 text

Template strings

Slide 39

Slide 39 text

// 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(); }); }

Slide 48

Slide 48 text

get('http://www.gurusp.org') .then(function(response) { console.log('yay', response); }, function(error) { console.error('meh', error); });

Slide 49

Slide 49 text

Classes and inheritance

Slide 50

Slide 50 text

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

Slide 69

Slide 69 text

Thanks @rafaelrinaldi