Roadmap ES.Next, où en sommes-nous ?

Longtemps cantonné à de l'ES5, le JavaScript a pris un nouveau tournant depuis l'avènement d'ES6. ES6 a apporté non seulement une modernisation du langage, mais également lancé un processus de mise à jour régulière du standard au rythme d'une release par an. Mais d'où vient le standard et où allons-nous ?

ECMAScript : Qui es-tu ?

ECMAScript, c'est le gros mot inventé pour nommer le standard sur lequel est basé JavaScript. Ce standard est propulsé par l'ECMA, un organisme proposant des standards pour les systèmes d’information et de communication depuis 1961 ! Et ECMAScript ? C'est un langage à base de script qui suit les spécifications de l'ECMA.

Histoire du JavaScript en bref

L'origine du langage remonte en Mai 1995 pour les besoins de Netscape. C'est d'abord un langage côté serveur du nom de LiveScript puis une version orientée client est imaginée. À l'époque, Netscape et Sun MicroSystems sont partenaires et Java est de plus en plus populaire. La version cliente du langage prendra alors le nom de JavaScript afin de contribuer à une confusion entre les deux langages, servant les intérêts des deux sociétés.

Par la suite, Netscape propose la standardisation du langage en 1996 à l'ECMA qui publiera la première version de l'ESCMAScript en Juin 1997, l'ES1 (standard ECMA-262). La seconde version arrive très vite puisqu'une nouvelle version est publiée en juin 1998 pour satisfaire le standard international ISO/CEI 16262, c'est l'ES2. L'ES3 quant à lui, arrive en Juin 1999 et apporte enfin des nouveautés aux langages : amélioration des expressions rationnelles, amélioration de la manipulation des chaînes de caractères, gestion des exceptions.... L'ES4 a été compliqué à standardiser... Le grand changement proposé étant en parti de modifier profondément le langage pour se rapprocher de langages objet comme Java, C++ ou C#.

En parallèle de cette tentative, un ensemble de sociétés (des petits groupes comme Yahoo, Microsoft et Google) décide de faire évoluer l'ES3 en ES3.1. Vu le schisme, l'ES4 est finalement abandonné au profit d'ES3.1 qui deviendra ES5, pour éviter toutes confusions, en Décembre 2009. Le JavaScript presque moderne était né. De 2009 à l'avènement d'ES6 en Juin 2015, de plus en plus de sites web vont se reposer sur le JavaScript pour être riches et interactifs, on commence à parler d'applications web (la version 1.0 d'AngularJS est sortie le 14 Juin 2012, React est release en open source en Mai 2013).

Implémentation du standard

Comme vous avez pu le lire juste au-dessus le JavaScript existait avant l'ECMAScript. Au fur et à mesure des années, l'ensemble des navigateurs ont essayé d'implémenter le standard (vous connaissez tous le mauvais élève).

Depuis ES6, les navigateurs ont compris l'importance de respecter réellement le standard pour pouvoir être compétitifs sur le marché et pouvoir s'imposer. Il existe des outils comme Babel ou encore TypeScript permettant de faire de la transpilation de nouvelles features, en ciblant une version d'ES en sortie de transpilation. Pour connaitre la disponibilité d'une feature, il est toujours important de vérifier les navigateurs cibles (sur MDN ou encore caniuse).

Proposal Stage

ES6 a été aussi l'occasion de relancer la sortie du standard de façon plus fréquente au rythme d'une release par an afin de limiter l'ajout de fonctionnalités. Comment une nouvelle fonctionnalité peut-être proposée pour intégrer la future version du standard ?

Le processus est le suivant :

• Stage 0 : l'idée de la feature de façon totalement théorique et sans formalisme particulier.
• Stage 1 : l'idée est transformée en cas pratique et on ajoute une forme solution. On identifie un champion, quelqu'un qui pourra défendre l'idée et la porter.
• Stage 2 : on enrichit le stage 2 avec de la syntaxe et de la sémantique. On décrit spécifiquement et de façon formelle la solution.
• Stage 3 : la proposition commence à être mature, on désigne des relecteurs pour approuver ou non la spec et la proposition.
• Stage 4: la proposition est prête à être intégrée dans la future release de la spec !

J'ai volontairement pris des raccourcis dans l'énoncé de chaque stage afin d'être concis. Vous pouvez le processus en intégralité sur ce lien.

‍

ES.Next, le futur

ES.Next est le nom du standard qui sera implémenté dans la prochaine version.

Il regroupe :

• Toutes les proposals marquées comme finished avec intégration dans l'année N+1 de la dernière release.
• Une partie des proposals en stage 3 (ou non, en fonction de leur avancement en stage 4).

Certains outils permettent de faire de l'ES.Next, comme les outils cités plus haut, car ils implémentent au plus tôt les features qui atteignent le stage 3 et qui ont bon espoir d'atteindre le stage 4.

‍

Futures features intéressantes

Les champs de classes privées en stage 3

Cette proposition ajoute la possibilité de rendre privés des attributs de classe. La syntaxe est simple :

<pre><code>class Younup {
 #you = 0;

 up() {
   this.#you++;
 }

 #upup() {
   this.#you + 2;
 }

 getYou() {
   return this.#you;
 }

 getYouYou() {
   this.#upup();
   return this.#you;
 }
}<code><pre>

Pour en savoir plus : Private methods and getter/setters for JavaScript classes

Optional Chaining Operator et Nullish Coalescing Operator en stage 4

On en a parlé sur le blog, mais en TypeScript :

• L'opérateur de chaînage optionnel : une nouveauté de TypeScript 3.7
• L'opérateur de nullish coalescing : une autre nouveauté de TypeScript 3.7

Le globalThis en stage 4

Avec le nombre croissant de plateformes pouvant exécuter JavaScript, il est parfois difficile de rendre son code portable pour toutes les plateformes. L'idée est d'avoir un alias permettant d'accéder à l'objet global sans pour autant le nommer spécifiquement.

Exemple donné par MDN :

<pre><code>var getGlobal = function() {
 if (typeof self !== "undefined") {
   return self;
 }
 if (typeof window !== "undefined") {
   return window;
 }  if (typeof global !== "undefined") {
   return global;
 }
 throw new Error("impossible de trouver l'objet global");
};

var globals = getGlobal();

if (typeof globals.setTimeout !== "function") {
 // pas de setTimeout pour cet environnement
}<code><pre>

devient :

<pre><code>if (typeof globalThis.setTimeout !== "function") {
 // pas de setTimeout pour cet environnement
}<code><pre>

Conclusion

J'ai fait un bref rappel de ce qu'est ECMAScript et sa standardisation. Vous savez quoi suivre pour connaître le futur de la spécification et pourquoi pas y participer !

‍