NDC London: Introduction to ES6

Transcript

1. 1.

   None
2. 2.

   @Jack_Franklin

3. 3.

   None
4. 4.

   None
5. 5.

   Warning: lots of links!

6. 6.

   https:// speakerdeck.com/ jackfranklin

7. 7.

   None
8. 8.

   None
9. 9.

   Make JS better • for complex applications • for libraries

   • as a target of code generators
10. 10.

    Arrow Functions

11. 11.

    var nums = [1,2,3]; nums.map(function(x) { return x * 2;

    }); nums.map((x) => x * 2);
12. 12.

    var n = [1, 2, 3, 4]; n.some(x => x

    % 2 == 0); // true n.filter(x => x % 2 != 0); //=> [1, 3] n.map(x => x * 2) //=> [2, 4, 6, 8]
13. 13.

    var n = [1, 2, 3, 4]; n.filter(x => x

    % 2 == 0) .map(x => x * x); //=> [4, 16]
14. 14.

    var users = […]; n.filter(u => u.isAdmin()) .map(u => u.name);

    //=> ['jack', 'james']
15. 15.

    n.map(x => x * 2); get('url', (x, y) => {…});

    $('#foo').click(() => {…}); parens needed for 0, 2+ arguments
16. 16.

    var jack = { name: 'jack', friends: ['james', 'steve'], printFriends:

    function() { this.friends.forEach(function(f) { log(this.name, 'knows', f);
 })
 } }; jack.printFriends(); // undefined knows james // undefined knows steve
17. 17.

    var jack = { name: 'jack', friends: ['james', 'steve'], printFriends:

    function() { this.friends.forEach((f) => { log(this.name, 'knows', f);
 })
 } }; jack.printFriends(); // jack knows james // jack knows steve
18. 18.

    var someAjax = { name: 'jack', get: function() { $.getJSON(url,

    function(d) { log(this.name, d); })
 } };
19. 19.

    var someAjax = { name: 'jack', get: function() { $.getJSON(url,(d)

    => { log(this.name, d); })
 } };
20. 20.

    var nums = [1,2,3]; nums.map((x) => x * 2); //

    => [2, 4, 6] nums.map((x) => { x * 2; }); // => [undefined…]
21. 21.

    var nums = [1,2,3]; nums.map((x) => x * 2); //

    => [2, 4, 6] nums.map((x) => { return x * 2; }); // => [2, 4, 6]
22. 22.

    http://javascriptplayground.com/blog/ 2014/04/real-life-es6-arrow-fn/ http://javascriptplayground.com/blog/ 2013/01/ecmascript-5-array-methods/

23. 23.

    Classes

24. 24.

    class Person { constructor(name, age) { this.name = name, this.age

    = age } about() { log(this.name, this.age);
 } };
25. 25.

    class Person { constructor(name, age) { this.name = name, this.age

    = age } about() { log(this.name, this.age);
 } };
26. 26.

    class Person { constructor(name, age) { this.name = name, this.age

    = age } about() { log(this.name, this.age);
 } };
27. 27.

    var jack = new Person('jack', 22); jack.about(); //=> jack 22

28. 28.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true
29. 29.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true
30. 30.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true
31. 31.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true
32. 32.

    class Son extends Person { constructor(name, age) { super(name, age);

    this.son = true; } }; var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true
33. 33.

    Object Literals

34. 34.

    var jack = { name: 'jack', age: 22, about() {

    log(this.name, this.age);
 } };
35. 35.

    var jack = { ['hello_' + (() => 'world')()]: 42

    }; console.log(jack.hello_world); // 42
36. 36.

    Template Strings

37. 37.

    console.log( `In JS '\n' is a line-feed.` ); In JS

    ' ' is a line-feed.
38. 38.

    var f =`Multiline strings with back ticks in ES6.` console.log(f);

    Multiline strings with back ticks in ES6
39. 39.

    var name = 'jack'; var age = 22; log(name +

    ' is ' + age + 'years old'); // this is the worst
40. 40.

    var name = 'jack'; var age = 22; `${name} is

    ${age} years old` // rejoice
41. 41.

    Destructuring

42. 42.

    var [a, b] = [1, 2]; a == 1 b

    == 2
43. 43.

    var [a, ,b] = [1, 2, 3]; a == 1

    b == 3
44. 44.

    var {a, b} = {a: 2, b: 3} a ==

    2 b == 3
45. 45.

    var {a, b} = {b: 3} a == undefined b

    == 3
46. 46.

    function getPerson() { return { name: 'jack', age: 22 }


    }; var {name, age} = getPerson();
47. 47.

    function getPerson() { var name = 'jack'; var age =

    22; return { name, age };
 }; var {name, age} = getPerson();
48. 48.

    Function Arguments

49. 49.

    function getInfo(print=false) { if(print) { log(this.name, this.age);
 } else {

    return `${this.name} ${this.age}`
 }
 } getInfo();
50. 50.

    function getInfo(name='jack') { console.log(name);
 } getInfo(); // 'jack' getInfo('Bob'); //

    'Bob'
51. 51.

    function length(...nums) { log(nums.length); }; length(1,2,3); // 3

52. 52.

    function length(x, ...rest) { log(x, rest); }; length(1,2,3); // 1,

    [2, 3]
53. 53.

    function total(x, y, z) { log(x + y + z);

    }; total.apply(null, [1, 2, 3]); total(...[1, 2, 3]);
54. 54.

    function total(x, y, z) { log(x + y + z);

    }; total.apply(null, [1, 2, 3]); total(...[1, 2, 3]);
55. 55.

    var [a, ...b] = [1, 2, 3, 4]; a //

    1 b // [2, 3, 4]
56. 56.

    function foo({name, age}) { console.log(name, age); } foo({ name: 'jack',

    age: 22}) //=> jack, 22
57. 57.

    Scope

58. 58.

    Global Scope (window) Function Scope

59. 59.

    foo = 2; var fad = 2; function() { bar

    = 3; var baz = 4;
 } foo: 2, fad: 2, bar: 3 baz: 4
60. 60.

    function() { if(x) { var foo = 3; } var

    baz = 4;
 } foo: 3, baz: 4
61. 61.

    Global Scope (window) Function Scope Block Scope

62. 62.

    foo = 2; function() { var baz = 4; if(x)

    { let y = 2;
 }
 } foo: 2 baz: 4 y: 2
63. 63.

    foo = 2; function() { var baz = 4; if(x)

    { var z = 3; let y = 2;
 }
 } foo: 2 baz: 4, z: 3 y: 2
64. 64.

    let by default

65. 65.

    Modules

66. 66.

    var foo = 2; var bar = 3; export {foo,

    bar}; import {foo} from 'app' console.log(foo); // 2 app.js foo.js
67. 67.

    export var foo = 2; import {foo} from 'app' console.log(foo);

    // 2 app.js foo.js
68. 68.

    export default function() { return 2; }; import foo from

    'app' console.log(foo()); // 2 app.js foo.js
69. 69.

    import _ from 'underscore'; import {map} from 'underscore';

70. 70.

    if (someThing) { export {foo} } // conditional exports //

    not allowed
71. 71.

    System .import('jquery') .then(function(jquery) { // can has jQuery })

72. 72.

    if(browserSucks) { System .import('jquery') .then(function(jquery) { // can has jQuery

    }) }
73. 73.

    https://twitter.com/Jack_Franklin/status/538688478624899073

74. 74.

    Promises

75. 75.

    getJSON('url', function(d) { 
 });

76. 76.

    getJSON('url', function(d) { 
 }); getJSON('url').then(function(d) { 
 });

77. 77.

    getJSON('url').then((d) => { // data has been got
 });

78. 78.

    getJSON('url', function(d) { getJSON('…', function(e) { // quickly // gets

    // horrible
 });
 });
79. 79.

    Promise.all([ getJSON('url'), getJSON('other') ]).then((first, second) => { // both finished


    });
80. 80.

    get('url').then((resp) => { return JSON.parse(resp);
 }).then((json) => { // actual

    JSON here
 });
81. 81.

    get('url') .then(JSON.parse) .then((json) => { // actual JSON here });

82. 82.

    var prom = new Promise( function(resolve, reject) { // do

    stuff if(everythingOK) { resolve('all worked!');
 } else { reject(Error('oh no'));
 }
 } );
83. 83.

    prom.then(function(resp) { // got here if stuff was OK
 },

    function(err) { // got here if stuff broke
 });
84. 84.

    prom.then(function(resp) { // got here if stuff was OK
 }).catch(function(err)

    { // got here if stuff broke
 });
85. 85.

    prom.then(function(resp) { // got here if stuff was OK
 }).catch(function(err)

    { // got here if stuff broke
 });
86. 86.

    var getJSON = function() { return get('url') .then(JSON.parse);
 } getJSON().then(…).catch(…)

87. 87.

    http://www.html5rocks.com/ en/tutorials/es6/promises/ https://github.com/ jakearchibald/es6-promise

88. 88.

    Using ES6 today

89. 89.

    end of 2014: spec finished June 2015: publication

90. 90.

    http://kangax.github.io/compat-table/es6/

91. 91.

    chrome://flags

92. 92.

    Traceur https://github.com/google/traceur-compiler

93. 93.

    6to5 https://github.com/6to5/6to5

94. 94.

    ES6 Repl https://chrome.google.com/webstore/detail/es6-repl/ alploljligeomonipppgaahpkenfnfkn

95. 95.

    node --harmony

96. 96.

    Polyfills https://github.com/paulmillr/es6-shim/

97. 97.

    Modules

98. 98.

    ES6 module transpiler https://github.com/esnext/es6-module-transpiler http://javascriptplayground.com/blog/2014/06/es6-modules- today/

99. 99.

    SystemJS https://github.com/systemjs/systemjs ES6 Module Loader https://github.com/ModuleLoader/es6-module-loader

100. 100.

     New projects should use ES6 Modules

101. 101.

     http://24ways.org/2014/javascript-modules- the-es6-way/ http://www.2ality.com/2014/09/es6- modules-final.html http://guybedford.com/practical-workflows- for-es6-modules

102. 102.

     Maps, Sets, Proxies, Symbols, new Object APIs and so much

     more
103. 103.

     http://addyosmani.com/blog/tracking- es6-support/ https://github.com/addyosmani/es6- tools http://addyosmani.com/blog/ ecmascript-6-resources-for-the- curious-javascripter/

104. 104.

     https://speakerdeck.com/ rauschma/ecmascript-6- whats-next-for-javascript- august-2014

105. 105.

     https:// speakerdeck.com/ jackfranklin

106. 106.

     @Jack_Franklin javascriptplayground.com