Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Upcoming SlideShare
Loading in …5
×

Change mind about JS

721 views

Published on

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

  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×