Successfully reported this slideshow.
Your SlideShare is downloading. ×

Future of java script web version

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Introduction TypeScript
Introduction TypeScript
Loading in …3
×

Check these out next

1 of 86 Ad

Future of java script web version

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Slideshows for you (18)

Viewers also liked (20)

Advertisement

Similar to Future of java script web version (20)

Recently uploaded (20)

Advertisement

Future of java script web version

  1. 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. 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. 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. 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. 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. 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. 7. OÙ QU’ON EN EST LÀ ?
  8. 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. 9. EMERGENCE DES TRANSPILERS : TYPESCRIPT 2.0
  10. 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. 11. TYPESCRIPT: JAVASCRIPT QUI SCALE.
  12. 12. UN SUR-ENSEMBLE STATIQUE DE JAVASCRIPT QUI COMPILE VERS DU VRAI JAVASCRIPT … OU TRANSPILE 
  13. 13. N AV I G AT E U R H ÔT E O S
  14. 14. OPEN SOURCE.
  15. 15. TYPESCRIPT : COMBLER LE GAP
  16. 16. VOTRE IDE PRÉFÉRÉ ?
  17. 17. EN UN AN, PLUS DE 4 RELEASES 1.5 1.6 1.7 1.8
  18. 18. 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
  19. 19. 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
  20. 20. ES6 LES FEATURES LES PLUS PLÉBISCITÉES Modules Class Promise
  21. 21. ES6
  22. 22. 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); }
  23. 23. 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
  24. 24. 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)
  25. 25. 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'));
  26. 26. 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; } });
  27. 27. 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"); } };
  28. 28. 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; } }
  29. 29. 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
  30. 30. ES6 : MODULES IMPORT / EXPORT import {Person} from "./People"; import {Person, Material as M} from "./People"; import * as People from "./People"; import guy from './People';
  31. 31. DEMOLes Modules dans ES6
  32. 32. ES5 : ASYNC PROGRAMMING /* Callback Hell */ myFirstOperation(function(err, firstResult){ mySecondOperation(firstResult, function(err, secondResult){ myThirdOperation(secondResult, function(err, thirdResult){ /* HELL !!! */ }); }); });
  33. 33. 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 */ });
  34. 34. 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')); } });
  35. 35. DEMOLes Promise(s) dans ES6
  36. 36. 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; } }
  37. 37. ES7
  38. 38. ES7 EST DÉFINI DEPUIS JUIN 2016 http://www.ecma-international.org/ecma-262/7.0/index.html
  39. 39. IMPLÉMENTATION ES7 DANS LES NIGHTY BUILDS Chakra SpiderMonkey V8 JavaScript Core
  40. 40. 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
  41. 41. 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 */ }
  42. 42. DEMOasync / await dans ES7
  43. 43. 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"
  44. 44. 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)
  45. 45. 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]] }
  46. 46. ES7 GETOWNPROPERTYDESCRIPTOR
  47. 47. ES8
  48. 48. 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
  49. 49. 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' }
  50. 50. 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' }; */
  51. 51. ES8 ASYNC ITERATORS for await (const line of readLines(filePath)) { console.log(line); }
  52. 52. 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
  53. 53. ES8 : SIMD SIMD : Single instruction, multiple data Colloboration large : John McCutchan (Google) Peter Jensen (Intel) Dan Gohman (Mozilla) Abhijith Chatra (Microsoft)
  54. 54. 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
  55. 55. 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);
  56. 56. ES8 : SIMD
  57. 57. http://peterjensen.github.io/mandelbrot/js/mandelbrot-asm.html
  58. 58. TYPESCRIPT FEATURES ES NEXT
  59. 59. NON-NULLABLE TYPES number string boolean
  60. 60. NON-NULLABLE TYPES number string boolean
  61. 61. NON-NULLABLE TYPES number string boolean undefined null
  62. 62. NON-NULLABLE TYPES string undefined null string | null | undefined
  63. 63. DEMONon Nullables Types DEMO
  64. 64. 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
  65. 65. 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; } }
  66. 66. 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; }
  67. 67. DECORATEURS
  68. 68. 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
  69. 69. DEMO Décorateur s
  70. 70. 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 – …
  71. 71. 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);
  72. 72. METADATA / DECORATOR Un décorateur @logType Une fonction qui utilise la reflection et récupère les métadata
  73. 73. 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
  74. 74. DEMOInjection DEMO
  75. 75. 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
  76. 76. 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
  77. 77. ASM.JS : COMPILER DU C++ EN JAVASCRIPT
  78. 78. 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.
  79. 79. 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" ]
  80. 80. 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); }
  81. 81. ASM.JS http://beta.unity3d.com/jonas/AngryBots/
  82. 82. ASM.JS https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/chess/
  83. 83. WEBASSEMBLY : SORTIR JAVASCRIPT https://www.webassembly.org
  84. 84. 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
  85. 85. 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

Editor's Notes

  • Quand vous compilez du TypeScript, vous transformez votre code en JavaScript. Comme TypeScript est trés proche de JavaScript (ES6+), vous pouvez dire que vous Transpillez.

×