NDC London: Introduction to ES6

Transcript

2. @Jack_Franklin
5. Warning: lots of links!
6. https:// speakerdeck.com/ jackfranklin
9. Make JS better • for complex applications • for libraries • as a target of code generators
10. Arrow Functions
11. var nums = [1,2,3]; nums.map(function(x) { return x * 2; }); nums.map((x) => x * 2);
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. var n = [1, 2, 3, 4]; n.filter(x => x % 2 == 0) .map(x => x * x); //=> [4, 16]
14. var users = […]; n.filter(u => u.isAdmin()) .map(u => u.name); //=> ['jack', 'james']
15. n.map(x => x * 2); get('url', (x, y) => {…}); $('#foo').click(() => {…}); parens needed for 0, 2+ arguments
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. 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. var someAjax = { name: 'jack', get: function() { $.getJSON(url, function(d) { log(this.name, d); })
 } };
19. var someAjax = { name: 'jack', get: function() { $.getJSON(url,(d) => { log(this.name, d); })
 } };
20. var nums = [1,2,3]; nums.map((x) => x * 2); // => [2, 4, 6] nums.map((x) => { x * 2; }); // => [undefined…]
21. var nums = [1,2,3]; nums.map((x) => x * 2); // => [2, 4, 6] nums.map((x) => { return x * 2; }); // => [2, 4, 6]
22. http://javascriptplayground.com/blog/ 2014/04/real-life-es6-arrow-fn/ http://javascriptplayground.com/blog/ 2013/01/ecmascript-5-array-methods/
23. Classes
24. class Person { constructor(name, age) { this.name = name, this.age = age } about() { log(this.name, this.age);
 } };
25. class Person { constructor(name, age) { this.name = name, this.age = age } about() { log(this.name, this.age);
 } };
26. class Person { constructor(name, age) { this.name = name, this.age = age } about() { log(this.name, this.age);
 } };
27. var jack = new Person('jack', 22); jack.about(); //=> jack 22
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. 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. 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. 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. 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. Object Literals
34. var jack = { name: 'jack', age: 22, about() { log(this.name, this.age);
 } };
35. var jack = { ['hello_' + (() => 'world')()]: 42 }; console.log(jack.hello_world); // 42
36. Template Strings
37. console.log( `In JS '\n' is a line-feed.` ); In JS ' ' is a line-feed.
38. var f =`Multiline strings with back ticks in ES6.` console.log(f); Multiline strings with back ticks in ES6
39. var name = 'jack'; var age = 22; log(name + ' is ' + age + 'years old'); // this is the worst
40. var name = 'jack'; var age = 22; `${name} is ${age} years old` // rejoice
41. Destructuring
42. var [a, b] = [1, 2]; a == 1 b == 2
43. var [a, ,b] = [1, 2, 3]; a == 1 b == 3
44. var {a, b} = {a: 2, b: 3} a == 2 b == 3
45. var {a, b} = {b: 3} a == undefined b == 3
46. function getPerson() { return { name: 'jack', age: 22 }
 }; var {name, age} = getPerson();
47. function getPerson() { var name = 'jack'; var age = 22; return { name, age };
 }; var {name, age} = getPerson();
48. Function Arguments
49. function getInfo(print=false) { if(print) { log(this.name, this.age);
 } else { return `${this.name} ${this.age}`
 }
 } getInfo();
50. function getInfo(name='jack') { console.log(name);
 } getInfo(); // 'jack' getInfo('Bob'); // 'Bob'
51. function length(...nums) { log(nums.length); }; length(1,2,3); // 3
52. function length(x, ...rest) { log(x, rest); }; length(1,2,3); // 1, [2, 3]
53. function total(x, y, z) { log(x + y + z); }; total.apply(null, [1, 2, 3]); total(...[1, 2, 3]);
54. function total(x, y, z) { log(x + y + z); }; total.apply(null, [1, 2, 3]); total(...[1, 2, 3]);
55. var [a, ...b] = [1, 2, 3, 4]; a // 1 b // [2, 3, 4]
56. function foo({name, age}) { console.log(name, age); } foo({ name: 'jack', age: 22}) //=> jack, 22
57. Scope
58. Global Scope (window) Function Scope
59. foo = 2; var fad = 2; function() { bar = 3; var baz = 4;
 } foo: 2, fad: 2, bar: 3 baz: 4
60. function() { if(x) { var foo = 3; } var baz = 4;
 } foo: 3, baz: 4
61. Global Scope (window) Function Scope Block Scope
62. foo = 2; function() { var baz = 4; if(x) { let y = 2;
 }
 } foo: 2 baz: 4 y: 2
63. foo = 2; function() { var baz = 4; if(x) { var z = 3; let y = 2;
 }
 } foo: 2 baz: 4, z: 3 y: 2
64. let by default
65. Modules
66. var foo = 2; var bar = 3; export {foo, bar}; import {foo} from 'app' console.log(foo); // 2 app.js foo.js
67. export var foo = 2; import {foo} from 'app' console.log(foo); // 2 app.js foo.js
68. export default function() { return 2; }; import foo from 'app' console.log(foo()); // 2 app.js foo.js
69. import _ from 'underscore'; import {map} from 'underscore';
70. if (someThing) { export {foo} } // conditional exports // not allowed
71. System .import('jquery') .then(function(jquery) { // can has jQuery })
72. if(browserSucks) { System .import('jquery') .then(function(jquery) { // can has jQuery }) }
73. https://twitter.com/Jack_Franklin/status/538688478624899073
74. Promises
75. getJSON('url', function(d) { 
 });
76. getJSON('url', function(d) { 
 }); getJSON('url').then(function(d) { 
 });
77. getJSON('url').then((d) => { // data has been got
 });
78. getJSON('url', function(d) { getJSON('…', function(e) { // quickly // gets // horrible
 });
 });
79. Promise.all([ getJSON('url'), getJSON('other') ]).then((first, second) => { // both finished
 });
80. get('url').then((resp) => { return JSON.parse(resp);
 }).then((json) => { // actual JSON here
 });
81. get('url') .then(JSON.parse) .then((json) => { // actual JSON here });
82. var prom = new Promise( function(resolve, reject) { // do stuff if(everythingOK) { resolve('all worked!');
 } else { reject(Error('oh no'));
 }
 } );
83. prom.then(function(resp) { // got here if stuff was OK
 }, function(err) { // got here if stuff broke
 });
84. prom.then(function(resp) { // got here if stuff was OK
 }).catch(function(err) { // got here if stuff broke
 });
85. prom.then(function(resp) { // got here if stuff was OK
 }).catch(function(err) { // got here if stuff broke
 });
86. var getJSON = function() { return get('url') .then(JSON.parse);
 } getJSON().then(…).catch(…)
87. http://www.html5rocks.com/ en/tutorials/es6/promises/ https://github.com/ jakearchibald/es6-promise
88. Using ES6 today
89. end of 2014: spec finished June 2015: publication
90. http://kangax.github.io/compat-table/es6/
91. chrome://flags
92. Traceur https://github.com/google/traceur-compiler
93. 6to5 https://github.com/6to5/6to5
94. ES6 Repl https://chrome.google.com/webstore/detail/es6-repl/ alploljligeomonipppgaahpkenfnfkn
95. node --harmony
96. Polyfills https://github.com/paulmillr/es6-shim/
97. Modules
98. ES6 module transpiler https://github.com/esnext/es6-module-transpiler http://javascriptplayground.com/blog/2014/06/es6-modules- today/
99. SystemJS https://github.com/systemjs/systemjs ES6 Module Loader https://github.com/ModuleLoader/es6-module-loader
100. New projects should use ES6 Modules
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. Maps, Sets, Proxies, Symbols, new Object APIs and so much more
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. https://speakerdeck.com/ rauschma/ecmascript-6- whats-next-for-javascript- august-2014
105. https:// speakerdeck.com/ jackfranklin
106. @Jack_Franklin javascriptplayground.com