Pete Hunt: React: Rethinking best practices -- JSConf EU

Summary

Dans cette présentation, l'orateur explique les principes fondamentaux de React, mettant en avant la puissance de son Virtual DOM pour optimiser les performances des applications web. Il compare React à d'autres systèmes, comme Doom 3, pour montrer comment la gestion des états et des événements dans React permet d'améliorer la fluidité et l'efficacité des mises à jour du DOM. Les avantages incluent une gestion automatisée des événements, un rendu côté serveur pour de meilleures performances SEO, ainsi que des optimisations de testabilité et de rendu. En résumé, React facilite la création d'applications rapides et scalables tout en séparant clairement les préoccupations.

Takeaways

• 😀 React utilise un DOM virtuel pour optimiser les performances en réduisant les opérations coûteuses sur le DOM réel.
• 😀 Les composants React permettent de séparer les préoccupations et de structurer l'application en fonction de la logique métier, et non du framework.
• 😀 React permet une gestion efficace des mises à jour du DOM grâce à des heuristiques et des optimisations pour minimiser les changements inutiles.
• 😀 React fournit des hooks permettant d'optimiser la performance en évitant des mises à jour du DOM dans des parties spécifiques de l'interface sans refactorisation complète.
• 😀 React utilise un système d'événements synthétiques pour garantir un comportement cohérent des événements à travers tous les navigateurs, y compris les versions anciennes comme IE8.
• 😀 Le rendu côté serveur avec React permet une meilleure optimisation SEO en envoyant une page HTML statique avant de charger les scripts JavaScript nécessaires à l'interactivité.
• 😀 React offre une expérience de chargement plus rapide en rendant d'abord une page statique et en activant progressivement les fonctionnalités interactives dès que le JavaScript est prêt.
• 😀 Les composants React sont idempotents, ce qui facilite leur test sans avoir besoin d'une configuration complexe ni d'une instance de navigateur.
• 😀 React prend en charge l'affichage de graphiques interactifs (SVG, VML, Canvas) de manière déclarative, comme les composants d'interface utilisateur.
• 😀 React offre un branchement expérimental permettant de rendre l'application entière dans un Web Worker, séparant ainsi le processus de rendu du thread principal.
• 😀 React impose une approche de « re-rendu » de l'interface utilisateur plutôt que de gérer les mutations directement, simplifiant la gestion du rendu.
• 😀 En dépit de la possibilité de battre React avec des opérations DOM brutes, React permet de se concentrer sur la logique métier et d'optimiser automatiquement la performance sans se soucier des détails de gestion du DOM.

Q & A

Qu'est-ce que le DOM virtuel dans React et pourquoi est-il important ?

Le DOM virtuel dans React est une représentation en mémoire de l'interface utilisateur. Lorsqu'une modification de l'état se produit, React compare le DOM virtuel avec le DOM réel pour déterminer les changements minimaux nécessaires. Cela améliore les performances en réduisant les opérations coûteuses sur le DOM et les reflows.

Comment React gère-t-il les performances lors des mises à jour de l'interface utilisateur ?

React optimise les performances en utilisant une approche de mise à jour en lot, où les lectures et écritures dans le DOM sont regroupées pour éviter les reflows inutiles. Il calcule également l'ensemble minimal des opérations DOM à effectuer, ce qui permet d'améliorer la réactivité et de réduire les goulots d'étranglement.

Qu'est-ce qui rend React plus performant que la manipulation directe du DOM ?

React est plus performant que la manipulation directe du DOM car il effectue des mises à jour minimales basées sur le DOM virtuel et en utilisant des heuristiques d'optimisation. Bien qu'il soit possible de dépasser React avec des opérations DOM brutes, React fournit une meilleure performance globale et une gestion plus facile de la mémoire.

Qu'est-ce que le 'diffing' et pourquoi est-il crucial dans React ?

Le 'diffing' est le processus par lequel React compare le DOM virtuel et le DOM réel pour identifier les différences et appliquer uniquement les changements nécessaires. Cela réduit le nombre d'opérations et améliore l'efficacité du rendu, particulièrement important pour les applications complexes.

React peut-il être utilisé pour rendre des pages HTML statiques ?

Oui, React peut rendre des pages HTML statiques côté serveur, ce qui permet de servir des pages rapidement, tout en offrant des avantages en termes de référencement SEO. Lors de la première interaction avec l'application, un HTML statique est servi, puis React prend le relais côté client pour ajouter l'interactivité.

Quelles sont les implications de l'utilisation du DOM virtuel pour la gestion des événements dans React ?

Le DOM virtuel permet à React d'optimiser la gestion des événements grâce à un système d'événements synthétiques. React utilise un système de délégation d'événements qui fonctionne de manière cohérente sur tous les navigateurs, ce qui garantit des performances et une compatibilité améliorées, même dans les versions plus anciennes d'Internet Explorer.

Quels sont les avantages de l'architecture basée sur des composants dans React ?

L'architecture basée sur des composants dans React permet de séparer les préoccupations logiques et visuelles de l'application. Chaque composant gère son propre état et son propre rendu, ce qui facilite la gestion et la réutilisation du code. Cette approche rend également l'application plus modulaire et facile à tester.

Comment React assure-t-il la testabilité des composants ?

React garantit la testabilité en permettant aux composants de recevoir des données et de retourner une description du DOM. Cela signifie que les tests peuvent être effectués en vérifiant simplement les sorties des composants, sans avoir besoin de simuler un environnement complet du navigateur, ce qui rend les tests plus rapides et plus simples.

Est-ce que React peut être utilisé dans des environnements autres que les navigateurs web ?

Oui, React peut être utilisé dans des environnements non-browsers. Par exemple, il peut rendre des composants dans un web worker, ou encore être utilisé dans des applications Node.js, permettant une exécution de code cohérente à la fois côté serveur et client.

Quelles optimisations React propose-t-il pour améliorer la vitesse des applications mobiles ?

React propose plusieurs optimisations pour les applications mobiles, notamment la possibilité d'effectuer un rendu côté serveur pour obtenir une page HTML statique rapide. De plus, React charge l'interactivité de manière progressive, ce qui permet de réduire le temps de chargement initial et d'améliorer l'expérience utilisateur, même dans des environnements limités comme les anciennes versions d'iPhone.