Les promesses de JavaScript Harmony (ES6)

Toutes les personnes qui me connaissent savent à quel point j’affectionne JavaScript. Et il est vrai qu’après avoir lu l’e-mail de Brendan Eich (le papa de JavaScript), où il annonçait la reconstitution de la comité ECMA Technical Committee 39 (le TC39, le groupe responsable de spécifier les standards de JavaScript), j’étais certes content car je savais que le travail allait reprendre de nouveau, après plus d’un an de conflit. Mais ce qui m’a le plus fait plaisir, c’est d’apprendre l’existence d’une future version du langage nommée « ES Harmony ».

Dans son e-mail, Brendan parle d’une « Edition 3.1 », cette édition a été renommée en « Edition 5 ». C’est la version de JavaScript qui est actuellement dans les navigateurs.

Bref, si vous êtes intéressés par la suite des événements, voici une superbe vidéo dans laquelle Brendan l’explique lui-même en détails. Maintenant, et sans trop de baratin, voyons ce qui nous attend dans cette future version…

Nous avons appris par la suite que cette version allait rendre JavaScript, un meilleur langage pour :

  1. les WebApps complexe ;
  2. les librairies ;
  3. génération de code.

Vérifions…

Let le nouveau var

Contrairement à l’instruction var, l’instruction let vous permet de déclarer une variable dont la portée est locale au scope dans laquelle elle a été déclarée. Autrement-dit, avec let nous allons enfin avoir des variables locales ! Voici un exemple :

L’idée derrière l’introduction de let est de ne plus utiliser var pour la déclaration des variables.

Les BBB : Bits, Bytes et Blobs

Même si l’API WebGL d’HTML5 a introduit les tableaux typés (Float64Array, Int32Array, …), ceux-ci ont une utilisation très « OpenGL ». Harmony va encore plus loin, et va nous permettre de définir des structures de types (comme en C) représentants des données binaires. Prenez par exemple, le code suivant :

Dans le code précédent, nous avons défini deux structures de types binaires, Point2D et Color. Celles-ci vont nous permettre de définir des structures de données encore plus complexes, par exemple :

Maintenant que nous avons défini notre structure binaire, nous allons pouvoir déclarer une variable de type Line :

Certes, quelque part, cela reste un objet JavaScript, mais il encapsule une allocation compacte de données binaires. Nous pouvons, par exemple utiliser ce type de définition de structures binaires pour la lecture/écriture de fichiers grâce à l’API File d’HTML5, ou encore traiter des données complexes en WebGL.

Destructuring

Si vous avez déjà codé en PHP ou en Python, vous avez surement eu l’occasion d’écrire quelque chose qui ressemble à ceci :

Eh bien, maintenant nous allons pouvoir nous aussi écrire moins de ligne de code ^^. De plus, grâce au Destructuring nous allons avoir plus de flexibilité lors du passage de paramètres. Par exemple :

Ainsi, au lieu de passer un objet config, nous pouvons décrire les propriétés de cet objet, c’est beaucoup plus lisible.

Paramètres par défaut, Rest et Spread

Les paramètres par défaut

Harmony nous promet aussi d’avoir des paramètres avec des valeurs par défaut, je pense qu’il n’y a pas besoin de s’y attarder. Si ? Bon, voici un exemple :

Rest-args ou la mort de arguments

Avec les rest-args, il sera possible d’indiquer une suite d’arguments dont on ne connait pas le nombre. Bon, vous allez me dire que JavaScript dispose de l’objet arguments qui permet de récupérer tous les paramètres qui sont passés à une fonction, comme ceci :

Eh bien, je vous réponds : que pensez-vous de ceci ?

Oui ! Le paramètre rest est un VRAI tableau !

Spread

Les spreads sont en quelques sortes les cousins des rest, c’est-à-dire que lors de l’invocation d’une fonction, nous pouvons passer des paramètres (séparés par des virgules), puis renseigner un tableau représentant le reste des paramètres :

Comprehensions

Voici une nouvelle façon de déclarer et initialiser des tableaux (inspiré de CoffeeScript ou Python) :

C’est une manière très élégante pour créer des tableaux. Dans l’exemple ci-dessus, nous demandons de créer un tableau dans chaque élément est la multiplication de x et y (x * y), où x sera récupéré depuis l’itération sur l’objet obj1, et y depuis l’itération sur l’objet obj2. Autrement-dit, chaque élément du nouveau tableau est le mapping des deux variables x et y.

De plus, les comprehensions permettent de créer des générateurs (voir plus bas), que nous allons invoquer au fur et à mesure (supposons qu’on ait des calculs lourds à exécuter…). Et voici comment :

Ceci va produire donc un générateur, possédant une méthode next() donc.

Générateurs

ES6 a emprunté les générateurs à d’autres langage, tels que Python, Lua ou encore Smaltalk. Les générateurs permettent de suspendre l’exécution d’une fonction, puis reprendre son exécution plus tard. C’est un mécanisme très puissant, surtout si on imagine l’utiliser conjointement avec l’API Promise. Les cas d’usage sont nombreux : supposons que je veuille récupérer n fichiers depuis le serveur (via Ajax), et que je dois attendre l’arrivée de ces n fichiers pour continuer. Actuellement, cela est possible en utilisant l’API Deferred proposée par des librairies. Mais avoir un mécanisme natif au langage est beaucoup plus efficace.

Pour illustrer les générateurs, voici un exemple on ne plus simple :

Pour déclarer un générateur, nous utilisons le mot clé function* (avec l’étoile). Ensuite, au sein du générateur, nous avons la possibilité de suspendre l’exécution de cette fonction grâce au mot clé yield.

L’utilisation de ce générateur se fait de cette façon :

Puissant non ?

Proxies

Les Proxies est une API base niveau, de méta-programmation très puissante. Très simplement, les Proxies vont nous permettre de créer un objet afin d’intercepter les appels de ses setters, getters, delete…, par exemple, pour réaliser des traitements spécifique de chaque demande, ou pour faire des hooks. Typiquement :

Nous pourrions par exemple, imaginer d’héberger tout l’objet window dans un proxy afin d’intercepter les appels, et reconstruire ainsi notre propre DOM. Ça se POC ça, non ? ^^

Map et WeakMap

En JavaScript, on crée des objets dont les clés sont de type chaines de caractères. C’est comme ça !

Maintenant, avec ES6, il sera possible de créer des objets dont les clés sont des objets. Et cela ressemblera à ceci :

Cependant, il pourrait arriver que la référence vers  l’objet player1 soit rompue (imaginez que la variable player1 ait été supprimée). Dans ce cas, que se passera-t-il ? Eh bien, bravo ! Vous voilà avec une fuite mémoire dans votre programme. Pour remédier à cela, ES6 a introduit les WeakMaps qui s’occuperont de faire le ménage si cette situation se produise :

Ce sera à vous de décider dans quel cas utiliser Map ou WeakMap.

Modules

A l’instar de CommonJS, Harmony promet un système de modules (inclut donc dans le langage) ; plus besoin de librairies pour gérer vos modules.

Certes, actuellement, il est possible d’exporter (de partager) nos modules JS, en implémentant le Design Pattern Module, comme ceci (c’est une façon d’implémenter ce pattern) :

Mais nous devons procéder ainsi à chaque fois, pour chacun des modules. Si nous pouvions automatiser ce processus, cela nous faciliterais la tâche, après tout nous somme des développeurs ; et par définition, nous sommes des flemmards ^^

Grâce à ES6, nous allons pouvoir écrire simplement ceci :

N’est-ce pas beaucoup plus simple ? Et pour importer des modules :

Beaucoup plus pratique. Les développeurs Python trouveront surement une ressemblance avec le système de modules proposé par Python, et ils ont raison !

Classes

S’il y a bien une annonce qui ne m’a fait pas du tout rêvé, c’est bien celle concernant l’introduction de class dans JavaScript ; au du moins, syntaxiquement parlant. En effet, JavaScript, à la différence de Java (par exemple), est un langage à base de prototype, et non de classe. Donc, je pense qu’introduire ce genre de syntaxe risque d’induire en erreur les développeurs novices :

Je pense qu’on devrait utiliser le langage sans essayer de lui appliquer les paradigmes d’autres langages. Ce n’est pas parce que le langage le permet qu’il faut le faire…

Cependant,  cela reste une des nouveautés proposée par Harmony, à vous de l’utiliser à bon escient.

Conclusion

Si vous êtes curieux, et que vous avez envie de commencer à expérimenter ces nouvelles fonctionnalités (ou certaines). Vous pouvez tester dès à présent votre navigateur sur ce site.

Personnellement, je suis très impatient de voir se généraliser ES6 au sein de tous les navigateurs, oui, même Internet Explorer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

2 × 4 =