JavaScript, ES6, ES7, ES10 où en sommes-nous ?

ES6 et ES7 – rappel

Je ne vais pas vous insulter, et écrire une énième introduction à l’ES6…Mais en fait, je vais le faire. En un mot, ES6 (ou ES2015) est le lot de fonctionnalités qui a passé l’étape 4 selon le jalon 2015. En d’autres termes, si vous avez une bonne compréhension de l’ES6 et quelques connaissances de l’ES7, vous avez environ 4 ans à rattraper…Aucune pression.

Regardons ce qui fait officiellement partie de l’ES6. Au fait, toutes ces fonctionnalités sont officiellement prises en charge par tous les navigateurs. En d’autres termes, vous n’avez pas besoin de Babel pour utiliser l’une d’entre elles (sauf si vous supportez IE 11, qui en manque quelques-unes).

Dans ES6, nous avons :

La possibilité de créer et d’hériter de classes.

class MyComponent extends React.Components {}

Des modules ES6 avec import et export.

import * from 'React';export default MyComponent;

Des générateurs

let fibonacci = { 
*() { 
let pre = 0, cur = 1 
for (;;) { 
 = 
yield cur
}
}
}

Avez-vous remarqué ? Les décorateurs, la déstructuration des objets (comme React props : {…props}) et ainsi de suite ne font pas partie de l’ES6!

A propos de l’ES7 (ES2016) voici ce que nous avons. C’est une assez petite mise à jour:

• L’opérateur d’exponentiation base ** exponent
• Un tableau comprend array.includes(myItem) // true or false

Source : http://ecma-international.org/ecma-262/7.0/

Comme vous l’avez probablement remarqué, non, Async/Await ne fait pas partie de l’ES7, mais de l’ES8 !

ES8, ES9, ES10

Toute personne ayant eu un entretien lié à JavaScript au cours des 2 dernières années, s’est vue demander au moins 1671 fois ce qu’est l’ES6, et quelle fonctionnalité elle apporte. Mais quelqu’un a remarqué que JS ne s’est manifestement pas arrêté soudainement à ES6 ni à ES7, et pourtant, personne ne vous pose de questions à ce sujet ? Voici l’occasion de rectifier le tir !

Dans ES8 (ES2017), voici les fonctionnalités disponibles :

Et bien sûr, les fonctions Async / Await :

Si vous avez suivi l’article, maintenant vous devriez l’avoir compris : A quelques petites exceptions près, ces fonctions étant de stade 4, vous êtes en mesure de les utiliser dans le navigateur sans Babel (ceci dit, ES8 étant ES2017, c’est encore assez récent et certaines implémentations comme Edge et le moteur natif d’Opera ont un peu de retard).

Passons à ES9. Tout comme ES8 et ES6, ES9 (ou ES2018) est une mise à jour assez importante :

Enfin, passons à ES10 (Ou ES2019) !

const array = ;array.sort(...)/*

*/

• Faire de JavaScript un superset de JSON (voir les détails ici)

Qu’en est-il de l’ES5 ?

Si l’ES6 est l’ES2015, et l’ES7 l’ES2016, pouvez-vous deviner quelle est l’année de l’ES5?

…Vous avez perdu ! (A moins que vous ne le sachiez réellement, mais comme je ne peux pas vous entendre, je suppose que vous avez perdu). ES5 est ES2009!

Cela ne s’arrête pas là, avant ES5, la dernière mise à jour de ES était en 1999!

Comme vous pouvez le voir, de 97 à 99, les mises à jour étaient assez fréquentes, puis ES5 allait être la seule mise à jour en 16 ans !

Comment expliquer cela ? Eh bien, à mon avis, il y a deux facteurs à cela. Le premier est technique : JavaScript est nul. Honnêtement, il le fait. À l’époque, nous avions quelques alternatives à JS : les applets Java, ActiveX, et même Flash.

Jusqu’à 2011-ish (lorsque Chrome a commencé à être une balle), non seulement ces technologies étaient un ordre de grandeur plus rapide que JS, mais elles avaient déjà la plupart des fonctionnalités que nous luttons encore pour obtenir dans JS de nos jours. (Java possède toutes les caractéristiques du langage comme les classes et les décorateurs, le support du multi-threading, OpenGL, Sockets, etc…). Lorsque Chrome et Google sont entrés en scène et ont annoncé en 2013 que Java était terminé (puis Flash a suivi), la croisade pour que JS rattrape ses concurrents était lancée. Deux ans plus tard, nous avions ES6 à nos portes.

Le deuxième facteur est économique : 2000 est l’année de l’éclatement de la bulle Dot-com. Pour les plus jeunes d’entre vous, imaginez ce que le bitcoin a été il y a quelques années, les startups Internet étaient les mêmes à la fin des années 90. Les start-ups ajoutaient .com à la fin de leur nom pour obtenir d’énormes investissements à risque (tout comme nous avons aujourd’hui un gage de mySuperStartup.ai) jusqu’à ce que la valeur chute soudainement dans les années 20. C’est une explication très rudimentaire, et je vous invite à jeter un coup d’œil à l’article de wikipedia pour une meilleure.

Le point est qu’Internet a cessé de gagner la traction dont il avait besoin pour faire de JS et des technologies liées au web un centre d’intérêt. Plus tard, avec l’essor d’Amazon, Facebook et Google, le web a eu une nouvelle raison d’être, et une nouvelle raison de prospérer. Il était donc logique que nous reprenions JS ! Google a été rendu public en 2004, Chrome est sorti en 2008, et est devenu le navigateur le plus populaire en 2014 : un an avant l’arrivée de l’ES6.

Que manque-t-il ? (Propositions rejetées)

Object.observe

Celle-ci est probablement le plus grand rejet de tous. Il permettait initialement au JS d’observer n’importe quelles valeurs dans le code :

var obj = {
foo: 0,
bar: 1
};
Object.observe(obj, function(changes) {
console.log(changes);
});obj.baz = 2;
// 

C’était une grande fonctionnalité, et évidemment, vous pouvez le faire depuis votre code (ou avec un polyfill) mais l’implémenter dans le navigateur était la promesse d’un code réactif plus rapide (ex : Angular utilise beaucoup d’observation). Il a été retiré parce qu’ils ne pouvaient pas arriver à une implémentation avec des performances constantes. Plus de détails ici.

Cancelable Promises

Self-explanatory, une fonctionnalité, j’en suis sûr, n’est pas la seule à manquer. L’idée est de permettre aux développeurs d’annuler l’exécution de n’importe quelle promesse à tout moment.

Les cas d’utilisation varient, par exemple, pour avoir un timeout côté client sur une opération async, ou par exemple, si vous avez un système de navigation par onglets, et que l’utilisateur clique sur un onglet avant que vous ayez eu le temps de charger le contenu de l’onglet actuel.

blöcks

Je ne mentionne celle-ci que parce que j’aime le nom, mais aussi parce que c’est une fonctionnalité agréable comparable aux routines Go ou aux tâches C#.

const blöck = await {|
// This code is Async, but most importantly, executed in another thread
|};

Autres

Quelques autres propositions intéressantes ont été faites, comme les constructeurs appelables. La plupart d’entre elles sont soit retirées parce que l’auteur original l’a fait, soit rejetées parce qu’elles entrent en conflit ou chevauchent des fonctionnalités existantes/prévues.