Les tendances React en 2024

Astro (avec React)

• L’an dernier, Astro est apparu comme le successeur de Gatsby
• Astro est surtout connu pour les sites web statiques, mais gagne aussi en popularité pour les applications web et les endpoints d’API
• Les sites web construits avec Astro offrent par défaut d’excellentes performances, car le rendu est pris en charge côté serveur
• Astro peut aussi être utilisé sans React ni framework UI, et permet de créer des composants d’interface via des fichiers .astro
• Utilisé avec React, seuls le HTML et le CSS sont envoyés au navigateur, et le JavaScript n’est fourni qu’en cas de besoin
  • "fast-by-default"

Authentification (dans React)

• Grâce à plusieurs startups et projets open source, l’authentification dans React redevient un sujet passionnant
• En plus de Firebase Authentication, Auth0, Passport.js et NextAuth, de nouvelles alternatives d’authentification apparaissent
• Supabase propose de nombreuses fonctionnalités en tant qu’alternative open source à Firebase
• Clerk se concentre uniquement sur l’authentification et facilite l’inscription et la connexion des utilisateurs dans React
• Lucia a gagné en popularité avec Astro, tout en offrant une couche d’abstraction claire avec l’open source et les bases de données

Applications React full-stack avec tRPC

• tRPC est devenu mon favori pour les applications full-stack type-safe
• Alors que Prisma génère des types à partir du modèle de base de données d’une application backend, tRPC maintient la sûreté de type du backend jusqu’à la couche API du frontend
• Grâce à sa nature de base fondée sur les appels de procédure distante, tRPC permet à l’application cliente d’appeler l’API du backend comme une fonction classique
• tRPC utilise la spécification JSON-RPC et la couche de transport HTTP, et, combiné à react-query, prend en charge un cache efficace et le regroupement des requêtes

React Server Components et Next.js

• Les React Server Components (RSC) ont été implémentés et adoptés par la communauté l’an dernier via Next 13.4
• Les RSC apportent un changement de paradigme majeur dans le développement web
• Les RSC pourraient représenter un changement encore plus important que les React Hooks, car ils poussent à repenser la manière d’utiliser les composants React dans les applications de grande taille
• Avec les RSC, il est possible de récupérer les données au niveau des composants sur le serveur avant qu’ils ne soient envoyés (ou streamés) vers le navigateur, ce qui améliore les performances
• Je me demande quel rôle les RSC joueront lorsque tRPC et react-query sont utilisés pour la communication client-serveur, mais que les données sont récupérées côté serveur. J’attends avec intérêt de voir ce que cette année apportera

TanStack Router pour le React SPA

• Tanner Linsley affirme que les SPA (Single Page Applications) ne sont pas encore mortes
• Il a participé à la création de react-query et react-table, et présente maintenant une nouvelle bibliothèque, TanStack Router
• Beaucoup de développeurs adoptent des meta-frameworks comme Next.js et Remix, avec leurs routeurs intégrés (et un fort accent sur l’implémentation des RSC), mais personne n’avait encore construit dès le départ un routeur type-safe pour React
• TanStack Router comble un vide important dans l’écosystème React, avec un nouveau routeur doté d’un support TypeScript
• Ce routeur permet aux développeurs de lire et d’écrire l’état de l’URL de manière type-safe

Vercel pousse React vers l’Edge

• Vercel est l’entreprise qui pousse Next.js, profondément impliqué dans le mouvement RSC
• Comme plusieurs développeurs clés ont été recrutés par Vercel, beaucoup considèrent que Vercel est l’un des moteurs de React
• Vercel ne se contente pas d’étendre les frontières de React avec les RSC, mais élargit aussi, via Next.js, la manière de déployer efficacement les applications React et de les livrer aux utilisateurs
• Avec les applications Next sur Vercel, il est possible de streamer des composants React via l’Edge Runtime
• Le streaming de composants React à l’edge a un impact majeur sur les performances
• Combiné à des bases de données serverless comme PlanetScale, qui disposent de répliques dans le monde entier, cela pourrait devenir une tendance intéressante pour la manière d’héberger les applications à l’avenir, ou pour le meilleur emplacement où le faire

Bundlers pour React : Turbopack contre Vite

• Turbopack est le successeur de Webpack. Il n’est pas encore prêt pour la production, mais peut déjà être utilisé pour le développement local dans les applications Next.js
• Par le passé, les bundlers avaient déjà beaucoup de responsabilités, mais la tendance à combiner composants client et serveur en développement comme en production exige une nouvelle génération de bundlers
• Personnellement, j’aurais aimé voir Vite et ses fonctionnalités côté serveur utilisés dans Next.js, mais pendant que Remix, d’autres meta-frameworks et les SPA adoptaient Vite, Vercel/Next s’est lancé dans le développement de Turbopack

Compilateur React (connu sous le nom de React Forget)

• Les développeurs React expriment leur frustration face à l’utilisation de useCallback, useMemo et memo
• L’équipe React développe (assez discrètement) un compilateur appelé React Compiler, destiné à automatiser toute la mémorisation dans les applications React
• On peut s’attendre à la disparition du processus manuel consistant à mémoriser les fonctions (useCallback), les valeurs (useMemo) et les composants (memo)
• React se chargera de tout mémoriser pour éviter de tout recalculer au rendu suivant
• React Compiler automatisera cette mémorisation manuelle et améliorera ainsi les performances des applications React
• Une annonce est probable autour de React 19 et de React Conf 2024

Biome

• Beaucoup se plaignent de la configuration d’ESLint et de son interaction avec Prettier, et Biome (anciennement Rome) veut proposer à la place une solution de toolchain rapide et intégrée
• Une autre alternative très prometteuse dans le domaine des toolchains tout-en-un est oxc (JavaScript Oxidation Compiler)

Bibliothèques UI headless pour React

• Les développeurs React ont tendance à changer chaque année de bibliothèque UI favorite
• Il y a quelques années, c’était Material UI, puis Semantic UI/Ant Design, ensuite Chakra UI, puis Mantine UI, et l’an dernier beaucoup se sont arrêtés sur shadcn/UI
• Tous les choix précédents étaient principalement motivés par des attentes en matière de design et d’ergonomie, mais avec shadcn/UI, certaines choses ont changé
• shadcn/UI est la première bibliothèque UI populaire à assumer pleinement Tailwind et à permettre une personnalisation poussée des composants
• Les bibliothèques UI headless suivent la tendance qui consiste à fournir fonctionnalités et accessibilité sans imposer de design
• Les solutions CSS-in-JS comme Styled Components ou Emotion alourdissent le client/le navigateur, c’est pourquoi de nouvelles approches comme StyleX atténuent ce problème en compilant vers du CSS utility-first

[firea32]

https://github.com/facebook/react-strict-dom
J’attends aussi beaucoup de react-strict-dom.
Si le projet aboutit correctement, je pense qu’il pourrait remplacer react-native-web.

[greenhead]

J’ai vraiment hâte de voir React Forget