JavaScript est le langage le plus utilisé dans le monde. L'avènement de ES6 puis ES7, la montée en puissance de node.js coté backend et l'apparition de transpillers comme TypeScript vont encore augmenter le potentiel du dév web. TypeScript permet dès aujourd'hui de bénéficier de nouvelles fonctionnalités et de nouveaux outils pour être encore plus productif. Nous verrons ce qu'il peut apporter dès aujourd'hui : Décorateurs, Metadata ou Non nullables Types. Nous verrons enfin ce que pourrait devenir JavaScript en abordant ASM.JS et WebAssembly.

1. LE FUTUR DE JAVASCRIPT
ET
T YPESCRIPT 2.1
S E B A S T I E N P E R T U S ( @ S E B A S T I E N P E R T U S )
T E C H N I C A L E VA N G E L I S T M I C R O S O F T F R A N C E
&

2. BRENDAN EICH ANDERS HEJLSBERG
DÉDICACE SPÉCIALE À DEUX POTES
Créateur de Javascript
CTO / CEO de la fondation Mozilla
Créateur de Brave Software
Créateur de C#
Technical Fellow @ Microsoft
Créateur de TypeScript

3. JAVA S C R I P T : L E P R E M I E R L A N G AG E D U M O N D E

4. ES6 OU ECMASCRIPT 2015 OU ES2015
ES6 est
probablement la
plus importante
mise à jour de
JavaScript
BH : We want to go faster. Every year, a new spec that will be shipped in nighty versions of moderns browsers

5. ES6 / ES7 / ES2015 / ES2016
« ES7 is ES2016 and ES6 is ES2015,
too long for twitter …
How many people here are going
to say ES2016 ?
Nobody, good ! »

6. EVOLUTION D’ECMASCRIPT
ES 8
ES 7
(ES 2016)
ES 6
(ES 2015)
ES 5
ES 3
Core features
1997 ~~ 1999
new functions
strict mode, json
2009
class, promises, generators,
arrow functions, new
syntax and concepts …
2015
Exponential (**),
array.includes,
2016

7. OÙ QU’ON EN EST LÀ ?

8. ES6 : IMPLÉMENTATION DE ES6 DANS LES NAVIGATEURS
Implémentation supérieure à 93%
Voir supérieure à 95% pour les
nighty builds
http://kangax.github.io/compat-table/es6/

9. EMERGENCE DES
TRANSPILERS :
TYPESCRIPT 2.0

10. TRANSPILER COMPILER
TRANSPILER VS COMPILER
Crée à partir d’un source code,
un code avec un niveau
d’abstraction différent
Crée à partir d’un source code, un
code IL, binaire, d’un autre
langage (gnéralement plus bas
niveau)
"CoffeeScript is to Ruby as TypeScript is to Java/C#/C++." -
Luke Hoban

11. TYPESCRIPT:
JAVASCRIPT QUI
SCALE.

12. UN SUR-ENSEMBLE STATIQUE DE
JAVASCRIPT QUI COMPILE VERS DU VRAI
JAVASCRIPT
…
OU TRANSPILE 

13. N AV I G AT E U R
H ÔT E
O S

14. OPEN SOURCE.

16. TYPESCRIPT : COMBLER LE GAP

17. VOTRE IDE PRÉFÉRÉ ?

18. EN UN AN, PLUS DE 4 RELEASES
1.5
1.6
1.7
1.8

19. NOUVEAUTÉS TYPESCRIPT 2.1
TypeScript 2.0
Types Non-nullable
Control flow : Analyse statique de code
Async/await : Supporté à partir de ES6
Propriétés Readonly
Constructeur privé ou protected
Type “never”
TypeScript 2.1
async / await : supporté pour les version ES3 / ES5 (besoin d’un polyfill de Promise)
Support target ES7, ES8, ESNext (flag –target)
Méthodes d’extensions
Object spread / rest

20. ES6 / ES7
C E Q U E N O U S A T T E N D I O N S E T C E Q U E N O U S A U R O N S

21. ES6
LES FEATURES LES PLUS PLÉBISCITÉES
Modules
Class
Promise

22. ES6

23. ES6 : ITERATION
var rows = ['Alexandre', 'Betty', 'Bruno', 'Charles', 'Christophe', 'Damien',
'Etienne', 'Julien', 'Mitch', 'Pierre', 'Sébastien', 'Téodore', 'Valérie'];
for (let person of rows) {
console.log(person);
}

24. ES6 PARAMETRES PAR DÉFAUT
PARAMÈTRES, REST PARAMETER, SPREAD OPERATOR
function f1(x, y = 7, z = 42) {
return x + y + z
}
function f2(x, y, ...a) {
return (x + y) * a.length
}
f2(1, 2, "hello", true, 7) === 9
var params = ["hello", true, 7]
var other = [1, 2, ...params] // [ 1, 2, "hello", true, 7 ]
f2(1, 2, ...other) === 15

25. ES6 : MAP / SET
let s = new Set()
s.add("hello").add("goodbye").add("hello")
s.size === 2
s.has("hello") === true
for (let key of s.values()) // dans l’ordre d’insertion
console.log(key)
// hello
// goodbye
let m = new Map()
m.set("hello", 42)
var s = { a: 1 };
m.set(s, 34)
for (let val of m.values())
console.log(val)

26. ES6 : ARROW FUNCTIONS
var rows = ['Alexandre', 'Betty', 'Bruno', 'Charles', 'Christophe', 'Damien', 'Etienne',
'Julien', 'Mitch', 'Pierre', 'Sébastien', 'Téodore', 'Valérie'];
var aPersons1 = rows.map(function (p) { return p.startsWith('A'); });
var aPersons2 = rows.map((p) => { return p.startsWith('A'); });
var aPersons3 = rows.map(p => p.startsWith('A'));

27. ES6 : LEXICAL THIS
class Persons {
rows : ['Alexandre', 'Betty', 'Bruno', 'Charles', 'Christophe', 'Damien', 'Etienne',
'Julien', 'Mitch', 'Pierre', 'Sébastien', 'Téodore', 'Valérie'];
select(v) {
this.rows.forEach(r => {
if (r == v) {
this._selected = r;
}
});
}
}
var _this = this;
this.rows.forEach(function (r) {
if (r == v) {
_this._selected = r;
}
});

28. ES6 : STRING TEMPLATE
var person = {
name: 'Sebastien',
vocation: 'developer',
isFemale: false,
getHobby: () => `${this.name} is a ${this.vocation} advocate. ${(this.isFemale ?
'she' : 'he')} is awesome`
};
var _this = this;
var person = {
name: 'Sebastien',
vocation: 'developer',
isFemale: false,
getHobby: function () { return (_this.name + " is a " + _this.vocation + " advocate.
" + (_this.isFemale ? 'she' : 'he') + " is awesome"); }
};

29. ES6 : CLASS
class Shape {
constructor(id, x, y) {
this.id = id;
this.move(x, y);
this.width = 10;
}
move(x, y) {
this.x = x;
this.y = y;
}
static DefaultShape() { return new Shape(0, 100, 100); }
set width(width) { this._width = width; }
get width() { return this.width; }
}

30. ES6 : MODULES
PAR DÉFAUT DANS ES6, IMPLÉMENTÉE DANS ES5
CommonJS
• Implémentation des modules dans Node.js
AMD (Asynchronous Module Definition)
• Implémentation dans require.js pour des modules coté front end.
Le but des modules ES6 est de réunir au mieux ces deux mondes :
• Une syntaxe compacte à la CommonJS
• Peut être chargée de manière asynchrone à la AMD

31. ES6 : MODULES
IMPORT / EXPORT
import {Person} from "./People";
import {Person, Material as M} from "./People";
import * as People from "./People";
import guy from './People';

32. DEMOLes Modules dans ES6

33. ES5 : ASYNC PROGRAMMING
/*
Callback Hell
*/
myFirstOperation(function(err, firstResult){
mySecondOperation(firstResult, function(err, secondResult){
myThirdOperation(secondResult, function(err, thirdResult){
/*
HELL !!!
*/
});
});
});

34. ES6 : ASYNC PROGRAMMING
/*
Promises
*/
myFirstPromise()
.then(firstResult => mySecondPromise(firstResult))
.then(secondResult => myThirdPromise(secondResult))
.then(thirdResult => {
/*
Code utilisant le 3ème résultat
*/
}).catch(err => {
/*
Gestion de l’erreur, quelque soit l’étape où elle a eu lieu
*/
});

35. ES6 : ASYNC PROGRAMMING
/*
Promises
*/
var myFirstPromise = new Promise(function (resolve, reject) {
// Do something
var everyhtingIsOk = true;
var result = { a: 12, b: "ok" };
if (everyhtingIsOk) {
resolve(result);
} else {
reject(Error('Something went wrong'));
}
});

36. DEMOLes Promise(s) dans ES6

37. ES6 : GENERATOR
SI ON A LE TEMPS, PETITE DÉMO ?
*filter(filter) {
for (var lastName of this.rows) {
console.log('iterate through : ' + lastName);
if (filter(lastName)) {
yield lastName;
}
}

38. ES7

39. ES7 EST DÉFINI DEPUIS JUIN 2016
http://www.ecma-international.org/ecma-262/7.0/index.html

40. IMPLÉMENTATION ES7
DANS LES NIGHTY
BUILDS
Chakra
SpiderMonkey
V8
JavaScript Core

41. ES 7
Array.prototype.includes
Exponential Operator
Object.values/ Object.entries
String padding
Object.getOwnPropertyDescriptors
Trailing commas in function parameter lists and calls
Async Functions

42. ES7 : ASYNC PROGRAMMING
/*
Async Await
*/
async function myOperations(){
const firstResult = await myFirstOperation();
const secondResult = await mySecondOperation(firstResult);
const thirdResult = await myThirdOperation(secondResult);
/*
Code
*/
};
try {
myOperations();
} catch (err) {
/*
Gestion de l’erreur, quelque soit l’étape où elle a eu lieu
*/
}

43. DEMOasync / await dans ES7

44. ES7 STRING ADDITIONNALS
const monTableau = [1, 2, 3, 4, 5];
if (monTableau.includes(3)) {
//3 est dans le tableau
}
'abc'.padLeft(10); //"abc "
'abc'.padRight(10); //" abc"
'n t abc n t'.trimLeft(); //"abc n t"
'n t abc n t'.trimRight(); //"n t abc"

45. ES7 EXPONENTIAL
// x ** y
let squared = 2 ** 2;
// same as: 2 * 2
// same as Math.pow(2, 2)
let cubed = 2 ** 3;
// same as: 2 * 2 * 2
// same as Math.pow(2, 3)

46. ES7 OBJECT.ENTRIES / OBJECT.VALUES
let obj = { a: 1, b: 2, c: 3 };
for (let key of Object.keys(obj)) {
// ['a', 'b', 'c']
}
for (let value of Object.values(obj)) {
// [1, 2, 3]
}
for (let [key, value] of Object.entries(obj)) {
// [['a', 1], ['b', 2], ['c', 3]]
}

47. ES7 GETOWNPROPERTYDESCRIPTOR

48. ES8

49. ES8
Le processus de
standardisation est
décomposée en 4 stages :
Proposition,
Brouillon,
Candidat,
Terminée.
Une bonne indication : voir
les stages 3
https://github.com/tc39/proposals

50. ES8 OBJECT REST
const myObject = {
lorem : 'ipsum',
dolor : 'sit',
amet : 'foo',
bar : 'baz'
};
const { lorem, dolor, ...others } = myObject;
// lorem === 'ipsum'
// dolor === 'sit'
// others === { amet : 'foo', bar : 'baz' }

51. ES8 OBJECT SPREAD
const obj1 = {
amet : 'foo',
bar : 'baz'
};
const myObject = {
lorem : 'ipsum',
dolor : 'sit',
...obj1
};
/*
myObject === {
lorem : 'ipsum',
dolor : 'sit',
amet : 'foo',
bar : 'baz'
};
*/

52. ES8 ASYNC ITERATORS
for await (const line of readLines(filePath)) {
console.log(line);
}

53. ES8 IMPORT()
<script>
const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
link.addEventListener("click", e => {
e.preventDefault();
import(`./section-modules/${link.dataset.entryModule}.js`)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
});
}
</script>
1. import() peut être utlilié dans n’importe quel script, et pas
uniquement depuis un module.
2. import() peut être utilisé dans un module à n’importe quel level.
3. import() accèpte des entrées calculées au runtime
4. Import() n’aucune dépendance évaluée

54. ES8 : SIMD
SIMD : Single instruction, multiple data
Colloboration large :
John McCutchan (Google)
Peter Jensen (Intel)
Dan Gohman (Mozilla)
Abhijith Chatra (Microsoft)

55. ES8 : SIMD
Single Instruction Single Data (SISD)
Single Instruction Multiple Data (SIMD)
1.0 2.0 3.0
1.0
3.0
5.0
7.0
2.0
4.0
6.0
8.0
3.0
7.0
11.0
15.0

56. ES8 : SIMD
1.0
4.0
2.0
3.0
5.0
20.0
10.0
15.0
6.0
24.0
12.0
18.0
var a = SIMD.Float32x4(1.0, 2.0, 3.0, 4.0);
var b = SIMD.Float32x4(5.0, 10.0, 15.0, 20.0);
var c = SIMD.Float32x4.add(a, b);

57. ES8 : SIMD

58. http://peterjensen.github.io/mandelbrot/js/mandelbrot-asm.html

59. TYPESCRIPT FEATURES
ES NEXT

60. NON-NULLABLE TYPES
number
string
boolean

61. NON-NULLABLE TYPES
number
string
boolean

62. NON-NULLABLE TYPES
number
string
boolean
undefined null

63. NON-NULLABLE TYPES
string
undefined null
string | null | undefined

64. DEMONon Nullables Types
DEMO

65. PROPOSITION POUR ES8 (LEVEL 2) IMPLÉMENTÉ DANS TYPESCRIPT
DECORATEURS
Permettre via des attributs,
d’ajouter du comportement à
une classe, ses méthodes ou
propriétés.
Utilisé dans Angular 2

66. DÉCORATEURS
class Person {
public lastName: string;
public firstName: string;
constructor(ln: string, fn: string) {
this.lastName = ln;
this.firstName = fn;
}
@log(false)
public getFullName(fnFirst: boolean = true) {
if (fnFirst)
return this.firstName + " " + this.lastName;
else
return this.lastName + " " + this.firstName;
}
}

67. DECORATEURS
function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
var desc = {
value: function (...args: any[]) {
// get the params
var params = args.map(arg => JSON.stringify(arg)).join();
// get the result
var result = descriptor.value.apply(this, args);
var resultString = JSON.stringify(result);
console.log(`function ${propertyKey} invoked. Params: ${params}. Result:
${resultString}`);
return result;
}
}
return desc;
}

68. DECORATEURS

69. DÉFINITIONS DES DÉCORATEURS DISPONIBLES
ClassDecorator
– Permet d’influencer sur le constructeur de la classe
MethodDecorator
– Permet d’observer modifier ou remplacer la méthode
PropertyDecorator
– Le décorateur d’accesseurs permet de changer les fonction get et set de l’accesseur
ParameterDecorator
– Permet de récupérer le nom et la position du paramètre

70. DEMO
Décorateur
s

71. METADATA
Aller plus loin avec le couple decorator / metadata
– Les décorateurs permettent d’augmenter une classe / méthode / propriété
Metadata ajoute des métadonnées à une classe / méthode /
propriété
– Ajouter une couche de « Reflection » à JavaScript
– Ne pervertit pas le modèle
• JSON.Stringify ne sérialiserait pas ces métadonnées
Cas d’usage:
– Composition
– Dependency Injection
– Testing
– Runtime assertions
– …

72. METADATA
Proposition pour ES7
Disponibilité d’un polyfill « reflect-metadata »
Par défaut, récupère plusieurs métadonnées
– var t = Reflect.getMetadata("design:type", target, key);
– var t = Reflect.getMetadata("design:paramtypes", target, key);
– var t = Reflect.getMetadata("design:returntype", target, key);
Vous pouvez ajouter vos propres métadonnées
– Reflect.defineMetadata(metadataKey, metadataValue, target);
– Reflect.defineMetadata(metadataKey, metadataValue, target, propertyKey);

73. METADATA / DECORATOR
Un décorateur @logType
Une fonction qui utilise la reflection et récupère les métadata

74. D E P E N D E N C Y
I N J E C T O R S
InversifyJS 2.0
AngularJS 2.0

75. DEMOInjection
DEMO

76. LE MOMENT
PHYLOSOPHIQUE DE LA
SOIRÉE
T R A N S P I L E R S / C O M P I L E R S / A S M . J S / W E B A S S E M B L Y

77. DOIT ON ENCORE ÉCRIRE DU « PUR JAVASCRIPT » ?
L’émergence des transpileurs par mon pote Brendan
Dependency Injection
Vous ne révez pas d’écrire des metadata tous les jours ? Ah tiens ..
Compilation et sécurité
Avoir des erreurs remontées à la compilation sauvent des petits chats, croyez moi …
Optimisation lors de la compilation
Les closures c’est bien, mais c’est pas nécessaire, des fois … BabelJS élimine les closures non
nécessaires

78. ASM.JS : COMPILER DU C++ EN JAVASCRIPT

79. ASM.JS
Asm.js is a strict subset of JavaScript that can be used as a low-level,
efficient target language for compilers.
As a sublanguage, asm.js effectively describes a sandboxed virtual machine
for memory-unsafe languages like C or C++.
A combination of static and dynamic validation allows JavaScript engines
to employ techniques like type specialized compilation without bailouts
and ahead-of-time (AOT) compilation for valid asm.js code.
Such compilation techniques help JavaScript execute at “predictable” and
“near-native” performance, both of which are non-trivial in the world of
compiler optimizations for dynamic languages like JavaScript.

80. ASM.JS
var x = 42;
var y = "a string";
var z = x + y; // z = "42a => string !"
eval("z = z.substr(1, 2)"); // z = "2a"
[1, "two", { three: 3 }].forEach(function (item) {
if (typeof item === typeof z) console.log([z, item]);
}); // ["2a" , "two" ]

81. ASM.JS
// C++
float array[5000];
int main() {
for (int i = 0; i < 5000; ++i) {
array[i] += 1.0f;
}
}
// JavaScript
var buffer = new ArrayBuffer(32768);
var HEAPF32 = new Float32Array(buffer);
function main() {
var a = 0, b = 0;
do {
a = (8 + (b << 2)) | 0;
HEAPF32[a >> 2] = +HEAPF32[a >> 2] + 1.0;
b = (b + 1) | 0;
} while ((b | 0) < 5000);
}

82. ASM.JS
http://beta.unity3d.com/jonas/AngryBots/

83. ASM.JS
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/chess/

84. WEBASSEMBLY : SORTIR JAVASCRIPT
https://www.webassembly.org

85. Emergence de asm.js / WebAssembly
La fin de JavaScript comme « Design-Language »
L’avènement de JavaScript comme « Runtime-
Language »
Une proximité entre JavaScript et WebAssembly ?
Scott Hanselman. Semi-God

86. D’UN POTE …
First they said JS couldn’t be useful for
building “rich internet apps”
Then they said it couldn’t be fast
Then they said it couldn’t be fixed
Then it couldn’t do multicore / GPU
Wrong every time !
My Advice : always bet on JS