Le document traite des évolutions d'ECMAScript, notamment les versions ES6 et ES7, en mettant en avant les nouvelles fonctionnalités telles que les fonctions fléchées, les promesses et la programmation orientée objet. Il aborde également l'utilisation de TypeScript pour un typage fort et les problèmes de compatibilité des navigateurs avec ces standards modernes. Enfin, il souligne l'adoption croissante d'ES6 par des frameworks et outils contemporains comme Node.js et Angular.

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