Nouveautés des frameworks JavaScript (mai 2024)

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

Il peut être difficile de suivre tout ce qui se passe avec les frameworks JavaScript. Ce document présente brièvement les événements récents dans l'écosystème des frameworks JavaScript au cours de l'année écoulée. Pour approfondir certains de ces sujets, consultez la vidéo Naviguer dans l'écosystème de frameworks JavaScript de l'événement Google I/O de cette année.

Graphique comparant les fonctionnalités du framework

Comme le montre le graphique, les frameworks JavaScript convergent vers un certain nombre de fonctionnalités et d'architectures similaires. Cela inclut l'architecture basée sur des composants, le routage basé sur des fichiers et la compatibilité SSR moderne. Cette convergence démontre la maturité et l'évolution de l'écosystème dans la mesure où les frameworks apprennent les uns des autres et adoptent les bonnes pratiques.

En parallèle, un certain nombre de tendances récentes (telles que les composants de serveur et les différentes approches de la réactivité granulaire) continuent de différencier des frameworks individuels. Pour mieux comprendre ces tendances, nous les examinons cadre par cadre.

Angular

Les versions récentes d'Angular ont fait l'objet de diverses modifications importantes, y compris des signaux, des vues différables, une image NgOptimziedImage, une hydratation non destructive et une hydratation partielle. Voici quelques exemples:

  • Signaux: les signaux constituent une approche utilisée par plusieurs frameworks (y compris maintenant Angular) pour suivre l'état d'une application. Les signaux Angular peuvent améliorer les performances d'exécution, y compris l'Interaction to Next Paint (INP), en réduisant le nombre de calculs devant être effectués lors de la détection des modifications.
  • Vues différables: les vues différables permettent de différer le chargement de composants, de directives et de pipes spécifiques. Par exemple, vous pouvez différer le chargement d'une dépendance jusqu'à ce que le contenu entre dans la fenêtre d'affichage ou jusqu'à ce que le thread principal soit inactif.
  • NgOptimizedImage : ngOptimizedImage est un composant d'image pour Angular qui automatise l'adoption des bonnes pratiques de chargement d'images.
  • hydratation non destructrice : l'hydratation non destructrice corrige le scintillement qui se produisait lorsque le DOM des applications Angular rendues côté serveur était recompilé côté client.
  • Hydratation partielle: l'équipe Angular publiera bientôt un aperçu pour les développeurs de l'hydratation partielle. Avec une hydratation partielle, par défaut, le navigateur ne charge aucun code JavaScript de la page lors de son affichage. Au lieu de cela, des parties spécifiques de la page sont hydratées à mesure que l'utilisateur interagit avec elle.

Astro

Astro, un créateur de sites statiques moderne, a fait des vagues avec son approche innovante du développement Web. En mettant l'accent sur les performances et l'expérience de développement, Astro a publié plusieurs fonctionnalités et mises à jour intéressantes:

  • Îles Astro: les îles Astro permettent aux développeurs de créer des composants d'interface utilisateur interactifs isolés du reste de la page. Cela permet des mises à jour efficaces et des performances optimales.
  • Rendu hybride: Astro prend désormais en charge le rendu hybride, qui combine les avantages de la génération de sites statiques et le rendu côté serveur pour plus de flexibilité.
  • Composants Image et Image: Astro a introduit de nouveaux composants Image et Image qui simplifient le traitement des images et permettent une optimisation automatique.
  • Prise en charge des transitions d'affichage: Astro est compatible avec l'API View Transitions, ce qui permet des transitions de page fluides.
  • Barre d'outils de développement Astro: la barre d'outils de développement Astro offre un ensemble d'outils puissants pour déboguer et optimiser les applications Astro.

React

L'année dernière, la version des composants de serveur React a introduit une nouvelle approche des composants React. Depuis, l'équipe React a travaillé sur plusieurs nouvelles fonctionnalités, y compris React Compiler et Server Actions.

  • Composants serveur : les composants serveur React sont des composants qui récupèrent des données et sont affichés sur le serveur avant d'être transmis au client. Les tâches de rendu sont ainsi transférées vers le serveur, ce qui réduit la quantité de code à envoyer au client.
  • Compilateur React : le compilateur React est un compilateur qui peut mémoriser automatiquement les composants. Cela permet d'améliorer les performances en réduisant le nombre d'affichages inutiles. L'équipe React a indiqué que les développeurs pourront adopter le compilateur React sans modifier le code.
  • Server Actions (Actions de serveur) : les actions de serveur permettent la communication client à serveur. Avec les actions du serveur, vous pouvez définir des fonctions côté serveur qui peuvent être appelées directement à partir de vos composants React, ce qui élimine le besoin d'appels d'API manuels et de gestion complexe de l'état. Cela peut être particulièrement utile pour les mutations de données et les envois de formulaires.
  • Chargement d'éléments : React a travaillé sur des API déclaratives pour précharger et charger des éléments tels que des scripts, des styles, des polices et des images.
  • Affichage hors écran : React a également travaillé sur le rendu hors écran. L'affichage hors écran est une fonctionnalité à venir dans React pour afficher les écrans en arrière-plan sans nuire aux performances. Vous pouvez la considérer comme une version de la propriété CSS de visibilité sur le contenu qui fonctionne non seulement pour les éléments DOM, mais aussi pour les composants React.

Remixer

Remix, un framework Web full stack, a gagné du terrain dans la communauté des développeurs. En se concentrant sur les principes de base du Web et l'expérience améliorée pour les développeurs, Remix a introduit plusieurs mises à jour importantes:

  • Version 2.0 de Remix: la version Remix 2.0, publiée en septembre 2023, apporte des améliorations importantes et de nouvelles fonctionnalités au framework.
  • Compatibilité stable avec Vite: Remix offre désormais une compatibilité stable avec Vite, un outil de compilation rapide et léger, qui offre des builds de développement plus rapides et de meilleures performances.
  • Mode SPA: Remix a introduit le mode SPA, qui permet de créer des sites purement statiques sans nécessiter de serveur JavaScript en production. Cela permet aux développeurs d'utiliser les puissantes fonctionnalités de Remix, telles que le routage basé sur les fichiers, le fractionnement automatique du code et plus encore, tout en conservant la simplicité du déploiement sur un site statique.

Next.js

La sortie de Next.js 13.4 en mai 2023 a été particulièrement intéressante, car elle a ouvert la voie à une compatibilité stable avec les composants serveur React, le streaming et le suspense. Depuis, Next.js continue à prendre en charge de nouvelles API React (par exemple, Server Actions) et à itérer l'expérience des développeurs grâce à des initiatives telles que Turbopack. Autres points forts:

  • App Router: App Router, devenu stable dans Next.js 13.4, est un nouveau moyen de structurer et de gérer le routage dans les applications Next.js. App Router est une condition préalable à l'utilisation des nouvelles fonctionnalités Next.js telles que les mises en page partagées et le routage imbriqué, ainsi que de nouvelles API React telles que les composants serveur React, Suspense et les actions de serveur dans votre application Next.js.

  • Turbopack: approche actuellement expérimentale) du rendu des pages basée sur l'API Suspense de React. Le prérendu partiel affiche une page à l'aide d'une interface système de chargement statique. Cependant, l'interface système laisse des espaces vides pour le contenu dynamique de la page, qui est chargé de manière asynchrone. Cela offre les avantages en termes de performances d'une page statique pouvant être mise en cache, tout en continuant à intégrer des données dynamiques dans le contenu de la page.

Vue

La dernière version de Vue, Vue 3.4, inclut plusieurs améliorations des performances. Vue travaille également sur Vue Vapor, qui est également axée sur les performances. Voici quelques points clés de ce qui se passe dans cet espace:

  • Sortie de Vue 3.4 : "un analyseur entièrement réécrit, une compilation SFC deux fois plus rapide et plus rapide, et un système de réactivité refactorisé qui améliore l'efficacité du recalcul".
  • Vue Vapor Mode: Vue travaille sur Vapor Mode, une stratégie de compilation facultative axée sur les performances qui fonctionne avec les composants de fichier unique Vue. Le mode Vapor génère un code plus performant que celui actuellement produit par Vue Compiler. De plus, l'utilisation du mode vapor avec tous les composants évite d'avoir à utiliser le DOM Vue Virtual (ce qui réduit la taille du bundle).
  • Fin de vie de Vue 2: la fin de vie de Vue 2 a eu lieu le 31 décembre 2023. Cependant, Vue 2 est encore assez largement utilisée: environ 50% des téléchargements de packages Vue npm concernent Vue 2.

Nuxt

Nuxt s'approche du lancement de Nuxt 4. Outre les publications fréquentes du framework de Nuxt au cours de l'année écoulée, l'écosystème de modules Nuxt est passé à près de 220 modules. Voici quelques-uns des développements récents dans ce domaine:

Ligne continue

Solid a travaillé à la version stable 1.0 de son méta-framework SolidStart. SolidStart offre une réactivité ultraprécise, un routage isomorphe et une compatibilité avec divers modes de rendu. Voici quelques points clés:

  • Réactivité ultraprécise: le système de réactivité de Solid permet des mises à jour précises et des performances optimales, ce qui permet une gestion efficace de l'affichage et de l'état.
  • Routage isomorphe: SolidStart offre une approche unifiée du routage, permettant aux développeurs de définir des routes qui fonctionnent parfaitement à la fois sur le client et sur le serveur.
  • Modes de rendu flexibles: SolidStart prend en charge divers modes de rendu, y compris le rendu côté serveur, la génération de sites statiques et le rendu côté client, ce qui permet aux développeurs de choisir la meilleure approche pour leur application.

Svelte

Au cours de l'année écoulée, l'équipe Svelte s'est concentrée sur la sortie à venir de Svelte 5, qui va être importante. Autres points forts:

  • Svelte 5 arrive : en plus d'inclure une réécriture du compilateur et de l'environnement d'exécution Svelte, Svelte 5 introduit également le concept de runes.
  • Annonce de runes: les runes seront bientôt disponibles dans Svelte 5. "Les exécutions permettent une réactivité universelle et ultraprécise... Avec les runes, la réactivité s'étend au-delà des limites de vos fichiers .svelte... La réactivité de Svelte 5 est basée sur des signaux. Toutefois, [contrairement à d'autres frameworks], dans Svelte 5, les signaux sont un détail d'implémentation caché plutôt qu'un élément avec lequel vous interagissez directement."
  • Publication de SvelteKit 2 : SvelteKit est le méta-framework pour Svelte. Les fonctionnalités de cette version incluent le routage peu profond et la compatibilité avec Vite 5.

Chrome Aurora

L'équipe Chrome Aurora de Google collabore avec différents frameworks Web Open Source afin d'améliorer l'expérience utilisateur sur le Web, en particulier ses performances. Voici quelques-unes des initiatives auxquelles nous avons contribué au cours de l'année écoulée:

Conclusion

L'écosystème de framework JavaScript continue d'évoluer à un rythme rapide, chaque framework apportant son propre ensemble d'innovations et d'améliorations. Que vous soyez intéressé par les dernières fonctionnalités des frameworks établis tels qu'Angular, React et Vue, ou que vous exploriez des options plus récentes comme Astro, Remix et Solid, vous ne manquez pas de développements passionnants.

En tant que développeurs, rester informés de ces avancées nous aide à prendre des décisions éclairées lors du choix d'un framework pour nos projets. En comprenant les points forts et les caractéristiques uniques de chaque framework, nous pouvons choisir celui qui correspond le mieux aux exigences de notre projet et à nos préférences en matière de développement.

Nous espérons que cette présentation vous a donné un aperçu de l'état actuel des frameworks JavaScript. Pour approfondir les sujets abordés dans cet article, regardez la vidéo associée de Google I/O. À vous de jouer !