Slide 1

Slide 1 text

1

Slide 2

Slide 2 text

Tomorrow's JavaScript, Today. 2

Slide 3

Slide 3 text

Audience 3

Slide 4

Slide 4 text

What is "ECMAScript?" 4

Slide 5

Slide 5 text

Ecma International 5

Slide 6

Slide 6 text

6

Slide 7

Slide 7 text

Other implementations and dialects 4 ActionScript 4 UnityScript 4 JerryScript 7

Slide 8

Slide 8 text

Features 8

Slide 9

Slide 9 text

let & const Forget var. 9

Slide 10

Slide 10 text

(function() { for (var i = 0; i < 2; i++) { // ... } console.log(i); })(); // > 2 10

Slide 11

Slide 11 text

(function() { for (let i = 0; i < 2; i++) { // ... } console.log(i); })(); // ! Uncaught ReferenceError: i is not defined 11

Slide 12

Slide 12 text

const PHI = 1.618; 12

Slide 13

Slide 13 text

13

Slide 14

Slide 14 text

Assignment Destructuring 14

Slide 15

Slide 15 text

var numbers = [42, Math.PI * 2]; var life = numbers[0]; var tau = numbers[1]; 15

Slide 16

Slide 16 text

const [life, ταυ] = [42, Math.PI * 2]; // life === 42 // ταυ === 6.283185 16

Slide 17

Slide 17 text

const numbers = { life: 42, ταυ: Math.PI * 2 }; let { life, ταυ } = numbers; // life === 42 // ταυ === 6.283185 17

Slide 18

Slide 18 text

18

Slide 19

Slide 19 text

const numbers = { life: 42, ταυ: Math.PI * 2 }; let { universe, τ } = numbers; // universe === 42 // τ === 6.283185 19

Slide 20

Slide 20 text

Template Literals 20

Slide 21

Slide 21 text

'single' "double" `backticks` 21

Slide 22

Slide 22 text

String Interpolation 22

Slide 23

Slide 23 text

const q = 'questions'; const a = 'answers'; let s = `Sometimes the ${q} are complicated and the ${a} are simple.`; 23

Slide 24

Slide 24 text

24

Slide 25

Slide 25 text

var q = 'questions'; var a = 'answers'; var s = 'Sometimes the ' + q + ' are complicated and the ' + a + ' are simple.'; 25

Slide 26

Slide 26 text

26

Slide 27

Slide 27 text

Multiline Strings 27

Slide 28

Slide 28 text

const l = `Unless someone like you cares a whole awful lot, Nothing is going to get better. It's not.` 28

Slide 29

Slide 29 text

var l = 'Unless someone like you cares a whole awful lot,\n Nothing is going to get better.\n It\'s not.'; 29

Slide 30

Slide 30 text

var l = 'Unless someone like you cares a whole awful lot,\n' + ' Nothing is going to get better.\n' + " It's not."; 30

Slide 31

Slide 31 text

31

Slide 32

Slide 32 text

Spread Operator (...) 32

Slide 33

Slide 33 text

let colors = ['Red', 'Blue']; let words = ['One', 'Two', ...colors]; 33

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

35

Slide 36

Slide 36 text

fish.apply(null, words); 36

Slide 37

Slide 37 text

37

Slide 38

Slide 38 text

Arrow Functions 38

Slide 39

Slide 39 text

const numbers = [42, 665]; numbers.map((n) => { return n * ταυ; }); 39

Slide 40

Slide 40 text

numbers.map((n) => return n * ταυ); 40

Slide 41

Slide 41 text

function fish(words) { this.subject = 'fish.'; words.forEach(function (word) { console.log(word, this.subject); }.bind(this)); } 41

Slide 42

Slide 42 text

function fish(words) { this.subject = 'fish.'; words.forEach((word) => console.log(word, this.subject)); } 42

Slide 43

Slide 43 text

43

Slide 44

Slide 44 text

Default Parameter Values 44

Slide 45

Slide 45 text

function increase(number, increment) { increment = increment || 1; return number + increment; } increase(41, 624); // 665 increase(41); // 42 45

Slide 46

Slide 46 text

function increase(number, increment = 1) { return number + increment; } increase(41, 624); // 665 increase(41); // 42 46

Slide 47

Slide 47 text

Rest Parameters (...) 47

Slide 48

Slide 48 text

const feed = (monster, ...numnums) { nomnoms.forEach((nom) => monster.eat(nom)); }; 48

Slide 49

Slide 49 text

function feed(monster) { var nomnoms = Array.prototype.slice.call(arguments, feed.length); nomnoms.forEach(function (nom) { monster.eat(nom); }); }; 49

Slide 50

Slide 50 text

New String APIs 50

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

New Array APIs 52

Slide 53

Slide 53 text

Including, but not limited to: 4 Array.prototype.find() 4 Array.prototype.findIndex() 4 Array.prototype.fill() 4 Array.prototype.includes() (ES2016) 53

Slide 54

Slide 54 text

Array.from() 54

Slide 55

Slide 55 text

let inputs = document.querySelectorAll('form input'); for (var i = 0; i < inputs.length; i++) { inputs[i].disable = true; } 55

Slide 56

Slide 56 text

let inputs = document.querySelectorAll('form input'); Array.from(inputs).forEach((el) => el.disable = true); 56

Slide 57

Slide 57 text

57

Slide 58

Slide 58 text

Array.of() 58

Slide 59

Slide 59 text

let data = [42, 665]; let copy = new Array(...data); copy // [42, 665] 59

Slide 60

Slide 60 text

let data = 42; let copy = new Array(...data); copy // [] 60

Slide 61

Slide 61 text

61

Slide 62

Slide 62 text

let data = 42; let copy = Array.of(...data); copy // [42] 62

Slide 63

Slide 63 text

Binary and Octal Literal Notation 63

Slide 64

Slide 64 text

console.log(0x10, 0x2A); // > 16 42 64

Slide 65

Slide 65 text

console.log(0b10, 0b101010); // > 2 42 console.log(0o10, 0o52); // > 8 42 65

Slide 66

Slide 66 text

Object Literals 66

Slide 67

Slide 67 text

let data = '.uǝɹpןıɥɔ ǝʇǝןosqo ǝɹɐ sʇןnpɐ'; let msg = { id: 42, data } { id: 42, data: '.uǝɹpןıɥɔ ǝʇǝןosqo ǝɹɐ sʇןnpɐ' } 67

Slide 68

Slide 68 text

let msg = { id: 42, data, read() { this.data.flip() } } 68

Slide 69

Slide 69 text

Classes 69

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Modules 71

Slide 72

Slide 72 text

import React from 'react'; const App = React.createClass({ propTypes: { title: React.PropTypes.string }, // ... }); export default App; 72

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Making Use of ES2015, in, er... 2016. 74

Slide 75

Slide 75 text

Current Browser Support 75

Slide 76

Slide 76 text

Transpilers 76

Slide 77

Slide 77 text

4 Babel 4 Traceur 4 TypeScript 4 CoffeeScript 4 JSX Transformer 77

Slide 78

Slide 78 text

Babel 78

Slide 79

Slide 79 text

npm install -g babel-cli 79

Slide 80

Slide 80 text

babel index.js -o public/main.js 80

Slide 81

Slide 81 text

babel-node --presets es2015 app.js 81

Slide 82

Slide 82 text

Configuring Babel 6 82

Slide 83

Slide 83 text

{ "presets": ["es2015", "react", "stage-0"], "env": { "development": { "plugins": [ ["react-transform", { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react"], "locals": ["module"] }] }] ] } } } 83

Slide 84

Slide 84 text

84

Slide 85

Slide 85 text

What didn't we cover? 85

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

@ambethia 88

Slide 89

Slide 89 text

89