Upgrade to Pro — share decks privately, control downloads, hide ads and more …

And ES6 For All

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!


572696200604e59baa59ee90d61f7d02?s=128

Jaydson Gomes

August 02, 2014
Tweet

More Decks by Jaydson Gomes

Other Decks in Programming

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

  31. None
  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

  65. None
  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/

  72. None
  73. https://github.com/es6rocks/harmonic

  74. Contribute

  75. None
  76. Questions?