Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CoffeeScript vs. ECMAScript 6

CoffeeScript vs. ECMAScript 6

8c367856dfeee6972848cc82c79c0638?s=128

Florian Plank

February 26, 2015
Tweet

Transcript

  1. Ruby ECMAScript 6 vs.

  2. CoffeeScript ECMAScript 6 vs.

  3. None
  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?

  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  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…

  47. None
  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