Say my name!

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

Transcript

1. JSConfUY 2015 Say my name! A deeply analysis on the modern JavaScript (ES6 - ES2015/ES7 - ES2016)
3. Carnival
4. Football
6. Sepultura
8. ES5 ES6 JSJavaScript ES2015 ES2016 ES7 JSCript ActionScript ECMA
10. http://github.com/es6rocks http://es6rocks.com
11. http://jsrocks.org http://github.com/JSrocksHQ
13. https://babeljs.io
15. http://kangax.github.io/compat-table/es5/ ES5 support
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
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)
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
74. Parallel operations with async:
75. Parallel operations with async + fetch (Oh my god this is great!):
76. https://github.com/JSRocksHQ/harmonic
80. https://github.com/JSRocksHQ/slush-es20xx