Envie d'échanger sur ES6, le nouveau standard de JavaScript ? Avec Cyrille, l'un de nos consultants Openska, nous avons fait le point lors d'un Meet UP à Paris. Au programme on commencera par faire un point sur les standards. Après cette introduction nous attaquerons les choses sérieuses : qu'est-ce que ES6 va vous apporter de plus et/ou en mieux ? Programme : - Le point sur les standards - Les nouveautés ES6 - L'option TypeScript - Compatibilité ES6

1. ES6Le nouveau JavaScript
@cyrilletuzi

2. …
…

3. 6
3
15
5
20
72
450

4. …

5. ECMAScript
Le point sur les standards

6. 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

7. JavaScript
● JavaScript moderne :
○ addEventListener (onclick)
○ querySelectorAll
○ DOMContentLoaded
○ classList...
● APIs "HTML5" gérées par le W3C
○ AJAX
○ géolocalisation
○ stockage local...

8. ES6
Les principales nouveautés

9. ES6 : bases
● Portée de bloc
let
● Constantes
const OPTION = 1;
● Template literal
`<p id="my-id">Je m'appelle ${name}</p>`;
● Itération
for (let value of arrayLike) {}

10. ES6 : paramètres
● Valeurs par défaut
function optional(param = "default value") {}
● Rest parameters
function rest(...params) {
params.forEach(function (value, index) {});
}
● Spread parameters
function spread(param1, param2) {}
var myParams = ['open', 'ska'];
spread(...myParams);

11. ES6 : arrow functions
● ES5 : problèmes de contexte
element.addEventListener('click', function () {
setTimeout(function () {
this.textContent = 'openska';
}, 2000);
});
● ES6 : arrow functions
element.addEventListener('click', function () {
setTimeout(() => {
this.textContent = 'openska';
}, 2000);
});

12. 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

13. AJAX
● Fetch : simplification de l'AJAX
fetch('/openska-catalog.json').then(
(response) => response.json()
).then((json) => {}).catch();
● Polyfill : github.com/github/fetch

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

15. ES6
La programmation orientée objet

16. ES6 : classes
● Classes : simplification de la programmation orientée objet
class User {
constructor(name) {
this.name = name;
}
helloWorld() {
return `Je m'appelle ${this.name}`;
}
}

17. ES6 : classes
● Héritage
class Editor extends User {
constructor(name) {
super(name);
}
}
● Méthodes statiques
class Utilities {
static filter() {}
}

18. 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.

19. ES6 : modules
● Loader : System.js (ES6 + universel)
System.import('main.js');
github.com/systemjs/systemjs
● Spec en cours

20. ES7
● En prévision en ES7
○ Fonctions asynchrones
○ Observeurs
○ Propriétés dans les classes
○ Décorateurs / annotations

21. TypeScript
ES6 amélioré

22. TypeScript
● Avantages de TypeScript
○ ES6 amélioré
○ Typage fort
○ Surcouche optionnelle (≠ Dart)
○ Utilisé par défaut par Angular 2

23. Typage
● Typage fort
var catalog:string[] = ['JS', 'PHP'];
function meetup(participants:number):boolean {
return true;
}

24. TypeScript & ES6
● Classes ES6
○ + Propriétés
○ + Visibilité (public / privé)
○ + Classes abstraites
○ + Interfaces

25. ES6 en prod ?
Le point sur la compatibilité

26. 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

27. Compatibilité ES6
● Compatibilité ES6/7
kangax.github.io/compat-table/
● Compatibilité APIs "HTML5"
caniuse.com

28. Compilers ES6
● Traceur
○ Runtime pour optimiser
● Babel (ex es6to5)
○ Filtrage par fonctionnalité
● TypeScript
○ ES6 amélioré + typage fort

29. Adoption de l'ES6
● Ils utilisent déjà l'ES6 :
○ Nodejs
○ Angular 2
○ React
○ Meteor…
● Oui, l'ES6 est utilisable pour de la prod !

30. Coder en ES6
● Visual Studio Code
code.visualstudio.com
● Atom + plugin atom-typescript
atom.io
● Source maps pour le debug.

31. MERCI
@cyrilletuzi