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

CoffeeScript vs. ECMAScript 6

Florian Plank
February 26, 2015

CoffeeScript vs. ECMAScript 6

Florian Plank

February 26, 2015
Tweet

More Decks by Florian Plank

Other Decks in Programming

Transcript

  1. Ruby
    ECMAScript 6
    vs.

    View Slide

  2. CoffeeScript
    ECMAScript 6
    vs.

    View Slide

  3. View Slide

  4. flickr.com/photos/mcgovernville

    View Slide

  5. Disclaimer

    View Slide

  6. CoffeeScript

    View Slide

  7. Transpilers

    View Slide

  8. The elevator pitch

    View Slide


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

    View Slide


  10. It’s just JavaScript.

    View Slide

  11. Readable
    Natural language
    Speed
    Backward compatible
    Sturdy

    View Slide

  12. Whitespace sensitive

    View Slide

  13. user =
    name: "John"
    age: 23

    View Slide

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

    View Slide

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

    View Slide

  16. Lexical scope and
    variable safety

    View Slide

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

    View Slide


  18. View Slide

  19. EcmaScript 6

    View Slide

  20. ES6
    also known as —

    View Slide

  21. Harmony
    also known as —

    View Slide

  22. ES.next
    also known as —

    View Slide

  23. ES 2015
    also known as —

    View Slide

  24. JavaScript 2015
    also known as —

    View Slide

  25. JS 9000
    also known as —

    View Slide

  26. What’s in a name?

    View Slide

  27. Mocha
    !
    LiveScript
    !
    JavaScript
    !
    !
    !
    !
    JScript

    View Slide

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

    View Slide


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

    View Slide

  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

    View Slide

  31. TC39

    View Slide

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

    View Slide

  33. JavaScript™

    View Slide

  34. Can I use it?

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. CoffeeScript
    vs.
    ECMAScript 6

    View Slide

  42. JavaScript
    (ECMAScript 5)

    View Slide

  43. JavaScript
    (ECMAScript 5)
    JavaScript
    (ECMAScript 6)

    View Slide

  44. JavaScript
    (ECMAScript 5)
    JavaScript
    (ECMAScript 6)
    CoffeeScript

    View Slide

  45. JavaScript
    (ECMAScript 5)
    JavaScript
    (ECMAScript 6)
    CoffeeScript

    View Slide

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

    View Slide

  47. View Slide

  48. What’s common?

    View Slide

  49. Classes

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. (Fat) arrow functions

    View Slide

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

    View Slide

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

    View Slide

  56. Default function parameters

    View Slide

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

    View Slide

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

    View Slide

  59. Destructured assignment

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  63. Rest and spread operators

    View Slide

  64. String interpolation

    View Slide

  65. What’s extra?

    View Slide

  66. JavaScript
    (ECMAScript 5)
    JavaScript
    (ECMAScript 6)
    CoffeeScript

    View Slide

  67. Block–scoped variables

    View Slide

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

    View Slide

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

    View Slide

  70. Generators*

    View Slide

  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

    View Slide

  72. Modules

    View Slide

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

    View Slide

  74. Promises

    View Slide

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

    View Slide

  76. Sets and Maps

    View Slide

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

    View Slide

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

    View Slide

  79. Symbols

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  85. Iterables &
    for … of loops

    View Slide

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

    View Slide

  87. What’s missing?

    View Slide

  88. JavaScript
    (ECMAScript 5)
    JavaScript
    (ECMAScript 6)
    CoffeeScript

    View Slide

  89. List comprehension

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  93. Whitespace sensitive

    View Slide

  94. “Everything’s an expression”
    Implicit return

    View Slide

  95. foo =-> "bar"

    View Slide

  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"

    View Slide

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

    View Slide

  98. Postfix conditionals

    View Slide

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

    View Slide

  100. Operators and aliases

    View Slide

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

    View Slide

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

    View Slide

  103. Ranges

    View Slide

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

    View Slide

  105. Verdict?

    View Slide

  106. Try it now,
    switch later
    (where applicable)

    View Slide


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

    View Slide

  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

    View Slide

  109. JOIN US!

    View Slide

  110. THANKS!
    @polarblau

    View Slide