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

1. Changez d’avis sur JavaScript
EcmaScript 6

2. Faisons connaissance
WHO
ARE
YOU?

3. Faisons connaissance
Damien
SIMONIN FEUGAS

4. La découverte du JS

5. La découverte du JS
 Interprété
 Dynamique
 Single-threaded
 "Functions are first-
class citizen"

6. La découverte du JS
 Interprété
 Dynamique
 Single-threaded
 "Functions are first-
class citizen"
 Orienté Objet ?

7. Les choses changent
 Coté serveur
 Large communauté
 Production ready
 La quête du Full stack

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. Pilot : notre fil rouge
 Ordonnanceur en NodeJS
 Déclenche et suit l’exécution de tâches

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. 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. Classes, interpolation, portée des
variables, modularisation
EcmaScript 6

13. Déclarer une classe
 Un seul constructeur class Task {
constructor(name, next) {}
toString() {}
static display(step) {}
get duration() {}
// new Task('t1').duration
}

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. 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. 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. 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. Interpolation (template string)
 Utilisation de variable à l’intérieur des chaînes
toString() {
let className = this.constructor.name;
return `${className} ${this.name}`.trim();
}

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. 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. 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. 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. 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. 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. Modules
 ES5 n’a pas de mécanisme de modularisation

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. 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. 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. 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. 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. Paramètres, littéraux objets, "Rest
operator", fonctions fléchées, "For-of"
EcmaScript 6

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. "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. "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. "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. "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. "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. "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. "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. "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. "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. "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. Modularisation, "Spread operator",
destructuration
EcmaScript 6

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. 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. 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. 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. 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. "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. "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. "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. "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. "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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. On commence quand ?
EcmaScript 6

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. Merci pour votre attention et…

76. …let’s rock with ES6 !
Merci pour votre attention et…

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