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

ES6: Using the new Javascript Today

ES6: Using the new Javascript Today

Talking about the new version Javascript, called ECMAScript ES6 or just ES6.

Pedro Nauck

November 01, 2014
Tweet

More Decks by Pedro Nauck

Other Decks in Programming

Transcript

  1. View Slide

  2. View Slide

  3. What does the
    look like?
    FUTURE

    View Slide

  4. View Slide

  5. That’s
    so far,
    no?

    View Slide

  6. View Slide

  7. View Slide

  8. and…

    View Slide

  9. What will be the
    the Javascript?
    FUTURE OF

    View Slide

  10. will be..
    I sure that

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. “Geeks love fight"
    Rasmus Lerdof

    View Slide

  16. View Slide

  17. The future of
    programming
    LANGUAGE…
    ANY

    View Slide

  18. is itself…

    View Slide

  19. environment…
    and your

    View Slide

  20. language become
    When one
    of
    just one tool…
    dependent

    View Slide

  21. View Slide

  22. Pedro Nauck
    FRONTEND DEVELOPER
    @pedronauck
    pedronauck.com

    View Slide

  23. Agenda

    View Slide

  24. A loooot
    of code

    View Slide

  25. HISTORY
    A lit bit about

    View Slide

  26. 1994
    1989
    First proposal of World Wide Web
    by Tim Bernes Lee
    Born Netscape as the first real webbrowser

    View Slide

  27. 1994
    1989
    First proposal of World Wide Web
    by Tim Bernes Lee
    Born Netscape as the first real webbrowser

    View Slide

  28. 1995
    INTERNACIONAL
    1997
    Works in the creation of the
    first version of what will be
    Javascript in the future
    Javascript is submitted to ECMA International
    Brendan Eich

    View Slide

  29. 1995
    MochaScript
    LiveScript
    Javascript

    View Slide

  30. Influences
    SCHEME SELF JAVA
    Dialecto of Lisp
    Funcional Programming
    Dialect of Smalltalk
    Prototype Based
    Dinamically Type
    Just-in-time Compilation
    Syntax and name
    1995

    View Slide

  31. 10days
    after

    View Slide

  32. 1995
    ✓ Imperative and Structured (Have a lot of things about C. Except scope)
    ✓ Weakly typed and Dynamic typed
    ✓ Object and Event based (Asyncronous)
    ✓ Functional Language (Callback, closures, function scoping)
    ✓ Prototype Based with constructors. Non-classical OOP.
    Characteristics
    JS

    View Slide

  33. 1995
    1997
    INTERNACIONAL
    Javascript is submitted to ECMA International
    Works in the creation of the
    first version of what will be
    Javascript in the future
    Brendan Eich

    View Slide

  34. 1997
    ✓ Attempts to standardize (IE Sucks)
    ✓ Netscape submitted JS to ECMA Internacional
    ✓ ECMAScript was created (ECMA-262 Edition 1)
    Script

    View Slide

  35. 1998
    1999
    ES2
    ES3
    Start to work with RegExp
    Better strings handling
    Exception suport with Try/Catch block
    Just some editorial changes to
    meet ISO requirements.

    View Slide

  36. 1998
    1999
    ES2
    ES3
    Start to work with RegExp
    Better strings handling
    Exception suport with Try/Catch block
    Just some editorial changes to
    meet ISO requirements.

    View Slide

  37. 2000
    2002
    JSON
    EX4, Classes, Iterators, Generators, Block Scope
    Suport with Flash/ActionsScript
    Was abandoned in 2004
    Simple object-based structure
    To explore Ajax capabilities
    ES4

    View Slide

  38. 2000
    2002
    JSON
    EX4, Classes, Iterators, Generators, Block Scope
    Suport with Flash/ActionsScript
    Was abandoned in 2004
    Simple object-based structure
    To explore Ajax capabilities
    ES4

    View Slide

  39. 2006
    2009
    A better way to manipulate DOM
    and Ajax methods
    Ryan Dahl introduces NodeJS at JSConf EU conference
    Javascript in the server side using V8

    View Slide

  40. 2006
    2009
    A better way to manipulate DOM
    and Ajax methods
    Ryan Dahl introduces NodeJS at JSConf EU conference
    Javascript in the server side using V8

    View Slide

  41. 2011
    2013
    ES5 Strict mode
    Native JSON support
    Function.prototype.bind
    A better Array and Object suport
    ES6
    Fix all these things!

    View Slide

  42. 2011
    2013
    ES5 Strict mode
    Native JSON support
    Function.prototype.bind
    A better Array and Object suport
    ES6
    Fix all these things!

    View Slide

  43. Coolest Features

    View Slide

  44. Arrow Functions Template Literals
    Let/Const and Block Scoping
    Destructuring Assigment Default Parameters
    Rest Parameters
    Spread Operator
    For-of
    Object Literals Improvement Modules
    Classes Generators
    Prototype

    View Slide

  45. A lot new API’s
    Prototype

    View Slide

  46. Prototype
    Array
    // ES5
    var arr = new Array(1, 2, 3, 4);
    // [1,2,3,4]
    var arr = new Array(4);
    // [undefined, undefined, undefined, undefined]
    var arr = new Array(1, 2, 3, 4);
    // [1,2,3,4]

    View Slide

  47. Prototype
    Array
    // ES5
    var arr = new Array(1, 2, 3, 4);
    // [1,2,3,4]
    var arr = new Array(4);
    // [undefined, undefined, undefined, undefined]
    var arr = new Array(4);
    // [undefined, undefined, undefined, undefined]

    View Slide

  48. Prototype
    Array
    // ES6
    var arr = Array.of(4); // [4]

    View Slide

  49. Prototype
    Array
    // ES5
    var users = [
    { name: 'Peter' },
    { name: 'Joe' },
    { name: 'Michael' }
    ];
    var joe;
    users.forEach(function(user) {
    if (user.name === 'Joe') joe = user;
    });

    View Slide

  50. Prototype
    Array
    // ES5
    var users = [
    { name: 'Peter' },
    { name: 'Joe' },
    { name: 'Michael' }
    ];
    var joe;
    users.forEach(function(user) {
    if (user.name === 'Joe') joe = user;
    });

    View Slide

  51. Prototype
    Array
    // ES5
    var users = [
    { name: 'Peter' },
    { name: 'Joe' },
    { name: 'Michael' }
    ];
    var joe;
    users.forEach(function(user) {
    if (user.name === 'Joe') joe = user;
    });

    View Slide

  52. Prototype
    Array
    // ES6
    var joe = users.find(function(user, index, arr) {
    if (user.name === 'Joe') return user;
    });

    View Slide

  53. Prototype
    Array
    // ES6
    var findByName = function(name) {
    return function(item, index, arr) {
    if (item.name === name) return item;
    };
    };
    var joe = users.find(findByName('Joe'));

    View Slide

  54. Prototype
    Array
    // ES6
    var findByName = function(name) {
    return function(item, index, arr) {
    if (item.name === name) return item;
    };
    };
    var joe = users.find(findByName('Joe'));

    View Slide

  55. Prototype
    Array
    // ES6
    var findByName = function(name) {
    return function(item, index, arr) {
    if (item.name === name) return item;
    }
    };
    var joe = users.find(findByName('Joe'));

    View Slide

  56. Prototype
    Array
    Array.from()
    Array.of()
    Array.prototype.find()
    Array.prototype.findIndex()
    Array.prototype.fill()
    Array.prototype.entries()
    Array.prototype.keys()
    Array.prototype.copyWithin()
    http:/
    /bit.ly/es6-array-prototype

    View Slide

  57. Prototype
    String
    String.fromCodePoint()
    String.prototype.codePointAt()
    String.prototype.startsWith()
    String.prototype.endsWith()
    String.prototype.contains()
    String.prototype.repeat()
    String.prototype.normalize()
    String.raw()
    http:/
    /bit.ly/es6-string-prototype

    View Slide

  58. Prototype
    Number
    Number.isNaN()
    Number.isFinite()
    Number.isInteger()
    Number.parseInt()
    Number.parseFloat()
    Number.isSafeInteger()
    Number.EPSILON
    Number.MAX_SAFE_INTEGER
    Number.MIN_SAFE_INTEGER
    http:/
    /bit.ly/es6-number-prototype

    View Slide

  59. For Of
    Replaces for-in
    New iterator (other, yeah!)
    Works fine with Array and Object

    View Slide

  60. For Of
    var student = {
    name: 'John',
    age: 23,
    city: 'Miami'
    };
    for (var prop in student) {
    console.log(prop) // name, age, city
    }
    for (var prop of student) {
    console.log(prop) // John, 23, Miami
    }

    View Slide

  61. For Of
    var student = {
    name: 'John',
    age: 23,
    city: 'Miami'
    };
    for (var prop in student) {
    console.log(prop) // name, age, city
    }
    for (var prop of student) {
    console.log(prop) // John, 23, Miami
    }

    View Slide

  62. For Of
    var student = {
    name: 'John',
    age: 23,
    city: 'Miami'
    };
    for (var prop in student) {
    console.log(prop) // name, age, city
    }
    for (var prop of student) {
    console.log(prop) // John, 23, Miami
    }

    View Slide

  63. For Of
    var student = {
    name: 'John',
    age: 23,
    city: 'Miami'
    };
    for (var prop in student) {
    console.log(prop) // name, age, city
    }
    for (var prop of student) {
    console.log(prop) // John, 23, Miami
    }

    View Slide

  64. For Of
    // ES6
    var names = ['John', 'Peter', 'Michael'];
    for (var name of names) {
    console.log(name) // John, Peter, Michael
    }

    View Slide

  65. For Of
    // ES5
    var students = [
    { name: 'John', age: 16 },
    { name: 'Peter' age: 23 },
    { name: 'Michael', age: 25 }
    ];
    var adults = students.filter(function(student) {
    return student.age > 18;
    });
    Array Comprehensions

    View Slide

  66. For Of Array Comprehensions
    // ES6
    var students = [
    { name: 'John', age: 16 },
    { name: 'Peter' age: 23 },
    { name: 'Michael', age: 25 }
    ];
    var adults = [for (s of students) if (s.age > 18)];

    View Slide

  67. For Of Array Comprehensions
    // ES6
    var students = [
    { name: 'John', age: 16 },
    { name: 'Peter' age: 23 },
    { name: 'Michael', age: 25 }
    ];
    var adults = [for (s of students) if (s.age > 18)];

    View Slide

  68. The new var
    Fix hoisting problems
    Let (Block Scoping)

    View Slide

  69. Let (Block Scoping)
    // ES5
    (function() {
    })();
    var message = 'hello world';
    console.log(message); // hello world

    View Slide

  70. Let (Block Scoping)
    // ES5
    (function() {
    })();
    var message = 'hello world';
    console.log(message); // hello world

    View Slide

  71. Let (Block Scoping)
    // ES6
    (function() {
    console.log(message); // ReferenceError
    let message = 'hello world';
    })();

    View Slide

  72. Let (Block Scoping)
    // ES5
    var handlers = [];
    for (var count = 0; count < 3; count++) {
    handlers[count] = function () {
    console.log(count);
    }
    }
    handlers[0](); // "2"
    handlers[1](); // "2"
    handlers[2](); // "2"

    View Slide

  73. Let (Block Scoping)
    // ES5
    var handlers = [];
    for (var count = 0; count < 3; count++) {
    (function (i) {
    handlers[i] = function () {
    console.log(i)
    };
    })(count);
    }
    handlers[0](); // "0"
    handlers[1](); // "1"
    handlers[2](); // "2"

    View Slide

  74. Let (Block Scoping)
    // ES5
    var handlers = [];
    for (var count = 0; count < 3; count++) {
    (function (i) {
    handlers[i] = function () {
    console.log(i)
    };
    })(count);
    }
    handlers[0](); // alerts "0"
    handlers[1](); // alerts "1"
    handlers[2](); // alerts "2"

    View Slide

  75. Let (Block Scoping)
    // ES6
    let handlers = [];
    for (let count = 0; count < 3; count++) {
    handlers[count] = function () {
    console.log(count);
    }
    }
    handlers[0](); // "0"
    handlers[1](); // "1"
    handlers[2](); // "2"

    View Slide

  76. Let (Block Scoping)
    // ES6
    let handlers = [];
    for (let count = 0; count < 3; count++) {
    handlers[count] = function () {
    console.log(count);
    }
    }
    handlers[0](); // "0"
    handlers[1](); // "1"
    handlers[2](); // "2"

    View Slide

  77. Read-only variables
    Block scoping
    Const

    View Slide

  78. Const
    // ES6
    const TIMEOUT = 600;
    TIMEOUT = 300;
    // Throw: TIMEOUT is read-only;

    View Slide

  79. New token =>
    Bye bye bind()
    It isn't just a Syntatic Sugar
    Arrow Functions

    View Slide

  80. Arrow Functions
    // ES5
    var blueProducts;
    categories.forEach(function(category) {
    blueProducts = category.products.filter(function(product) {
    return product.color === 'blue';
    });)
    });

    View Slide

  81. Arrow Functions
    // ES5
    var blueProducts;
    categories.forEach(function(category) {
    blueProducts = category.products.filter(function(product) {
    return product.color === 'blue';
    });)
    });
    22 unnecessary chars

    View Slide

  82. Arrow Functions
    // ES6
    let blueProducts;
    categories.forEach(c => {
    blueProducts = c.products.filter(p => p.color === 'blue');
    });

    View Slide

  83. Arrow Functions
    // ES6
    let blueProducts;
    categories.forEach(c => {
    blueProducts = c.products.filter(p => p.color === 'blue');
    });

    View Slide

  84. Arrow Functions
    // ES5
    ...
    getAverages: function(students) {
    return students.map(function(student) {
    return this.calcAverage(student.grades);
    }
    }
    ...

    View Slide

  85. Arrow Functions
    // ES5
    ...
    getAverages: function(students) {
    return students.map(function(student) {
    return this.calcAverage(student.grades);
    }
    }
    ...
    // ERROR

    View Slide

  86. Arrow Functions
    // ES5
    ...
    getAverages: function(students) {
    return students.map(function(student) {
    return this.calcAverage(student.grades);
    }
    }
    ...
    .bind(this));

    View Slide

  87. Arrow Functions
    // ES6
    ...
    getAverages(students) {
    return students.map(s => this.calcAverage(s.grades);
    }
    ...

    View Slide

  88. Template Literal
    Allows string literals with embedded expressions
    Multiline suport

    View Slide

  89. Template Literal

    View Slide

  90. Template Literal
    // ES5
    var name = 'John';
    var age = 23;
    console.log('My name is ' + name + '. I\'m ' + age + '.');

    View Slide

  91. Template Literal
    // ES6
    var name = 'John';
    var age = 23;
    console.log(`My name is ${name}. I\'m ${age}`);

    View Slide

  92. Template Literal
    // ES6
    var name = 'John';
    var age = 23;
    console.log(`My name is ${name}. I\'m ${age}`);

    View Slide

  93. Template Literal
    // ES5
    var className = 'myClass';
    var content = 'Hello world';
    var div = '' +
    '' + content + '' +
    '';

    View Slide

  94. Template Literal
    // ES6
    let className = 'myClass';
    let content = 'Hello world';
    let div = `

    ${content}
    `;

    View Slide

  95. Default Parameters

    View Slide

  96. // ES5
    var isApproved = function(grades, base) {
    base = base || 7;
    var average = grades.reduce(function(sum, num) {
    return sum + num;
    }) / grades.length;
    return average >= base;
    };
    Default Parameters

    View Slide

  97. // ES5
    var isApproved = function(grades, base) {
    base = base || 7;
    var average = grades.reduce(function(sum, num) {
    return sum + num;
    }) / grades.length;
    return average >= base;
    };
    Default Parameters

    View Slide

  98. Default Parameters
    // ES6
    let isApproved = (grades, base = 7) => {
    let len = grades.length;
    let avg = grades.reduce((sum, num) => {
    return (sum + num) / len;
    };
    return avg >= base;
    };

    View Slide

  99. Default Parameters
    // ES6
    let isApproved = (grades, base = 7) => {
    let len = grades.length;
    let avg = grades.reduce((sum, num) => {
    return (sum + num) / len;
    };
    return avg >= base;
    };

    View Slide

  100. Rest Parameters
    Allow functions with variable number of params

    View Slide

  101. Rest Parameters
    store.add('fruit', 'apple');
    store.add('dairy', 'milk', 'cheese', 'yoghurt');
    store.add('pastries', 'donuts', 'croissants');
    rest parameters

    View Slide

  102. Rest Parameters
    // ES3, ES5
    store.add = function(category) {
    var items = [].slice.call(arguments, 1);
    items.forEach(function (item) {
    store.aisle[category].push(item);
    });
    };

    View Slide

  103. Rest Parameters
    // ES3, ES5
    store.add = function(category) {
    var items = [].slice.call(arguments, 1);
    items.forEach(function (item) {
    store.aisle[category].push(item);
    });
    };

    View Slide

  104. Rest Parameters
    // ES6
    store.add = (category, ...items) => {
    items.forEach(item => {
    store.aisle[category].push(item)
    });
    };

    View Slide

  105. Rest Parameters
    // ES6
    store.add = (category, ...items) => {
    items.forEach(item => {
    store.aisle[category].push(item)
    });
    };

    View Slide

  106. Spread Operator
    Allow to spread variables into parameters

    View Slide

  107. Spread Operator
    // ES5
    var calcAverage = function(x, y, z) {
    return (x + y + z) / 3;
    };
    var grades = [70, 80, 85];
    calcAverage.apply(null, grades);

    View Slide

  108. Spread Operator
    // ES5
    var calcAverage = function(x, y, z) {
    return (x + y + z) / 3;
    };
    var grades = [70, 80, 85];
    calcAverage.apply(null, grades);

    View Slide

  109. Spread Operator
    // ES5
    var calcAverage = function(x, y, z) {
    return (x + y + z) / 3;
    };
    var grades = [70, 80, 85];
    calcAverage.apply(null, grades);

    View Slide

  110. Spread Operator
    // ES6
    let calcAverage = (x, y, z) => (x + y + z) / 3;
    let grades = [70, 80, 85];
    calcAverage(...grades);

    View Slide

  111. Spread Operator
    // ES6
    let calcAverage = (x, y, z) => (x + y + z) / 3;
    let grades = [70, 80, 85];
    calcAverage(...grades);

    View Slide

  112. Spread Operator
    // ES6
    let names = ['Peter', 'John', ‘Michael'];
    let firstArr = [];
    let secondArr = [];
    firstArr.push(...names);
    secondArr.push(names);
    console.log(firstArr.length); // 3
    console.log(secondArr.length); // 1

    View Slide

  113. Spread Operator
    // ES6
    let names = ['Peter', 'John', ‘Michael'];
    let firstArr = [];
    let secondArr = [];
    firstArr.push(...names);
    secondArr.push(names);
    console.log(firstArr.length); // 3
    console.log(secondArr.length); // 1

    View Slide

  114. Spread Operator
    // ES6
    let names = ['Peter', 'John', ‘Michael'];
    let firstArr = [];
    let secondArr = [];
    firstArr.push(...names);
    secondArr.push(names);
    console.log(firstArr.length); // 3
    console.log(secondArr.length); // 1

    View Slide

  115. Spread Operator
    // ES6
    let names = ['Peter', 'John', ‘Michael'];
    let firstArr = [];
    let secondArr = [];
    firstArr.push(...names);
    secondArr.push(names);
    console.log(firstArr.length); // 3
    console.log(secondArr.length); // 1

    View Slide

  116. Spread Operator
    // ES6
    let names = ['Peter', 'John', ‘Michael'];
    let firstArr = [];
    let secondArr = [];
    firstArr.push(...names);
    secondArr.push(names);
    console.log(firstArr.length); // 3
    console.log(secondArr.length); // 1

    View Slide

  117. Destructuring Assigment
    Use data-structure to declare elements
    Functions with multiple returns

    View Slide

  118. Destructuring Array
    // ES5
    var name = 'John';
    var city = 'California';
    var age = 23;
    // ES6
    let [name, city, age] = ['John', 'California', 23];

    View Slide

  119. Destructuring Array
    // ES5
    var name = 'John';
    var city = 'California';
    var age = 23;
    // ES6
    let [name, city, age] = ['John', 'California', 23];

    View Slide

  120. Destructuring Array
    // ES5
    var foo = function(a, b) {
    return [ a + 1, b + 2 ];
    };
    var a = foo()[0];
    var b = foo()[1];
    // ES6
    let foo = (a, b) => [a + 1, b + 2];
    let [a, b] = foo();

    View Slide

  121. Destructuring Array
    // ES3, ES5
    var foo = function(a, b) {
    return [ a + 1, b + 2 ];
    };
    var a = foo()[0];
    var b = foo()[1];
    // ES6
    let foo = (a, b) => [a + 1, b + 2];
    let [a, b] = foo();

    View Slide

  122. Destructuring Object
    // ES5
    var location = document.location;
    var protocol = location.protocol;
    var hostname = location.hostname;
    var port = location.port;
    // ES6
    let { protocal, hostname, port } = document.location;

    View Slide

  123. Destructuring Object
    // ES5
    var location = document.location;
    var protocol = location.protocol;
    var hostname = location.hostname;
    var port = location.port;
    // ES6
    let { protocal, hostname, port } = document.location;

    View Slide

  124. Destructuring Object
    // ES5
    var foo = function() { return 'foo'; }
    var bar = function() { return 'bar'; }
    module.exports = {
    foo: foo,
    bar: barr
    };
    // ES6
    let foo = () => 'foo';
    let foo = () => 'bar';
    module.exports = { foo, bar };

    View Slide

  125. Destructuring Object
    // ES5
    var foo = function() { return 'foo'; }
    var bar = function() { return 'bar'; }
    module.exports = {
    foo: foo,
    bar: barr
    };
    // ES6
    let foo = () => 'foo';
    let foo = () => 'bar';
    module.exports = { foo, bar };

    View Slide

  126. Destructuring Object
    // ES5
    var foo = function(opts) {
    var bar = opts.bar;
    var baz = opts.baz;
    return bar + baz;
    };
    // ES6
    let foo = ({bar, baz}) => bar + baz;
    // ES6
    let foo = ({b1: bar, b2: baz}) => b1 + b2;

    View Slide

  127. Destructuring Object
    // ES5
    var foo = function(opts) {
    var bar = opts.bar;
    var baz = opts.baz;
    return bar + baz;
    };
    // ES6
    let foo = ({bar, baz}) => bar + baz;
    // ES6
    let foo = ({b1: bar, b2: baz}) => b1 + b2;

    View Slide

  128. Destructuring Object
    // ES5
    var foo = function(opts) {
    var bar = opts.bar;
    var baz = opts.baz;
    return bar + baz;
    };
    // ES6
    let foo = ({bar, baz}) => bar + baz;
    // ES6
    let foo = ({b1: bar, b2: baz}) => b1 + b2;

    View Slide

  129. Generators
    Better way to manage flows
    Yield token allow control returns

    View Slide

  130. delivery
    by part

    View Slide

  131. Generators
    let idMaker = function* () {
    let index = 0;
    while(true) {
    yield index++
    }
    };
    let gen = idMaker();
    console.log(gen.next()) // { value: 1, done: false }
    console.log(gen.next()) // { value: 2, done: false }
    console.log(gen.next()) // { value: 3, done: false }

    View Slide

  132. Generators
    let idMaker = function* () {
    let index = 0;
    while(true) {
    yield index++
    }
    };
    let gen = idMaker();
    console.log(gen.next()) // { value: 1, done: false }
    console.log(gen.next()) // { value: 2, done: false }
    console.log(gen.next()) // { value: 3, done: false }

    View Slide

  133. Generators
    let idMaker = function* () {
    let index = 0;
    while(true) {
    yield index++
    }
    };
    let gen = idMaker();
    console.log(gen.next()) // { value: 1, done: false }
    console.log(gen.next()) // { value: 2, done: false }
    console.log(gen.next()) // { value: 3, done: false }

    View Slide

  134. Generators
    user.tasks = (function* () {
    let a = yield $.ajax('http://get/user');
    let b = yield $.ajax('http://process/user', a);
    yield $.ajax('http://save/user', b);
    })();

    View Slide

  135. Generators
    user.tasks.next() // gets the user
    .then(user => {
    // we do something with the user and then...
    return user.tasks.next(user);
    })
    .then(user => {
    // we do something else after the user
    // has been processed and then...
    return user.tasks.next(user);
    })
    .then(user => {
    // final operations here
    });

    View Slide

  136. Generators
    user.tasks.next() // gets the user
    .then(user => {
    // we do something with the user and then...
    return user.tasks.next(user);
    })
    .then(user => {
    // we do something else after the user
    // has been processed and then...
    return user.tasks.next(user);
    })
    .then(user => {
    // final operations here
    });

    View Slide

  137. Generators
    user.tasks.next() // gets the user
    .then(user => {
    // we do something with the user and then...
    return user.tasks.next(user);
    })
    .then(user => {
    // we do something else after the user
    // has been processed and then...
    return user.tasks.next(user);
    })
    .then(user => {
    // final operations here
    });

    View Slide

  138. Generators
    user.tasks.next() // gets the user
    .then(user => {
    // we do something with the user and then...
    return user.tasks.next(user);
    })
    .then(user => {
    // we do something else after the user
    // has been processed and then...
    return user.tasks.next(user);
    })
    .then(user => {
    // final operations here
    });

    View Slide

  139. Generators
    user.tasks.next() // gets the user
    .then(user => {
    // we do something with the user and then...
    return user.tasks.next(user);
    })
    .then(user => {
    // we do something else after the user
    // has been processed and then...
    return user.tasks.next(user);
    })
    .then(user => {
    // final operations here
    });

    View Slide

  140. Classes
    Classical OOP
    Allow single inheritance

    View Slide

  141. Classes
    class Vehicle {
    constructor(name, year) {
    this.name = name;
    this.year = year;
    }
    get name() {
    return `This is a ${this.name}`;
    }
    get year() {
    return `Year of manufacture: ${this.year}`;
    }
    set name(name) {
    this.name = name.toTitleize();
    }
    }

    View Slide

  142. Classes
    class Vehicle {
    constructor(name, year) {
    this.name = name;
    this.year = year;
    }
    get name() {
    return `This is a ${this.name}`;
    }
    get year() {
    return `Year of manufacture: ${this.year}`;
    }
    set name(name) {
    this.name = name.toTitleize();
    }
    }

    View Slide

  143. Classes
    class Vehicle {
    constructor(name, year) {
    this.name = name;
    this.year = year;
    }
    get name() {
    return `This is a ${this.name}`;
    }
    get year() {
    return `Year of manufacture: ${this.year}`;
    }
    set name(name) {
    this.name = name.toTitleize();
    }
    }

    View Slide

  144. Classes
    var fusca = new Vehicle('Fusca', 1976);
    fusca.name = 'fuxxca';
    // Fuxxca
    console.log(fusca.name);
    // This is a Fuxxca
    console.log(fusca.year);
    // Year of manufacture: 1976

    View Slide

  145. Classes
    class Car extends Vehicle {
    constructor(name, brand, year) {
    super(name, year)
    this.brand = brand;
    }
    }
    let fusca = new Car('Fusca', 'volkswagen', 1976);

    View Slide

  146. Classes
    class Car extends Vehicle {
    constructor(name, brand, year) {
    super(name, year)
    this.brand = brand;
    }
    }
    let fusca = new Car('Fusca', 'volkswagen', 1976);

    View Slide

  147. Classes
    Car = function(Vehicle) {
    function Car(name, brand, year) {
    Vehicle.call(this, name, year)
    this.brand = brand;
    }
    Car.prototype = Object.create(Vehicle.prototype, {
    constructor: {
    value: Car,
    enumerable: false,
    writable: true,
    configurable: true
    }
    });
    Car.__proto__ = Vehicle;
    return Car;
    }(Vehicle);

    View Slide

  148. Classes
    Car = function(Vehicle) {
    function Car(name, brand, year) {
    Vehicle.call(this, name, year)
    this.brand = brand;
    }
    Car.prototype = Object.create(Vehicle.prototype, {
    constructor: {
    value: Car,
    enumerable: false,
    writable: true,
    configurable: true
    }
    });
    Car.__proto__ = Vehicle;
    return Car;
    }(Vehicle);

    View Slide

  149. Classes
    Car = function(Vehicle) {
    function Car(name, brand, year) {
    Vehicle.call(this, name, year)
    this.brand = brand;
    }
    Car.prototype = Object.create(Vehicle.prototype, {
    constructor: {
    value: Car,
    enumerable: false,
    writable: true,
    configurable: true
    }
    });
    Car.__proto__ = Vehicle;
    return Car;
    }(Vehicle);

    View Slide

  150. Classes
    Car = function(Vehicle) {
    function Car(name, brand, year) {
    Vehicle.call(this, name, year)
    this.brand = brand;
    }
    Car.prototype = Object.create(Vehicle.prototype, {
    constructor: {
    value: Car,
    enumerable: false,
    writable: true,
    configurable: true
    }
    });
    Car.__proto__ = Vehicle;
    return Car;
    }(Vehicle);

    View Slide

  151. Modules
    Native way to build app with a modular approach

    View Slide

  152. Modules
    // foobar.js
    var foo = 'foo';
    var bar = 'bar';
    export { foo, bar };
    // app.js
    import { foo, bar } from 'foobar';
    console.log(foo); // foo
    Named Exports

    View Slide

  153. Modules Default Exports
    // car.js
    export default class Car() {
    constructor(name) {
    this.name = name;
    }
    }
    // main.js
    import Car from 'car';
    let fusca = new Car('Fusca');

    View Slide

  154. Modules All Exports
    // foobar.js
    let foo = 'foo';
    let bar = 'bar';
    export { foo, bar };
    // main.js
    module foobar from ‘foobar';
    console.log(foobar.foo) // 'foo'
    console.log(foobar.bar) // 'bar'

    View Slide

  155. How can I use
    today?
    ES6
    Modern browser supports partially
    NodeJS supports many features (—harmony flag)
    Transpilers and polyfills
    June 2015

    View Slide

  156. transpiler
    6to5
    Have a lot of features implemented
    CLI-Tool working as a Node REPL
    Have a good integration with Gulp/Grunt
    github.com/sebmck/6to5

    View Slide

  157. var gulp = require('gulp');
    var to5 = require('gulp-6to5');
    gulp.task('default', function () {
    return gulp.src('src/app.js')
    .pipe(to5())
    .pipe(gulp.dest('dist'));
    });
    github.com/sindresorhus/gulp-6to5

    View Slide

  158. github.com/sindresorhus/grunt-6to5
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
    '6to5': {
    options: { sourceMap: true },
    dist: {
    files: {
    'dist/app.js': 'src/app.js'
    }
    }
    }
    });
    grunt.registerTask('default', ['6to5']);

    View Slide

  159. DEMO http:/
    /git.io/hacker-news-es6

    View Slide

  160. references
    ES6

    View Slide

  161. http:/
    /bit.ly/es6-compat-table

    View Slide

  162. http:/
    /esdiscuss.org

    View Slide

  163. http:/
    /bit.ly/es6-mdn

    View Slide

  164. http:/
    /bit.ly/understanding-es6

    View Slide

  165. .com

    View Slide

  166. @brendaneich @rwaldron @slicknet
    @rauschma
    @wycats @littlecalculist @lbljeffmo
    @jaydson @felipenmoura
    to
    follow

    View Slide

  167. I hope you
    enjoyed

    View Slide

  168. Questions?

    View Slide