ES6Rocks! JSConf Argentina 2014

ES6Rocks! JSConf Argentina 2014

ES6 is the sixth version of the language we love. The ECMAScript sixth version will be released in mid 2015, but all majors browsers are currently implementing the features we’ll have soon. In this talk you will know why ES6 Rocks! Also, you’ll learn how to write your code today with the new set of features and syntax both on node and the browser.

572696200604e59baa59ee90d61f7d02?s=128

Jaydson Gomes

November 29, 2014
Tweet

Transcript

  1. JSConf Argentina 2014

  2. Agenda History Basics Main features Using it today ES6Rocks

  3. None
  4. Carnival

  5. Football

  6. Sepultura

  7. None
  8. None
  9. The Basics

  10. // String.contains(txt, start) let msg = "JS Conf Argentina!"; console.log(msg.includes("!"));

    // true console.log(msg.includes("JS")); // true console.log(msg.includes("X")); // false console.log(msg.includes("JS", 8)); // false String.includes(txt, start) https://github.com/tc39/Array.prototype.includes
  11. // String.startsWith(txt, start) let msg = "JS Conf Argentina!"; console.log(msg.startsWith("JS"));

    // true console.log(msg.startsWith("js")); // false console.log(msg.startsWith("C")); // false console.log(msg.startsWith("C", 3)); // true
  12. // String.endsWith(txt, end) let msg = "JS Conf Argentina!"; console.log(msg.endsWith("!"));

    // true console.log(msg.endsWith("Argentina!")); // true console.log(msg.endsWith("na!", 8)); // false console.log(msg.endsWith("Conf", 7)); // true
  13. // String.repeat(number) console.log("x".repeat(3)); // "xxx" console.log("hello".repeat(2)); // "hellohello" console.log("abc".repeat(4)); //

    "abcabcabcabc"
  14. // Template strings // 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}?`);
  15. // Template strings // 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}?`);
  16. // Template strings // 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}?`);
  17. // Tagged template strings let upper = function(strings, ...values) {

    let result = ''; for (let i = 0; i < strings.length - 1; i += 1) { result += strings[i].toUpperCase() + values[i].toUpperCase(); } return result; } let name = 'Jaydson'; let conf = 'JSConf'; let result = upper `Hello ${name}, welcome to ${conf}`; console.log(result); HELLO JAYDSON, WELCOME TO JSCONF
  18. // simple i18n implementation let currentLang = 'en'; let strs

    = { 'en': { 'Hello ': 'Hello ', ', welcome to': ', welcome to ' }, 'es-ar': { 'Hello ': 'Hola ', ', welcome to': ', bienvenido a ' } }
  19. // simple i18n implementation let i18n = function(strings, ...values) {

    let result = ''; let len = strings.length - 1; for (let i = 0; i < len; i +=1) { result += strs[currentLang][strings[i]] + values[i]; } return result; }; http://www.es6fiddle.net/i0r5wpso/ http://jaysoo.ca/2014/03/20/i18n-with-es6-template-strings/
  20. // simple i18n implementation currentLang = 'es-ar'; let name =

    'Jaydson'; let conf = 'JSConf'; let result = i18n `Hello ${name}, welcome to ${conf}`; console.log(result); // Hola Jaydson, bienvenido a JSConf
  21. // Octal and Binary Literals // ECMAScript 6 var value1

    = 0o71; // 57 in decimal var value2 = 0b101; // 5 in decimal Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
  22. // isFinite() and isNaN() console.log(isFinite("25")); // true console.log(Number.isFinite("25")); // false

    console.log(isNaN("NaN")); // true console.log(Number.isNaN("NaN")); // false Credits: Nicholas Zakas, Understanding ES6 https://github.com/nzakas/understandinges6
  23. None
  24. 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)
  25. // Array.from(obj, mapFn) let lis = document.querySelectorAll('.speaker h2'); console.log(Array.from(lis, s

    => s.innerHTML)); http://www.2ality.com/2014/05/es6-array-methods.html
  26. None
  27. // Object literal shorthand function foo(bar, baz) { return {

    x: true, bar: bar, baz: baz }; } function conf(name) { return { country: 'AR', name: name }; }
  28. // Object literal shorthand function foo(bar, baz) { return {

    x: true, bar, baz }; } function conf(name) { return { country: 'AR', name }; }
  29. // Destructuring assignment (array pattern) var m = 11, d

    = 29, y = 2014; let [m, d, y] = [11, 29, 2014];
  30. // Destructuring assignment (object pattern) function today() { return {

    d: 29, m: 11, y: 2014 }; } let { m: month, y: year } = today(); // month = 11, year = 2014
  31. Main Features

  32. // Block scope /* Let */ for (var i =

    0; i < 3; i++) { let j = i * i; console.log(j); // Works } console.log(j); // Fail http://es6rocks.com/2014/08/what-you-need-to-know-about-block-scope-let/
  33. Arrow Functions =>

  34. - This binding - Not newable - No arguments object

    - Always anonymous
  35. // Single parameter arrow fn let plusOne = x =>

    x + 1; console.log( plusOne(5) ); // 6
  36. // Single parameter arrow fn let plusOne = x =>

    x + 1; console.log( plusOne(5) ); // 6 Function
  37. // Single parameter arrow fn let plusOne = x =>

    x + 1; console.log( plusOne(5) ); // 6 Param name
  38. // Single parameter arrow fn let plusOne = x =>

    x + 1; console.log( plusOne(5) ); // 6 return
  39. // n parameters arrow fn let sum = (n1, n2)

    => n1 + n2; console.log( sum(2,2) ); // 4
  40. // Parameterless Arrow fn let conf = () => "JSConfAR";

    console.log( conf() ); // JSConfAR
  41. // Arrow fn with a body let doSomething = (x,

    y) => { // logic return true; }
  42. // Classical ‘this’ issue var foo = { init: function

    () { setTimeout(function () { this.log(); }, 1000); }, log: function () { console.log('foooo'); } } foo.init(); //TypeError: this.log is not a function
  43. // Fixing ‘this’ issue ES5 way var foo = {

    init : function () { setTimeout((function () { this.log(); }).bind(this), 1000); }, log : function () { console.log('foooo'); } } foo.init(); // foooo
  44. // Fixing ‘this’ issue ES6 way let foo = {

    init : function () { setTimeout( () => this.log(), 1000 ); }, log : function () { console.log('foooo'); } }; foo.init(); // foooo
  45. Classes

  46. class Animal { constructor(name) { this.name = name; } breathe

    () { console.log( `${this.name} is breathing` ); } }
  47. class Dog extends Animal { constructor(name) { super(name); } bark()

    { console.log(`Woof! ${this.name} is barking`); } }
  48. class Cat extends Animal { constructor(name) { super(name); } meow()

    { console.log(`Meow! ${this.name} is meowing`); } }
  49. Modules

  50. // Creating modules // baz.js let baz = 'baz'; export

    default baz; // app.js import baz from “baz”;
  51. // Creating modules // print.js let print = function (what)

    { return `print module - ${what}`; } export default print;
  52. // Creating modules // foo.js import baz from "./baz"; console.log('From

    module baz >>> ', baz); let foo = 'foo'; export default foo; export let bar = 'bar'; // foo.js import { bar } from “foo”;
  53. // Using modules // app.js import print from "./modules/print"; import

    foo, { bar } from "./modules/foo"; console.log( print('it works') ); // print module - it works console.log( print('wow') ); // print module - wow console.log( foo ); // foo console.log( bar ); // bar
  54. https://github.com/jaydson/es6-modules-6to5

  55. Demonstration

  56. ES6 support today http://kangax.github.io/compat-table/es6/ 70% 60% 60% 55% 55% 35%

    25%
  57. June 2015

  58. Frameworks

  59. http://es6rocks.com

  60. https://github.com/es6rocks/harmonic

  61. None