ES6: Using the new Javascript Today

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

Transcript

3. What does the look like? FUTURE
5. That’s so far, no?
8. and…
9. What will be the the Javascript? FUTURE OF
10. will be.. I sure that
15. “Geeks love fight" Rasmus Lerdof
17. The future of programming LANGUAGE… ANY
18. is itself…
19. environment… and your
20. language become When one of just one tool… dependent
22. Pedro Nauck FRONTEND DEVELOPER @pedronauck pedronauck.com
23. Agenda …
24. A loooot of code
25. HISTORY A lit bit about
26. 1994 1989 First proposal of World Wide Web by Tim Bernes Lee Born Netscape as the first real webbrowser
27. 1994 1989 First proposal of World Wide Web by Tim Bernes Lee Born Netscape as the first real webbrowser
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
29. 1995 MochaScript LiveScript Javascript
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
31. 10days after
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
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
34. 1997 ✓ Attempts to standardize (IE Sucks) ✓ Netscape submitted JS to ECMA Internacional ✓ ECMAScript was created (ECMA-262 Edition 1) Script
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.
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.
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
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
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
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
41. 2011 2013 ES5 Strict mode Native JSON support Function.prototype.bind A better Array and Object suport ES6 Fix all these things!
42. 2011 2013 ES5 Strict mode Native JSON support Function.prototype.bind A better Array and Object suport ES6 Fix all these things!
43. Coolest Features
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
45. A lot new API’s Prototype
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]
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]
48. Prototype Array // ES6 var arr = Array.of(4); // [4]
49. Prototype Array // ES5 var users = [ { name: 'Peter' }, { name: 'Joe' }, { name: 'Michael' } ]; var joe; users.forEach(function(user) { if (user.name === 'Joe') joe = user; });
50. Prototype Array // ES5 var users = [ { name: 'Peter' }, { name: 'Joe' }, { name: 'Michael' } ]; var joe; users.forEach(function(user) { if (user.name === 'Joe') joe = user; });
51. Prototype Array // ES5 var users = [ { name: 'Peter' }, { name: 'Joe' }, { name: 'Michael' } ]; var joe; users.forEach(function(user) { if (user.name === 'Joe') joe = user; });
52. Prototype Array // ES6 var joe = users.find(function(user, index, arr) { if (user.name === 'Joe') return user; });
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'));
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'));
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'));
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
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
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
59. For Of Replaces for-in New iterator (other, yeah!) Works fine with Array and Object
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 }
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 }
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 }
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 }
64. For Of // ES6 var names = ['John', 'Peter', 'Michael']; for (var name of names) { console.log(name) // John, Peter, Michael }
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
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)];
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)];
68. The new var Fix hoisting problems Let (Block Scoping)
69. Let (Block Scoping) // ES5 (function() { })(); var message = 'hello world'; console.log(message); // hello world
70. Let (Block Scoping) // ES5 (function() { })(); var message = 'hello world'; console.log(message); // hello world
71. Let (Block Scoping) // ES6 (function() { console.log(message); // ReferenceError let message = 'hello world'; })();
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"
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"
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"
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"
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"
77. Read-only variables Block scoping Const
78. Const // ES6 const TIMEOUT = 600; TIMEOUT = 300; // Throw: TIMEOUT is read-only;
79. New token => Bye bye bind() It isn't just a Syntatic Sugar Arrow Functions
80. Arrow Functions // ES5 var blueProducts; categories.forEach(function(category) { blueProducts = category.products.filter(function(product) { return product.color === 'blue'; });) });
81. Arrow Functions // ES5 var blueProducts; categories.forEach(function(category) { blueProducts = category.products.filter(function(product) { return product.color === 'blue'; });) }); 22 unnecessary chars
82. Arrow Functions // ES6 let blueProducts; categories.forEach(c => { blueProducts = c.products.filter(p => p.color === 'blue'); });
83. Arrow Functions // ES6 let blueProducts; categories.forEach(c => { blueProducts = c.products.filter(p => p.color === 'blue'); });
84. Arrow Functions // ES5 ... getAverages: function(students) { return students.map(function(student) { return this.calcAverage(student.grades); } } ...
85. Arrow Functions // ES5 ... getAverages: function(students) { return students.map(function(student) { return this.calcAverage(student.grades); } } ... // ERROR
86. Arrow Functions // ES5 ... getAverages: function(students) { return students.map(function(student) { return this.calcAverage(student.grades); } } ... .bind(this));
87. Arrow Functions // ES6 ... getAverages(students) { return students.map(s => this.calcAverage(s.grades); } ...
88. Template Literal Allows string literals with embedded expressions Multiline suport
89. Template Literal
90. Template Literal // ES5 var name = 'John'; var age = 23; console.log('My name is ' + name + '. I\'m ' + age + '.');
91. Template Literal // ES6 var name = 'John'; var age = 23; console.log(`My name is ${name}. I\'m ${age}`);
92. Template Literal // ES6 var name = 'John'; var age = 23; console.log(`My name is ${name}. I\'m ${age}`);
93. Template Literal // ES5 var className = 'myClass'; var content = 'Hello world'; var div = '<div class="' + className + '">' + '<p>' + content + '</p>' + '</div>';
94. Template Literal // ES6 let className = 'myClass'; let content = 'Hello world'; let div = ` <div class="${className}"> <p>${content}</p> </div>`;
95. Default Parameters
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
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
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; };
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; };
100. Rest Parameters Allow functions with variable number of params
101. Rest Parameters store.add('fruit', 'apple'); store.add('dairy', 'milk', 'cheese', 'yoghurt'); store.add('pastries', 'donuts', 'croissants'); rest parameters
102. Rest Parameters // ES3, ES5 store.add = function(category) { var items = [].slice.call(arguments, 1); items.forEach(function (item) { store.aisle[category].push(item); }); };
103. Rest Parameters // ES3, ES5 store.add = function(category) { var items = [].slice.call(arguments, 1); items.forEach(function (item) { store.aisle[category].push(item); }); };
104. Rest Parameters // ES6 store.add = (category, ...items) => { items.forEach(item => { store.aisle[category].push(item) }); };
105. Rest Parameters // ES6 store.add = (category, ...items) => { items.forEach(item => { store.aisle[category].push(item) }); };
106. Spread Operator Allow to spread variables into parameters
107. Spread Operator // ES5 var calcAverage = function(x, y, z) { return (x + y + z) / 3; }; var grades = [70, 80, 85]; calcAverage.apply(null, grades);
108. Spread Operator // ES5 var calcAverage = function(x, y, z) { return (x + y + z) / 3; }; var grades = [70, 80, 85]; calcAverage.apply(null, grades);
109. Spread Operator // ES5 var calcAverage = function(x, y, z) { return (x + y + z) / 3; }; var grades = [70, 80, 85]; calcAverage.apply(null, grades);
110. Spread Operator // ES6 let calcAverage = (x, y, z) => (x + y + z) / 3; let grades = [70, 80, 85]; calcAverage(...grades);
111. Spread Operator // ES6 let calcAverage = (x, y, z) => (x + y + z) / 3; let grades = [70, 80, 85]; calcAverage(...grades);
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
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
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
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
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
117. Destructuring Assigment Use data-structure to declare elements Functions with multiple returns
118. Destructuring Array // ES5 var name = 'John'; var city = 'California'; var age = 23; // ES6 let [name, city, age] = ['John', 'California', 23];
119. Destructuring Array // ES5 var name = 'John'; var city = 'California'; var age = 23; // ES6 let [name, city, age] = ['John', 'California', 23];
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();
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();
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;
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;
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 };
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 };
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;
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;
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;
129. Generators Better way to manage flows Yield token allow control returns
130. delivery by part
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 }
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 }
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 }
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); })();
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 });
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 });
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 });
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 });
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 });
140. Classes Classical OOP Allow single inheritance
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(); } }
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(); } }
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(); } }
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
145. Classes class Car extends Vehicle { constructor(name, brand, year) { super(name, year) this.brand = brand; } } let fusca = new Car('Fusca', 'volkswagen', 1976);
146. Classes class Car extends Vehicle { constructor(name, brand, year) { super(name, year) this.brand = brand; } } let fusca = new Car('Fusca', 'volkswagen', 1976);
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);
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);
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);
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);
151. Modules Native way to build app with a modular approach
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
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');
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'
155. How can I use today? ES6 Modern browser supports partially NodeJS supports many features (—harmony flag) Transpilers and polyfills June 2015
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
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
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']);
159. DEMO http:/ /git.io/hacker-news-es6
160. references ES6
161. http:/ /bit.ly/es6-compat-table
162. http:/ /esdiscuss.org
163. http:/ /bit.ly/es6-mdn
164. http:/ /bit.ly/understanding-es6
165. .com
166. @brendaneich @rwaldron @slicknet @rauschma @wycats @littlecalculist @lbljeffmo @jaydson @felipenmoura to follow
167. I hope you enjoyed
168. Questions?