Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Changez d’avis sur JavaScript
EcmaScript 6
Faisons connaissance
WHO
ARE
YOU?
Faisons connaissance
Damien
SIMONIN FEUGAS
La découverte du JS
La découverte du JS
 Interprété
 Dynamique
 Single-threaded
 "Functions are first-
class citizen"
La découverte du JS
 Interprété
 Dynamique
 Single-threaded
 "Functions are first-
class citizen"
 Orienté Objet ?
Les choses changent
 Coté serveur
 Large communauté
 Production ready
 La quête du Full stack
Les choses changent
 Coté serveur
 Large communauté
 Production ready
 La quête du Full stack
 Un langage en évolutio...
Pilot : notre fil rouge
 Ordonnanceur en NodeJS
 Déclenche et suit l’exécution de tâches
Pilot : notre fil rouge
 Ordonnanceur en NodeJS
 Déclenche et suit l’exécution de tâches
Task <<abstract>>
name: String
...
Pilot : notre fil rouge
 Ordonnanceur en NodeJS
 Déclenche et suit l’exécution de tâches
Task <<abstract>>
name: String
...
Classes, interpolation, portée des
variables, modularisation
EcmaScript 6
Déclarer une classe
 Un seul constructeur class Task {
constructor(name, next) {}
toString() {}
static display(step) {}
g...
Déclarer une classe
 Un seul constructeur
 Des méthodes
class Task {
constructor(name, next) {}
toString() {}
static dis...
Déclarer une classe
 Un seul constructeur
 Des méthodes
 Méthode de classe
class Task {
constructor(name, next) {}
toSt...
Déclarer une classe
 Un seul constructeur
 Des méthodes
 Méthode de classe
 Des getter/setters
class Task {
constructo...
Déclarer une classe
 Un seul constructeur
 Des méthodes
 Méthode de classe
 Des getter/setters
 Pas d’attributs : ini...
Interpolation (template string)
 Utilisation de variable à l’intérieur des chaînes
toString() {
let className = this.cons...
Interpolation (template string)
 Utilisation de variable à l’intérieur des chaînes
 Délimité par l’accent grave (backquo...
Interpolation (template string)
 Utilisation de variable à l’intérieur des chaînes
 Délimité par l’accent grave (backquo...
Interpolation (template string)
 Utilisation de variable à l’intérieur des chaînes
 Délimité par l’accent grave (backquo...
Portée des variables (block scoping)
 Porté d’une variable ES5 ?
let className = this.constructor.name;
function sayHi(na...
Portée des variables (block scoping)
 Porté d’une variable ES5 ?
 La fonction :
sayHi('Tom') === 'Hi Tom'
sayHi() === Na...
Portée des variables (block scoping)
 Porté d’une variable ES5 ?
 La fonction :
sayHi('Tom') === 'Hi Tom'
sayHi() === Na...
Modules
 ES5 n’a pas de mécanisme de modularisation
Modules
 ES5 n’a pas de mécanisme de modularisation
 Fichier task.js
 Fichier parallel.js
 D’autres syntaxes seront vu...
Héritage
 Héritage simple
export class Parallel extends Task {
constructor({field, tasks = []} = {},
next) {
super('', ne...
Héritage
 Héritage simple
 Appel du
constructeur
hérité
export class Parallel extends Task {
constructor({field, tasks =...
Héritage
 Héritage simple
 Appel du
constructeur
hérité
 Extension des
méthodes
export class Parallel extends Task {
co...
Héritage
 Héritage simple
 Appel du
constructeur
hérité
 Extension des
méthodes
 Pas d’héritage
multiple pour
l’instan...
Paramètres, littéraux objets, "Rest
operator", fonctions fléchées, "For-of"
EcmaScript 6
Paramètres par défaut et "literal object"
 On peut initialiser les
paramètres
constructor(name, next=null) {
Object.assig...
Paramètres par défaut et "literal object"
 On peut initialiser les
paramètres
 Nouvelle fonction
constructor(name, next=...
Paramètres par défaut et "literal object"
 On peut initialiser les
paramètres
 Nouvelle fonction
 Objet littéral ES6
 ...
Paramètres par défaut et "literal object"
 On peut initialiser les
paramètres
 Nouvelle fonction
 Objet littéral ES6
 ...
get duration() {}
toString() {}
Paramètres par défaut et "literal object"
 On peut initialiser les
paramètres
 Nouvelle ...
get duration() {}
toString() {}
Paramètres par défaut et "literal object"
 On peut initialiser les
paramètres
 Nouvelle ...
get duration() {}
toString() {}
Object.defineProperty(this, 'duration', {
get : function() {},
enumerable : true
});
Param...
get duration() {}
toString() {}
Paramètres par défaut et "literal object"
 On peut initialiser les
paramètres
 Nouvelle ...
get duration() {}
toString() {}
Paramètres par défaut et "literal object"
 On peut initialiser les
paramètres
 Nouvelle ...
get duration() {}
toString() {}
Paramètres par défaut et "literal object"
 On peut initialiser les
paramètres
 Nouvelle ...
"Rest operator" & "Arrow function"
 Tous les arguments non
déclarés dans un tableau
run(...args) {
let done = args.pop();...
"Rest operator" & "Arrow function"
 Tous les arguments non
déclarés dans un tableau
 Fonction fléchée :
run(...args) {
l...
"Rest operator" & "Arrow function"
 Tous les arguments non
déclarés dans un tableau
 Fonction fléchée :
 Conserve le th...
"Rest operator" & "Arrow function"
 Tous les arguments non
déclarés dans un tableau
 Fonction fléchée :
 Conserve le th...
"Rest operator" & "Arrow function"
 Tous les arguments non
déclarés dans un tableau
 Fonction fléchée :
 Conserve le th...
"Rest operator" & "Arrow function"
 Tous les arguments non
déclarés dans un tableau
 Fonction fléchée :
 Conserve le th...
"For of", parcours de collections
 Parcours des
éléments d’un
iterable
_execute(params, done) {
let results = [];
let fin...
"For of", parcours de collections
 Parcours des
éléments d’un
iterable
 Array, Set, Map
 Pas d’index
 Interruptible
_e...
"For of", parcours de collections
 Parcours des
éléments d’un
iterable
 Array, Set, Map
 Pas d’index
 Interruptible
 ...
"For of", parcours de collections
 Parcours des
éléments d’un
iterable
 Array, Set, Map
 Pas d’index
 Interruptible
 ...
Modularisation, "Spread operator",
destructuration
EcmaScript 6
Modules (2)
 Import sélectif de N symboles
import {Parallel} from '../parallel';
import {Task as BaseTask} from '../task'...
Modules (2)
 Import sélectif de N symboles
 Import avec alias
import {Parallel} from '../parallel';
import {Task as Base...
Modules (2)
 Import sélectif de N symboles
 Import avec alias
 Import du symbole par défaut
import {Parallel} from '../...
Modules (2)
 Import sélectif de N symboles
 Import avec alias
 Import du symbole par défaut
const maxQuotes = 99;
expor...
Modules (2)
 Import sélectif de N symboles
 Import avec alias
 Import du symbole par défaut
 Import de tous les symbol...
"Spread operator" & déstructuration
 "Rest operator" class Crawler extends Task {
constructor(options, ...args) {
let {pa...
"Spread operator" & déstructuration
 "Rest operator"
 paramètres après
options
class Crawler extends Task {
constructor(...
"Spread operator" & déstructuration
 "Rest operator"
 paramètres après
options
 "Spread operator"
class Crawler extends...
"Spread operator" & déstructuration
 "Rest operator"
 paramètres après
options
 "Spread operator"
 Eclate un tableau à...
"Spread operator" & déstructuration
 "Rest operator"
 paramètres après
options
 "Spread operator"
 Eclate un tableau à...
Déstructuration
"Spread operator" & déstructuration
 "Rest operator"
 paramètres après
options
 "Spread operator"
 Ec...
Déstructuration
"Spread operator" & déstructuration
 "Rest operator"
 paramètres après
options
 "Spread operator"
 Ec...
Déstructuration
"Spread operator" & déstructuration
 "Rest operator"
 paramètres après
options
 "Spread operator"
 Ec...
export default function main() {
let sorter = new Sorter();
const nbWorkers = 100;
let crawlers = Array.from(new Array(nbW...
export default function main() {
let sorter = new Sorter();
const nbWorkers = 100;
let crawlers = Array.from(new Array(nbW...
export default function main() {
let sorter = new Sorter();
const nbWorkers = 100;
let crawlers = Array.from(new Array(nbW...
export default function main() {
let sorter = new Sorter();
const nbWorkers = 100;
let crawlers = Array.from(new Array(nbW...
export default function main() {
let sorter = new Sorter();
const nbWorkers = 100;
let crawlers = Array.from(new Array(nbW...
export default function main() {
let sorter = new Sorter();
const nbWorkers = 100;
let crawlers = Array.from(new Array(nbW...
Et tout le reste…
 Collections :
 Set, Map, WeakMap, WeakSet
 Enrichissement des types Built-in
 Object.is, Array.from...
On commence quand ?
EcmaScript 6
Dès maintenant…enfin presque !
 Spécification : ok, implémentation : still going
 Utilisez un « compilateur » ES6 vers E...
Merci pour votre attention et…
…let’s rock with ES6 !
Merci pour votre attention et…
Crédits photos
 Code disponible sur github:
http://github.com/feugy/change-mind-about-js
 Fond « speaker’s grid » par Th...
Prochain SlideShare
Chargement dans…5
×

Change mind about JS

531 vues

Publié le

Présentation sur les nouveauté d'EcmaScript 6 (JavaScript Next) réalisée à l'occasion de MixIT 2015

  • Soyez le premier à commenter

Change mind about JS

  1. 1. Changez d’avis sur JavaScript EcmaScript 6
  2. 2. Faisons connaissance WHO ARE YOU?
  3. 3. Faisons connaissance Damien SIMONIN FEUGAS
  4. 4. La découverte du JS
  5. 5. La découverte du JS  Interprété  Dynamique  Single-threaded  "Functions are first- class citizen"
  6. 6. La découverte du JS  Interprété  Dynamique  Single-threaded  "Functions are first- class citizen"  Orienté Objet ?
  7. 7. Les choses changent  Coté serveur  Large communauté  Production ready  La quête du Full stack
  8. 8. Les choses changent  Coté serveur  Large communauté  Production ready  La quête du Full stack  Un langage en évolution  En 2015, EcmaScript 6  Multi-paradigme  Un langage expressif
  9. 9. Pilot : notre fil rouge  Ordonnanceur en NodeJS  Déclenche et suit l’exécution de tâches
  10. 10. Pilot : notre fil rouge  Ordonnanceur en NodeJS  Déclenche et suit l’exécution de tâches Task <<abstract>> name: String start: Number end: Number next: Task run: (param: Object, done: Function) _execute: (param: Object, done: Function) Parallel tasks: [Task] field: String
  11. 11. Pilot : notre fil rouge  Ordonnanceur en NodeJS  Déclenche et suit l’exécution de tâches Task <<abstract>> name: String start: Number end: Number next: Task run: (param: Object, done: Function) _execute: (param: Object, done: Function) Parallel tasks: [Task] field: String Sorter _execute() Crawler page: Number _execute()
  12. 12. Classes, interpolation, portée des variables, modularisation EcmaScript 6
  13. 13. Déclarer une classe  Un seul constructeur class Task { constructor(name, next) {} toString() {} static display(step) {} get duration() {} // new Task('t1').duration }
  14. 14. Déclarer une classe  Un seul constructeur  Des méthodes class Task { constructor(name, next) {} toString() {} static display(step) {} get duration() {} // new Task('t1').duration }
  15. 15. Déclarer une classe  Un seul constructeur  Des méthodes  Méthode de classe class Task { constructor(name, next) {} toString() {} static display(step) {} get duration() {} // new Task('t1').duration }
  16. 16. Déclarer une classe  Un seul constructeur  Des méthodes  Méthode de classe  Des getter/setters class Task { constructor(name, next) {} toString() {} static display(step) {} get duration() {} // new Task('t1').duration }
  17. 17. Déclarer une classe  Un seul constructeur  Des méthodes  Méthode de classe  Des getter/setters  Pas d’attributs : initialisés dans le constructeur  Tout est public class Task { constructor(name, next) {} toString() {} static display(step) {} get duration() {} // new Task('t1').duration }
  18. 18. Interpolation (template string)  Utilisation de variable à l’intérieur des chaînes toString() { let className = this.constructor.name; return `${className} ${this.name}`.trim(); }
  19. 19. Interpolation (template string)  Utilisation de variable à l’intérieur des chaînes  Délimité par l’accent grave (backquote) toString() { let className = this.constructor.name; return `${className} ${this.name}`.trim(); }
  20. 20. Interpolation (template string)  Utilisation de variable à l’intérieur des chaînes  Délimité par l’accent grave (backquote)  Des placeholders contenant une expression toString() { let className = this.constructor.name; return `${className} ${this.name}`.trim(); } static display(task) { return task.next ? `${task.toString()} > ${Task.display(task.next)}`: task.toString(); }
  21. 21. Interpolation (template string)  Utilisation de variable à l’intérieur des chaînes  Délimité par l’accent grave (backquote)  Des placeholders contenant une expression  Conserve les caractères blancs toString() { let className = this.constructor.name; return `${className} ${this.name}`.trim(); } static display(task) { return task.next ? `${task.toString()} > ${Task.display(task.next)}`: task.toString(); }
  22. 22. Portée des variables (block scoping)  Porté d’une variable ES5 ? let className = this.constructor.name; function sayHi(name) { if (name) { var txt = 'Hi '; } return txt + name; }
  23. 23. Portée des variables (block scoping)  Porté d’une variable ES5 ?  La fonction : sayHi('Tom') === 'Hi Tom' sayHi() === NaN let className = this.constructor.name; function sayHi(name) { if (name) { var txt = 'Hi '; } return txt + name; }
  24. 24. Portée des variables (block scoping)  Porté d’une variable ES5 ?  La fonction : sayHi('Tom') === 'Hi Tom' sayHi() === NaN  Avec let, portée du bloc sayHi('Tom') >> ReferenceError  Et même des constantes let className = this.constructor.name; function sayHi(name) { if (name) { var txt = 'Hi '; } return txt + name; } const maxQuotes = 99; let
  25. 25. Modules  ES5 n’a pas de mécanisme de modularisation
  26. 26. Modules  ES5 n’a pas de mécanisme de modularisation  Fichier task.js  Fichier parallel.js  D’autres syntaxes seront vues par la suite import {Task} from './task'; export class Parallel extends Task { // ... } export class Task { // ... }
  27. 27. Héritage  Héritage simple export class Parallel extends Task { constructor({field, tasks = []} = {}, next) { super('', next); Object.assign(this, {tasks, field}); } toString() { let sub = this.tasks.map(t => `(${Parallel.display(t)})` ).join(' | '); return `${super.toString()} (${sub})`; }
  28. 28. Héritage  Héritage simple  Appel du constructeur hérité export class Parallel extends Task { constructor({field, tasks = []} = {}, next) { super('', next); Object.assign(this, {tasks, field}); } toString() { let sub = this.tasks.map(t => `(${Parallel.display(t)})` ).join(' | '); return `${super.toString()} (${sub})`; }
  29. 29. Héritage  Héritage simple  Appel du constructeur hérité  Extension des méthodes export class Parallel extends Task { constructor({field, tasks = []} = {}, next) { super('', next); Object.assign(this, {tasks, field}); } toString() { let sub = this.tasks.map(t => `(${Parallel.display(t)})` ).join(' | '); return `${super.toString()} (${sub})`; }
  30. 30. Héritage  Héritage simple  Appel du constructeur hérité  Extension des méthodes  Pas d’héritage multiple pour l’instant export class Parallel extends Task { constructor({field, tasks = []} = {}, next) { super('', next); Object.assign(this, {tasks, field}); } toString() { let sub = this.tasks.map(t => `(${Parallel.display(t)})` ).join(' | '); return `${super.toString()} (${sub})`; }
  31. 31. Paramètres, littéraux objets, "Rest operator", fonctions fléchées, "For-of" EcmaScript 6
  32. 32. Paramètres par défaut et "literal object"  On peut initialiser les paramètres constructor(name, next=null) { Object.assign(this, { name, next, end: null, start: null, success: null }); }
  33. 33. Paramètres par défaut et "literal object"  On peut initialiser les paramètres  Nouvelle fonction constructor(name, next=null) { Object.assign(this, { name, next, end: null, start: null, success: null }); }
  34. 34. Paramètres par défaut et "literal object"  On peut initialiser les paramètres  Nouvelle fonction  Objet littéral ES6  Notation raccourcie constructor(name, next=null) { Object.assign(this, { name, next, end: null, start: null, success: null }); }
  35. 35. Paramètres par défaut et "literal object"  On peut initialiser les paramètres  Nouvelle fonction  Objet littéral ES6  Notation raccourcie constructor(name, next=null) { Object.assign(this, { name, next, end: null, start: null, success: null }); } : name, : next,
  36. 36. get duration() {} toString() {} Paramètres par défaut et "literal object"  On peut initialiser les paramètres  Nouvelle fonction  Objet littéral ES6  Notation raccourcie  Aussi utilisé dans les classes constructor(name, next=null) { Object.assign(this, { name, next, end: null, start: null, success: null }); }
  37. 37. get duration() {} toString() {} Paramètres par défaut et "literal object"  On peut initialiser les paramètres  Nouvelle fonction  Objet littéral ES6  Notation raccourcie  Aussi utilisé dans les classes  Getter/setter constructor(name, next=null) { Object.assign(this, { name, next, end: null, start: null, success: null }); }
  38. 38. get duration() {} toString() {} Object.defineProperty(this, 'duration', { get : function() {}, enumerable : true }); Paramètres par défaut et "literal object"  On peut initialiser les paramètres  Nouvelle fonction  Objet littéral ES6  Notation raccourcie  Aussi utilisé dans les classes  Getter/setter constructor(name, next=null) { Object.assign(this, { name, next, end: null, start: null, success: null }); }
  39. 39. get duration() {} toString() {} Paramètres par défaut et "literal object"  On peut initialiser les paramètres  Nouvelle fonction  Objet littéral ES6  Notation raccourcie  Aussi utilisé dans les classes  Getter/setter  Méthodes raccourcies constructor(name, next=null) { Object.assign(this, { name, next, end: null, start: null, success: null }); }
  40. 40. get duration() {} toString() {} Paramètres par défaut et "literal object"  On peut initialiser les paramètres  Nouvelle fonction  Objet littéral ES6  Notation raccourcie  Aussi utilisé dans les classes  Getter/setter  Méthodes raccourcies constructor(name, next=null) { Object.assign(this, { name, next, end: null, start: null, success: null }); } : function() {}
  41. 41. get duration() {} toString() {} Paramètres par défaut et "literal object"  On peut initialiser les paramètres  Nouvelle fonction  Objet littéral ES6  Notation raccourcie  Aussi utilisé dans les classes  Getter/setter  Méthodes raccourcies constructor(name, next=null) { Object.assign(this, { name, next, end: null, start: null, success: null }); }
  42. 42. "Rest operator" & "Arrow function"  Tous les arguments non déclarés dans un tableau run(...args) { let done = args.pop(); let params = args.pop()||{}; this.start = Date.now(); this._execute(params, (err, results) => { this.success = err == null; this.end = Date.now(); if (err || !this.next) { done(err, results); } else { this.next.run(params, done); } }); }
  43. 43. "Rest operator" & "Arrow function"  Tous les arguments non déclarés dans un tableau  Fonction fléchée : run(...args) { let done = args.pop(); let params = args.pop()||{}; this.start = Date.now(); this._execute(params, (err, results) => { this.success = err == null; this.end = Date.now(); if (err || !this.next) { done(err, results); } else { this.next.run(params, done); } }); }
  44. 44. "Rest operator" & "Arrow function"  Tous les arguments non déclarés dans un tableau  Fonction fléchée :  Conserve le this run(...args) { let done = args.pop(); let params = args.pop()||{}; this.start = Date.now(); this._execute(params, (err, results) => { this.success = err == null; this.end = Date.now(); if (err || !this.next) { done(err, results); } else { this.next.run(params, done); } }); }
  45. 45. "Rest operator" & "Arrow function"  Tous les arguments non déclarés dans un tableau  Fonction fléchée :  Conserve le this  Notation raccourcie toString() { let sub = this.tasks.map(t => `(${Parallel.display(t)})` ).join(' | ');
  46. 46. "Rest operator" & "Arrow function"  Tous les arguments non déclarés dans un tableau  Fonction fléchée :  Conserve le this  Notation raccourcie  1 paramètre  parenthèses optionnelles toString() { let sub = this.tasks.map(t => `(${Parallel.display(t)})` ).join(' | ');
  47. 47. "Rest operator" & "Arrow function"  Tous les arguments non déclarés dans un tableau  Fonction fléchée :  Conserve le this  Notation raccourcie  1 paramètre  parenthèses optionnelles  1 expression  bloc optionnel + return implicite toString() { let sub = this.tasks.map(t => `(${Parallel.display(t)})` ).join(' | ');
  48. 48. "For of", parcours de collections  Parcours des éléments d’un iterable _execute(params, done) { let results = []; let finished = 0; for (let task of this.tasks) { task.run(params, (err, data) => { if (data && data[this.field]) { results = results.concat( data[this.field]); } finished++; if (finished === this.tasks.length) { done(null, { [this.field]: results }); } }); }}
  49. 49. "For of", parcours de collections  Parcours des éléments d’un iterable  Array, Set, Map  Pas d’index  Interruptible _execute(params, done) { let results = []; let finished = 0; for (let task of this.tasks) { task.run(params, (err, data) => { if (data && data[this.field]) { results = results.concat( data[this.field]); } finished++; if (finished === this.tasks.length) { done(null, { [this.field]: results }); } }); }}
  50. 50. "For of", parcours de collections  Parcours des éléments d’un iterable  Array, Set, Map  Pas d’index  Interruptible  Objet littéral : champ dynamique _execute(params, done) { let results = []; let finished = 0; for (let task of this.tasks) { task.run(params, (err, data) => { if (data && data[this.field]) { results = results.concat( data[this.field]); } finished++; if (finished === this.tasks.length) { done(null, { [this.field]: results }); } }); }}
  51. 51. "For of", parcours de collections  Parcours des éléments d’un iterable  Array, Set, Map  Pas d’index  Interruptible  Objet littéral : champ dynamique _execute(params, done) { let results = []; let finished = 0; for (let task of this.tasks) { task.run(params, (err, data) => { if (data && data[this.field]) { results = results.concat( data[this.field]); } finished++; if (finished === this.tasks.length) { done(null, { [this.field]: results }); } }); }}
  52. 52. Modularisation, "Spread operator", destructuration EcmaScript 6
  53. 53. Modules (2)  Import sélectif de N symboles import {Parallel} from '../parallel'; import {Task as BaseTask} from '../task'; import nbQuotes, * as utils from './utils';
  54. 54. Modules (2)  Import sélectif de N symboles  Import avec alias import {Parallel} from '../parallel'; import {Task as BaseTask} from '../task'; import nbQuotes, * as utils from './utils';
  55. 55. Modules (2)  Import sélectif de N symboles  Import avec alias  Import du symbole par défaut import {Parallel} from '../parallel'; import {Task as BaseTask} from '../task'; import nbQuotes, * as utils from './utils';
  56. 56. Modules (2)  Import sélectif de N symboles  Import avec alias  Import du symbole par défaut const maxQuotes = 99; export default maxQuotes; import {Parallel} from '../parallel'; import {Task as BaseTask} from '../task'; import nbQuotes, * as utils from './utils';
  57. 57. Modules (2)  Import sélectif de N symboles  Import avec alias  Import du symbole par défaut  Import de tous les symboles dans une variable conteneur const maxQuotes = 99; export default maxQuotes; import {Parallel} from '../parallel'; import {Task as BaseTask} from '../task'; import nbQuotes, * as utils from './utils';
  58. 58. "Spread operator" & déstructuration  "Rest operator" class Crawler extends Task { constructor(options, ...args) { let {page} = options; args.unshift(`page ${page}`); super(...args); Object.assign(this, options); }
  59. 59. "Spread operator" & déstructuration  "Rest operator"  paramètres après options class Crawler extends Task { constructor(options, ...args) { let {page} = options; args.unshift(`page ${page}`); super(...args); Object.assign(this, options); }
  60. 60. "Spread operator" & déstructuration  "Rest operator"  paramètres après options  "Spread operator" class Crawler extends Task { constructor(options, ...args) { let {page} = options; args.unshift(`page ${page}`); super(...args); Object.assign(this, options); }
  61. 61. "Spread operator" & déstructuration  "Rest operator"  paramètres après options  "Spread operator"  Eclate un tableau à l’appel d’une fonction class Crawler extends Task { constructor(options, ...args) { let {page} = options; args.unshift(`page ${page}`); super(...args); Object.assign(this, options); }
  62. 62. "Spread operator" & déstructuration  "Rest operator"  paramètres après options  "Spread operator"  Eclate un tableau à l’appel d’une fonction class Crawler extends Task { constructor(options, ...args) { let {page} = options; args.unshift(`page ${page}`); super(...args); Object.assign(this, options); } super.apply(this, args)
  63. 63. Déstructuration "Spread operator" & déstructuration  "Rest operator"  paramètres après options  "Spread operator"  Eclate un tableau à l’appel d’une fonction  Déstructuration class Crawler extends Task { constructor(options, ...args) { let {page} = options; args.unshift(`page ${page}`); super(...args); Object.assign(this, options); }
  64. 64. Déstructuration "Spread operator" & déstructuration  "Rest operator"  paramètres après options  "Spread operator"  Eclate un tableau à l’appel d’une fonction  Déstructuration  Extrait de l’objet option l’attribut page dans une variable de même nom class Crawler extends Task { constructor(options, ...args) { let {page} = options; args.unshift(`page ${page}`); super(...args); Object.assign(this, options); }
  65. 65. Déstructuration "Spread operator" & déstructuration  "Rest operator"  paramètres après options  "Spread operator"  Eclate un tableau à l’appel d’une fonction  Déstructuration  Extrait de l’objet option l’attribut page dans une variable de même nom  Sur les tableaux, les objets  Imbrication, alias class Crawler extends Task { constructor(options, ...args) { let {page} = options; args.unshift(`page ${page}`); super(...args); Object.assign(this, options); }
  66. 66. export default function main() { let sorter = new Sorter(); const nbWorkers = 100; let crawlers = Array.from(new Array(nbWorkers), (x, i) => new Crawler({page: i+1}, sorter) ); new Parallel({tasks: crawlers, field: 'data'}, sorter).run( (err, results) => { let {data: [{fact, points: score}]=[]} = results; console.log(`best fact found (${score} pts) : ${fact}`); }); } Pour finir… Export par défaut
  67. 67. export default function main() { let sorter = new Sorter(); const nbWorkers = 100; let crawlers = Array.from(new Array(nbWorkers), (x, i) => new Crawler({page: i+1}, sorter) ); new Parallel({tasks: crawlers, field: 'data'}, sorter).run( (err, results) => { let {data: [{fact, points: score}]=[]} = results; console.log(`best fact found (${score} pts) : ${fact}`); }); } Pour finir… Export par défaut Portée bloc
  68. 68. export default function main() { let sorter = new Sorter(); const nbWorkers = 100; let crawlers = Array.from(new Array(nbWorkers), (x, i) => new Crawler({page: i+1}, sorter) ); new Parallel({tasks: crawlers, field: 'data'}, sorter).run( (err, results) => { let {data: [{fact, points: score}]=[]} = results; console.log(`best fact found (${score} pts) : ${fact}`); }); } Pour finir… Export par défaut Portée bloc API étendue
  69. 69. export default function main() { let sorter = new Sorter(); const nbWorkers = 100; let crawlers = Array.from(new Array(nbWorkers), (x, i) => new Crawler({page: i+1}, sorter) ); new Parallel({tasks: crawlers, field: 'data'}, sorter).run( (err, results) => { let {data: [{fact, points: score}]=[]} = results; console.log(`best fact found (${score} pts) : ${fact}`); }); } Pour finir… Export par défaut Portée bloc API étendue Arrow function
  70. 70. export default function main() { let sorter = new Sorter(); const nbWorkers = 100; let crawlers = Array.from(new Array(nbWorkers), (x, i) => new Crawler({page: i+1}, sorter) ); new Parallel({tasks: crawlers, field: 'data'}, sorter).run( (err, results) => { let {data: [{fact, points: score}]=[]} = results; console.log(`best fact found (${score} pts) : ${fact}`); }); } Pour finir… Export par défaut Portée bloc API étendue Arrow function De- structuration
  71. 71. export default function main() { let sorter = new Sorter(); const nbWorkers = 100; let crawlers = Array.from(new Array(nbWorkers), (x, i) => new Crawler({page: i+1}, sorter) ); new Parallel({tasks: crawlers, field: 'data'}, sorter).run( (err, results) => { let {data: [{fact, points: score}]=[]} = results; console.log(`best fact found (${score} pts) : ${fact}`); }); } Pour finir… Export par défaut Portée bloc API étendue Arrow function Template string De- structuration
  72. 72. Et tout le reste…  Collections :  Set, Map, WeakMap, WeakSet  Enrichissement des types Built-in  Object.is, Array.from, Array.map, Array.find…  Generators  Chargement lazy, asynchronisme…  Proxies  Aspect Oriented Programming  Promesses, Symbols, Littéraux binaires & octaux…
  73. 73. On commence quand ? EcmaScript 6
  74. 74. Dès maintenant…enfin presque !  Spécification : ok, implémentation : still going  Utilisez un « compilateur » ES6 vers ES5  Utilisez io.js : NodeJS avec le dernier Chrome http://kangax.github.io/compat-table/es6 http://babeljs.i o https://github.com/google/traceur- compiler
  75. 75. Merci pour votre attention et…
  76. 76. …let’s rock with ES6 ! Merci pour votre attention et…
  77. 77. Crédits photos  Code disponible sur github: http://github.com/feugy/change-mind-about-js  Fond « speaker’s grid » par Thomas Wang  Slide 3 « code review » par Mickael Zuskin  Slide 23 « Hard Rock lives on » par Dustin Gaffke  Les logos utilisés sont la propriété exclusive de leur propriétaire

×