Slide 1

Slide 1 text

JSConf Argentina 2014

Slide 2

Slide 2 text

Agenda History Basics Main features Using it today ES6Rocks

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Carnival

Slide 5

Slide 5 text

Football

Slide 6

Slide 6 text

Sepultura

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

The Basics

Slide 10

Slide 10 text

// 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

Slide 11

Slide 11 text

// 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

Slide 12

Slide 12 text

// 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

Slide 13

Slide 13 text

// String.repeat(number) console.log("x".repeat(3)); // "xxx" console.log("hello".repeat(2)); // "hellohello" console.log("abc".repeat(4)); // "abcabcabcabc"

Slide 14

Slide 14 text

// 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}?`);

Slide 15

Slide 15 text

// 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}?`);

Slide 16

Slide 16 text

// 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}?`);

Slide 17

Slide 17 text

// 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

Slide 18

Slide 18 text

// simple i18n implementation let currentLang = 'en'; let strs = { 'en': { 'Hello ': 'Hello ', ', welcome to': ', welcome to ' }, 'es-ar': { 'Hello ': 'Hola ', ', welcome to': ', bienvenido a ' } }

Slide 19

Slide 19 text

// 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/

Slide 20

Slide 20 text

// 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

Slide 21

Slide 21 text

// 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

Slide 22

Slide 22 text

// 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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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)

Slide 25

Slide 25 text

// 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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

// Destructuring assignment (array pattern) var m = 11, d = 29, y = 2014; let [m, d, y] = [11, 29, 2014];

Slide 30

Slide 30 text

// Destructuring assignment (object pattern) function today() { return { d: 29, m: 11, y: 2014 }; } let { m: month, y: year } = today(); // month = 11, year = 2014

Slide 31

Slide 31 text

Main Features

Slide 32

Slide 32 text

// 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/

Slide 33

Slide 33 text

Arrow Functions =>

Slide 34

Slide 34 text

- This binding - Not newable - No arguments object - Always anonymous

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

// n parameters arrow fn let sum = (n1, n2) => n1 + n2; console.log( sum(2,2) ); // 4

Slide 40

Slide 40 text

// Parameterless Arrow fn let conf = () => "JSConfAR"; console.log( conf() ); // JSConfAR

Slide 41

Slide 41 text

// Arrow fn with a body let doSomething = (x, y) => { // logic return true; }

Slide 42

Slide 42 text

// 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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Classes

Slide 46

Slide 46 text

class Animal { constructor(name) { this.name = name; } breathe () { console.log( `${this.name} is breathing` ); } }

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Modules

Slide 50

Slide 50 text

// Creating modules // baz.js let baz = 'baz'; export default baz; // app.js import baz from “baz”;

Slide 51

Slide 51 text

// Creating modules // print.js let print = function (what) { return `print module - ${what}`; } export default print;

Slide 52

Slide 52 text

// 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”;

Slide 53

Slide 53 text

// 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

Slide 54

Slide 54 text

https://github.com/jaydson/es6-modules-6to5

Slide 55

Slide 55 text

Demonstration

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

June 2015

Slide 58

Slide 58 text

Frameworks

Slide 59

Slide 59 text

http://es6rocks.com

Slide 60

Slide 60 text

https://github.com/es6rocks/harmonic

Slide 61

Slide 61 text

No content