5 pièce(s) jointe(s)
State of JavaScript 2022 : React reste le framework front-end dominant mais décline niveau satisfaction
State of JavaScript 2022 : React reste le framework front-end dominant mais est en perte de vitesse côté satisfaction,
jQuery est la troisième bibliothèque la plus utilisée
Créé en 1995, JavaScript est aujourd'hui le langage le plus populaire selon de nombreux baromètres. C'est également l'écosystème dans lequel on voit le plus de technologies naitre tous les jours. Comme conséquence, il est parfois très difficile de faire des choix ou de voir une technologie s'imposer comme la norme à moins d'avoir de puissants sponsors pour la propulser. Selon les catégories, certaines technologies arrivent toutefois à se distinguer. C'est dans le but d'identifier clairement ces dernières qu'entre en jeu le State of JavaScript, une enquête annuelle internationale sur l'écosystème JavaScript.
Les résultats de l'édition 2022 sont disponibles et nous présentons ici les points saillants.
Cette édition a vu la participation de 39 471 répondants ont participé au sondage. Un peu plus d'un répondant sur dix résidait aux États-Unis. L'Allemagne et la France viennent en seconde et troisième position des pays de résidence avec respectivement 5,2 % et 3,7 %. Le top 10 est complété par le Royaume-Uni (3,6 %), l'Inde (3,2 %), le Canada (2,5 %), la Pologne (2,4 %), le Brésil (2 %), l'Espagne (1,9 %) et les Pays-Bas (1,9 %). La Russie, qui était troisième dans l'édition précédente, figure en 11e position.
D'ailleurs, les langues dans lesquelles les développeurs JavaScript ont répondu sont :
- l'anglais (69,7 % des participants) ;
- le français (3,4 % des participants) ;
- l'allemand (3,1 % des participants) ;
- l'espagnol (3 % des participants) ;
- le russe (2,6 % des participants).
Sacha Greif a fait le commentaire suivant :
Citation:
Après des années de stabilité relative, beaucoup commencent maintenant à remettre en question le statu quo.
De nouveaux frameworks front-end comme Solid et Qwik suggèrent que React pourrait ne pas avoir toutes les réponses après tout, et côté serveur Astro, Remix et Next.js (entre autres) nous font reconsidérer la quantité de code dont nous avons vraiment besoin pour livrer le client.
Nous aurons besoin de toutes les données que nous pourrons obtenir si nous voulons donner un sens à tout cela, et en fait, l'enquête de cette année a reçu 39 472 réponses massives, soit presque le double de l'année dernière !
En raison de cette audience nouvellement élargie, vous remarquerez peut-être des résultats inattendus, tels que la baisse de certaines fonctionnalités d'une année sur l'autre en matière de notoriété ou d'utilisation.
Mais avoir plus de données peut potentiellement signifier de nouvelles informations, et c'est pourquoi nous avons développé deux nouvelles façons d'interagir avec notre ensemble de données : l'explorateur de données vous permet de croiser deux variables et de mettre en évidence les résultats aberrants ; tandis que les filtres de graphique vous permettent de filtrer des graphiques spécifiques par salaire, pays, sexe et de nombreuses autres variables démographiques.
Nous avons également remplacé notre catégorie fourre-tout "back-end" par une page de framework de rendu plus spécifique et ajouté une nouvelle liste de créateurs de vidéos à la section Ressources.
Enfin, les questions sur les fonctionnalités et les bibliothèques ont également désormais une fenêtre contextuelle de commentaires qui vous permet de voir ce que les gens pensent réellement des éléments mentionnés dans l'enquête !
Avec tout cela à l'écart, découvrons ce que JavaScript a fait en 2022 !
Aperçu des utilisations
Ce graphique présente les différents taux d'adoption pour chaque fonctionnalité, groupé par catégorie. La taille du cercle externe correspond au nombre total d'utilisateurs qui connaissent une fonctionnalité, alors que le celui interne représente ceux qui l'utilisent actuellement.
Fonctionnalités
Langage
Quel niveau de compétence dans le vocabulaire de JavaScript ?
Les proxy : l'objet Proxy est utilisé afin de définir un comportement sur mesure pour certaines opérations fondamentales (par exemple, l'accès aux propriétés, les affectations, les énumérations, les appels de fonctions, etc.). En 2022, 24,9 % du panel a déclaré les avoir déjà utilisés contre 26,1 % en 2021, 22,4 % en 2020 et 17,4 % en 2019. 41,5 % du panel en a déjà entendu parler, contre 43,5 % en 2021, 39,1 % en 2020 et 39,8 % en 2019.
Promise.allSettled() : La méthode Promise.allSettled() renvoie une promesse qui est résolue une fois que l'ensemble des promesses de l'itérable passée en argument sont réussies ou rejetées. La valeur de résolution de cette promesse est un tableau d'objets dont chacun est le résultat de chaque promesse de l'itérable.
Code:
1
2
3
4
5
6
7
8
9
10
| const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
Promise.allSettled(promises).
then((results) => results.forEach((result) => console.log(result.status)));
// expected output:
// "fulfilled"
// "rejected" |
En 2022, 22,3 % du panel a déclaré l'avoir déjà utilisée (contre 19 % et 14,8 % respectivement en 2021 et en 2020) et 40,1 % du panel en avait déjà entendu parler (contre 46,4 % et 42,3 % respectivement en 2021 et en 2020).
Variables de classe privées : les champs de classe sont publics par défaut, mais des membres de classe privés peuvent être créés à l'aide d'un préfixe dièse #. L'encapsulation de confidentialité de ces fonctionnalités de classe est appliquée par JavaScript lui-même. Les membres privés ne sont pas natifs du langage avant que cette syntaxe n'existe. Dans l'héritage prototypique, son comportement peut être émulé avec des objets WeakMap ou des fermetures , mais ils ne peuvent pas être comparés à la syntaxe # en termes d'ergonomie.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| class ClassWithPrivate {
#privateField;
#privateFieldWithInitializer = 42;
#privateMethod() {
// …
}
static #privateStaticField;
static #privateStaticFieldWithInitializer = 42;
static #privateStaticMethod() {
// …
}
} |
Les champs privés incluent les champs d'instance privés et les champs statiques privés. Les champs privés sont accessibles sur le constructeur de classe depuis l'intérieur de la déclaration de classe elle-même. Ils sont utilisés pour la déclaration des noms de champs ainsi que pour accéder à la valeur d'un champ.
En 2022, 25,9 % du panel a déclaré s'être servi des champs privés, contre 20,4 % en 2021 et 10,9 % en 2019.
API navigateur
Service workers : les service workers jouent essentiellement le rôle de serveurs proxy placés entre une application web, et le navigateur ou le réseau (lorsque disponible.) Ils sont destinés (entre autres choses) à permettre la création d'expériences de navigation déconnectée efficaces, en interceptant les requêtes réseau et en effectuant des actions appropriées selon que le réseau est disponible et que des ressources mises à jour sont à disposition sur le serveur. Ils permettront aussi d'accéder aux APIs de notifications du serveur (push) et de synchronisation en arrière-plan.
Un service worker est un worker événementiel enregistré auprès d'une origine et d'un chemin. Il prend la forme d'un fichier JavaScript qui peut contrôler la page ou le site web auquel il est associé, en interceptant et en modifiant la navigation et les requêtes de ressources, et en mettant en cache les ressources selon une granularité très fine pour vous donner une maîtrise complète de la manière dont doit se comporter votre application dans certaines situations (l'une des plus évidentes étant l'indisponibilité du réseau.)
Un service worker fonctionne dans le contexte d'un worker : il n'a donc pas d'accès au DOM, et s'exécute dans une tâche différente de celle du script principal de votre application, ainsi il est non-bloquant. Il est conçu pour être totalement asynchrone ; en conséquence, des APIs telles que XHR en synchrone et localStorage ne peuvent pas être utilisées au sein d'un service worker.
Les service workers fonctionnent uniquement sur HTTPS, pour des raisons de sécurité. Laisser des requêtes réseau modifiées sans défense face aux attaques de l'homme du milieu est une bien mauvaise chose.
En 2022, 40,8 % du panel a déclaré les avoir déjà utilisés, contre 45,7 % dans l'édition précédente.
Intl : l'objet Intl est l'espace de noms pour l'API d'Internationalisation d'ECMAScript. Elle fournit des outils de comparaison de chaînes de caractères, de formatage des nombres, de dates et de l'heure selon les langues. Intl donne accès à plusieurs constructeurs et fonctionnalités communes aux constructeurs destinés à l'internationalisation et à d'autres fonctions dépendantes des langues.
En 2022, 38,2 % du panel a déclaré l'avoir déjà utilisé, contre 36 % dans l'édition précédente.
WebGL : WebGL permet d'afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre du navigateur web d'un client. Il est actuellement implémenté dans la plupart des grands navigateurs modernes, mais cette implémentation est récente, d'où le fait que cette technologie reste assez méconnue du grand public. Lorsqu’un élément graphique de type WebGL est inclus dans une page web, le navigateur exécute un programme en JavaScript utilisant l'interface WebGL. La bibliothèque WebGL appelle à son tour le pilote OpenGL ES du système d'exploitation qui se chargera de faire les calculs nécessaires à l'affichage sur l'écran, en exploitant si possible l'accélération matérielle du ou des processeurs graphiques du terminal.
En 2022, 20 % du panel a déclaré l'avoir utilisé, contre 21,6 % en 2021 et 17,5 % en 2020.
Autres fonctionnalités
Progressive Web App : les applications Web progressives utilisent des API Web modernes ainsi qu'une stratégie d'amélioration progressive traditionnelle pour créer des applications Web multiplateformes. Ces applications fonctionnent partout et fournissent quelques fonctionnalités qui donnent à l'expérience utilisateur les mêmes avantages que les applications natives. Pour qu'une application Web soit considérée comme un PWA, techniquement parlant, il devrait présenter les caractéristiques suivantes : Secure contexts (HTTPS), un ou plusieurs Service Workers et un fichier manifest.
WebAssembly : WebAssembly est un nouveau type de code qui peut être exécuté dans un navigateur web moderne. C'est un langage bas niveau, semblable à l'assembleur permettant d'atteindre des performances proches des applications natives (par exemple écrites en C/C++) tout en fonctionnant sur le Web. WebAssembly est conçu pour fonctionner en lien avec JavaScript.
WebAssembly permet d'exécuter du code (éventuellement écrit depuis différents langages) sur le Web avec des performances similaires aux applications natives. WebAssembly est conçu pour être utilisé de pair avec JavaScript. Grâce à l'API JavaScript WebAssembly, on peut charger des modules WebAssembly au sein d'une application JavaScript et partager des fonctionnalités entre les deux. Cela permet de tirer parti des performances de WebAssembly et de la flexibilité de JavaScript, même si on ne sait pas écrire du code WebAssembly.
Bibliothèques et frameworks
Frameworks front-end
React reste le framework le plus utilisé, suivi par Angular, Vue.js, Svelte et Preact. Le trio de tête n'a pas changé depuis l'édition 2017. En revanche, en termes de satisfaction dans l'utilisation des frameworks, Solid, Svelte et Quick se place respectivement en première, seconde et troisième place. React quitte le trio de tête pour se retrouver à la quatrième place suivi par Vue.js.
Frameworks axés sur le rendu et le service de votre application
Du côté des frameworks axés sur le rendu et le service de votre application, Next.js conserve la première place qu'il a acquise depuis l'édition 2018. En fait, le trio de tête est le même depuis l'édition 2020 : il s'agit respectivement de Next.js, Gatsby et Nuxt. Cependant, en termes de satisfaction dans l'utilisation des frameworks, c'est Astro qui est en tête, suivi par SvelteKit et Next.js ferme la marche du top 3.
Bibliothèques les plus utilisées
Conclusion
Sarah Drasner, Directrice de l'ingénierie et de l'infrastructure Web pour le compte de Google, a déclaré :
Citation:
JavaScript et TypeScript sont plus dynamiques que jamais.
Nous avons vu une poursuite des innovations en matière de performances, dont beaucoup en matière de réactivité et d'hydratation (ou de leur absence). Par exemple, Svelte a opté pour la simplicité dans l'ergonomie des développeurs et s'est penché sur le compilateur. Solid a exploré de nouvelles approches de la réactivité, tandis que Qwik a modifié notre modèle mental avec la capacité de reprise.
L'innovation est également passionnante à voir dans les solutions multiplateformes telles que Tauri, Ionic et Flutter, ce qui ouvre la porte à des applications qui s'étendent sur encore plus de plates-formes.
Nous voyons des talents répartis dans le monde entier, comme le Nigéria et maintenant l'Inde, avoir la plus forte croissance de développeurs sur GitHub. Partout dans le monde, il existe des projets incroyables comme Chakra UI de Segun Adebayo ou Hoppscotch de Liyas Thomas, et des personnes qui soutiennent la croissance et l'apprentissage d'autres personnes comme Ada Nduka Oyom qui a fondé SheCodeAfrica, une organisation à but non lucratif qui a aidé à autonomiser plus de 17 000 femmes à travers l'Afrique.
Lorsque nous examinons des frameworks établis comme React, Angular ou Vue, nous constatons souvent une baisse de satisfaction, et les gens peuvent se demander ce que cela signifie pour l'avenir. Je crois que ce déclin est fonction du fait que l'outil est testé au combat et utilisé dans la production, [ce déclin est également fonction] de la recherche des aspérités et de l'expérience des compromis de chaque outil. C'est un signe de maturité et d'appréciation lucide de ce que ces outils peuvent offrir. Ils apprendront également de l'innovation dans l'espace et continueront d'évoluer.
Enfin, je ne pourrais pas être plus heureuse de voir la présence retentissante absolue de Vite dans la section des récompenses pour la deuxième année consécutive. La technologie de construction et de service fait vraiment des progrès considérables et nous bénéficions tous de ce travail acharné. Bravo !
Source : résultats de l'enquête
Et vous ?
:fleche: Que pensez-vous des conclusions de cette enquête ?
:fleche: Utilisez-vous ou avez-vous déjà utilisé des déclinaisons de JavaScript ? Si oui, lesquelles ? Quelles sont vos impressions ?
:fleche: Selon vous, quelles fonctionnalités manquent encore à JavaScript ?
:fleche: Quelles technologies JavaScript utilisez-vous le plus (frameworks, test, développement mobile et desktop, etc.) ?
