Slide 1

Slide 1 text

Ruby ECMAScript 6 vs.

Slide 2

Slide 2 text

CoffeeScript ECMAScript 6 vs.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

flickr.com/photos/mcgovernville

Slide 5

Slide 5 text

Disclaimer

Slide 6

Slide 6 text

CoffeeScript

Slide 7

Slide 7 text

Transpilers

Slide 8

Slide 8 text

The elevator pitch

Slide 9

Slide 9 text

“ Expose the good parts of JavaScript in a simple way.

Slide 10

Slide 10 text

“ It’s just JavaScript.

Slide 11

Slide 11 text

Readable Natural language Speed Backward compatible Sturdy

Slide 12

Slide 12 text

Whitespace sensitive

Slide 13

Slide 13 text

user = name: "John" age: 23

Slide 14

Slide 14 text

No semicolons* No round brackets** No curly braces*** No “var”

Slide 15

Slide 15 text

user = name: "foo" ! if user.name is "bar" console.log JSON.stringify user

Slide 16

Slide 16 text

Lexical scope and variable safety

Slide 17

Slide 17 text

name = "John" age = 23 ! ! (function() { var age, name; name = "John"; age = 23; ! }).call(this);

Slide 18

Slide 18 text

Slide 19

Slide 19 text

EcmaScript 6

Slide 20

Slide 20 text

ES6 also known as —

Slide 21

Slide 21 text

Harmony also known as —

Slide 22

Slide 22 text

ES.next also known as —

Slide 23

Slide 23 text

ES 2015 also known as —

Slide 24

Slide 24 text

JavaScript 2015 also known as —

Slide 25

Slide 25 text

JS 9000 also known as —

Slide 26

Slide 26 text

What’s in a name?

Slide 27

Slide 27 text

Mocha ! LiveScript ! JavaScript ! ! ! ! JScript

Slide 28

Slide 28 text

! ! ! ! ! ECMA–262 —The standard ECMAScript —The language

Slide 29

Slide 29 text

“ ECMAScript was always an unwanted trade name that sounds like a skin disease. ! — Brendan Eich

Slide 30

Slide 30 text

ES 1 ES 2 ES 3 ES 4 ES 5 ES 5.1 ES 6 ES 7 1997 1998 1999 — Abandoned 2009 2011 2015 — TBA

Slide 31

Slide 31 text

TC39

Slide 32

Slide 32 text

JavaScript 1.1 ECMAScript 1 JavaScript 1.5 ECMAScript 3 JavaScript 2.0 ECMAScript 6 (Harmony)

Slide 33

Slide 33 text

JavaScript™

Slide 34

Slide 34 text

Can I use it?

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

CoffeeScript vs. ECMAScript 6

Slide 42

Slide 42 text

JavaScript (ECMAScript 5)

Slide 43

Slide 43 text

JavaScript (ECMAScript 5) JavaScript (ECMAScript 6)

Slide 44

Slide 44 text

JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript

Slide 45

Slide 45 text

JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript

Slide 46

Slide 46 text

JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript And here’s why…

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

What’s common?

Slide 49

Slide 49 text

Classes

Slide 50

Slide 50 text

class Person extends Actor constructor: (@firstName, @lastName) -> fullName: -> "#{@firstName} #{@lastName}"

Slide 51

Slide 51 text

class Person extends Actor { ! constructor(firstName, lastName) { this.firstName = fistName; this.lastName = lastName; } fullname() { return `${this.firstName} ${this.lastName}`; } ! }

Slide 52

Slide 52 text

class Person extends Actor { get name() { // return ... } set name(value) { // ... } }

Slide 53

Slide 53 text

(Fat) arrow functions

Slide 54

Slide 54 text

Account = (customer, cart) -> @customer = customer @cart = cart ! $('.cart').bind 'click', (event) => @customer.purchase @cart

Slide 55

Slide 55 text

function Account(customer, cart) { this.customer = customer; this.cart = cart; $('.cart').bind('click', (e) => { this.customer.purchase(this.cart); }); }

Slide 56

Slide 56 text

Default function parameters

Slide 57

Slide 57 text

fill = (liquid = "coffee") -> # ...

Slide 58

Slide 58 text

function fill(liquid = "coffee") { // ... }

Slide 59

Slide 59 text

Destructured assignment

Slide 60

Slide 60 text

[name, age] = ["John", 23] ! response = name: "John" email: "[email protected]" age: 23 ! {name, age} = response

Slide 61

Slide 61 text

var options = { repeat: true, save: false }; ! var { repeat, save } = options;

Slide 62

Slide 62 text

var options = { repeat: true, save: false, rules: { custom: 10, } }; ! var { repeat, save, rules: { custom }} = options;

Slide 63

Slide 63 text

Rest and spread operators

Slide 64

Slide 64 text

String interpolation

Slide 65

Slide 65 text

What’s extra?

Slide 66

Slide 66 text

JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript

Slide 67

Slide 67 text

Block–scoped variables

Slide 68

Slide 68 text

var es = []; ! for (var i = 0; i < 10; i++) { let c = i; es[i] = function () { console.log("ES" + c); }; } ! es[6](); // => ES6

Slide 69

Slide 69 text

const FOO = "bar"; ! console.log(FOO); // => "bar" ! FOO = "foo"; ! console.log(FOO); // => "bar" ! const FOO = "baz"; ! console.log(FOO); // => "bar"

Slide 70

Slide 70 text

Generators*

Slide 71

Slide 71 text

function* idMaker(){ var index = 0; while(true) yield index++; } ! var gen = idMaker(); ! console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 console.log(gen.next().value); // 2

Slide 72

Slide 72 text

Modules

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Promises

Slide 75

Slide 75 text

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)]); });

Slide 76

Slide 76 text

Sets and Maps

Slide 77

Slide 77 text

var s = new Set(); s.add(“a").add("b").add("a"); ! s.size === 2; s.has("a") === true;

Slide 78

Slide 78 text

var m = new Map(); m.set("hello", 42); ! m.set(s, 34); m.get(s) == 34;

Slide 79

Slide 79 text

Symbols

Slide 80

Slide 80 text

var firstName = Symbol(); var person = {}; ! person[firstName] = "Nicholas"; console.log(person[firstName]);

Slide 81

Slide 81 text

var firstName = Symbol(); var person = {}; ! person[firstName] = "Nicholas"; console.log(person[firstName]);

Slide 82

Slide 82 text

const MY_KEY = Symbol(); let obj = {}; ! obj[MY_KEY] = 123; console.log(obj[MY_KEY]);

Slide 83

Slide 83 text

const MY_KEY = Symbol(); ! let obj = { [MY_KEY]: 123 };

Slide 84

Slide 84 text

const FOO = Symbol(); ! let obj = { [FOO]() { return 'bar'; } }; ! console.log(obj[FOO]());

Slide 85

Slide 85 text

Iterables & for … of loops

Slide 86

Slide 86 text

let values = [1, 2, 3]; ! for (let i of values) { console.log(i); }

Slide 87

Slide 87 text

What’s missing?

Slide 88

Slide 88 text

JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript

Slide 89

Slide 89 text

List comprehension

Slide 90

Slide 90 text

say(letter) for letter in ['A', 'B']

Slide 91

Slide 91 text

johns = (n for n in ['John', 'Marcy'] when n is 'John')

Slide 92

Slide 92 text

users = john: 23, marcy: 29 ! ageReport = for name, age of users "#{name} is #{age}"

Slide 93

Slide 93 text

Whitespace sensitive

Slide 94

Slide 94 text

“Everything’s an expression” Implicit return

Slide 95

Slide 95 text

foo =-> "bar"

Slide 96

Slide 96 text

grade = (student) -> if student.excellentWork "A+" else if student.okayStuff if student.triedHard then "B" else "B-" else "C" eldest = if 24 > 21 then "Liz" else "Ike"

Slide 97

Slide 97 text

[lastName, age] = if name == 'John' then ['Doe', 23] else if name == 'Marcy' then ['Murcy', 29] else ['Unknown' ] ! console.log lastName, age

Slide 98

Slide 98 text

Postfix conditionals

Slide 99

Slide 99 text

console.log("42") if question is true

Slide 100

Slide 100 text

Operators and aliases

Slide 101

Slide 101 text

invite(user) if user? # typeof user !== "undefined" && user !== null ! ! name = userName ? 'John'

Slide 102

Slide 102 text

launch() if ignition is on ! volume = 10 if band isnt SpinalTap ! letTheWildRumpusBegin() unless answer is no ! letIn() if name in ['John', 'Marcy']

Slide 103

Slide 103 text

Ranges

Slide 104

Slide 104 text

countdown = (num for num in [10..1])

Slide 105

Slide 105 text

Verdict?

Slide 106

Slide 106 text

Try it now, switch later (where applicable)

Slide 107

Slide 107 text

“ But one thing is for certain: we must embrace the moving target.

Slide 108

Slide 108 text

http://coffeescript.org/ https://kangax.github.io/compat-table/es6/ https://speakerdeck.com/polarblau/an-evening-with-coffeescript https://github.com/lukehoban/es6features https://leanpub.com/understandinges6/read http://www.wintellect.com/devcenter/nstieglitz/5-great-features- in-es6-harmony http://rauchg.com/2015/ecmascript-6/ http://code.tutsplus.com/articles/use-ecmascript-6-today-- net-31582 http://blog.500tech.com/on-coffeescript-and-es6/ https://github.com/ericdouglas/ES6-Learning

Slide 109

Slide 109 text

JOIN US!

Slide 110

Slide 110 text

THANKS! @polarblau