ES6Le nouveau JavaScript

@cyrilletuzi

…

…

6

3

15

5

20

72

450

…

ECMAScriptLe point sur les standards

ECMAScript

● 1999 ES3

● 2009 ES5● 2011 mise à jour 5.1

● Juin 2015 ES6 / ES2015, standard actuel

● 2016 ES7 / ES2016, déjà en cours● 2017● 2018…

www.ecma-international.org/publications/standards/Ecma-262.htm

JavaScript

● JavaScript moderne :○ addEventListener (onclick)○ querySelectorAll○ DOMContentLoaded○ classList...

● APIs "HTML5" gérées par le W3C○ AJAX○ géolocalisation○ stockage local...

ES6Les principales nouveautés

ES6 : bases

● Portée de bloclet

● Constantesconst OPTION = 1;

● Template literal`<p id="my-id">Je m'appelle ${name}</p>`;

● Itération for (let value of arrayLike) {}

ES6 : paramètres

● Valeurs par défautfunction optional(param = "default value") {}

● Rest parametersfunction rest(...params) {

params.forEach(function (value, index) {});}

● Spread parametersfunction spread(param1, param2) {}var myParams = ['open', 'ska'];spread(...myParams);

ES6 : arrow functions

● ES5 : problèmes de contexteelement.addEventListener('click', function () {

setTimeout(function () {this.textContent = 'openska';

}, 2000);});

● ES6 : arrow functionselement.addEventListener('click', function () {

setTimeout(() => {this.textContent = 'openska';

}, 2000);});

Asynchronicité

● Promises : simplification de l'asynchronicité

var p = new Promise();

p.then((result) => {}, (error) => {});

Promise.resolve(result);

Promise.reject(error);

Promise.all([p1, p2]).then((results) => {});

● Polyfill : github.com/jakearchibald/es6-promise

AJAX

● Fetch : simplification de l'AJAX

fetch('/openska-catalog.json').then(

(response) => response.json()

).then((json) => {}).catch();

● Polyfill : github.com/github/fetch

ES6

● Autres nouveautés ES6

○ Nouvelles méthodes pour String, Math, Array...

○ Collections : Set, Map

○ Destructuring

○ Proxy / Reflection

○ Générateurs...

hacks.mozilla.org/category/es6-in-depth/

ES6La programmation orientée objet

ES6 : classes

● Classes : simplification de la programmation orientée objet

class User {

constructor(name) {

this.name = name;

}

helloWorld() {

return `Je m'appelle ${this.name}`;

}}

ES6 : classes

● Héritageclass Editor extends User {

constructor(name) {super(name);

}}

● Méthodes statiquesclass Utilities {

static filter() {}}

ES6 : modules

● Import / export unique

export default User;import User from 'module-user.js';

● Imports / exports multiples

export {User, Editor};import {User, Editor} from 'module-user.js';

● Syntaxe simple proche de CommonJS.● Possibilité de chargement asynchrone comme en AMD.

ES6 : modules

● Loader : System.js (ES6 + universel)

System.import('main.js');

github.com/systemjs/systemjs

● Spec en cours

ES7

● En prévision en ES7

○ Fonctions asynchrones

○ Observeurs

○ Propriétés dans les classes

○ Décorateurs / annotations

TypeScriptES6 amélioré

TypeScript

● Avantages de TypeScript

○ ES6 amélioré

○ Typage fort

○ Surcouche optionnelle (≠ Dart)

○ Utilisé par défaut par Angular 2

Typage

● Typage fort

var catalog:string[] = ['JS', 'PHP'];

function meetup(participants:number):boolean {return true;

}

TypeScript & ES6

● Classes ES6

○ + Propriétés

○ + Visibilité (public / privé)

○ + Classes abstraites

○ + Interfaces

ES6 en prod ?Le point sur la compatibilité

Internet Explorer

● Good bye IE 6 & 7○ Windows XP terminé depuis début 2014○ jQuery 3 va les abandonner

● IE 8 en voie d'extinction (< 3%)○ IE 11 Enterprise Mode, Firefox ESR, Chrome for Business○ polyfill.io

● ES5 depuis IE 9

● Edge : premier en ES6

Compatibilité ES6

● Compatibilité ES6/7kangax.github.io/compat-table/

● Compatibilité APIs "HTML5"caniuse.com

Compilers ES6

● Traceur○ Runtime pour optimiser

● Babel (ex es6to5)○ Filtrage par fonctionnalité

● TypeScript○ ES6 amélioré + typage fort

Adoption de l'ES6

● Ils utilisent déjà l'ES6 :○ Nodejs○ Angular 2○ React○ Meteor…

● Oui, l'ES6 est utilisable pour de la prod !

Coder en ES6

● Visual Studio Codecode.visualstudio.com

● Atom + plugin atom-typescriptatom.io

● Source maps pour le debug.

MERCI@cyrilletuzi