L’article explique les React Server Components (RSC) dans Next.js, une technologie qui sépare clairement le rendu côté serveur et côté client. L’idée centrale est de privilégier des composants "mort" (statiques, sans JavaScript) pour le contenu comme les articles ou les pieds de page, et des composants "vivants" (interactifs) uniquement pour les éléments nécessitant une interaction utilisateur. Cette approche réduit la taille des bundles et améliore les performances, tout en simplifiant la gestion des données (accès direct à la base de données côté serveur).
L’auteur partage son expérience en production, soulignant trois pièges courants : l’ajout excessif de directives "use client" qui alourdit inutilement le code client, les waterfalls de requêtes asynchrones ralentissant le rendu, et l’activation accidentelle du rendu dynamique via des fonctions comme cookies(). Il recommande de limiter les composants clients aux fonctionnalités indispensables et d’isoler les parties dynamiques pour conserver un rendu statique optimisé.
Enfin, l’article conseille d’adopter les RSC dès un nouveau projet Next.js, tandis que pour une application existante, une migration progressive des routes les plus lourdes (en termes de contenu) est préférable. L’auteur illustre ces principes avec son propre site, où les pages d’articles sont entièrement statiques, tandis que des fonctionnalités comme un chat ou des formulaires restent interactives.
Antoine Caron partage son expérience d'optimisation de son application open source de poker planning. Initialement, l'application pesait environ 123 Ko (JS + CSS) avec React 19, TanStack Router et Query, et Tailwind 4. En passant à Preact, en pré-compressant les fichiers avec Brotli, Zstd et Zopfli, et en optimisant Tailwind CSS, il a réduit le poids de l'application à environ 40 Ko, soit une réduction de 67%. Un excellent exemple d'optimisation web.
Nadia Makarevich, experte en React et performance web, introduit les composants serveur React (RSC) et leur impact sur les performances. Elle explique que les RSC déplacent une partie du travail vers le serveur, réduisant ainsi la quantité de JavaScript à envoyer au client et améliorant le temps de chargement initial. L'article explore les différences entre le rendu côté client et les RSC, en mesurant des métriques comme le LCP et le temps d'affichage des données dynamiques. Makarevich a construit une SPA pour illustrer ces concepts, disponible sur GitHub.
React 19.2 améliore l'optimisation de l'INP (Interaction to Next Paint) avec deux nouvelles fonctionnalités clés. La première est le composant
Cet article explique comment construire une API puissante avec Symfony et l’intégrer à une application frontend moderne (comme React). L’article détaille les étapes clés : installation de Symfony 7.3, création d’un endpoint API simple retournant des données JSON (ici, une liste de produits), puis développement d’une application React avec Vite pour consommer ces données. Il aborde aussi la gestion des problèmes CORS via un proxy de développement et souligne l’importance d’une architecture API-first. Des statistiques récentes (2024) et des conseils pratiques (comme l’utilisation de Swagger pour la documentation) complètent le guide, qui se veut accessible même pour les débutants. L’auteur encourage à passer ensuite à une API dynamique avec Doctrine et MySQL. Idéal pour ceux qui veulent démarrer rapidement avec Symfony et React.
L'article détaille la stack technique de Shopify, révélant comment la plateforme gère une échelle massive avec une architecture qui semble simple en surface, mais qui est en réalité le résultat de décisions architecturales astucieuses et de nombreuses années de refactoring. Shopify utilise principalement Ruby on Rails pour son backend, avec des investissements significatifs dans des outils comme YJIT et Sorbet pour améliorer les performances et la sécurité du typage. Le frontend est principalement construit avec React et TypeScript, tandis que React Native est utilisé pour le développement mobile. Shopify s'appuie sur MySQL pour sa base de données principale, avec des stratégies de sharding et de pods pour assurer l'isolation et la scalabilité. Kafka est utilisé pour la messagerie et la distribution d'événements, tandis que des outils comme Memcached et Redis sont utilisés pour le caching et la gestion des files d'attente. L'infrastructure ML de Shopify utilise des embeddings pour la recherche en temps réel et des pipelines de données basés sur Apache Beam. La plateforme est déployée sur Kubernetes, avec des processus CI/CD robustes et des outils d'observabilité pour assurer la fiabilité et la sécurité. Shopify traite des milliards de requêtes par jour, démontrant l'efficacité de sa pile technologique à grande échelle.
La scalabilité est essentielle pour la survie des applications, permettant de gérer plus d'utilisateurs, de données ou de fonctionnalités sans dégradation des performances. React, avec son architecture basée sur les composants, le Virtual DOM et un flux de données unidirectionnel, offre une base solide pour construire des applications web évolutives. L'article présente les meilleures pratiques pour des applications React évolutives : l'optimisation de la taille des bundles avec le code splitting et le lazy loading, une gestion efficace de l'état, et l'utilisation de composants et de hooks personnalisés.
La notation Big O est essentielle pour les développeurs afin de comprendre et optimiser la performance du code, en transformant la manière dont les ressources physiques sont consommées. Elle permet d'anticiper les problèmes de performance et de choisir les meilleures solutions algorithmiques en fonction des priorités comme la vitesse, la mémoire ou la lisibilité. En utilisant Big O, les développeurs peuvent passer d'un code qui "fonctionne" à un code qui "fonctionne efficacement".
L'article propose un guide complet pour créer une barre de recherche conforme aux normes d'accessibilité RGAA. Il inclut des bonnes pratiques, des erreurs à éviter, et des exemples de code en HTML et React/MUI pour aider les développeurs à concevoir des interfaces utilisateur inclusives et fonctionnelles
.
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Un livre en ligne pour apprendre en même temps Angular, React et Vue
Tout est dans le titre
Une pépite de React
Tout est dans le titre
Tout est dans le titre