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 full-size slide

  2. CoffeeScript
    ECMAScript 6
    vs.

    View full-size slide

  3. flickr.com/photos/mcgovernville

    View full-size slide

  4. CoffeeScript

    View full-size slide

  5. The elevator pitch

    View full-size slide


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

    View full-size slide


  7. It’s just JavaScript.

    View full-size slide

  8. Readable
    Natural language
    Speed
    Backward compatible
    Sturdy

    View full-size slide

  9. Whitespace sensitive

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Lexical scope and
    variable safety

    View full-size slide

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

    View full-size slide

  15. EcmaScript 6

    View full-size slide

  16. ES6
    also known as —

    View full-size slide

  17. Harmony
    also known as —

    View full-size slide

  18. ES.next
    also known as —

    View full-size slide

  19. ES 2015
    also known as —

    View full-size slide

  20. JavaScript 2015
    also known as —

    View full-size slide

  21. JS 9000
    also known as —

    View full-size slide

  22. What’s in a name?

    View full-size slide

  23. Mocha
    !
    LiveScript
    !
    JavaScript
    !
    !
    !
    !
    JScript

    View full-size slide

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

    View full-size slide


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

    View full-size slide

  26. 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 full-size slide

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

    View full-size slide

  28. JavaScript™

    View full-size slide

  29. Can I use it?

    View full-size slide

  30. CoffeeScript
    vs.
    ECMAScript 6

    View full-size slide

  31. JavaScript
    (ECMAScript 5)

    View full-size slide

  32. JavaScript
    (ECMAScript 5)
    JavaScript
    (ECMAScript 6)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. What’s common?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. (Fat) arrow functions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. Default function parameters

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Destructured assignment

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. Rest and spread operators

    View full-size slide

  51. String interpolation

    View full-size slide

  52. What’s extra?

    View full-size slide

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

    View full-size slide

  54. Block–scoped variables

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. 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 full-size slide

  58. // 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 full-size slide

  59. 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 full-size slide

  60. Sets and Maps

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. Iterables &
    for … of loops

    View full-size slide

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

    View full-size slide

  70. What’s missing?

    View full-size slide

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

    View full-size slide

  72. List comprehension

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  76. Whitespace sensitive

    View full-size slide

  77. “Everything’s an expression”
    Implicit return

    View full-size slide

  78. foo =-> "bar"

    View full-size slide

  79. 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 full-size slide

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

    View full-size slide

  81. Postfix conditionals

    View full-size slide

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

    View full-size slide

  83. Operators and aliases

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

  89. 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 full-size slide

  90. THANKS!
    @polarblau

    View full-size slide