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.
ECMAScript 2015 aka ES6
A la découverte du nouveau JavaScript
Mathieu PARISOT
Développeur Web et Java - Formateur
http://matparisot.fr
@matparisot
https://www.google.com/+ParisotMathie...
ECMAScript = la spécification
JavaScript = une implémentation de la spécification
ECMA-262
1997 : Version 1 La version initiale
1999 : Version 3 Le JavaScript tel que vous le connaissez
2009 : Version 5 Mode stric...
A partir de la version 6 : 1 version par an
 nommage en fonction de l’année
ES2015
le renouveau du JavaScript
3 nouveautés qui vont changer votre manière de coder
Modules, classes et promesses
7 nouveautés qui vous simplifie la vie
...
Tous les trucs dont je n’ai pas le temps de parler en 50min 
Proxy, Map/Set, Symbol, tableaux typés et plein d’autres cho...
Les modules
AMD vs Commonjs vs ES2015
1 fichier = 1 module
<script type="module" src="link/to/your/module.js"></script>
export function visible() { }
function hidden() { }
export function visible() { }
function hidden() { }
export function visible() { }
function hidden() { }
import {visible} from 'myModule';
import {visible, otherElement, andAnother}
from 'myModule';
import * as myModuleNS from ...
import {visible} from 'myModule';
import {visible, otherElement, andAnother}
from 'myModule';
import * as myModuleNS from ...
import {visible} from 'myModule';
import {visible, otherElement, andAnother}
from 'myModule';
import * as myModuleNS from ...
import {visible} from 'myModule';
import {visible, otherElement, andAnother}
from 'myModule';
import * as myModuleNS from ...
visible();
myModuleNS.visible();
export function maFonction() {};
export class maClass {};
export var maVariable = "value";
export default function () {}
Les classes
Enfin une syntaxe classique
function MyClass() {
this.attribut = '';
this.implementationMethod = function() { };
}
MyClass.prototype.inheritedMethod =...
var obj = new MyClass();
obj.attribut;
obj.implementationMethod();
obj.inheritedMethod();
class ParentClass {
inheritedMethod() { }
}
class ParentClass {
inheritedMethod() { }
}
class MyClass extends ParentClass {
implementationMethod () {}
}
var obj = new MyClass();
obj.implementationMethod();
obj.inheritedMethod();
class MyClass {
constructor() {
this.attribut = '';
}
}
class MyClass extends ParentClass {
myMethod() {
super.parentAttribute = 'something';
}
}
class MyClass {
static myStaticMethod() { }
}
MyClass.myStaticMethod();
MyClass.myStaticMethod();
var obj = new MyClass();
obj.myMethod();
Tout est public
Pas d’abstraction
Sucre syntaxique
Les promesses
Simplifier le développement asynchrone
document.addEventListener('click',
function() {
console.log('someone clicked!!');
});
document.addEventListener('click', function() {
});
document.addEventListener('click', function() {
getFileName(function(filename) {
});
});
document.addEventListener('click', function() {
getFileName(function(filename) {
readFileLines(filename, function(lines) {...
document.addEventListener('click', function() {
getFileName(function(filename) {
readFileLines(filename, function(lines) {...
document.addEventListener('click', function() {
getFileName(function(filename) {
readFileLines(filename, function(lines) {...
Welcome to
Callbacks HELL
Une promesse est un objet
Une promesse est un objet
avec un état
Une promesse est un objet
avec un état
En attente
Tenue
Rompue
Acquittée
var getFileNamePr = new Promise(
);
var getFileNamePr = new Promise(function(resolve,
reject) {
});
var getFileNamePr = new Promise(function(resolve,
reject) {
getFileName(function(filename) {
});
});
var getFileNamePr = new Promise(function(resolve,
reject) {
getFileName(function(filename) {
if(filename)
resolve(filename...
var getFileNamePr = new Promise(function(resolve,
reject) {
getFileName(function(filename) {
if(filename)
resolve(filename...
then()
document.addEventListener('click', function() {
getFileNamePromesse
.then(readFileLinesPromesse)
.then(sendLinesPromesse)
...
document.addEventListener('click', function() {
getFileName(function(filename) {
readFileLines(filename, function(lines) {...
catch()
document.addEventListener('click', function()
{
getFileNamePromesse
.then(readFileLinesPromesse)
.then(sendLinesPromesse)
...
Promise.all();
Promise.all([getValue1Promesse,
getValue2Promesse,
getValue3Promesse])
.then(function(values) {
console.log(values[0]); //...
Promise.race();
http://documentup.com/kriskowal/q/
https://github.com/petkaantonov/bluebird
String templates
La fin des concaténations ?
var helloWorld = "hello" + 'world';
var nom = 'Mathieu';
console.log('Bonjour ' + nom);
var nom = 'Mathieu';
console.log(`Bonjour ${nom}`);
var nom = 'Mathieu';
console.log(`Bonjour ${nom}`);
var nom = 'Mathieu';
console.log(`Bonjour ${nom}`);
var display = '<div class="' + classes + ' ' + classesExt + '">'
+ '<span id="' + idSp + '">' + esc(text) + '</span>'
+ '<...
var display = `<div class="${classes} ${classesExt}">
<span id="${idSp}">${esc(text)}</span>
</div>`;
Paramètres par défaut
function myFunction(param1, param2, param3) {
param3 = param3 || '';
// ...
}
function myFunction(param1, param2, param3) {
param3 = param3 || '';
// ...
}
function myFunction(param1,
param2,
param3 = '') {
// ...
}
function myFunction(param1,
param2 = param1,
param3) { }
function myFunction(param1,
param2 = param1,
param3) { }
MyFunction(1,2,3);
// param1=1, param2=2, param3=3
function myFunction(param1,
param2 = param1,
param3) { }
MyFunction(1,undefined,3);
// param1=1, param2=1, param3=3
function myFunction(param1,
param2 = param1,
param3) { }
MyFunction(1,2);
// param1=1, param2=2, param3=undefined
Destructuring
Simplifier l’assignation de propriétés
var myArray = ['value1', 'value2', 'value3'];
var myArray = ['value1', 'value2', 'value3'];
var val1 = myArray[0];
var val2 = myArray[1];
var val3 = myArray[2];
var myArray = ['value1', 'value2', 'value3'];
var [val1, val2, val3] = myArray;
[] {}
var myObject = {
prop1: 'value1',
prop2: 'value2',
prop3: 5,
prop4: 'ignored'
};
var myObject = {
prop1: 'value1',
prop2: 'value2',
prop3: 5,
prop4: 'ignored'
};
var {prop1, prop2, prop3} = myObject;
var myObject = {
prop1: 'value1',
prop2: 'value2',
prop3: 5,
prop4: 'ignored'
};
var {val1 : prop1,
val2 : prop2,
val3 : p...
var settings = {
protocol: 'http://',
domain: 'matparisot.fr',
port: 80,
...
};
function buildUrlFromSettings(settings) {
return settings.protocol
+ settings.domain
+ ':'
+ settings.port;
}
function buildUrl({protocol, domain, port}) {
return protocol + domain + ':' + port;
}
function buildUrl({protocol = 'http://',
domain,
port = 80}) {
return `${protocol}${domain}:${port}`;
}
Fat arrow functions
Conserver le contexte dans les callbacks
['a','b','c'].filter(function(value) {
return value != 'a';
});
['a','b','c'].filter(function(value) {
return value != 'a';
});
['a','b','c'].filter(value => value != 'a');
['a','b','c'].filter(value => value != 'a');
['a','b','c'].filter(value => value != 'a');
['a','b','c'].filter(value => value != 'a');
['a','b','c'].filter(value => value != 'a');
['a','b','c'].filter((value) => {
console.log(value);
return value != 'a';
});
Size matters
function MyClass() {
this.param1 = 'value';
this.myMethod = function() {
console.log(this.param1); //'value'
setTimeout(fu...
function MyClass() {
this.param1 = 'value';
this.myMethod = function() {
console.log(this.param1); //'value'
setTimeout(fu...
function MyClass() {
this.param1 = 'value';
this.myMethod = function() {
console.log(this.param1); //'value'
setTimeout(fu...
function MyClass() {
this.param1 = 'value';
this.myMethod = function() {
var that = this;
console.log(this.param1); //'val...
function MyClass() {
this.param1 = 'value';
this.myMethod = function() {
console.log(this.param1); // 'value'
setTimeout((...
Block Scoping
Limiter les bogues liés a l’hoisting
var myGlobale = "hello";
function myFunction() {
var param1 = "value1";
if(true) {
var param2 = "value2";
}
console.log(my...
var myGlobale = "hello";
function myFunction() {
var param1 = "value1";
if(true) {
var param2 = "value2";
}
console.log(my...
var let
var myGlobale = "hello";
function myFunction() {
var param1 = "value1";
if(true) {
let param2 = "value2";
}
console.log(my...
var myGlobale = "hello";
function myFunction() {
var param1 = "value1";
if(true) {
let param2 = "value2";
}
console.log(my...
var myGlobale = "hello";
function myFunction() {
var param1 = "value1";
if(true) {
let param2 = "value2";
}
console.log(my...
const
Rest parameters
Paramètres infinis
...
function sum(a, b, ...values) {
var sum = a + b;
values.forEach((value) => sum += value);
return sum;
}
function sum(a, b, ...values) {
var sum = a + b;
values.forEach((value) => sum += value);
return sum;
}
sum(1,2); // 3
function sum(a, b, ...values) {
var sum = a + b;
values.forEach((value) => sum += value);
return sum;
}
sum(1,2); // 3
sum...
function sum(a, b, ...values) {
var sum = a + b;
values.forEach((value) => sum += value);
return sum;
}
sum(1,2); // 3
sum...
var [a,b,...value] = ['a','b','c','d','e'];
console.log(a); // 'a'
console.log(b); // 'b'
console.log(values); // ['c','d'...
Spreading
Eclatement de tableaux
...
function sum(a, b, ...values) {
var sum = a + b;
values.forEach((value) => sum += value);
return sum;
}
sum([1,2,3]); // r...
function sum(a, b, ...values) {
var sum = a + b;
values.forEach((value) => sum += value);
return sum;
}
sum(...[1,2,3]); /...
function sum(a, b, ...values) {
var sum = a + b;
values.forEach((value) => sum += value);
return sum;
}
var myArray = [1,2...
Itérateurs
Parcourir des colletions
̏ Un itérateur est un objet qui permet de
parcourir tous les éléments contenus dans
un autre objet, le plus souvent un con...
function createIntegerIterator(max) {
var curInt = 0;
return {
next: function() {
curInt++;
if(curInt <= max)
return {valu...
function createIntegerIterator(max) {
var curInt = 0;
return {
next: function() {
curInt++;
if(curInt <= max)
return {valu...
function createIntegerIterator(max) {
var curInt = 0;
return {
next: function() {
curInt++;
if(curInt <= max)
return {valu...
function createIntegerIterator(max) {
var curInt = 0;
return {
next: function() {
curInt++;
if(curInt <= max)
return {valu...
var it = createIntegerIterator(2);
console.log(it.next().value); // 1
console.log(it.next().value); // 2
console.log(it.ne...
for...of
for(var item of ['a','b','c']){
console.log(item);
}
function IntergerIterable (max) {
this[Symbol.iterator] = function() {
var curInt = 0;
return {
next: function() {
curInt+...
function IntergerIterable (max) {
this[Symbol.iterator] = function() {
var curInt = 0;
return {
next: function() {
curInt+...
function IntergerIterable (max) {
this[Symbol.iterator] = function() {
var curInt = 0;
return {
next: function() {
curInt+...
var myIterable = new IntegerIterable(2);
for(var i of myIterable) {
console.log(i);
}
Générateurs
Créer des itérateurs et bien plus
*
function* myGenerator() { }
function* myGenerator() { }
var myGenerator = function*() {};
function* myGenerator() { }
var myGenerator = function*() {};
var obj = {
gen: function*(){}
};
var iterator = myGenerator();
var iterator = myGenerator();
for(var i of iterator) {
// Faites ce que vous
// voulez de la valeur...
}
var iterator = myGenerator();
var elem = iterator.next();
if(!elem.done) {
console.log(elem.value);
}
yield
function* myGenerator()
{
yield 1;
}
function* myGenerator()
{
yield 1;
yield 2;
yield 3;
}
function* myGenerator()
{
yield 1;
yield 2;
yield 3;
}
var iterator = myGenerator();
function* myGenerator()
{
yield 1;
yield 2;
yield 3;
}
var iterator = myGenerator();
var elem = iterator.next();
elem = {
...
function* myGenerator()
{
yield 1;
yield 2;
yield 3;
}
var iterator = myGenerator();
var elem = iterator.next();
elem = it...
function* myGenerator()
{
yield 1;
yield 2;
yield 3;
}
var iterator = myGenerator();
var elem = iterator.next();
elem = it...
function* myGenerator()
{
yield 1;
yield 2;
yield 3;
}
var iterator = myGenerator();
var elem = iterator.next();
elem = it...
function IntergerIterable (max) {
this[Symbol.iterator] = function() {
var curInt = 0;
return {
next: function() {
curInt+...
function* integerGenerator(max)
{
var curInt = 0;
while(curInt < max) {
curInt++;
yield curInt;
}
};
var myIterabale = integerGenerator(2);
for(var i of myIterable) {
console.log(i);
}
return & throw
function* myGenerator() {
yield 1;
yield 2;
if(checkSomething()) {
return;
}
yield 3;
}
function* myGenerator() {
yield 1;
yield 2;
if(checkSomething()) {
throw new Error('arrrrrgg');
}
yield 3;
}
next(value)
function* consoleLog() {
while(true) {
var value = yield;
console.log(`received : ${value}`);
}
}
function* consoleLog() {
while(true) {
var value = yield;
console.log(`received : ${value}`);
}
}
function* consoleLog() {
while(true) {
var value = yield;
console.log(`received : ${value}`);
}
}
function* consoleLog() {
while(true) {
var value = yield;
console.log(…);
}
}
var it = consoleLog();
function* consoleLog() {
while(true) {
var value = yield;
console.log(…);
}
}
var it = consoleLog();
it.next();
function* consoleLog() {
while(true) {
var value = yield;
console.log(…);
}
}
var it = consoleLog();
it.next();
it.next(2);
function* consoleLog() {
while(true) {
var value = yield;
console.log(…);
}
}
var it = consoleLog();
it.next();
it.next(2)...
function* consoleLog() {
while(true) {
var value = yield;
console.log(…);
}
}
var it = consoleLog();
it.next();
it.next(2)...
function* consoleLog() {
while(true) {
var value = yield;
console.log(…);
}
}
var it = consoleLog();
it.next();
it.next(2)...
function* consoleLog() {
while(true) {
var value = yield;
console.log(…);
}
}
var it = consoleLog();
it.next();
it.next(2)...
return(value)
throw(error)
function* integerGenerator()
{
var curInt = 0;
while(true) {
curInt++;
yield curInt;
}
}
var it = integerGenerator();
for(var i of it) {
console.log(i);
if(i >= 2) it.return();
}
Des générateurs
de générateurs…
yield*
function* gen123() {
yield 1;
yield 2;
yield 3;
}
function* gen123456() {
yield* gen123();
yield 4;
yield 5;
yield 6;
}
Et le reste
Car le chrono tourne 
Symbol()
const COLOR_RED = Symbol();
const COLOR_ORANGE = Symbol();
const COLOR_YELLOW = Symbol();
new Map()
new Set()
new WeakMap()
new WeakSet()
Uint8Array
Uint16Array
Uint32Array
Int8Array
Int16Array
Int32Array
Float32Array
Float64Array
Proxy Objects
Un objetClient
Appel
Retour
Un objetClient Proxy
var target = {};
var handler = {
get(target, propKey, receiver) {
console.log(`GET ${propKey}`);
return 123;
}
};
var proxy = new Proxy(target, handler);
var value = proxy.toto;
value = 123
Utiliser ES2015
Navigateurs, nodeJs et compatibilité
https://kangax.github.io/compat-table/es6/
63%
80%
71%
54%
53% (0.12 : 17%)
https://babeljs.io/
ES2015 ES5
$ babel script.js --out-file script-compiled.js
/**
* Hook to have ES6 in node js...
* The real stuff starts in startES6.js
*/
require("babel/register");
var startEs6 = r...
La conclusion
ES5
ES2015
I
Standards
Proposer des
fondations solides
Les changements qui vont impacter votre code :
Modules
export function myFunction()
import {myFunction} from 'module'
Clas...
Les changements qui vont vous simplifier la vie :
String templates
`hello ${world}`
Destructuring
var [val1,val2] = ['valu...
Les changements qui vont vous simplifier la vie :
Block scoping
let scopedVar = "value";
const scopedConst = "value";
Para...
Expérimentez !
http://exploringjs.com/
http://matparisot.fr/3-nouveautes-majeurs-decmascript-2015-que-vous-allez-adorer/
http://matparisot.fr/7-nouveautes-qui-vo...
@matparisot - http://matparisot.fr
http://matparisot.fr/3-nouveautes-majeurs-decmascript-2015-que-vous-allez-adorer/
http:...
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript
Prochain SlideShare
Chargement dans…5
×

ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript

1 534 vues

Publié le

Ma présentation sur les nouveautés apportées par ES2015

Publié dans : Technologie
  • Soyez le premier à commenter

ECMAscript 2015 aka ES6 : à la découverte du nouveau javascript

  1. 1. ECMAScript 2015 aka ES6 A la découverte du nouveau JavaScript
  2. 2. Mathieu PARISOT Développeur Web et Java - Formateur http://matparisot.fr @matparisot https://www.google.com/+ParisotMathieu http://humantalks.com http://brownbaglunch.fr
  3. 3. ECMAScript = la spécification JavaScript = une implémentation de la spécification
  4. 4. ECMA-262
  5. 5. 1997 : Version 1 La version initiale 1999 : Version 3 Le JavaScript tel que vous le connaissez 2009 : Version 5 Mode strict 2011 : Version 5.1 Début de l’unification 2015 : Version 6 Harmony
  6. 6. A partir de la version 6 : 1 version par an  nommage en fonction de l’année
  7. 7. ES2015 le renouveau du JavaScript
  8. 8. 3 nouveautés qui vont changer votre manière de coder Modules, classes et promesses 7 nouveautés qui vous simplifie la vie String templates, destructuring, paramètres par défaut, fat arrow functions, block scoping et constantes, paramètres rest et spreading La nouveauté qui donne mal à la tête Itérateurs et générateurs
  9. 9. Tous les trucs dont je n’ai pas le temps de parler en 50min  Proxy, Map/Set, Symbol, tableaux typés et plein d’autres choses Comment utiliser tout ça dès maintenant Navigateurs, nodeJs, compiler vers ES5
  10. 10. Les modules AMD vs Commonjs vs ES2015
  11. 11. 1 fichier = 1 module
  12. 12. <script type="module" src="link/to/your/module.js"></script>
  13. 13. export function visible() { } function hidden() { }
  14. 14. export function visible() { } function hidden() { }
  15. 15. export function visible() { } function hidden() { }
  16. 16. import {visible} from 'myModule'; import {visible, otherElement, andAnother} from 'myModule'; import * as myModuleNS from 'myModule';
  17. 17. import {visible} from 'myModule'; import {visible, otherElement, andAnother} from 'myModule'; import * as myModuleNS from 'myModule';
  18. 18. import {visible} from 'myModule'; import {visible, otherElement, andAnother} from 'myModule'; import * as myModuleNS from 'myModule';
  19. 19. import {visible} from 'myModule'; import {visible, otherElement, andAnother} from 'myModule'; import * as myModuleNS from 'myModule';
  20. 20. visible(); myModuleNS.visible();
  21. 21. export function maFonction() {}; export class maClass {}; export var maVariable = "value";
  22. 22. export default function () {}
  23. 23. Les classes Enfin une syntaxe classique
  24. 24. function MyClass() { this.attribut = ''; this.implementationMethod = function() { }; } MyClass.prototype.inheritedMethod = function() { };
  25. 25. var obj = new MyClass(); obj.attribut; obj.implementationMethod(); obj.inheritedMethod();
  26. 26. class ParentClass { inheritedMethod() { } }
  27. 27. class ParentClass { inheritedMethod() { } } class MyClass extends ParentClass { implementationMethod () {} }
  28. 28. var obj = new MyClass(); obj.implementationMethod(); obj.inheritedMethod();
  29. 29. class MyClass { constructor() { this.attribut = ''; } }
  30. 30. class MyClass extends ParentClass { myMethod() { super.parentAttribute = 'something'; } }
  31. 31. class MyClass { static myStaticMethod() { } }
  32. 32. MyClass.myStaticMethod();
  33. 33. MyClass.myStaticMethod(); var obj = new MyClass(); obj.myMethod();
  34. 34. Tout est public
  35. 35. Pas d’abstraction
  36. 36. Sucre syntaxique
  37. 37. Les promesses Simplifier le développement asynchrone
  38. 38. document.addEventListener('click', function() { console.log('someone clicked!!'); });
  39. 39. document.addEventListener('click', function() { });
  40. 40. document.addEventListener('click', function() { getFileName(function(filename) { }); });
  41. 41. document.addEventListener('click', function() { getFileName(function(filename) { readFileLines(filename, function(lines) { }); }); });
  42. 42. document.addEventListener('click', function() { getFileName(function(filename) { readFileLines(filename, function(lines) { sendLines(lines,function(returnCode) { }); }); }); });
  43. 43. document.addEventListener('click', function() { getFileName(function(filename) { readFileLines(filename, function(lines) { sendLines(lines,function(returnCode) { // on peut continuer l’exécution // après l'envoi... }); }); }); });
  44. 44. Welcome to Callbacks HELL
  45. 45. Une promesse est un objet
  46. 46. Une promesse est un objet avec un état
  47. 47. Une promesse est un objet avec un état En attente Tenue Rompue Acquittée
  48. 48. var getFileNamePr = new Promise( );
  49. 49. var getFileNamePr = new Promise(function(resolve, reject) { });
  50. 50. var getFileNamePr = new Promise(function(resolve, reject) { getFileName(function(filename) { }); });
  51. 51. var getFileNamePr = new Promise(function(resolve, reject) { getFileName(function(filename) { if(filename) resolve(filename); else reject(); }); });
  52. 52. var getFileNamePr = new Promise(function(resolve, reject) { getFileName(function(filename) { if(filename) resolve(filename); else reject(); }); });
  53. 53. then()
  54. 54. document.addEventListener('click', function() { getFileNamePromesse .then(readFileLinesPromesse) .then(sendLinesPromesse) .then(function(returnCode) { // On peut continuer l’exécution // après l'envoi... }); });
  55. 55. document.addEventListener('click', function() { getFileName(function(filename) { readFileLines(filename, function(lines) { sendLines(lines,function(returnCode) { // on peut continuer l’exécution // après l'envoi... }); }); }); });
  56. 56. catch()
  57. 57. document.addEventListener('click', function() { getFileNamePromesse .then(readFileLinesPromesse) .then(sendLinesPromesse) .then(function(returnCode) { // on peut continuer l’exécution // après l'envoi... }) .catch(function(error) { console.log(error); });; });
  58. 58. Promise.all();
  59. 59. Promise.all([getValue1Promesse, getValue2Promesse, getValue3Promesse]) .then(function(values) { console.log(values[0]); // value 1 console.log(values[1]); // value 2 console.log(values[2]); // value 3 });
  60. 60. Promise.race();
  61. 61. http://documentup.com/kriskowal/q/ https://github.com/petkaantonov/bluebird
  62. 62. String templates La fin des concaténations ?
  63. 63. var helloWorld = "hello" + 'world';
  64. 64. var nom = 'Mathieu'; console.log('Bonjour ' + nom);
  65. 65. var nom = 'Mathieu'; console.log(`Bonjour ${nom}`);
  66. 66. var nom = 'Mathieu'; console.log(`Bonjour ${nom}`);
  67. 67. var nom = 'Mathieu'; console.log(`Bonjour ${nom}`);
  68. 68. var display = '<div class="' + classes + ' ' + classesExt + '">' + '<span id="' + idSp + '">' + esc(text) + '</span>' + '</div>';
  69. 69. var display = `<div class="${classes} ${classesExt}"> <span id="${idSp}">${esc(text)}</span> </div>`;
  70. 70. Paramètres par défaut
  71. 71. function myFunction(param1, param2, param3) { param3 = param3 || ''; // ... }
  72. 72. function myFunction(param1, param2, param3) { param3 = param3 || ''; // ... }
  73. 73. function myFunction(param1, param2, param3 = '') { // ... }
  74. 74. function myFunction(param1, param2 = param1, param3) { }
  75. 75. function myFunction(param1, param2 = param1, param3) { } MyFunction(1,2,3); // param1=1, param2=2, param3=3
  76. 76. function myFunction(param1, param2 = param1, param3) { } MyFunction(1,undefined,3); // param1=1, param2=1, param3=3
  77. 77. function myFunction(param1, param2 = param1, param3) { } MyFunction(1,2); // param1=1, param2=2, param3=undefined
  78. 78. Destructuring Simplifier l’assignation de propriétés
  79. 79. var myArray = ['value1', 'value2', 'value3'];
  80. 80. var myArray = ['value1', 'value2', 'value3']; var val1 = myArray[0]; var val2 = myArray[1]; var val3 = myArray[2];
  81. 81. var myArray = ['value1', 'value2', 'value3']; var [val1, val2, val3] = myArray;
  82. 82. [] {}
  83. 83. var myObject = { prop1: 'value1', prop2: 'value2', prop3: 5, prop4: 'ignored' };
  84. 84. var myObject = { prop1: 'value1', prop2: 'value2', prop3: 5, prop4: 'ignored' }; var {prop1, prop2, prop3} = myObject;
  85. 85. var myObject = { prop1: 'value1', prop2: 'value2', prop3: 5, prop4: 'ignored' }; var {val1 : prop1, val2 : prop2, val3 : prop3} = myObject;
  86. 86. var settings = { protocol: 'http://', domain: 'matparisot.fr', port: 80, ... };
  87. 87. function buildUrlFromSettings(settings) { return settings.protocol + settings.domain + ':' + settings.port; }
  88. 88. function buildUrl({protocol, domain, port}) { return protocol + domain + ':' + port; }
  89. 89. function buildUrl({protocol = 'http://', domain, port = 80}) { return `${protocol}${domain}:${port}`; }
  90. 90. Fat arrow functions Conserver le contexte dans les callbacks
  91. 91. ['a','b','c'].filter(function(value) { return value != 'a'; });
  92. 92. ['a','b','c'].filter(function(value) { return value != 'a'; });
  93. 93. ['a','b','c'].filter(value => value != 'a');
  94. 94. ['a','b','c'].filter(value => value != 'a');
  95. 95. ['a','b','c'].filter(value => value != 'a');
  96. 96. ['a','b','c'].filter(value => value != 'a');
  97. 97. ['a','b','c'].filter(value => value != 'a');
  98. 98. ['a','b','c'].filter((value) => { console.log(value); return value != 'a'; });
  99. 99. Size matters
  100. 100. function MyClass() { this.param1 = 'value'; this.myMethod = function() { console.log(this.param1); //'value' setTimeout(function() { console.log(this.param1); // undefined },10); }; }
  101. 101. function MyClass() { this.param1 = 'value'; this.myMethod = function() { console.log(this.param1); //'value' setTimeout(function() { console.log(this.param1); // undefined },10); }; }
  102. 102. function MyClass() { this.param1 = 'value'; this.myMethod = function() { console.log(this.param1); //'value' setTimeout(function() { console.log(this.param1); // undefined },10); }; }
  103. 103. function MyClass() { this.param1 = 'value'; this.myMethod = function() { var that = this; console.log(this.param1); //'value' setTimeout(function() { console.log(that.param1); // ‘value’ },10); }; }
  104. 104. function MyClass() { this.param1 = 'value'; this.myMethod = function() { console.log(this.param1); // 'value' setTimeout(() => { console.log(this.param1); // 'value' },10); }; }
  105. 105. Block Scoping Limiter les bogues liés a l’hoisting
  106. 106. var myGlobale = "hello"; function myFunction() { var param1 = "value1"; if(true) { var param2 = "value2"; } console.log(myGlobale); console.log(param1); console.log(param2); }
  107. 107. var myGlobale = "hello"; function myFunction() { var param1 = "value1"; if(true) { var param2 = "value2"; } console.log(myGlobale); // affiche "hello" console.log(param1); // affiche "value1" console.log(param2); // affiche "value2" }
  108. 108. var let
  109. 109. var myGlobale = "hello"; function myFunction() { var param1 = "value1"; if(true) { let param2 = "value2"; } console.log(myGlobale); console.log(param1); console.log(param2); }
  110. 110. var myGlobale = "hello"; function myFunction() { var param1 = "value1"; if(true) { let param2 = "value2"; } console.log(myGlobale); console.log(param1); console.log(param2); }
  111. 111. var myGlobale = "hello"; function myFunction() { var param1 = "value1"; if(true) { let param2 = "value2"; } console.log(myGlobale); // affiche "hello" console.log(param1); // affiche "value1" console.log(param2); // ReferenceError: param2 is not defined }
  112. 112. const
  113. 113. Rest parameters Paramètres infinis
  114. 114. ...
  115. 115. function sum(a, b, ...values) { var sum = a + b; values.forEach((value) => sum += value); return sum; }
  116. 116. function sum(a, b, ...values) { var sum = a + b; values.forEach((value) => sum += value); return sum; } sum(1,2); // 3
  117. 117. function sum(a, b, ...values) { var sum = a + b; values.forEach((value) => sum += value); return sum; } sum(1,2); // 3 sum(1,2,3); // 6
  118. 118. function sum(a, b, ...values) { var sum = a + b; values.forEach((value) => sum += value); return sum; } sum(1,2); // 3 sum(1,2,3); // 6 sum(1,2,3,4); // 10
  119. 119. var [a,b,...value] = ['a','b','c','d','e']; console.log(a); // 'a' console.log(b); // 'b' console.log(values); // ['c','d','e']
  120. 120. Spreading Eclatement de tableaux
  121. 121. ...
  122. 122. function sum(a, b, ...values) { var sum = a + b; values.forEach((value) => sum += value); return sum; } sum([1,2,3]); // renvoi "1,2,3undefined"
  123. 123. function sum(a, b, ...values) { var sum = a + b; values.forEach((value) => sum += value); return sum; } sum(...[1,2,3]); // 6
  124. 124. function sum(a, b, ...values) { var sum = a + b; values.forEach((value) => sum += value); return sum; } var myArray = [1,2,3]; sum(...myArray); // 6
  125. 125. Itérateurs Parcourir des colletions
  126. 126. ̏ Un itérateur est un objet qui permet de parcourir tous les éléments contenus dans un autre objet, le plus souvent un conteneur ̋
  127. 127. function createIntegerIterator(max) { var curInt = 0; return { next: function() { curInt++; if(curInt <= max) return {value: curInt, done: false}; else return {done: true}; } } };
  128. 128. function createIntegerIterator(max) { var curInt = 0; return { next: function() { curInt++; if(curInt <= max) return {value: curInt, done: false}; else return {done: true}; } } };
  129. 129. function createIntegerIterator(max) { var curInt = 0; return { next: function() { curInt++; if(curInt <= max) return {value: curInt, done: false}; else return {done: true}; } } };
  130. 130. function createIntegerIterator(max) { var curInt = 0; return { next: function() { curInt++; if(curInt <= max) return {value: curInt, done: false}; else return {done: true}; } } };
  131. 131. var it = createIntegerIterator(2); console.log(it.next().value); // 1 console.log(it.next().value); // 2 console.log(it.next().done); // true
  132. 132. for...of
  133. 133. for(var item of ['a','b','c']){ console.log(item); }
  134. 134. function IntergerIterable (max) { this[Symbol.iterator] = function() { var curInt = 0; return { next: function() { curInt++; if(curInt <= max) return { value: curInt, done: false}; else return {done: true}; }}};};
  135. 135. function IntergerIterable (max) { this[Symbol.iterator] = function() { var curInt = 0; return { next: function() { curInt++; if(curInt <= max) return { value: curInt, done: false}; else return {done: true}; }}};};
  136. 136. function IntergerIterable (max) { this[Symbol.iterator] = function() { var curInt = 0; return { next: function() { curInt++; if(curInt <= max) return { value: curInt, done: false}; else return {done: true}; }}};};
  137. 137. var myIterable = new IntegerIterable(2); for(var i of myIterable) { console.log(i); }
  138. 138. Générateurs Créer des itérateurs et bien plus
  139. 139. *
  140. 140. function* myGenerator() { }
  141. 141. function* myGenerator() { } var myGenerator = function*() {};
  142. 142. function* myGenerator() { } var myGenerator = function*() {}; var obj = { gen: function*(){} };
  143. 143. var iterator = myGenerator();
  144. 144. var iterator = myGenerator(); for(var i of iterator) { // Faites ce que vous // voulez de la valeur... }
  145. 145. var iterator = myGenerator(); var elem = iterator.next(); if(!elem.done) { console.log(elem.value); }
  146. 146. yield
  147. 147. function* myGenerator() { yield 1; }
  148. 148. function* myGenerator() { yield 1; yield 2; yield 3; }
  149. 149. function* myGenerator() { yield 1; yield 2; yield 3; } var iterator = myGenerator();
  150. 150. function* myGenerator() { yield 1; yield 2; yield 3; } var iterator = myGenerator(); var elem = iterator.next(); elem = { value: 1, done: false }
  151. 151. function* myGenerator() { yield 1; yield 2; yield 3; } var iterator = myGenerator(); var elem = iterator.next(); elem = iterator.next(); elem = { value: 2, done: false }
  152. 152. function* myGenerator() { yield 1; yield 2; yield 3; } var iterator = myGenerator(); var elem = iterator.next(); elem = iterator.next(); elem = iterator.next(); elem = { value: 3, done: false }
  153. 153. function* myGenerator() { yield 1; yield 2; yield 3; } var iterator = myGenerator(); var elem = iterator.next(); elem = iterator.next(); elem = iterator.next(); elem = iterator.next(); elem = { value: undefined, done: true }
  154. 154. function IntergerIterable (max) { this[Symbol.iterator] = function() { var curInt = 0; return { next: function() { curInt++; if(curInt <= max) return { value: curInt, done: false}; else return {done: true}; }}};};
  155. 155. function* integerGenerator(max) { var curInt = 0; while(curInt < max) { curInt++; yield curInt; } };
  156. 156. var myIterabale = integerGenerator(2); for(var i of myIterable) { console.log(i); }
  157. 157. return & throw
  158. 158. function* myGenerator() { yield 1; yield 2; if(checkSomething()) { return; } yield 3; }
  159. 159. function* myGenerator() { yield 1; yield 2; if(checkSomething()) { throw new Error('arrrrrgg'); } yield 3; }
  160. 160. next(value)
  161. 161. function* consoleLog() { while(true) { var value = yield; console.log(`received : ${value}`); } }
  162. 162. function* consoleLog() { while(true) { var value = yield; console.log(`received : ${value}`); } }
  163. 163. function* consoleLog() { while(true) { var value = yield; console.log(`received : ${value}`); } }
  164. 164. function* consoleLog() { while(true) { var value = yield; console.log(…); } } var it = consoleLog();
  165. 165. function* consoleLog() { while(true) { var value = yield; console.log(…); } } var it = consoleLog(); it.next();
  166. 166. function* consoleLog() { while(true) { var value = yield; console.log(…); } } var it = consoleLog(); it.next(); it.next(2);
  167. 167. function* consoleLog() { while(true) { var value = yield; console.log(…); } } var it = consoleLog(); it.next(); it.next(2); "received : 2"
  168. 168. function* consoleLog() { while(true) { var value = yield; console.log(…); } } var it = consoleLog(); it.next(); it.next(2); "received : 2"
  169. 169. function* consoleLog() { while(true) { var value = yield; console.log(…); } } var it = consoleLog(); it.next(); it.next(2); it.next(3); "received : 2"
  170. 170. function* consoleLog() { while(true) { var value = yield; console.log(…); } } var it = consoleLog(); it.next(); it.next(2); it.next(3); "received : 3"
  171. 171. return(value) throw(error)
  172. 172. function* integerGenerator() { var curInt = 0; while(true) { curInt++; yield curInt; } }
  173. 173. var it = integerGenerator(); for(var i of it) { console.log(i); if(i >= 2) it.return(); }
  174. 174. Des générateurs de générateurs…
  175. 175. yield*
  176. 176. function* gen123() { yield 1; yield 2; yield 3; }
  177. 177. function* gen123456() { yield* gen123(); yield 4; yield 5; yield 6; }
  178. 178. Et le reste Car le chrono tourne 
  179. 179. Symbol()
  180. 180. const COLOR_RED = Symbol(); const COLOR_ORANGE = Symbol(); const COLOR_YELLOW = Symbol();
  181. 181. new Map() new Set() new WeakMap() new WeakSet()
  182. 182. Uint8Array Uint16Array Uint32Array Int8Array Int16Array Int32Array Float32Array Float64Array
  183. 183. Proxy Objects
  184. 184. Un objetClient Appel Retour
  185. 185. Un objetClient Proxy
  186. 186. var target = {};
  187. 187. var handler = { get(target, propKey, receiver) { console.log(`GET ${propKey}`); return 123; } };
  188. 188. var proxy = new Proxy(target, handler);
  189. 189. var value = proxy.toto; value = 123
  190. 190. Utiliser ES2015 Navigateurs, nodeJs et compatibilité
  191. 191. https://kangax.github.io/compat-table/es6/
  192. 192. 63% 80% 71% 54% 53% (0.12 : 17%)
  193. 193. https://babeljs.io/
  194. 194. ES2015 ES5
  195. 195. $ babel script.js --out-file script-compiled.js
  196. 196. /** * Hook to have ES6 in node js... * The real stuff starts in startES6.js */ require("babel/register"); var startEs6 = require("./startES6"); startEs6();
  197. 197. La conclusion
  198. 198. ES5 ES2015
  199. 199. I Standards
  200. 200. Proposer des fondations solides
  201. 201. Les changements qui vont impacter votre code : Modules export function myFunction() import {myFunction} from 'module' Classes class MyClass extends Parent {} Promesses var prom = new Promise(function(resolve, reject)) {} prom.then(otherPromise); Générateurs function* myGenerator { yield 'value'; }
  202. 202. Les changements qui vont vous simplifier la vie : String templates `hello ${world}` Destructuring var [val1,val2] = ['value1','value2']; var {prop1,prop2} = {prop1:'value1', prop2: 'value2'}; Paramètres par défaut function myFunction(param1, param2 = 'value') {} Fat arrow functions (param) => { expr; }
  203. 203. Les changements qui vont vous simplifier la vie : Block scoping let scopedVar = "value"; const scopedConst = "value"; Paramètres Rest function myfunction(param1, ...params) {} Spreading ...['value1','value2']
  204. 204. Expérimentez !
  205. 205. http://exploringjs.com/
  206. 206. http://matparisot.fr/3-nouveautes-majeurs-decmascript-2015-que-vous-allez-adorer/ http://matparisot.fr/7-nouveautes-qui-vont-vous-simplifier-la-vie-en-es-2015/ http://matparisot.fr/iterateurs-et-generateurs-avec-ecmascript-6-2015/
  207. 207. @matparisot - http://matparisot.fr http://matparisot.fr/3-nouveautes-majeurs-decmascript-2015-que-vous-allez-adorer/ http://matparisot.fr/7-nouveautes-qui-vont-vous-simplifier-la-vie-en-es-2015/ http://matparisot.fr/iterateurs-et-generateurs-avec-ecmascript-6-2015/ http://humantalks.com http://brownbaglunch.fr

×