CoffeeScript vs. ECMAScript 6

1. Ruby ECMAScript 6 vs.
2. CoffeeScript ECMAScript 6 vs.
4. flickr.com/photos/mcgovernville
5. Disclaimer
6. CoffeeScript
7. Transpilers
8. The elevator pitch
9. “ Expose the good parts of JavaScript in a simple way.
10. “ It’s just JavaScript.
11. Readable Natural language Speed Backward compatible Sturdy
12. Whitespace sensitive
13. user = name: "John" age: 23
14. No semicolons* No round brackets** No curly braces*** No “var”
15. user = name: "foo" ! if user.name is "bar" console.log JSON.stringify user
16. Lexical scope and variable safety
17. name = "John" age = 23 ! ! (function() { var age, name; name = "John"; age = 23; ! }).call(this);
18. <Opinion />
19. EcmaScript 6
20. ES6 also known as —
21. Harmony also known as —
22. ES.next also known as —
23. ES 2015 also known as —
24. JavaScript 2015 also known as —
25. JS 9000 also known as —
26. What’s in a name?
27. Mocha ! LiveScript ! JavaScript ! ! ! ! JScript
28. ! ! ! ! ! ECMA–262 —The standard ECMAScript —The language
29. “ ECMAScript was always an unwanted trade name that sounds like a skin disease. ! — Brendan Eich
30. 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
31. TC39
32. JavaScript 1.1 ECMAScript 1 JavaScript 1.5 ECMAScript 3 JavaScript 2.0 ECMAScript 6 (Harmony)
33. JavaScript™
34. Can I use it?
41. CoffeeScript vs. ECMAScript 6
42. JavaScript (ECMAScript 5)
43. JavaScript (ECMAScript 5) JavaScript (ECMAScript 6)
44. JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript
45. JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript
46. JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript And here’s why…
48. What’s common?
49. Classes
50. class Person extends Actor constructor: (@firstName, @lastName) -> fullName: -> "#{@firstName} #{@lastName}"
51. class Person extends Actor { ! constructor(firstName, lastName) { this.firstName = fistName; this.lastName = lastName; } fullname() { return `${this.firstName} ${this.lastName}`; } ! }
52. class Person extends Actor { get name() { // return ... } set name(value) { // ... } }
53. (Fat) arrow functions
54. Account = (customer, cart) -> @customer = customer @cart = cart ! $('.cart').bind 'click', (event) => @customer.purchase @cart
55. function Account(customer, cart) { this.customer = customer; this.cart = cart; $('.cart').bind('click', (e) => { this.customer.purchase(this.cart); }); }
56. Default function parameters
57. fill = (liquid = "coffee") -> # ...
58. function fill(liquid = "coffee") { // ... }
59. Destructured assignment
60. [name, age] = ["John", 23] ! response = name: "John" email: "john@foo.com" age: 23 ! {name, age} = response
61. var options = { repeat: true, save: false }; ! var { repeat, save } = options;
62. var options = { repeat: true, save: false, rules: { custom: 10, } }; ! var { repeat, save, rules: { custom }} = options;
63. Rest and spread operators
64. String interpolation
65. What’s extra?
66. JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript
67. Block–scoped variables
68. var es = []; ! for (var i = 0; i < 10; i++) { let c = i; es[i] = function () { console.log("ES" + c); }; } ! es[6](); // => ES6
69. const FOO = "bar"; ! console.log(FOO); // => "bar" ! FOO = "foo"; ! console.log(FOO); // => "bar" ! const FOO = "baz"; ! console.log(FOO); // => "bar"
70. Generators*
71. 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
72. Modules
73. // 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));
74. Promises
75. 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)]); });
76. Sets and Maps
77. var s = new Set(); s.add(“a").add("b").add("a"); ! s.size === 2; s.has("a") === true;
78. var m = new Map(); m.set("hello", 42); ! m.set(s, 34); m.get(s) == 34;
79. Symbols
80. var firstName = Symbol(); var person = {}; ! person[firstName] = "Nicholas"; console.log(person[firstName]);
81. var firstName = Symbol(); var person = {}; ! person[firstName] = "Nicholas"; console.log(person[firstName]);
82. const MY_KEY = Symbol(); let obj = {}; ! obj[MY_KEY] = 123; console.log(obj[MY_KEY]);
83. const MY_KEY = Symbol(); ! let obj = { [MY_KEY]: 123 };
84. const FOO = Symbol(); ! let obj = { [FOO]() { return 'bar'; } }; ! console.log(obj[FOO]());
85. Iterables & for … of loops
86. let values = [1, 2, 3]; ! for (let i of values) { console.log(i); }
87. What’s missing?
88. JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript
89. List comprehension
90. say(letter) for letter in ['A', 'B']
91. johns = (n for n in ['John', 'Marcy'] when n is 'John')
92. users = john: 23, marcy: 29 ! ageReport = for name, age of users "#{name} is #{age}"
93. Whitespace sensitive
94. “Everything’s an expression” Implicit return
95. foo =-> "bar"
96. 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"
97. [lastName, age] = if name == 'John' then ['Doe', 23] else if name == 'Marcy' then ['Murcy', 29] else ['Unknown' ] ! console.log lastName, age
98. Postfix conditionals
99. console.log("42") if question is true
100. Operators and aliases
101. invite(user) if user? # typeof user !== "undefined" && user !== null ! ! name = userName ? 'John'
102. launch() if ignition is on ! volume = 10 if band isnt SpinalTap ! letTheWildRumpusBegin() unless answer is no ! letIn() if name in ['John', 'Marcy']
103. Ranges
104. countdown = (num for num in [10..1])
105. Verdict?
106. Try it now, switch later (where applicable)
107. “ But one thing is for certain: we must embrace the moving target.
108. 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
109. JOIN US!
110. THANKS! @polarblau