MDN a abandonné React. Voici ce qu'ils ont utilisé à la place.

Le site de documentation le plus fiable du web vient de se débarrasser de son frontend React. Leur nouvelle stack est un pari radical sur la technologie native des navigateurs qui pourrait changer la façon dont nous construisons des sites web.

Stork.AI
Hero image for: MDN a abandonné React. Voici ce qu'ils ont utilisé à la place.
💡

En bref / Points clés

Le site de documentation le plus fiable du web vient de se débarrasser de son frontend React. Leur nouvelle stack est un pari radical sur la technologie native des navigateurs qui pourrait changer la façon dont nous construisons des sites web.

Le jour où React a perdu son plus grand défenseur

Pendant des années, les développeurs web se sont appuyés sur MDN Web Docs Web Docs comme la bible incontestée de la plateforme web ouverte. Il ne s'agit pas seulement d'un site de documentation, mais de l'autorité définitive dictant les meilleures pratiques, définissant les standards et guidant d'innombrables décisions architecturales à travers l'industrie. Ses choix techniques résonnent donc avec un poids inégalé, signalant des changements dans les fondations mêmes de la façon dont nous construisons pour Internet.

Cette influence a fait de l'annonce un événement sismique : MDN Web Docs Web Docs a officiellement abandonné React. Il ne s'agissait pas d'une dépréciation silencieuse ou d'un refactoring mineur ; c'était une répudiation à grande échelle du framework qui alimentait tout son frontend, Yari, une SPA React éjectée de Create React App avec une "crazy webpack config" et même en s'appuyant sur `dangerouslySetInnerHTML`. Cette décision a envoyé une onde de choc à travers la communauté des développeurs, comparable à un grand fournisseur de cloud qui abandonnerait soudainement le support de sa base de données phare.

Cette décision transcende une simple refonte d'entreprise ; c'est une déclaration profonde sur l'orientation future de la plateforme web elle-même. MDN Web Docs Web Docs, l'entité même qui documente HTML, CSS et JavaScript, défend désormais la construction avec ces technologies intrinsèques. Ils ont reconstruit leur frontend de fond en comble, adoptant les Web Components avec Lit et des composants serveur personnalisés, un contraste frappant avec leur précédente Single Page Application basée sur React.

MDN Web Docs Web Docs a fait un pas audacieux et délibéré loin de la tendance dominante du 'SPA pour tout'. Leur nouvelle architecture intègre des éléments personnalisés directement dans le contenu, éliminant le besoin d'un wrapper et réduisant le JavaScript inutilisé. Cet engagement envers un développement léger et aligné sur les standards est évident dans des fonctionnalités comme leur menu déroulant principal, qui fonctionne désormais entièrement en CSS avant le chargement de JavaScript, puis s'améliore progressivement. Le temps de démarrage de l'environnement de développement a chuté de 2 minutes à 2 secondes, démontrant les avantages tangibles de leur nouvelle approche performante.

Dans les coulisses de Yari : La 'stack folle' que MDN a dû abandonner

Illustration : Dans les coulisses de Yari : La 'stack folle' que MDN a dû abandonner
Illustration : Dans les coulisses de Yari : La 'stack folle' que MDN a dû abandonner

MDN Web Docs Web Docs s'appuyait autrefois sur Yari, une Single Page Application (SPA) basée sur React qui servait de frontend. Il ne s'agissait pas d'une simple implémentation de React ; l'équipe avait éjecté Yari de Create React App, signalant une plongée profonde dans des configurations personnalisées et très complexes. Éjecter signifiait abandonner la simplicité gérée de Create React App pour un contrôle granulaire, un choix qui entraîne souvent d'importantes charges de maintenance au fil du temps.

Au cœur de la dette technique croissante de Yari se trouvait sa "crazy webpack config". Cette configuration complexe, témoin d'années de personnalisation, de correctifs et de contournements, entravait gravement la vélocité des développeurs et l'efficacité des builds. La configuration tentaculaire rendait le débogage et les mises à jour un cauchemar, créant une expérience de développement lente et fragile. Les développeurs étaient confrontés à des attentes interminables, avec des temps de démarrage de l'environnement de développement qui montaient à deux minutes douloureuses – un frein significatif pour un projet axé sur l'itération rapide et la documentation complète des standards web en évolution.

Ajoutant à la complexité et illustrant la maladresse inhérente de la pile technologique, Yari employait fréquemment `dangerouslySetInnerHTML` pour rendre le contenu. Pour un site de documentation, où l'objectif principal est de présenter des informations fiables de manière sécurisée, cette pratique comportait des risques de sécurité substantiels, ouvrant des voies aux vulnérabilités de script inter-sites (XSS). Cela semblait également intrinsèquement lourd, nécessitant une désinfection manuelle du contenu et contournant le modèle de rendu déclaratif de React, un indicateur flagrant des compromis difficiles que l'équipe a dû faire.

En fin de compte, Yari représentait un outil puissant fondamentalement mal appliqué. Une SPA lourde, conçue pour des applications hautement interactives et dynamiques avec une gestion d'état complexe, s'est avérée mal adaptée à la mission principale de MDN Web Docs : fournir une documentation largement statique et conforme aux standards. La pile livrait des quantités substantielles de JavaScript inutilisé à chaque chargement de page, contribuant à des rendus de page plus lents et à une expérience utilisateur inefficace. Cette architecture contredisait directement les principes de performance web que MDN Web Docs elle-même défend, un désalignement critique qui a poussé l'équipe vers une refonte radicale.

Le Pari Radical sur les Technologies Natives du Navigateur

La refonte du frontend de MDN Web Docs reposait sur une philosophie radicale : construire *avec la plateforme*, et non simplement par-dessus. Ils ont consciemment rejeté les couches d'abstraction des frameworks traditionnels, adoptant directement les capacités natives du navigateur. Cela signifiait un pivot complet vers les Web Components, en tirant spécifiquement parti de Lit pour l'implémentation.

Les Web Components offrent une suite puissante de standards web pour créer des balises HTML personnalisées, réutilisables et encapsulées. Leurs avantages sont profonds : une véritable encapsulation via le Shadow DOM prévient les conflits de style ou de script, ils offrent une réutilisabilité agnostique aux frameworks et assurent une interopérabilité transparente à travers divers environnements frontend. Cette approche permet aux composants de vivre directement dans le contenu, éliminant les complexités des wrappers et l'envoi de JavaScript inutilisé.

Ce changement stratégique priorise la pérennisation du site de documentation. En s'appuyant sur des standards web fondamentaux comme les Custom Elements, le Shadow DOM et les HTML Templates, MDN Web Docs a investi dans des technologies dont la durée de vie dépasse largement celle de n'importe quel framework JavaScript. Les standards évoluent lentement et de manière prévisible, assurant une stabilité à long terme et réduisant le risque d'obsolescence.

Contrastez cela fortement avec le renouvellement rapide et le verrouillage de l'écosystème prévalents dans le monde des frameworks. Les frameworks dictent souvent les modèles de développement, introduisent de fréquents changements cassants et imposent des refactorisations et des mises à jour de dépendances constantes. MDN Web Docs a explicitement contourné ce cycle, choisissant la stabilité plutôt que les tendances passagères.

La nouvelle pile technologique, comprenant des Web Components construits avec Lit et des composants serveur personnalisés, offre des gains de performance tangibles. Le temps de démarrage de l'environnement de développement est passé d'un agonisant 2 minutes à seulement 2 secondes. Cette architecture légère garantit que seuls le CSS et le JavaScript exacts dont une page a besoin sont chargés, réduisant considérablement le code envoyé et améliorant les temps de chargement initiaux des pages. Pour une plongée plus approfondie dans les spécificités techniques de cette transformation, les lecteurs peuvent consulter Under the hood of MDN Web Docs's new frontend - MDN Web Docs.

Découvrez Lit : La Puissance Anti-Framework

Abandonner React a signifié que MDN Web Docs a adopté une philosophie de construction avec la plateforme, et non pas seulement sur elle. Ce changement radical a trouvé son partenaire idéal en Lit, une bibliothèque simple pour construire des Web Components rapides et légers. Lit n'est pas un framework tentaculaire mais un outil ciblé, offrant juste assez d'abstraction pour rendre les Web Components natifs agréables à utiliser, sans dicter une architecture d'application entière.

L'attrait de Lit réside dans son empreinte minimale, souvent mesurée en kilooctets, et ses performances d'exécution exceptionnelles. Il offre une API conviviale pour les développeurs qui lisse élégamment les aspérités des API de navigateur natives, simplifiant le templating réactif et la gestion d'état avec des décorateurs intuitifs et un rendu déclaratif. Cette approche garantit que les composants restent incroyablement légers, rapides et intrinsèquement alignés sur les standards du web.

De manière cruciale, Lit permet aux éléments personnalisés de vivre directement au sein du HTML, éliminant le besoin de composants enveloppants encombrants ou d'arbres de rendu complexes. Cela réduit drastiquement le code passe-partout et garantit que les composants sont véritablement natifs, résidant de manière transparente aux côtés des éléments HTML standards. Le précédent SPA React de MDN Web Docs, Yari, un Create React App éjecté, s'appuyait souvent sur une "crazy webpack config" et même `dangerouslySetInnerHTML` pour injecter du contenu, illustrant la friction significative dans l'intégration d'éléments dynamiques au sein de sa structure complexe.

Lit a offert un compromis pragmatique à MDN Web Docs, trouvant un équilibre entre les API de navigateur brutes et un framework complet. Il a fourni beaucoup plus de structure et de maintenabilité que le JavaScript pur, tout en ayant une fraction de la surcharge et de l'opinion de React. Cela a permis à l'équipe de tirer parti de la puissance des standards web modernes sans le fardeau d'un arbre de dépendances vaste et complexe. Le résultat est une pile frontend non seulement performante – réduisant les temps de démarrage de l'environnement de développement de 2 minutes à seulement 2 secondes – mais aussi incroyablement intuitive pour le développement futur, s'alignant parfaitement avec leur mission de documenter et d'incarner la plateforme web ouverte.

L'arme secrète de MDN : les Server Components maison

Illustration : L'arme secrète de MDN : les Server Components maison
Illustration : L'arme secrète de MDN : les Server Components maison

MDN Web Docs a conçu ses propres server components, une démarche prémonitoire qui a anticipé le virage de l'industrie vers les UI pilotées par le serveur bien avant que les React Server Components ne gagnent en popularité. Cette architecture propriétaire vise une efficacité extrême, garantissant que chaque page ne délivre que le code essentiel pour une expérience utilisateur ultra-rapide. L'équipe a priorisé la minimisation de la surcharge côté client, une réponse directe au gonflement associé à leur précédent frontend Yari basé sur Create React App.

Ces server components personnalisés rendent les composants Lit directement en HTML sur le serveur, un processus qui réduit considérablement la charge de travail du client. En utilisant NodeJS, le backend de MDN Web Docs traite le code Lit, transformant les web components interactifs en chaînes HTML statiques avant même qu'ils n'atteignent le navigateur. Cette capacité de pré-rendu robuste élimine les délais de rendu côté client, délivrant un contenu entièrement formé immédiatement et contournant les complexités d'un SPA côté client traditionnel.

De manière cruciale, MDN Web Docs tire parti du Declarative Shadow DOM, une fonctionnalité puissante de la plateforme web qui gagne encore en adoption. Cette technologie intègre le shadow DOM d'un composant et les styles associés directement dans la charge utile HTML initiale, plutôt que de s'appuyer sur JavaScript pour le construire après le chargement. Les navigateurs prenant en charge le Declarative Shadow DOM peuvent instantanément rendre la structure encapsulée et le style du composant dès l'arrivée du HTML, sans attendre qu'une seule ligne de JavaScript ne soit analysée ou exécutée. Cela offre un gain visuel essentiel.

Cette approche innovante signifie que les utilisateurs voient un composant entièrement stylisé et fonctionnel dès l'arrivée du HTML, améliorant considérablement les performances perçues et réduisant le décalage de mise en page cumulatif. Seul le JavaScript nécessaire pour hydrater et ajouter de l'interactivité aux composants *réellement présents* sur la page est téléchargé. Le JavaScript inutilisé des composants non présents sur une page spécifique n'atteint jamais le client, un contraste frappant avec l'ancienne SPA Yari qui livrait de gros paquets de code potentiellement inutile sur chaque route.

Les composants serveur de MDN Web Docs fournissent une charge utile incroyablement légère et optimisée, réduisant considérablement les temps de chargement initiaux et la consommation de bande passante pour sa vaste bibliothèque de documentation. Cet investissement stratégique dans le server-side rendering, associé aux capacités natives du navigateur, témoigne d'un engagement profond à construire avec la plateforme, et pas seulement sur elle. Le résultat est un site de documentation qui non seulement explique les web standards, mais incarne également les standards de performance et d'efficacité qu'il défend, offrant une alternative convaincante.

De 2 Minutes à 2 Seconds : l'impact réel

La transformation de l'architecture frontend de MDN Web Docs a eu son impact le plus spectaculaire sur la productivité des développeurs. Là où les ingénieurs attendaient autrefois plus de deux minutes pour que leur environnement de développement local démarre, la nouvelle pile démarre maintenant en seulement deux secondes. Cette réduction stupéfiante de 98 % du temps de démarrage remodèle fondamentalement le flux de travail de développement, libérant d'innombrables heures pour le travail sur les fonctionnalités et les corrections de bugs au lieu des files d'attente de compilation.

Cette efficacité retrouvée s'étend bien au-delà des cycles de développement internes, bénéficiant directement à chaque utilisateur accédant à la documentation. Les visiteurs bénéficient désormais de chargements de page nettement plus rapides, consomment moins de données et profitent d'une expérience utilisateur beaucoup plus réactive dans l'ensemble. L'architecture priorise la performance, garantissant que MDN Web Docs reste accessible et réactif même sur des connexions réseau plus lentes ou des appareils à ressources limitées, incarnant un web inclusif.

Considérez le menu déroulant principal du site, un excellent exemple de cette philosophie de la performance d'abord. Il fonctionne désormais entièrement avec du CSS avant que tout JavaScript ne se charge, puis s'améliore progressivement une fois que les scripts nécessaires deviennent disponibles. Cette approche native-first offre une interactivité et une réactivité instantanées, démontrant la puissance de la construction avec la plateforme web plutôt que de superposer des frameworks lourds.

Ces gains remarquables découlent directement de la décision architecturale de réduire drastiquement les charges utiles JavaScript et d'adopter pleinement les fonctionnalités natives du navigateur. L'élimination de la lourde surcharge de l'application monopage (SPA) React, combinée à l'utilisation stratégique des Web Components, a supprimé la complexité inutile. Des bibliothèques comme Lit fournissent une base légère pour ces composants, tandis que les composants serveur maison de MDN Web Docs garantissent que seul le CSS et le JavaScript exacts dont une page a besoin atteignent le client.

En fin de compte, ce changement représente un engagement profond envers les web standards mêmes que MDN Web Docs documente. Passer d'une Create React App complexe et éjectée à une pile rationalisée construite sur les capacités natives du navigateur a non seulement suralimenté les performances, mais a également établi une nouvelle référence pour la manière dont les plateformes web influentes peuvent fonctionner, prouvant que moins de JavaScript signifie souvent plus de vitesse.

Progressive Enhancement : Quand le JavaScript est optionnel

La nouvelle architecture de MDN Web Docs Web Docs adopte le Progressive Enhancement, un principe fondamental qui privilégie une base solide et fonctionnelle pour tous les utilisateurs. Cette approche commence par le contenu et les fonctionnalités de base fournis via un HTML et un CSS robustes, superposant JavaScript uniquement comme une amélioration facultative. Le site reste entièrement utilisable même si les scripts échouent, sont bloqués ou n'ont pas encore été chargés.

Considérez le menu déroulant de navigation principal du site, un élément d'interface critique. Il fonctionne parfaitement en utilisant uniquement le CSS, répondant aux interactions de l'utilisateur sans une seule ligne de JavaScript. Ce n'est qu'après le chargement du JavaScript nécessaire qu'il reçoit des améliorations supplémentaires, telles qu'une navigation au clavier améliorée ou une gestion dynamique de l'état. Cela garantit une utilisabilité immédiate et une expérience cohérente dans diverses conditions de réseau.

Ce choix architectural offre des avantages significatifs : une résilience améliorée, une large accessibilité et une performance perçue considérablement plus rapide. Les utilisateurs disposant de connexions lentes ou d'appareils plus anciens accèdent toujours à un site entièrement fonctionnel, ne rencontrant jamais d'interface défectueuse. Le contenu et la navigation de base sont toujours disponibles, offrant une base robuste.

Une telle stratégie contraste fortement avec de nombreuses architectures de Single Page Application (SPA) modernes. Souvent, une SPA livre une page presque vide, nécessitant le téléchargement, l'analyse et l'exécution d'un gros paquet JavaScript avant que tout contenu ne devienne visible ou interactif. Cela introduit des points de défaillance critiques et des retards significatifs pour les utilisateurs.

L'engagement de MDN Web Docs Web Docs envers le Progressive Enhancement souligne sa philosophie : construire avec la plateforme, pas seulement au-dessus. En tirant parti des capacités natives du navigateur en premier lieu, l'équipe a offert une expérience web intrinsèquement plus robuste, accessible et performante pour tous ceux qui accèdent à la source définitive des standards web.

Plus que du code : une refonte complète de l'interface utilisateur

Illustration : Plus que du code : une refonte complète de l'interface utilisateur
Illustration : Plus que du code : une refonte complète de l'interface utilisateur

Au-delà du profond changement architectural, MDN Web Docs Web Docs a également dévoilé une refonte spectaculaire de son interface utilisateur. Il ne s'agissait pas seulement d'une réécriture du code backend ; cela représentait une ré-imagination complète de la manière dont les développeurs interagissent avec la documentation la plus critique du web. Le nouveau frontend a offert une expérience soignée et intuitive, reflétant directement l'engagement sous-jacent envers les standards web modernes et une approche centrée sur l'utilisateur.

Les visiteurs ont immédiatement remarqué une esthétique plus propre et plus cohérente sur l'ensemble de la plateforme. L'équipe a méticuleusement affiné la typographie, améliorant la lisibilité avec des polices soigneusement choisies pour la prose et les exemples de code, rendant les articles longs moins fatigants. Une nouvelle police de code dédiée a considérablement amélioré la lisibilité de la syntaxe, un détail crucial pour un site centré sur la programmation et la précision technique.

Des éléments d'interface utilisateur spécifiques ont reçu une attention significative, transformant les interactions quotidiennes. MDN Web Docs Web Docs est passé aux icônes Lucide nettes, remplaçant les anciens actifs par un ensemble évolutif et cohérent qui a amélioré la clarté visuelle. L'expérience de recherche a connu une refonte puissante, introduisant un modal plus intuitif et riche en fonctionnalités qui a rationalisé la découverte de la documentation, souvent le premier point d'interaction pour les utilisateurs. Même la navigation supérieure a subi un rafraîchissement complet, offrant des chemins plus clairs vers le contenu essentiel.

De manière cruciale, la nouvelle architecture basée sur les composants construite avec Lit a directement facilité ces améliorations visuelles. En adoptant les web components légers de Lit, MDN Web Docs Web Docs a établi un système de conception cohérent, rendant beaucoup plus facile le maintien de la cohérence sur des centaines de milliers de pages tout en assurant des cycles de développement rapides. Cette approche modulaire a garanti que les éléments d'interface utilisateur étaient réutilisables, performants et stylisés de manière cohérente, élevant l'expérience utilisateur globale pour correspondre aux prouesses techniques sous-jacentes.

Cela annonce-t-il la fin de l'ère des SPA ?

Le pivot radical de MDN Web Docs Web Docs suscite inévitablement une question singulière parmi les développeurs : cela annonce-t-il la fin de la domination de React, ou même de l'ère des Single Page Application (SPA) elle-même ? La réponse est nuancée, pas une déclaration définitive d'obsolescence. React reste un outil puissant, indispensable pour les applications hautement interactives et complexes où la gestion riche de l'état côté client est primordiale.

MDN Web Docs Web Docs, cependant, fonctionne fondamentalement comme une plateforme de diffusion de contenu. Sa fonction principale est de servir la documentation efficacement, et non de gérer des interactions utilisateur complexes nécessitant une SPA complète. La pile Yari précédente, un Create React App éjecté, est devenue une solution 'overkill', alourdie par une "crazy webpack config" et nécessitant même `dangerouslySetInnerHTML` pour intégrer du contenu. MDN Web Docs Web Docs n'avait tout simplement pas besoin du lourd JavaScript bundle ou de la surcharge de routage côté client inhérente à une SPA traditionnelle.

Cette décision de MDN Web Docs Web Docs reflète une tendance industrielle plus large et accélérée, s'éloignant de la mentalité 'SPA-by-default'. Les développeurs recherchent de plus en plus des solutions architecturales plus nuancées, adaptées à des cas d'utilisation spécifiques. Les exemples incluent des frameworks et des bibliothèques tels que : - Astro - Qwik - Modern server-side rendering (SSR) frameworks

Ces solutions émergentes défendent des concepts tels que la partial hydration et l'islands architecture, ne livrant que le JavaScript nécessaire aux composants interactifs. Elles priorisent les performances de chargement initial des pages et exploitent le server-side rendering pour fournir une base rapide et riche en contenu. Cette philosophie s'aligne parfaitement avec la nouvelle pile de MDN Web Docs Web Docs, qui utilise Lit pour les Web Components et des server components personnalisés pour charger uniquement le CSS et le JavaScript exacts requis par une page.

Le développement frontend est entré dans une nouvelle phase de maturité, déplaçant l'attention des frameworks universels vers une efficacité ciblée. L'ère de l'adoption aveugle du dernier framework à la mode pour chaque projet s'estompe. Au lieu de cela, l'écosystème valorise désormais les choix pragmatiques dictés par des métriques de performance réelles et l'adéquation, exigeant une approche plus délibérée des outils.

Les gains spectaculaires de MDN Web Docs Web Docs — un démarrage d'environnement de développement chutant de plus de 2 minutes à seulement 2 secondes — soulignent ce changement. Leur décision valide un avenir où la construction avec la plateforme, la priorisation de l'efficacité et l'adoption de l'progressive enhancement l'emportent sur les frameworks client-side monolithiques pour les expériences axées sur le contenu. Ce n'est pas la mort de React, mais un signal clair pour un paysage frontend plus réfléchi et performant.

Ce que le Gambit de MDN signifie pour votre prochain projet

Le pivot spectaculaire de MDN Web Docs Web Docs par rapport à React sert de leçon magistrale pour toute équipe élaborant son prochain web project. Les développeurs et les responsables techniques doivent désormais réévaluer de manière critique les hypothèses de longue date concernant l'frontend architecture. Ce n'est pas seulement l'histoire de MDN Web Docs Web Docs ; c'est un plan puissant pour construire des web experiences efficaces et résilientes sans complexité inutile.

Premièrement, examinez attentivement votre besoin réel d'un framework côté client complet sur l'ensemble d'un site. La pile Yari précédente de MDN Web Docs Web Docs, un Create React App éjecté, est devenue un fardeau de configurations webpack complexes et a même nécessité `dangerouslySetInnerHTML` pour rendre le contenu. Ce niveau de surcoût de framework offre souvent des rendements décroissants pour les sites axés sur le contenu, consommant un temps de développement considérable et livrant des mégaoctets de JavaScript inutilisé. Évaluez si une SPA complète est vraiment essentielle pour chaque page.

Deuxièmement, ne sous-estimez plus les Web Components. Ce sont des primitives de plateforme matures et puissantes offrant une voie solide pour s'éloigner du renouvellement perpétuel des frameworks JavaScript. MDN Web Docs Web Docs a adopté Lit pour construire des éléments personnalisés qui vivent directement dans leur contenu, éliminant le besoin de composants enveloppants et réduisant drastiquement le code livré. Cette approche offre une stabilité durable, des performances exceptionnelles et une base pérenne construite directement sur les standards du web.

Troisièmement, réadoptez l'amélioration progressive comme principe fondamental pour construire des expériences web robustes et rapides. La nouvelle pile de MDN Web Docs Web Docs en est un exemple, où les éléments d'interface utilisateur essentiels comme le menu déroulant principal du site fonctionnent uniquement avec CSS avant le chargement de JavaScript. La superposition d'améliorations assure une base solide et accessible pour tous les utilisateurs, quelles que soient les conditions réseau ou les capacités du navigateur, faisant de JavaScript une couche optionnelle, et non une dépendance.

Lorsque vous décidez de l'architecture de votre prochain projet, tenez compte de la nature de votre application. Pour les applications web hautement interactives et gourmandes en données, nécessitant une gestion d'état complexe et des mises à jour fréquentes côté client — pensez aux tableaux de bord ou aux éditeurs en temps réel — une SPA complète comme React offre toujours de puissants avantages. Cependant, pour la plupart des sites web riches en contenu, des portails de documentation ou des sites marketing, MDN Web Docs Web Docs démontre les profonds avantages d'une approche plus légère, basée sur des composants, avec du HTML rendu côté serveur et du JavaScript ciblé. Cette stratégie privilégie la vitesse de chargement initiale de la page, la résilience et la maintenabilité à long terme par rapport à une complexité côté client inutile. Le temps de démarrage de leur environnement de développement passant de plus de 2 minutes à seulement 2 secondes souligne cet impact.

Questions Fréquemment Posées

Pourquoi MDN a-t-il remplacé son frontend React ?

MDN a remplacé sa SPA React, nommée Yari, pour éliminer la dette technique, améliorer les performances et aligner son propre site avec les standards web qu'il documente. L'ancienne pile avait une configuration complexe et livrait du JavaScript inutile pour un site riche en contenu.

Quelle est la nouvelle pile technologique de MDN ?

La nouvelle pile de MDN est construite sur des Web Components natifs utilisant la bibliothèque Lit. Elle comprend également des composants serveur personnalisés et met l'accent sur l'amélioration progressive, permettant aux fonctionnalités de base de fonctionner avec juste du CSS avant le chargement de JavaScript.

Qu'est-ce que Lit et pourquoi MDN l'a-t-il choisi ?

Lit est une bibliothèque légère pour construire des Web Components rapides. MDN l'a choisi parce qu'il est simple, extrêmement performant et qu'il tire parti de la technologie native du navigateur, évitant ainsi le surcoût et le verrouillage des frameworks frontend plus importants.

Comment la nouvelle pile a-t-elle amélioré les performances de MDN ?

La nouvelle architecture a considérablement amélioré les performances en ne chargeant que le CSS et le JavaScript exacts dont une page a besoin. Elle a également amélioré l'expérience des développeurs, réduisant le temps de démarrage de l'environnement de développement de plus de 2 minutes à seulement 2 secondes.

Questions fréquentes

Cela annonce-t-il la fin de l'ère des SPA ?
Le pivot radical de MDN Web Docs Web Docs suscite inévitablement une question singulière parmi les développeurs : cela annonce-t-il la fin de la domination de React, ou même de l'ère des Single Page Application elle-même ? La réponse est nuancée, pas une déclaration définitive d'obsolescence. React reste un outil puissant, indispensable pour les applications hautement interactives et complexes où la gestion riche de l'état côté client est primordiale.
Pourquoi MDN a-t-il remplacé son frontend React ?
MDN a remplacé sa SPA React, nommée Yari, pour éliminer la dette technique, améliorer les performances et aligner son propre site avec les standards web qu'il documente. L'ancienne pile avait une configuration complexe et livrait du JavaScript inutile pour un site riche en contenu.
Quelle est la nouvelle pile technologique de MDN ?
La nouvelle pile de MDN est construite sur des Web Components natifs utilisant la bibliothèque Lit. Elle comprend également des composants serveur personnalisés et met l'accent sur l'amélioration progressive, permettant aux fonctionnalités de base de fonctionner avec juste du CSS avant le chargement de JavaScript.
Qu'est-ce que Lit et pourquoi MDN l'a-t-il choisi ?
Lit est une bibliothèque légère pour construire des Web Components rapides. MDN l'a choisi parce qu'il est simple, extrêmement performant et qu'il tire parti de la technologie native du navigateur, évitant ainsi le surcoût et le verrouillage des frameworks frontend plus importants.
Comment la nouvelle pile a-t-elle amélioré les performances de MDN ?
La nouvelle architecture a considérablement amélioré les performances en ne chargeant que le CSS et le JavaScript exacts dont une page a besoin. Elle a également amélioré l'expérience des développeurs, réduisant le temps de démarrage de l'environnement de développement de plus de 2 minutes à seulement 2 secondes.
🚀En savoir plus

Gardez une longueur d'avance en IA

Découvrez les meilleurs outils IA, agents et serveurs MCP sélectionnés par Stork.AI.

Retour à tous les articles