CoffeeScript vs. ECMAScript 6

Transcript

1. 1.

   Ruby ECMAScript 6 vs.

2. 2.

   CoffeeScript ECMAScript 6 vs.

3. 3.

   None
4. 4.

   flickr.com/photos/mcgovernville

5. 5.

   Disclaimer

6. 6.

   CoffeeScript

7. 7.

   Transpilers

8. 8.

   The elevator pitch

9. 9.

   “ Expose the good parts of JavaScript in a simple

   way.
10. 10.

    “ It’s just JavaScript.

11. 11.

    Readable Natural language Speed Backward compatible Sturdy

12. 12.

    Whitespace sensitive

13. 13.

    user = name: "John" age: 23

14. 14.

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

15. 15.

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

    JSON.stringify user
16. 16.

    Lexical scope and variable safety

17. 17.

    name = "John" age = 23 ! ! (function() {

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

    <Opinion />

19. 19.

    EcmaScript 6

20. 20.

    ES6 also known as —

21. 21.

    Harmony also known as —

22. 22.

    ES.next also known as —

23. 23.

    ES 2015 also known as —

24. 24.

    JavaScript 2015 also known as —

25. 25.

    JS 9000 also known as —

26. 26.

    What’s in a name?

27. 27.

    Mocha ! LiveScript ! JavaScript ! ! ! ! JScript

28. 28.

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

    language
29. 29.

    “ ECMAScript was always an unwanted trade name that sounds

    like a skin disease. ! — Brendan Eich
30. 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. 31.

    TC39

32. 32.

    JavaScript 1.1 ECMAScript 1 JavaScript 1.5 ECMAScript 3 JavaScript 2.0

    ECMAScript 6 (Harmony)
33. 33.

    JavaScript™

34. 34.

    Can I use it?

35. 35.

    None
36. 36.

    None
37. 37.

    None
38. 38.

    None
39. 39.

    None
40. 40.

    None
41. 41.

    CoffeeScript vs. ECMAScript 6

42. 42.

    JavaScript (ECMAScript 5)

43. 43.

    JavaScript (ECMAScript 5) JavaScript (ECMAScript 6)

44. 44.

    JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript

45. 45.

    JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript

46. 46.

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

47. 47.

    None
48. 48.

    What’s common?

49. 49.

    Classes

50. 50.

    class Person extends Actor constructor: (@firstName, @lastName) -> fullName: ->

    "#{@firstName} #{@lastName}"
51. 51.

    class Person extends Actor { ! constructor(firstName, lastName) { this.firstName

    = fistName; this.lastName = lastName; } fullname() { return `${this.firstName} ${this.lastName}`; } ! }
52. 52.

    class Person extends Actor { get name() { // return

    ... } set name(value) { // ... } }
53. 53.

    (Fat) arrow functions

54. 54.

    Account = (customer, cart) -> @customer = customer @cart =

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

    function Account(customer, cart) { this.customer = customer; this.cart = cart;

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

    Default function parameters

57. 57.

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

58. 58.

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

59. 59.

    Destructured assignment

60. 60.

    [name, age] = ["John", 23] ! response = name: "John"

    email: "john@foo.com" age: 23 ! {name, age} = response
61. 61.

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

    var { repeat, save } = options;
62. 62.

    var options = { repeat: true, save: false, rules: {

    custom: 10, } }; ! var { repeat, save, rules: { custom }} = options;
63. 63.

    Rest and spread operators

64. 64.

    String interpolation

65. 65.

    What’s extra?

66. 66.

    JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript

67. 67.

    Block–scoped variables

68. 68.

    var es = []; ! for (var i = 0;

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

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

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

    Generators*

71. 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. 72.

    Modules

73. 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. 74.

    Promises

75. 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. 76.

    Sets and Maps

77. 77.

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

    s.has("a") === true;
78. 78.

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

    m.get(s) == 34;
79. 79.

    Symbols

80. 80.

    var firstName = Symbol(); var person = {}; ! person[firstName]

    = "Nicholas"; console.log(person[firstName]);
81. 81.

    var firstName = Symbol(); var person = {}; ! person[firstName]

    = "Nicholas"; console.log(person[firstName]);
82. 82.

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

    = 123; console.log(obj[MY_KEY]);
83. 83.

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

    123 };
84. 84.

    const FOO = Symbol(); ! let obj = { [FOO]()

    { return 'bar'; } }; ! console.log(obj[FOO]());
85. 85.

    Iterables & for … of loops

86. 86.

    let values = [1, 2, 3]; ! for (let i

    of values) { console.log(i); }
87. 87.

    What’s missing?

88. 88.

    JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript

89. 89.

    List comprehension

90. 90.

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

91. 91.

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

    is 'John')
92. 92.

    users = john: 23, marcy: 29 ! ageReport = for

    name, age of users "#{name} is #{age}"
93. 93.

    Whitespace sensitive

94. 94.

    “Everything’s an expression” Implicit return

95. 95.

    foo =-> "bar"

96. 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. 97.

    [lastName, age] = if name == 'John' then ['Doe', 23]

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

    Postfix conditionals

99. 99.

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

100. 100.

     Operators and aliases

101. 101.

     invite(user) if user? # typeof user !== "undefined" && user

     !== null ! ! name = userName ? 'John'
102. 102.

     launch() if ignition is on ! volume = 10 if

     band isnt SpinalTap ! letTheWildRumpusBegin() unless answer is no ! letIn() if name in ['John', 'Marcy']
103. 103.

     Ranges

104. 104.

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

105. 105.

     Verdict?

106. 106.

     Try it now, switch later (where applicable)

107. 107.

     “ But one thing is for certain: we must embrace

     the moving target.
108. 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. 109.

     JOIN US!

110. 110.

     THANKS! @polarblau