Tomorrow's Javascript, Today.

A Crash Course in ES2015 and ES2016 JavaScript given at The Iron Yard.

Transcript

2. Tomorrow's JavaScript, Today. 2
3. Audience 3
4. What is "ECMAScript?" 4
5. Ecma International 5
7. Other implementations and dialects 4 ActionScript 4 UnityScript 4 JerryScript 7
8. Features 8
9. let & const Forget var. 9
10. (function() { for (var i = 0; i < 2; i++) { // ... } console.log(i); })(); // > 2 10
11. (function() { for (let i = 0; i < 2; i++) { // ... } console.log(i); })(); // ! Uncaught ReferenceError: i is not defined 11
12. const PHI = 1.618; 12
14. Assignment Destructuring 14
15. var numbers = [42, Math.PI * 2]; var life = numbers[0]; var tau = numbers[1]; 15
16. const [life, ταυ] = [42, Math.PI * 2]; // life === 42 // ταυ === 6.283185 16
17. const numbers = { life: 42, ταυ: Math.PI * 2 }; let { life, ταυ } = numbers; // life === 42 // ταυ === 6.283185 17
19. const numbers = { life: 42, ταυ: Math.PI * 2 }; let { universe, τ } = numbers; // universe === 42 // τ === 6.283185 19
20. Template Literals 20
21. 'single' "double" `backticks` 21
22. String Interpolation 22
23. const q = 'questions'; const a = 'answers'; let s = `Sometimes the ${q} are complicated and the ${a} are simple.`; 23
25. var q = 'questions'; var a = 'answers'; var s = 'Sometimes the ' + q + ' are complicated and the ' + a + ' are simple.'; 25
27. Multiline Strings 27
28. const l = `Unless someone like you cares a whole awful lot, Nothing is going to get better. It's not.` 28
29. var l = 'Unless someone like you cares a whole awful lot,\n Nothing is going to get better.\n It\'s not.'; 29
30. var l = 'Unless someone like you cares a whole awful lot,\n' + ' Nothing is going to get better.\n' + " It's not."; 30
32. Spread Operator (...) 32
33. let colors = ['Red', 'Blue']; let words = ['One', 'Two', ...colors]; 33
34. function fish() { for (var i = 0; i < arguments.length; i++) { console.log(arguments[i], 'fish.'); } } fish(...words); // > One fish. // > Two fish. // > Red fish. // > Blue fish. 34
36. fish.apply(null, words); 36
38. Arrow Functions 38
39. const numbers = [42, 665]; numbers.map((n) => { return n * ταυ; }); 39
40. numbers.map((n) => return n * ταυ); 40
41. function fish(words) { this.subject = 'fish.'; words.forEach(function (word) { console.log(word, this.subject); }.bind(this)); } 41
42. function fish(words) { this.subject = 'fish.'; words.forEach((word) => console.log(word, this.subject)); } 42
44. Default Parameter Values 44
45. function increase(number, increment) { increment = increment || 1; return number + increment; } increase(41, 624); // 665 increase(41); // 42 45
46. function increase(number, increment = 1) { return number + increment; } increase(41, 624); // 665 increase(41); // 42 46
47. Rest Parameters (...) 47
48. const feed = (monster, ...numnums) { nomnoms.forEach((nom) => monster.eat(nom)); }; 48
49. function feed(monster) { var nomnoms = Array.prototype.slice.call(arguments, feed.length); nomnoms.forEach(function (nom) { monster.eat(nom); }); }; 49
50. New String APIs 50
51. Including, but not limited to: 4 String.prototype.startsWith() 4 String.prototype.endsWith() 4 String.prototype.contains() 4 String.prototype.repeat() 4 String.prototype.normalize() 51
52. New Array APIs 52
53. Including, but not limited to: 4 Array.prototype.find() 4 Array.prototype.findIndex() 4 Array.prototype.fill() 4 Array.prototype.includes() (ES2016) 53
54. Array.from() 54
55. let inputs = document.querySelectorAll('form input'); for (var i = 0; i < inputs.length; i++) { inputs[i].disable = true; } 55
56. let inputs = document.querySelectorAll('form input'); Array.from(inputs).forEach((el) => el.disable = true); 56
58. Array.of() 58
59. let data = [42, 665]; let copy = new Array(...data); copy // [42, 665] 59
60. let data = 42; let copy = new Array(...data); copy // [] 60
62. let data = 42; let copy = Array.of(...data); copy // [42] 62
63. Binary and Octal Literal Notation 63
64. console.log(0x10, 0x2A); // > 16 42 64
65. console.log(0b10, 0b101010); // > 2 42 console.log(0o10, 0o52); // > 8 42 65
66. Object Literals 66
67. let data = '.uǝɹpןıɥɔ ǝʇǝןosqo ǝɹɐ sʇןnpɐ'; let msg = { id: 42, data } { id: 42, data: '.uǝɹpןıɥɔ ǝʇǝןosqo ǝɹɐ sʇןnpɐ' } 67
68. let msg = { id: 42, data, read() { this.data.flip() } } 68
69. Classes 69
70. class Member { constructor(givenName, familyName, rank = 1) { // super() this.givenName = givenName; this.familyName = familyName; } promote() { this.rank++; } get displayName() { return `${this.givenName} ${this.familyName} (${'*'.repeat(rank)})`; } } let member = new Member('Jason', 'Perry'); member.promote(); console.log(member.displayName); // > "Jason Perry (**)" 70
71. Modules 71
72. import React from 'react'; const App = React.createClass({ propTypes: { title: React.PropTypes.string }, // ... }); export default App; 72
73. import { Component, PropTypes } from 'react'; class App extends Component { static propTypes = { title: PropTypes.string } // ... } class Menu extends Component { // ... } export { App, Menu }; import ReactDOM from 'react-dom'; import { App } from './components'; ReactDom.render(App, document.findElementById('root')); 73
74. Making Use of ES2015, in, er... 2016. 74
75. Current Browser Support 75
76. Transpilers 76
77. 4 Babel 4 Traceur 4 TypeScript 4 CoffeeScript 4 JSX Transformer 77
78. Babel 78
79. npm install -g babel-cli 79
80. babel index.js -o public/main.js 80
81. babel-node --presets es2015 app.js 81
82. Configuring Babel 6 82
83. { "presets": ["es2015", "react", "stage-0"], "env": { "development": { "plugins": [ ["react-transform", { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react"], "locals": ["module"] }] }] ] } } } 83
85. What didn't we cover? 85
86. 4 for...of iteration 4 Promise 4 Symbol 4 Map & Set Collections 4 Comprehensions 4 Module loaders 4 Proxy & Reflection APIs 4 Subclassable Built-ins 4 async/await (ES2016) 4 Generators (ES2016) 4 Decorators (ES2016) 4 Better Unicode support 4 New Math & Number APIs 86
87. Resources 4 http://exploring js.com 4 https://babeljs.io/docs/learn-es2015/ 4 https://nodejs.org/en/docs/es6/ 4 http://kangax.github.io/compat-table 4 http://www.2ality.com/2015/04/numbers-math- es6.html 87
88. @ambethia 88