And ES6 For All

O JavaScript, assim como algumas boas bandas de Rock, foi subestimado por muito tempo. Nessa talk, abordaremos um pouco da história da linguagem, as principais novas features, benefícios e como usar a nova versão da ECMAScript, a.k.a, Harmony/ES6 hoje mesmo em produção!


Transcript

1. ...AND ES6 FOR ALL
2. Jaydson Gomes JavaScript Enthusiast Software Developer BrazilJS Conf Curator
3. Agenda
4. 3. Arrow Fn 1. History 4. Classes 6. Template Strings 5. Parameters 7. Block Scope 8. Modules 9. Promises 10. Generators #Traceur #Harmonic #ES6Rocks #NodeJS #Shims 2. Basics
5. History
6. 10 days in may 1995
7. Mocha LiveScript JavaScript
8. ECMAScript
9. ECMAScript (ECMA-262) is the name of the international standard that defines JavaScript. Credits: Allen Wirfs-Brock, ES6: A Better JavaScript for the Ambient Computing Era http://www.slideshare.net/allenwb/wdc14-allebwb
10. Credits: Ecmascript6 the future is here, https://speakerdeck. com/sebarmeli/ecmascript-6-the-future-
11. Credits: Ecmascript6 the future is here, https://speakerdeck. com/sebarmeli/ecmascript-6-the-future-
12. TC39
13. Credits: Allen Wirfs-Brock, ES6: A Better JavaScript for the Ambient Computing Era http://www.slideshare.net/allenwb/wdc14-allebwb
14. http://esdiscuss.org/ http://wiki.ecmascript.org/doku.php? id=harmony:specification_drafts https://people.mozilla. org/~jorendorff/es6-draft.html
15. The basics
16. Strings
17. var msg = "Hello world!"; console.log(msg.contains("o")); // true console.log(msg.contains("x")); // false console.log(msg.contains("o", 8)); // false String.contains(txt, start) Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
18. String.startsWith(txt, start) var msg = "Hello world!"; console.log(msg.startsWith("Hello")); // true console.log(msg.startsWith("o")); // false console.log(msg.startsWith("o", 4)); // true Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
19. String.endsWith(txt, start) var msg = "Hello world!"; console.log(msg.endsWith("!")); // true console.log(msg.endsWith("world!")); // true console.log(msg.endsWith("o", 8)); // true Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
20. String.repeat(number) console.log("x".repeat(3)); // "xxx" console.log("hello".repeat(2)); // "hellohello" console.log("abc".repeat(4)); // "abcabcabcabc" Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
21. Numbers
22. // ECMAScript 3 var number = 071; // 57 in decimal var value1 = parseInt("71"); // 71 var value2 = parseInt("071"); // 57 Octal and Binary Literals Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
23. // ECMAScript 5 var number = 071; // 57 in decimal var value1 = parseInt("71"); // 71 var value2 = parseInt("071"); // 71 var value3 = parseInt("071", 8); // 57 function getValue() { "use strict"; return 071; // syntax error } Octal and Binary Literals Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
24. // ECMAScript 6 var value1 = 0o71; // 57 in decimal var value2 = 0b101; // 5 in decimal Octal and Binary Literals Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
25. console.log(isFinite(25)); // true console.log(isFinite("25")); // true console.log(Number.isFinite(25)); // true console.log(Number.isFinite("25")); // false console.log(isNaN(NaN)); // true console.log(isNaN("NaN")); // true console.log(Number.isNaN(NaN)); // true console.log(Number.isNaN("NaN")); // false isFinite() and isNaN() Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
26. console.log(Number.isInteger(25)); // true console.log(Number.isInteger(25.0)); // true console.log(Number.isInteger(25.1)); // false Number.isInteger() Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
27. console.log(Math.pow(2, 53)); // 9007199254740992 console.log(Math.pow(2, 53) + 1); // 9007199254740992 var inside = Number.MAX_SAFE_INTEGER, outside = inside + 1; console.log(Number.isInteger(inside)); // true console.log(Number.isSafeInteger(inside)); // true console.log(Number.isInteger(outside)); // true console.log(Number.isSafeInteger(outside)); // false Safe integers -2^53 & 2^53 Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
28. Math
29. Math.acosh(x) Math.asinh(x) Math.atanh(x) Math.cbrt(x) Math.clz32(x) Math.cosh(x) Math.expm1(x) Math.fround(x) Math.log1p(x) Math.log10(x) Math.log2(x) Math.sign(x) Math.sinh(x) Math.tanh(x) Math.trunc(x) Math.hypot(...values) Math.imul(x, y)
30. Arrow FN
32. => Lexical this binding => Not newable => Can't change this => No arguments object Arrow Functions
33. let plus = x => x + 1; console.log( plus(2) ); // 3 Arrow Fn one parameter
34. let sum = (num1, num2) => num1 + num2; console.log( sum(2,3) ); // 5 Arrow Fn n parameters
35. let confName = () => "Front in Aracaju"; console.log( confName() ); //Front in Aracaju Arrow Fn no parameters
36. let doSomething = (x, y) => { // Some logic return true; }; Arrow Fn body
37. var foo = { init: function () { setTimeout(function () { this.log(); }, 1000); }, log: function () { console.log('foooo'); } } foo.init(); //undefined is not a function classical ‘this’ error
38. var foo = { init : function () { setTimeout((function () { this.log(); }).bind(this), 1000); }, log : function () { console.log('foooo'); } } foo.init(); // foooo Fixing ‘this’ error ES5 way
39. var foo = { init : function () { setTimeout( () => this.log(), 1000); }, log : function () { console.log('foooo'); } }; foo.init(); // foooo Fixing ‘this’ error ES6 way
40. Classes
41. class Animal { constructor(name) { this.name = name; } breathe () { console.log( `${this.name} is breathing` ); } }
42. class Dog extends Animal { constructor(name) { super(name); } bark() { console.log(`Woof! ${this.name} is barking`); } }
43. class Cat extends Animal { constructor(name) { super(name); } meow() { console.log(`Meow! ${this.name} is meowing`); } }
44. Template Strings
45. // Basic literal string creation console.log(`In JavaScript '\n' is a line-feed.`); // Multiline strings console.log(`In JavaScript this is not legal.`); // Construct a DOM query var name = "Bob", time = "today"; console.log(`Hello ${name}, how are you ${time}?`);
46. Paramaters
47. /* Rest parameters */ function sortRestArgs(...theArgs) { var sortedArgs = theArgs.sort(); return sortedArgs; } console.log(sortRestArgs(10,4,1,2,3)); // 1,10,2,3,4
48. /* Spread parameters */ function f(x, y, z) { console.log(x,y,z); } var args = [0, 1, 2]; f(...args); // 0 1 2 /* Default paramaters */ function foo(bar='baz') { console.log(bar); } foo(); // baz
49. Scope Block
50. /* Let */ for (var i = 0; i < 3; i++) { let j = i * i; console.log(j); // Works } console.log(j); // Fail /* Const */ const π = 3.14; console.log(π); try { π += 1; } catch (constError) { console.log(constError); }
51. Modules
52. var asap; var isNode = typeof process !== "undefined" && {}.toString.call(process) === "[object process]"; if (isNode) { asap = process.nextTick; } else if (typeof setImmediate !== "undefined") { asap = setImmediate; } else { asap = setTimeout; } export default asap; Creating a module Credits: JSModules.io http://jsmodules.io/
53. import asap from "asap"; asap(function() { console.log("hello async world!"); }); Importing a module Credits: JSModules.io http://jsmodules.io/
54. var asap; var isNode = typeof process !== "undefined" && {}.toString.call(process) === "[object process]"; if (isNode) { asap = process.nextTick; } else if (typeof setImmediate !== "undefined") { asap = setImmediate; } else { asap = setTimeout; } export default asap; export var later = isNode ? process.setImmediate : asap; Named exports Credits: JSModules.io http://jsmodules.io/
55. import { later } from "asap"; later(function() { console.log("Running after other network events"); }); import asap, { later } from "asap"; Named imports Credits: JSModules.io http://jsmodules.io/
56. import { unlink as rm } from "fs"; // Rename import * as fs from "fs"; // Into namespace Conveniences Credits: JSModules.io http://jsmodules.io/
57. Promises
58. let confs = ['Aracaju','Poa','Sampa','Rio']; let FrontIn = function() { return new Promise(function(resolve, reject) { setTimeout(() => { let len = confs.length; let label = 'FrontIn'; let rand = Math.floor(Math.random() * len); let conf = `${label} ${confs[rand]}`; resolve(conf); }, 1000); }); }; Promises
59. FrontIn().then(function(conf) { console.log(conf); }); Promises http://www.es6fiddle.net/hy9dtwxv/
60. Promise.all([ FrontIn(), FrontIn(), FrontIn(), FrontIn() ]).then(function (data) { console.log(data); }); Promises https://speakerdeck.com/jcemer/controle- de-fluxo-com-execucao-assincrona
61. Generators
62. From MDN: “Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances” https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Statement s/function*
63. function* idMaker() { var index = 0; while(true) yield index++; } var gen = idMaker(); console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 // ...
64. Node.JS
66. #!/usr/bin/env node require('v8-argv')('--harmony', __dirname + '/bin/cli/program'); https://github.com/logicalparadox/v8-argv
67. Shim https://github.com/paulmillr/es6-shim/
68. Traceur
69. ➔ Array Comprehension ➔ Arrow Functions ➔ Classes ➔ Computed Property Names ➔ Default Parameters ➔ Destructuring Assignment ➔ Iterators and For Of ➔ Generator Comprehension ➔ Generators ➔ Modules ➔ Numeric Literals ➔ Property Method Assignment ➔ Object Initializer Shorthand ➔ Rest Parameters ➔ Spread ➔ Template Literals ➔ Promises ➔ Block Scoped Binding ➔ Symbols
70. Demo
71. http://es6rocks.com/
73. https://github.com/es6rocks/harmonic
74. Contribute
76. Questions?