RubyECMAScript 6vs.
View Slide
CoffeeScriptECMAScript 6vs.
flickr.com/photos/mcgovernville
Disclaimer
CoffeeScript
Transpilers
The elevator pitch
“Expose the good parts ofJavaScript in a simple way.
“It’s just JavaScript.
ReadableNatural languageSpeedBackward compatibleSturdy
Whitespace sensitive
user =name: "John"age: 23
No semicolons*No round brackets**No curly braces***No “var”
user = name: "foo"!if user.name is "bar"console.log JSON.stringify user
Lexical scope andvariable safety
name = "John"age = 23!!(function() {var age, name;name = "John";age = 23;!}).call(this);
EcmaScript 6
ES6also known as —
Harmonyalso known as —
ES.nextalso known as —
ES 2015also known as —
JavaScript 2015also known as —
JS 9000also known as —
What’s in a name?
Mocha!LiveScript!JavaScript!!!!JScript
!!!!!ECMA–262 —The standardECMAScript —The language
“ECMAScript was always anunwanted trade name that soundslike a skin disease.!— Brendan Eich
ES 1ES 2ES 3ES 4ES 5ES 5.1ES 6ES 7199719981999— Abandoned200920112015— TBA
TC39
JavaScript 1.1 ECMAScript 1JavaScript 1.5 ECMAScript 3JavaScript 2.0ECMAScript 6(Harmony)
JavaScript™
Can I use it?
CoffeeScriptvs.ECMAScript 6
JavaScript(ECMAScript 5)
JavaScript(ECMAScript 5)JavaScript(ECMAScript 6)
JavaScript(ECMAScript 5)JavaScript(ECMAScript 6)CoffeeScript
JavaScript(ECMAScript 5)JavaScript(ECMAScript 6)CoffeeScriptAnd here’s why…
What’s common?
Classes
class Person extends Actorconstructor: (@firstName, @lastName) ->fullName: ->"#{@firstName} #{@lastName}"
class Person extends Actor {!constructor(firstName, lastName) {this.firstName = fistName;this.lastName = lastName;}fullname() {return `${this.firstName} ${this.lastName}`;}!}
class Person extends Actor {get name() {// return ...}set name(value) {// ...}}
(Fat) arrow functions
Account = (customer, cart) ->@customer = customer@cart = cart!$('.cart').bind 'click', (event) =>@customer.purchase @cart
function Account(customer, cart) {this.customer = customer;this.cart = cart;$('.cart').bind('click', (e) => {this.customer.purchase(this.cart);});}
Default function parameters
fill = (liquid = "coffee") -># ...
function fill(liquid = "coffee") {// ...}
Destructured assignment
[name, age] = ["John", 23]!response =name: "John"email: "[email protected]"age: 23!{name, age} = response
var options = {repeat: true,save: false};!var { repeat, save } = options;
var options = {repeat: true,save: false,rules: {custom: 10,}};!var { repeat,save,rules: { custom }} = options;
Rest and spread operators
String interpolation
What’s extra?
Block–scoped variables
var es = [];!for (var i = 0; i < 10; i++) {let c = i;es[i] = function () {console.log("ES" + c);};}!es[6](); // => ES6
const FOO = "bar";!console.log(FOO); // => "bar"!FOO = "foo";!console.log(FOO); // => "bar"!const FOO = "baz";!console.log(FOO); // => "bar"
Generators*
function* idMaker(){var index = 0;while(true)yield index++;}!var gen = idMaker();!console.log(gen.next().value); // 0console.log(gen.next().value); // 1console.log(gen.next().value); // 2
Modules
// file A:export const sqrt = Math.sqrt;export function square(x) {return x * x;}export function diag(x, y) {return sqrt(square(x) + square(y));}!// file B:import { square, diag } from 'lib';console.log(square(11));!// file C:import * as lib from ‘lib';console.log(lib.square(11));
Promises
function timeout(duration = 0) {return new Promise((resolve, reject) => {setTimeout(resolve, duration);});}!var p = timeout(1000).then(() => {return timeout(2000);}).then(() => {throw new Error("hmm");}).catch(err => {return Promise.all([timeout(100), timeout(200)]);});
Sets and Maps
var s = new Set();s.add(“a").add("b").add("a");!s.size === 2;s.has("a") === true;
var m = new Map();m.set("hello", 42);!m.set(s, 34);m.get(s) == 34;
Symbols
var firstName = Symbol();var person = {};!person[firstName] = "Nicholas";console.log(person[firstName]);
const MY_KEY = Symbol();let obj = {};!obj[MY_KEY] = 123;console.log(obj[MY_KEY]);
const MY_KEY = Symbol();!let obj = {[MY_KEY]: 123};
const FOO = Symbol();!let obj = {[FOO]() {return 'bar';}};!console.log(obj[FOO]());
Iterables &for … of loops
let values = [1, 2, 3];!for (let i of values) {console.log(i);}
What’s missing?
List comprehension
say(letter) for letter in ['A', 'B']
johns = (n for n in ['John', 'Marcy'] when n is 'John')
users = john: 23, marcy: 29!ageReport = for name, age of users"#{name} is #{age}"
“Everything’s an expression”Implicit return
foo =-> "bar"
grade = (student) ->if student.excellentWork"A+"else if student.okayStuffif student.triedHard then "B" else "B-"else"C"eldest = if 24 > 21 then "Liz" else "Ike"
[lastName, age] =if name == 'John' then ['Doe', 23]else if name == 'Marcy' then ['Murcy', 29]else ['Unknown' ]!console.log lastName, age
Postfix conditionals
console.log("42") if question is true
Operators and aliases
invite(user) if user?# typeof user !== "undefined" && user !== null!!name = userName ? 'John'
launch() if ignition is on!volume = 10 if band isnt SpinalTap!letTheWildRumpusBegin() unless answer is no!letIn() if name in ['John', 'Marcy']
Ranges
countdown = (num for num in [10..1])
Verdict?
Try it now,switch later(where applicable)
“But one thing is for certain:we must embracethe moving target.
http://coffeescript.org/https://kangax.github.io/compat-table/es6/https://speakerdeck.com/polarblau/an-evening-with-coffeescripthttps://github.com/lukehoban/es6featureshttps://leanpub.com/understandinges6/readhttp://www.wintellect.com/devcenter/nstieglitz/5-great-features-in-es6-harmonyhttp://rauchg.com/2015/ecmascript-6/http://code.tutsplus.com/articles/use-ecmascript-6-today--net-31582http://blog.500tech.com/on-coffeescript-and-es6/https://github.com/ericdouglas/ES6-Learning
JOIN US!
THANKS!@polarblau
polarblau
heronshoes
skume
ryu_hu03
little_rubyist
syumai
shinmiy
konpay
numeroanddev
pangmoo
qualiarts
hitokun
punchdrunker
paulrobertlloyd
chrislema
scottboms
bkeepers
sachag
yeseniaperezcruz
gr2m
kneath
michaelherold
hursman
akmur