ES6Le nouveau JavaScript
@cyrilletuzi
ECMAScript
Le 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...
JavaScript
● JavaScript moderne :
○ addEventListener (onclick)
○ querySelectorAll
○ DOMContentLoaded
○ classList...
● APIs...
ES6
Les principales nouveautés
ES6 : bases
● Portée de bloc
let
● Constantes
const OPTION = 1;
● Template literal
`<p id="my-id">Je m'appelle ${name}</p>...
ES6 : paramètres
● Valeurs par défaut
function optional(param = "default value") {}
● Rest parameters
function rest(...par...
ES6 : arrow functions
● ES5 : problèmes de contexte
element.addEventListener('click', function () {
setTimeout(function ()...
Asynchronicité
● Promises : simplification de l'asynchronicité
var p = new Promise();
p.then((result) => {}, (error) => {}...
AJAX
● Fetch : simplification de l'AJAX
fetch('/openska-catalog.json').then(
(response) => response.json()
).then((json) =...
ES6
● Autres nouveautés ES6
○ Nouvelles méthodes pour String, Math, Array...
○ Collections : Set, Map
○ Destructuring
○ Pr...
ES6
La programmation orientée objet
ES6 : classes
● Classes : simplification de la programmation orientée objet
class User {
constructor(name) {
this.name = n...
ES6 : classes
● Héritage
class Editor extends User {
constructor(name) {
super(name);
}
}
● Méthodes statiques
class Utili...
ES6 : modules
● Import / export unique
export default User;
import User from 'module-user.js';
● Imports / exports multipl...
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
TypeScript
ES6 amélioré
TypeScript
● Avantages de TypeScript
○ ES6 amélioré
○ Typage fort
○ Surcouche optionnelle (≠ Dart)
○ Utilisé par défaut pa...
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...
Compatibilité ES6
● Compatibilité ES6/7
kangax.github.io/compat-table/
● Compatibilité APIs "HTML5"
caniuse.com
Compilers ES6
● Traceur
○ Runtime pour optimiser
● Babel (ex es6to5)
○ Filtrage par fonctionnalité
● TypeScript
○ ES6 amél...
Adoption de l'ES6
● Ils utilisent déjà l'ES6 :
○ Nodejs
○ Angular 2
○ React
○ Meteor…
● Oui, l'ES6 est utilisable pour de ...
Coder en ES6
● Visual Studio Code
code.visualstudio.com
● Atom + plugin atom-typescript
atom.io
● Source maps pour le debu...
MERCI
@cyrilletuzi
Prochain SlideShare
Chargement dans…5
×

Meetup ES6 / ES2015

481 vues

Publié le

Slides du meetup ES6 / ES2015 : le nouveau JavaScript, que j'ai animé et organisé par Openska à Paris le 22 octobre 2015.

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
481
Sur SlideShare
0
Issues des intégrations
0
Intégrations
28
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Meetup ES6 / ES2015

  1. 1. ES6Le nouveau JavaScript @cyrilletuzi
  2. 2. ECMAScript Le point sur les standards
  3. 3. 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
  4. 4. JavaScript ● JavaScript moderne : ○ addEventListener (onclick) ○ querySelectorAll ○ DOMContentLoaded ○ classList... ● APIs "HTML5" gérées par le W3C ○ AJAX ○ géolocalisation ○ stockage local...
  5. 5. ES6 Les principales nouveautés
  6. 6. 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) {}
  7. 7. 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);
  8. 8. 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); });
  9. 9. 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
  10. 10. AJAX ● Fetch : simplification de l'AJAX fetch('/openska-catalog.json').then( (response) => response.json() ).then((json) => {}).catch(); ● Polyfill : github.com/github/fetch
  11. 11. 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/
  12. 12. ES6 La programmation orientée objet
  13. 13. ES6 : classes ● Classes : simplification de la programmation orientée objet class User { constructor(name) { this.name = name; } helloWorld() { return `Je m'appelle ${this.name}`; } }
  14. 14. ES6 : classes ● Héritage class Editor extends User { constructor(name) { super(name); } } ● Méthodes statiques class Utilities { static filter() {} }
  15. 15. 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';
  16. 16. ES6 : modules ● Loader : System.js (ES6 + universel) System.import('main.js'); github.com/systemjs/systemjs ● Spec en cours
  17. 17. ES7 ● En prévision en ES7 ○ Fonctions asynchrones ○ Observeurs ○ Propriétés dans les classes ○ Décorateurs / annotations
  18. 18. TypeScript ES6 amélioré
  19. 19. TypeScript ● Avantages de TypeScript ○ ES6 amélioré ○ Typage fort ○ Surcouche optionnelle (≠ Dart) ○ Utilisé par défaut par Angular 2
  20. 20. Typage ● Typage fort var catalog:string[] = ['JS', 'PHP']; function meetup(participants:number):boolean { return true; }
  21. 21. TypeScript & ES6 ● Classes ES6 ○ + Propriétés ○ + Visibilité (public / privé) ○ + Classes abstraites ○ + Interfaces
  22. 22. ES6 en prod ? Le point sur la compatibilité
  23. 23. 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
  24. 24. Compatibilité ES6 ● Compatibilité ES6/7 kangax.github.io/compat-table/ ● Compatibilité APIs "HTML5" caniuse.com
  25. 25. Compilers ES6 ● Traceur ○ Runtime pour optimiser ● Babel (ex es6to5) ○ Filtrage par fonctionnalité ● TypeScript ○ ES6 amélioré + typage fort
  26. 26. Adoption de l'ES6 ● Ils utilisent déjà l'ES6 : ○ Nodejs ○ Angular 2 ○ React ○ Meteor… ● Oui, l'ES6 est utilisable pour de la prod !
  27. 27. Coder en ES6 ● Visual Studio Code code.visualstudio.com ● Atom + plugin atom-typescript atom.io ● Source maps pour le debug.
  28. 28. MERCI @cyrilletuzi

×