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.

Transcript

1. JSConf Argentina 2014
2. Agenda History Basics Main features Using it today ES6Rocks
4. Carnival
5. Football
6. Sepultura
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
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
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