ES6 for Rubyists

ES6 for Rubyists @rafaelrinaldi

@rafaelrinaldi

http://netshoes.com.br

http://sp.femug.com

http://zofe.com.br

ES6 ❤ Ruby

JavaScript is awesome but also kind of awkward

“Toy language” legacy

The web evolved really fast

XMLHttpRequest, jQuery, MooTools…

CoffeeScript

Largely inspired by Ruby

Transpiles to vanilla JavaScript

Adopted by Rails on version 3.1

Big inﬂuence on the future of JavaScript

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()

# `::` is a reference to the object’s `prototype` String::dasherize
= -> # No need to use `return` this.replace /_/g, "-"

›❯ Fat arrow; ›❯ Array ranges; ›❯ Destructuring of arrays
and objects; ›❯ String interpolation; ›❯ Heredoc.

Node.js and Harmony

Harmony is the code-name for the 6th version of ECMAScript
standard (ES6)

Very inﬂuenced by CoffeeScript and CommonJS

ES6 Features

›❯ Block scope; ›❯ Arrow functions; ›❯ Function parameters; ›❯
Object literals; ›❯ Template strings; ›❯ Better async with Promises and Generators; ›❯ Classes and inheritance; ›❯ Module syntax; ›❯ Module loader.

Block scope

With `let` and `const` we don’t have to worry about
hoisting anymore

No more `var self = this;` madness

// ES5 function test() { 'use strict'; if (true) {
var foo = 'bar'; } console.log(foo); // bar }

// ES6 function test() { if (true) { let foo
= 'bar'; } console.log(foo); // ReferenceError: foo is not defined }

Arrow functions

/** * Arrow functions */ let sum = (x, y)
=> x + y; sum(5, 5); // 10 [1, 2, 3].map(x => x * 2); // 2 4 6

Function parameters

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

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

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

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

Object literals

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

Template strings

// ES5 multiline through string concatenation var markup = ''
+ '<!doctype html>' + '<html>' + ' <body>' + ' <h1>GURU-SP</h1>' + ' </body>' + '</html>' + '';

// ES5 multiline through escaping new lines var markup =
'\ <!doctype html>\ <html>\ <body>\ <h1>GURU-SP</h1>\ </body>\ </html>';

// ES5 multiline using an array var markup = [
'<!doctype html>', '<html>', '<body>', '<h1>GURU-SP</h1>', '</body>', '</html>' ].join('\n');

// Way better in ES6! var markup = ` <!doctype
html> <html> <body> <h1>GURU-SP</h1> </body> </html>` // String interpolation let name = 'John Doe'; let age = 42; let greetings = `My name is ${name} and I am ${age}`;

Better async (with Generators and Promises)

Generators have the ability of controlling the whole execution ﬂow
of a function

// 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 }

Promises really come in handy when dealing with async code
as well

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

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

Classes and inheritance

ES6 offers a way of using classical class-based architecture

// 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

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

Module syntax

JavaScript has no native module system implementation (until now)

We rely on other techniques to write modular code

/** * 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; } };

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

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

Module loader

ES6 provides a way of dynamically loading modules

The module loading is async but the implementation has a
synchronous nature

// Dynamically imports a module System.import('path/to/module') .then(module => { //
Do something with the module });

You can use promises to load a batch of modules

Promise.all( ['pluck', 'format', 'reduce'].map(module => System.import(module))) .then(([pluck, format, reduce]) =>
{ // Modules available in for implementation } );

ES6 today

You can use ES6 today by using a transpiler

The most popular ones are Babel and Traceur

Babel is going to be part of the next Sprockets
release

Thanks @rafaelrinaldi

ES6 for Rubyists

ES6 for Rubyists

More Decks by Rafael Rinaldi

Other Decks in Technology

Featured

Transcript