Commençons par un historique de l'écosystème React pour comprendre où nous en sommes arrivés.
L'abandon de Create React App (CRA)
Create React App (CRA) était un outil de ligne de commande développé par Facebook pour aider les développeurs à créer des applications React rapidement et facilement. Il fournit une configuration standardisée pour les projets React, intégrant des outils comme Webpack et Babel, et élimine le besoin de configurer manuellement ces outils complexes.
L'objectif principal de CRA était de permettre aux développeurs de démarrer un nouveau projet React sans avoir à se soucier des configurations initiales, ce qui permet de se concentrer sur le développement de l'application elle-même.
Les besoins des développeurs ont évolué au fil du temps, et CRA n'a pas suivi le rythme des nouvelles exigences. Les développeurs recherchent maintenant des solutions plus flexibles et plus performantes, capables de gérer des fonctionnalités avancées comme le rendu côté serveur (SSR), le chargement automatique du code (code splitting), et les actions côté serveur (Server Actions). CRA n'a pas été conçu pour répondre à ces exigences modernes.
CRA n'a pas été régulièrement mis à jour pour inclure les dernières innovations et meilleures pratiques en matière de développement React. Cela a conduit à une stagnation de l'outil, rendant difficile pour les développeurs de tirer parti des dernières fonctionnalités et améliorations de performance de React. Par exemple, le dernier commit significatif de CRA date de plusieurs années, ce qui indique un manque de maintenance active.
Les documents officiels de React recommandent désormais l'utilisation de frameworks comme nous le verrons par la suite.
L'émergence de Vite
Vite est un outil de build et de développement rapide pour les applications frontend, créé par Evan You, le créateur de Vue.js.
Le nom "Vite" vient tout simplement du français, soulignant sa rapidité par rapport aux outils de build traditionnels comme Webpack. Depuis son lancement, Vite a rapidement gagné en popularité dans l'écosystème frontend, y compris pour des frameworks comme React, Vue, et Angular.
Vite a ainsi remplacé Webpack dans de nombreux frameworks pour plusieurs raisons clés, principalement liées à sa performance et à son expérience développeur améliorée.
Premièrement, Vite utilise une approche basée sur les modules ES natifs, ce qui permet un rechargement à chaud (HMR) presque instantané et un démarrage de serveur de développement extrêmement rapide. Contrairement à Webpack, qui peut nécessiter des temps de compilation initiaux longs et des configurations complexes pour le rechargement à chaud, Vite sert les modules directement depuis le navigateur. Cela se traduit par une expérience de développement beaucoup plus fluide et réactive, où les modifications de code se reflètent presque instantanément dans le navigateur sans nécessiter de re-bundling complet.
De plus, Vite améliore considérablement le processus de build pour la production. En utilisant esbuild pour le pré-bundling des dépendances et des builds de production, Vite offre des performances de build nettement supérieures à celles de Webpack. Esbuild, écrit en Go, est conçu pour être extrêmement rapide et efficace, réduisant ainsi le temps de compilation et optimisant les performances globales de l'application. En outre, la simplicité de la configuration de Vite par rapport à Webpack, ainsi que son écosystème de plugins riche et extensible, ont contribué à son adoption rapide. Les développeurs bénéficient d'une configuration par défaut solide et facile à personnaliser, rendant Vite attrayant pour un large éventail de projets et de frameworks, y compris Angular, React, et Vue.
Vite, le nouveau CRA ?
Vite est absolument parfait pour démarrer avec React et apprendre la librairie mais elle il n'est pas suffisant.
Ainsi pour l'équipe de Vite :
With SPA mode, there are high chances of Remix filling the void that create-react-app left (without the known CRA limitations). People wanted us to turn the Vite React starters into a CRA equivalent. But this is right path. The new CRA had to come deep from the React community.
— patak (@patak_dev) January 18, 2024
Ce qui se traduit par :
Avec le mode SPA, il y a de fortes chances que Remix comble le vide laissé par create-react-app (sans les limitations connues de CRA). Les gens voulaient que nous transformions les starters React de Vite en un équivalent de CRA. Mais c'est le bon chemin. Le nouveau CRA devait provenir de la communauté profonde de React.
Comme avec CRA, Vite ne fournit ni routeur, ni solution de récupération de données, ni aucune des fonctionnalités avancées comme la gestion d'état, le SSR etc. Ce n'était pas l'objectif de CRA et ce n'est pas non plus l'objectif de Vite.
CRA était un simple starter d'application React qui vous permettait d'utiliser les bibliothèques de l'écosystème React que vous préfériez. De nombreux projets lancés avec CRA utilisent React Router pour le routage, ce qui signifie qu'il existe un grand nombre d'"applications CRA" qui sont également des "applications React Router". Et c'est aussi le cas avec Vite.
Vite n'est donc pas aujourd'hui suffisant pour créer une application moderne avec React.
Que choisir aujourd'hui pour créer une application React ?
Si vous souhaitez créer une nouvelle application ou un site web avec React, il est aujourd'hui recommandé officiellement d'utiliser l'un des frameworks React.
Bien que vous puissiez utiliser React sans framework, la plupart des applications finissent par nécessiter des solutions pour des problèmes courants comme le découpage de code, le routage, la récupération de données et la génération de HTML. Ces problèmes sont communs à toutes les bibliothèques d'interface utilisateur, pas seulement à React.
Pourquoi utiliser un framework React ?
Même si vous n'avez pas besoin de routage ou de récupération de données au départ, vous finirez probablement par ajouter des bibliothèques pour ces fonctionnalités.
À mesure que votre bundle JavaScript s'agrandit avec chaque nouvelle fonctionnalité, vous devrez peut-être découper le code pour chaque route individuellement. À mesure que vos besoins en récupération de données deviennent plus complexes, vous risquez de rencontrer des ralentissements dus à des appels réseau serveur-client en cascade.
Résoudre ces problèmes par vous-même nécessite d'intégrer votre bundler avec votre routeur et votre bibliothèque pour récupérer vos données.
Un setup initial peut sembler simple, mais faire en sorte qu'une application se charge rapidement même en grandissant demande beaucoup de travail.
Vous voudrez envoyer la quantité minimale de code d'application en une seule requête client-serveur, en parallèle avec toutes les données nécessaires pour la page. Vous souhaiterez que la page soit interactive avant même que votre code JavaScript ne s'exécute, pour supporter l'amélioration progressive. Vous pourriez vouloir générer un dossier de fichiers HTML statiques complets pour vos pages marketing, pouvant être hébergés n'importe où et fonctionnant avec JavaScript désactivé.
Les frameworks React résolvent ces problèmes par défaut, sans travail supplémentaire de votre part. Ils vous permettent de démarrer très simplement et de faire évoluer votre application selon vos besoins.
Les frameworks recommandés : Next.js, React Router et Gatsby
Next.js est un framework React full-stack. Il permet de créer des applications React de toutes tailles.
Next.js est maintenu par Vercel et peut être déployé sur n'importe quel hébergement Node.js ou serverless, ou sur votre propre serveur. Il supporte également une exportation statique ne nécessitant pas de serveur.
L'équipe de React collabore avec l'équipe de Next.js pour intégrer et tester les dernières et prochaines fonctionnalités React comme les React Server Components.
Vous pouvez suivre notre formation Next.js
React Router (anciennement Remix) est un framework React full-stack avec un routage imbriqué. Il permet de découper votre application en parties imbriquées pouvant charger des données en parallèle et se rafraîchir en réponse aux actions utilisateur.
React Router est maintenu par Shopify et peut être déployé sur n'importe quel hébergement Node.js ou serverless.
Gatsby est un framework React pour les sites web rapides et soutenus par des CMS. Son écosystème de plugins riche et sa couche de données GraphQL simplifient l'intégration de contenu, d'APIs et de services en un seul site web.
Gatsby est maintenu par Netlify et peut être déployé sur n'importe quel hébergement statique.
Next.js plus en détail
Next.js, développé par Vercel, a été conçu comme un framework React complet, permettant non seulement la création d'interfaces utilisateur mais aussi l'exécution de serveurs web performants et la gestion du routage des applications. Contrairement à React qui se concentre principalement sur les interfaces, Next.js permet aux développeurs de créer des applications full-stack avec des capacités de rendu côté serveur, de génération de pages statiques et de gestion d'internationalisation. Depuis son lancement, Next.js a connu une adoption massive, notamment en raison de son intégration transparente avec les technologies de Google et Facebook.
Depuis ses débuts, l'utilisation de Next.js a explosé, atteignant plusieurs millions de téléchargements par mois. De nombreuses entreprises de premier plan comme TikTok, Twitch, Hulu, Ticketmaster, et même Shopify dépendent de Next.js pour leurs applications web. Cette popularité est due en partie à la capacité de Next.js à optimiser les performances SEO grâce à la génération de pages statiques et à la gestion simplifiée des métadonnées pour chaque page, ce qui facilite l'indexation par les moteurs de recherche.
Next.js offre des fonctionnalités avancées comme l'optimisation automatique des images, l'internationalisation simple et un système de routage facile basé sur la structure des dossiers et fichiers. Les développeurs peuvent choisir entre le rendu statique (SSG), le rendu côté serveur (SSR) et le rendu côté client (CSR) pour chaque page, permettant ainsi un équilibre optimal entre performance et interactivité. Cette flexibilité est un atout majeur pour les applications nécessitant des optimisations spécifiques en fonction des besoins des utilisateurs et des cas d'utilisation.
Grâce à son intégration avec des outils comme Vite et des technologies comme SWC et TurboPack, Next.js offre des performances de compilation et de minification exceptionnelles. SWC, un compilateur basé sur Rust, transforme le code en JavaScript compatible avec tous les navigateurs, tandis que TurboPack gère la fusion des imports et le code splitting, créant de petits chunks optimisés pour chaque page. Ces optimisations réduisent considérablement la taille des fichiers et améliorent les temps de chargement, offrant une expérience utilisateur fluide.
Next.js permet de composer des pages avec des composants clients et serveurs, offrant ainsi une grande flexibilité dans la conception des applications. Les composants serveurs réduisent le bundle JavaScript envoyé au client et permettent des interactions directes avec des services backend. Les composants clients, bien que pré-rendus côté serveur, sont hydratés côté client pour gérer les interactions utilisateur. Cette architecture hybride assure une performance optimale tout en conservant la réactivité des interfaces utilisateur.
Vous pouvez suivre notre formation Next.js
React Router (= Remix) plus en détail
Ryan Florence et Michael Jackson ont créé React Router il y a plus de 10 ans. C'était à l'origine un projet open-source sur lequel ils travaillaient entre leurs sessions de formation sur React. React Router est rapidement devenu un élément crucial de l'écosystème React, utilisé dans des millions de projets.
Lors de la période du COVID, Ryan et Michael ont cherché un nouveau moyen de subsistance. Ils ont alors décidé de créer "React Router: The Framework", connu sous le nom de Remix. Remix est un framework full-stack basé sur les standards du web pour améliorer la construction de sites et applications. React Router a toujours été une dépendance majeure de Remix, juste après React lui-même.
Les développeurs ont mis à jour React Router pour inclure les excellents modèles de chargement de Remix. Plus tard, ils ont réécrit Remix pour dépendre encore plus directement de React Router. Cela a mené à une situation où les deux projets sont devenus presque indiscernables, notamment avec l'introduction du plugin Vite et du mode SPA (Single Page Application).
Étant donné les similitudes croissantes, les développeurs ont décidé de fusionner Remix dans React Router. Ce qui devait être la version 3 de Remix sera désormais la version 7 de React Router. Cela permettra à tous les utilisateurs de React Router de bénéficier des avantages de Remix sans nécessiter une migration complète, simplement en changeant les imports.
Shopify et de nombreux autres grands projets dépendent de React Router. Avec l'arrêt de la maintenance de Create React App (CRA), il y a un besoin croissant de solutions modernes pour les applications React, besoin que Remix et React Router v7 visent à combler.
React Router est donc un excellent choix et sa version 7 intégrera toutes les fonctionnalités avancées de Remix ! En combinaison avec la sortie de React 19, cela fait beaucoup d'améliorations pour l'écosystème React.
Notre formation React 19 utilisera React Router version 7.
Gatsby plus en détail
Gatsby, créé par Kyle Mathews en 2015, est un framework basé sur React destiné à la génération de sites statiques. Dès ses débuts, Gatsby a été conçu pour offrir une expérience de développement moderne avec des performances optimales. Le framework permet de générer des sites statiques en extrayant des données à partir de diverses sources (CMS, bases de données, fichiers markdown) et en les transformant en pages statiques HTML. Cette approche favorise une vitesse de chargement rapide et une meilleure performance SEO, des aspects cruciaux pour les sites web contemporains.
Gatsby a rapidement gagné en popularité, particulièrement auprès des développeurs cherchant à créer des sites web rapides et performants. Des entreprises de renom comme IBM, Airbnb, Impossible Foods et The New York Times utilisent Gatsby pour leurs sites web et applications. L'écosystème de Gatsby inclut un riche ensemble de plugins et de thèmes qui facilitent l'intégration de diverses fonctionnalités et la connexion à une multitude de sources de données, rendant le framework extrêmement flexible et adaptable aux besoins variés des développeurs et des entreprises.
L'un des principaux avantages de Gatsby réside dans sa capacité à générer des sites statiques ultra-rapides. Le framework utilise GraphQL pour récupérer et gérer les données, permettant une optimisation fine du contenu avant la génération des pages. Cette approche assure que seules les données nécessaires sont incluses dans les pages, réduisant ainsi le temps de chargement. De plus, Gatsby offre des fonctionnalités avancées telles que la gestion des images, la mise en cache des pages, et le préchargement des ressources, ce qui améliore encore les performances des sites web construits avec ce framework.
Gatsby excelle dans l'optimisation des performances grâce à son architecture de génération de sites statiques. En générant des pages HTML statiques lors du build, Gatsby permet de servir ces pages via un CDN (Content Delivery Network), garantissant des temps de réponse rapides à travers le monde. Les images sont automatiquement optimisées pour différentes tailles d'écran et formats, et le code JavaScript est minifié et divisé en paquets adaptés pour chaque page. Ces optimisations, combinées à des pratiques de mise en cache intelligentes, assurent une performance exceptionnelle et une expérience utilisateur fluide.
Inconvénients de Gatsby
Gatsby, en générant des sites statiques, peut entraîner des temps de build très longs, surtout pour les sites volumineux avec beaucoup de pages. Chaque page doit être générée statiquement lors de chaque build, ce qui peut devenir un goulot d'étranglement.
Gatsby est principalement conçu pour des sites statiques, ce qui peut limiter son efficacité pour des applications nécessitant des fonctionnalités dynamiques et interactives. Les mises à jour en temps réel et les contenus fréquemment changeants peuvent nécessiter des solutions supplémentaires.
Gatsby utilise GraphQL pour la gestion et la récupération des données, ce qui peut ajouter une couche de complexité pour les développeurs non familiers avec GraphQL. Bien que puissant, cela peut augmenter la courbe d'apprentissage et compliquer la mise en place initiale.
En résumé, bien que Gatsby soit un excellent choix pour la création de sites statiques rapides et performants, il présente certaines limitations en termes de temps de build, gestion de contenu dynamique, complexité de configuration des données, dépendance aux plugins et support d'internationalisation par rapport à Next.js et React Router. Ces frameworks offrent des solutions plus flexibles et complètes pour des applications web modernes et interactives.
Commencez dès aujourd'hui notre formation React 19.
