Say my name!

Say my name!

A deeply analysis on the modern JavaScript (ES6 - ES2015/ES7 - ES2016).
JSConfUY 2015

572696200604e59baa59ee90d61f7d02?s=128

Jaydson Gomes

April 25, 2015
Tweet

Transcript

  1. JSConfUY 2015 Say my name! A deeply analysis on the

    modern JavaScript (ES6 - ES2015/ES7 - ES2016)
  2. None
  3. Carnival

  4. Football

  5. None
  6. Sepultura

  7. None
  8. ES5 ES6 JSJavaScript ES2015 ES2016 ES7 JSCript ActionScript ECMA

  9. None
  10. http://github.com/es6rocks http://es6rocks.com

  11. http://jsrocks.org http://github.com/JSrocksHQ

  12. None
  13. https://babeljs.io

  14. None
  15. http://kangax.github.io/compat-table/es5/ ES5 support

  16. None
  17. ES6 support (November 2014) http://kangax.github.io/compat-table/es6/ 70% 60% 60% 55% 55%

    35% 25%
  18. ES6 support (April 2015) 73% 69% 62% 45% 74% 23%

    41% 20% http://kangax.github.io/compat-table/es6/
  19. ES6 support http://kangax.github.io/compat-table/es6/

  20. ES7 support* http://kangax.github.io/compat-table/es7 * Babel <3 ES7 => 52% (April

    2015)
  21. What’s the point? - Compilers - Better syntax - Features

    based on community needs
  22. Transpilers https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS

  23. Transpileception https://github.com/jaydson/transpileception

  24. Write ES5 code

  25. xto6

  26. babel

  27. None
  28. rapydscript

  29. ES6 Basics

  30. String.includes(txt, start) // String.contains(txt, start) let msg = "JS Conf

    UY!"; console.log(msg.includes("!")); // true console.log(msg.includes("JS")); // true console.log(msg.includes("X")); // false console.log(msg.includes("JS", 8)); // false
  31. // String.startsWith(txt, start) let msg = "JS Conf UY!"; 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
  32. // String.endsWith(txt, end) let msg = "JS Conf UY!"; console.log(msg.endsWith("!"));

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

    "abcabcabcabc"
  34. // 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}?`);
  35. // 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}?`);
  36. // 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}?`);
  37. // 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
  38. 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)
  39. None
  40. // Destructuring assignment (array pattern) var m = 11, d

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

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

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

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

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

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

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

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

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

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

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

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

    y) => { // logic return true; }
  53. // 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
  54. // Fixing ‘this’ issue ES5 way var foo = {

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

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

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

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

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

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

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

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

    { return `print module - ${what}`; } export default print;
  63. // 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”;
  64. // 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
  65. Case study on ES7 async functions https://github.com/jaydson/es7-async

  66. Old friend Ajax

  67. Not so new friend, Promises

  68. Fetch API

  69. Parallel execution

  70. New powerful friend, generators

  71. The new awesome beast, async functions

  72. None
  73. None
  74. Parallel operations with async:

  75. Parallel operations with async + fetch (Oh my god this

    is great!):
  76. https://github.com/JSRocksHQ/harmonic

  77. None
  78. None
  79. None
  80. https://github.com/JSRocksHQ/slush-es20xx

  81. None