Nouveautés des frameworks JavaScript (mai 2024)

Katie Hempenius
Katie Hempenius
X
Addy Osmani

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 la dernière année environ. Pour une discussion plus approfondie sur certains de ces sujets, consultez la présentation Navigating the JavaScript Frameworks Ecosystem (Parcourir l'écosystème des frameworks JavaScript) de l'événement Google I/O de cette année.

Graphique comparant les fonctionnalités des frameworks

Comme le montre le graphique, les frameworks JavaScript convergent vers un certain nombre de fonctionnalités et d'architectures similaires. Il s'agit notamment de l'architecture basée sur les composants, du routage basé sur les fichiers et de la prise en charge du SSR moderne. Cette convergence démontre la maturité et l'évolution de l'écosystème, car les frameworks apprennent les uns des autres et adoptent les bonnes pratiques.

En même temps, un certain nombre de tendances récentes (telles que les composants de serveur et les différentes approches de la réactivité précise) continuent de distinguer les frameworks individuels. Pour mieux comprendre ces tendances, nous les examinons une par une.

Angular

Les versions récentes d'Angular ont apporté de nombreux changements importants, y compris des signaux, des vues différables, NgOptimizedImage, une hydratation non destructive et une hydratation partielle. Voici quelques-uns des points forts:

  • Signaux: les signaux sont une approche utilisée par plusieurs frameworks (y compris Angular) pour suivre l'état d'une application. Les signaux Angular peuvent améliorer les performances d'exécution, y compris l'interaction jusqu'à la prochaine peinture (INP), en réduisant le nombre de calculs qui doivent ê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 canaux spécifiques. Par exemple, vous pouvez différer le chargement d'une dépendance jusqu'à ce que le contenu entre dans le viewport 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 destructive : l'hydratation non destructive corrige le clignotement qui se produisait lorsque le DOM des applications Angular rendues côté serveur était reconstruit côté client.
  • Hydratation partielle: l'équipe Angular publiera bientôt l'aperçu développeur de l'hydratation partielle. Avec l'hydratation partielle, par défaut, le navigateur ne charge aucun code JavaScript de la page lors de son rendu. Au lieu de cela, des parties spécifiques de la page sont hydratées à mesure que l'utilisateur interagit avec elle.

Astro

Astro, un outil de création de sites Web statiques modernes, fait parler de lui pour son approche innovante du développement Web. En se concentrant sur les performances et l'expérience des développeurs, 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.
  • Affichage hybride: Astro est désormais compatible avec l'affichage hybride, qui combine les avantages de la génération de sites statiques et de l'affichage côté serveur pour une flexibilité accrue.
  • Composants Image et Picture: Astro a introduit de nouveaux composants Image et Picture qui simplifient la gestion des images et fournissent une optimisation automatique.
  • Compatibilité avec les transitions de vue: Astro est compatible avec l'API View Transitions, ce qui permet de réaliser des transitions de page fluides.
  • Barre d'outils de développement Astro: la barre d'outils de développement Astro fournit un ensemble d'outils puissants pour déboguer et optimiser les applications Astro.

React

L'version des composants serveur React de l'année dernière a introduit une nouvelle approche des composants React. Depuis, l'équipe React a travaillé sur de nombreuses nouvelles fonctionnalités, y compris le compilateur React et les actions de serveur, ainsi que sur les éléments suivants :

  • Composants de serveur : les composants de serveur React récupèrent des données et sont affichés sur le serveur avant d'être diffusés en streaming vers le client. Cela transfère le travail de rendu vers le serveur et réduit la quantité de code à envoyer au client.
  • Compilateur React : le compilateur React est un compiler pouvant mémoriser automatiquement les composants. Cela améliore les performances en réduisant les re-rendus inutiles. L'équipe React a indiqué que les développeurs pourront adopter le compilateur React sans modifier le code.
  • Actions du serveur : les actions du serveur permettent la communication client-serveur. Avec les actions de serveur, vous pouvez définir des fonctions côté serveur qui peuvent être appelées directement à partir de vos composants React, ce qui élimine les appels d'API manuels et la gestion complexe de l'état. Cela peut être particulièrement utile pour les mutations de données et l'envoi de formulaires, par exemple.
  • Chargement des é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.
  • Rendu hors écran : React a également travaillé sur le rendu hors écran. Le rendu hors écran est une fonctionnalité à venir dans React permettant de rendre des écrans en arrière-plan sans frais supplémentaires sur les performances. Vous pouvez considérer qu'il s'agit d'une version de la propriété CSS content-visibility qui fonctionne non seulement pour les éléments DOM, mais aussi pour les composants React."

Remix

Remix, un framework Web full stack, gagne du terrain dans la communauté des développeurs. En se concentrant sur les principes fondamentaux du Web et en améliorant l'expérience des développeurs, Remix a introduit plusieurs nouveautés notables:

  • Version Remix 2.0: Remix 2.0, publié en septembre 2023, a apporté des améliorations importantes et de nouvelles fonctionnalités au framework.
  • Compatibilité stable avec Vite: Remix propose désormais une compatibilité stable avec Vite, un outil de compilation rapide et léger, qui permet de créer des builds de développement plus rapidement et d'améliorer les 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 fonctionnalités puissantes de Remix, comme le routage basé sur des fichiers, le fractionnement automatique du code, etc., tout en conservant la simplicité du déploiement de sites statiques.

Next.js

La sortie de Next.js 13.4 en mai 2023 a été particulièrement remarquable, car elle a introduit une prise en charge stable des composants de serveur React, du streaming et de Suspense. Depuis, Next.js continue de développer la prise en charge des nouvelles API React (par exemple, les actions de serveur) et d'itérer sur l'expérience du développeur via des initiatives telles que Turbopack. Voici d'autres points forts:

  • App Router: App Router, qui est devenu stable dans Next.js 13.4, est une nouvelle façon de structurer et de gérer le routage dans les applications Next.js. Le routeur d'application est un prérequis pour utiliser les nouvelles fonctionnalités Next.js telles que les mises en page partagées et le routage imbriqué, ainsi que les nouvelles API React telles que les composants serveur React, Suspense et les actions du serveur dans votre application Next.js.

  • Turbopack: approche actuellement expérimentale du rendu de page basée sur l'API Suspense de React. Le prérendu partiel génère une page à l'aide d'un shell de chargement statique. Toutefois, le shell laisse des "trous" pour le contenu dynamique sur la page, et ce contenu est chargé de manière asynchrone. Vous bénéficiez ainsi des avantages de performances d'une page statique en cache tout en pouvant intégrer des données dynamiques au contenu de la page.

Vue

La dernière version de Vue, Vue 3.4, comprend plusieurs améliorations des performances. Vue travaille également actuellement sur Vue Vapor, qui est également axé sur les performances. Voici quelques-uns des points forts de cet espace:

  • Vue 3.4 disponible: les fonctionnalités incluent "un analyseur entièrement réécrit qui est deux fois plus rapide, une compilation SFC plus rapide et un système de réactivité refactorisé qui améliore l'efficacité du calcul."
  • Mode Vapor de Vue: Vue travaille sur le mode Vapor, une stratégie de compilation orientée performances nécessitant une activation qui fonctionne avec les composants Vue Single File. Le mode Vapor génère du code plus performant que celui actuellement produit par le compilateur Vue. De plus, l'utilisation du mode Vapor avec tous les composants élimine le besoin du DOM virtuel Vue (ce qui réduit la taille du bundle).
  • Vue 2 arrive en fin de vie: Vue 2 est arrivé en fin de vie le 31 décembre 2023. Cependant, Vue 2 est encore assez largement utilisé: environ 50% des téléchargements de packages npm Vue sont destinés à Vue 2.

Nuxt

Nuxt approche de la sortie de Nuxt 4. En plus des versions fréquentes du framework Nuxt au cours de l'année écoulée, l'écosystème des modules Nuxt est passé à près de 220 modules. Voici quelques développements récents dans ce domaine:

Ligne continue

Solid a travaillé sur la version stable 1.0 de son métaframework SolidStart. SolidStart offre une réactivité précise, un routage isomorphique et la prise en charge de divers modes de rendu. Voici quelques points forts:

  • Réactivité précise: le système de réactivité de Solid permet des mises à jour précises et des performances optimales, ce qui permet un rendu et une gestion de l'état efficaces.
  • Routage isomorphe: SolidStart fournit une approche unifiée du routage, ce qui permet aux développeurs de définir des routes qui fonctionnent parfaitement à la fois sur le client et le serveur.
  • Modes de rendu flexibles: SolidStart est compatible avec différents 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 la dernière année, l'équipe Svelte s'est concentrée sur la prochaine version de Svelte 5, qui sera importante. Voici d'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.
  • Runes annoncées: les runes sont une fonctionnalité à venir dans Svelte 5. "Les runes déverrouillent une réactivité universelle et pré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 aux autres frameworks], dans Svelte 5, les signaux sont un détail d'implémentation sous-jacent plutôt qu'un élément avec lequel vous interagissez directement."
  • Sortie de SvelteKit 2 : SvelteKit est le métaframework de Svelte. Cette version inclut le routage superficiel et la prise en charge de Vite 5.

Chrome Aurora

Chrome Aurora est une équipe Google qui collabore avec divers frameworks Web Open Source pour améliorer l'expérience utilisateur, en particulier les performances, sur le Web. Voici quelques-unes des initiatives auxquelles nous avons contribué au cours de l'année écoulée:

Conclusion

L'écosystème de frameworks JavaScript continue d'évoluer à un rythme rapide, et chaque framework apporte son propre ensemble d'innovations et d'améliorations. Que vous soyez intéressé par les dernières fonctionnalités de frameworks établis comme Angular, React et Vue, ou que vous souhaitiez explorer de nouvelles options comme Astro, Remix et Solid, il existe de nombreux développements passionnants à suivre.

En tant que développeurs, nous devons rester informés de ces avancées pour prendre des décisions éclairées lorsque nous choisissons un framework pour nos projets. En comprenant les points forts et les caractéristiques uniques de chaque framework, nous pouvons sélectionner celui qui correspond le mieux aux exigences de notre projet et à nos préférences de développement.

Nous espérons que cette présentation vous a donné un aperçu de l'état actuel des frameworks JavaScript. Pour en savoir plus sur les sujets abordés dans cet article de blog, n'hésitez pas à regarder la conférence Google I/O qui l'accompagne. À vous de jouer !