Comment créer des applications Web évolutives avec React JS –

L’évolutivité n’est pas seulement un mot à la mode – il est crucial pour la survie de toute application. C’est la capacité de votre application à gérer plus d’utilisateurs, de données ou de fonctionnalités sans dégradation des performances. Une application évolutive s’adapte, vous permettant de vous concentrer sur de nouvelles fonctionnalités, et non de résoudre les problèmes de performances.

Les trois piliers des applications Web évolutives

La construction d’une application Web évolutive repose sur trois piliers fondamentaux:

• Performance: Votre application doit rester vite. Le rendu efficace, la récupération des données optimisée et la gestion des ressources garantissent la réactivité. Plus de la moitié des utilisateurs mobiles abandonnent les sites qui se chargent en plus de trois secondes, mettant en évidence ce besoin critique.
• Maintenabilité: Les modèles de code clairs, la séparation des préoccupations et les effets secondaires minimaux gardent votre base de code compréhensible, déborfable et extensible. Cela empêche la dette technique, qui peut consommer une partie importante du temps d’un développeur.
• Flexibilité: Vos composants et votre architecture doivent s’adapter aux exigences changeantes sans casser les fonctionnalités existantes. Cela permet à votre application d’évoluer de manière transparente avec les besoins commerciaux.

Ces piliers sont interconnectés: les performances s’appuient souvent sur le code maintenable et flexible et les avantages de la flexibilité d’une architecture efficace et propre.

Fondation de React pour l’évolutivité

React, introduit par Facebook en 2011, a révolutionné le développement de l’interface utilisateur. Son DOM virtuel, sa conception basée sur des composants et son flux de données unidirectionnels en font un excellent choix pour l’échelle de complexité et de taille, et améliorer la collaboration de l’équipe. React y parvient en améliorant:

• Performance: Minimiser les opérations de DOM directes coûteuses.
• Maintenabilité: Encourageant les UIS à être divisées en composants réutilisables et responsables.
• Flexibilité: Fournir des composants déclaratifs facilement adaptés à de nouvelles exigences.

React propose d’innombrables applications évolutives, de Facebook lui-même à Netflix et Airbnb, prouvant son efficacité réelle.

Comprendre les fonctionnalités principales de React pour l’évolutivité

Le modèle de développement de l’interface utilisateur unique de React et l’architecture de base relèvent directement des défis de mise à l’échelle dans les grandes applications. Quatre fonctionnalités clés rendent réagi bien adapté à l’évolutivité.

1. Architecture basée sur les composants: décomposer des interfaces complexes

Le modèle de composant de React encourage la division de votre interface utilisateur en pièces indépendantes et réutilisables au lieu de pages monolithiques.

function Button({ onClick, children, variant = 'primary' }) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

function LoginForm() {
  return (
    <form>
      {}
      <Button variant="success" onClick={handleLogin}>
        Log In
      </Button>
      <Button variant="secondary" onClick={handleReset}>
        Reset
      </Button>
    </form>
  );
}

Ce modèle fournit l’isolement, la réutilisabilité, facilite la collaboration d’équipe et permet des mises à jour incrémentielles plus sûres.

2. Dom virtuel: le moteur derrière un rendu efficace

La manipulation directe DOM est lente. Virtual Dom de React, une représentation de l’interface utilisateur en mémoire, optimise le rendu par:

1. Création d’un instantané DOM virtuel.
2. «Diffing» le nouveau instantané avec le précédent sur le changement d’état.
3. Calcul des opérations DOM minimales.
4. Lot et appliquant ces mises à jour sur le vrai Dom.

Ce processus garantit des performances cohérentes, des mises à jour par lots et une utilisation optimisée des ressources, critique pour les grandes applications.

3. Interface utilisateur déclarative: rendre complexe la gestion de l’État compréhensible

L’approche déclarative de React est en train de vous concentrer sur comment Pour mettre à jour l’interface utilisateur vers quoi L’interface utilisateur devrait ressembler à un état donné. Au lieu des instructions DOM étape par étape, vous déclarez le résultat souhaité:

function NotificationBadge({ count }) {
  return (
    <div className="badge">
      {count === 0
        ? <span>No notifications</span>
        : count === 1
          ? <span>1 notification</span>
          : <span>{count} notifications</span>}
    </div>
  );
}

Cela conduit à un comportement prévisible (UI en tant que fonction directe de l’état), moins d’effets secondaires et un modèle mental plus simple pour les UIS complexes.

4. Flux de données unidirectionnelles: gestion prévisible de l’État

React utilise un flux de données unidirectionnel clair: les données circulent via les accessoires (parent à l’enfant) et les événements circulent via des rappels (enfant à parent).

function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build scalable app', completed: false }
  ]);

  const toggleTodo = id => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <TodoList todos={todos} onToggle={toggleTodo} />
    </div>
  );
}

Cela garantit des changements d’état prévisibles, simplifie le débogage et fournit une base robuste pour les modèles de gestion avancés de l’État.

Meilleures pratiques pour construire des applications de réaction évolutives

Bien que React offre une base solide, les applications vraiment évolutives nécessitent des techniques supplémentaires. Explorons les approches qui aident vos applications à réagir gracieusement.

Optimisez la taille de votre bundle avec le fractionnement du code et le chargement paresseux

De grands faisceaux JavaScript ont un impact significatif sur les temps de chargement. Le fractionnement de code divise votre application en morceaux plus petits qui se chargent à la demande, améliorant considérablement les performances.

Clissage du code basé sur l’itinéraire

Chargez le code uniquement pour la vue actuelle. Il s’agit souvent de la scission la plus percutante, garantissant que les utilisateurs ne téléchargent que le code nécessaire pour leur page actuelle.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from '@/components/Navbar';
import LoadingSpinner from '@/components/LoadingSpinner';

const Home = lazy(() => import('@/pages/Home'));
const Dashboard = lazy(() => import('@/pages/Dashboard'));


function App() {
  return (
    <BrowserRouter>
      <Navbar/>
      <Suspense fallback={<LoadingSpinner/>}>
        <Routes>
          <Route path="https://www.sitepoint.com/" element={<Home/>}/>
          <Route path="/dashboard" element={<Dashboard/>}/>
          {}
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

Le suspense avec paresseux (en utilisant dynamic import ()) permet de le faire, montrant un repli pendant le chargement.

Division de code au niveau des composants

Vous pouvez également charger paresseusement des composants lourds dans les pages, par exemple, un widget illustré uniquement lorsqu’un onglet spécifique est actif.

import React, { Suspense, lazy, useState } from 'react';


const AnalyticsWidget = lazy(() => import('@/widgets/AnalyticsWidget'));


function Dashboard() {
  const [activeTab, setActiveTab] = useState('analytics');
  
  return (
    <div className="dashboard-layout">
      {}
      <main className="dashboard-content">
        <Suspense fallback={<LoadingIndicator/>}>
          {activeTab === 'analytics' && <AnalyticsWidget/>}
          {}
        </Suspense>
      </main>
    </div>
  );
}

export default Dashboard;

Images de chargement paresseux

Les images dominent souvent la taille de la charge utile. Le chargement paresseux natif est simple:

<img src={product.imageUrl} alt={product.name} loading="lazy" width="300" height="200" />

Pour plus de contrôle, utilisez l’intersectionObserver pour charger des images uniquement lorsqu’elles sont proches de la fenêtre.

Gestion efficace de l’État: trouver le bon équilibre

À mesure que votre application se développe, la complexité de la gestion de l’État augmente. React offre plusieurs approches:

État composant local (UseState, UseReducer)

Utilisez UseState pour un état simple et isolé. Employez l’utilisateur pour des transitions d’État locales plus complexes.

function Counter() { const [count, setCount] = useState(0);  }

function EditCalendarEvent() { const [event, updateEvent] = useReducer(reducerFn, initialState);  }

React Query: État du serveur d’approvisionnement

Pour les données sur le serveur, React-Query (ou @ tanstack / react-query) est indispensable. Il fournit une mise en cache automatique, de la déduplication, des réadaptés d’arrière-plan, une révaliat sévère et une manipulation simplifiée de la pagination et du parchemin infini.

import { useQuery } from 'react-query'; 

function ProductList() {
  const { data, isLoading, error } = useQuery(['products'], fetchProducts);
  
}

function fetchProducts() { 
  return fetch('/api/products').then(res => res.json()); 
}

React-Query gère également les mutations gracieusement avec l’utilisation et l’invalidation du cache, offrant un contrôle à grains fins avec des options telles que Strametime, Cachetime et Retry.

Réagir le contexte pour l’état partagé

L’API de contexte transmet les données via des composants sans forage d’accessoires, idéal pour l’état d’interface utilisateur mondial (par exemple, thèmes, état d’authentification).

const ThemeContext = React.createContext('light');


function App() {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{theme, setTheme}}>
      <MainLayout/>
    </ThemeContext.Provider>
  );
}


function ThemedButton() {
  const {theme, setTheme} = useContext(ThemeContext);
  
  return (
    <button 
      className={`btn-${theme}`} 
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
    >
      Toggle Theme
    </button>
  );
}

Pour le conseil: Diviser les contextes par préoccupation (par exemple, usercontext, themeContext) pour éviter les redevances inutiles. Les composants ne rendent que si les données de contexte spécifiques qu’ils consomment changent.

Gestion de l’État externe: solutions modernes

Pour un état mondial très complexe dans de grandes applications, les bibliothèques externes fournissent plus de structure.

Volie à outils Redux: Réduit le chaudron Redux.

import { createSlice, configureStore } from '@reduxjs/toolkit'; 

Condition: Offre une API basée sur le crochet plus légère.

import create from 'zustand'; 

Prise à retenir: Choisissez le bon outil: UseState / UserReducer pour l’état local; React requête pour l’état du serveur; API de contexte pour l’état client partagé qui change rarement; et des bibliothèques externes pour un état global complexe nécessitant des middleware ou des devtools avancés. Commencez simple, ajoutez la complexité uniquement lorsque vous avez vraiment besoin.

Utilisation efficace de la composition des composants et des crochets personnalisés

Composition de composants stratégiques

Au lieu de «forage des accessoires» (transmettant les accessoires à travers de nombreux composants intermédiaires), passez des composants comme accessoires. Cela simplifie l’arbre et rend le flux de données explicite.

<PageLayout
  header={
    <Header 
      profileMenu={<ProfileMenu user={user}/>}
    />
  }
  content={<MainContent/>}
/>

Tirer parti des crochets personnalisés pour une logique réutilisable

Extraire et partager la logique avec état à l’aide de crochets personnalisés. Cela réduit la duplication et maintient les composants axés sur l’interface utilisateur.

function useForm(initialValues ) {
  const [values, setValues] = useState(initialValues);
  
  
  return { values, errors, isSubmitting, handleChange, handleSubmit };
}

Les crochets personnalisés rendent les composants plus propres en séparant «comment» (logique dans le crochet) de «quoi» (UI dans le composant).

Optimiser les performances de l’évolutivité

La véritable évolutivité exige une optimisation incessante des performances. Même avec l’efficacité inhérente de React, les grandes applications nécessitent des approches proactives pour rendre les cycles, la gestion des données et les temps de chargement initiaux.

Minimiser les redevateurs: prévenir un travail inutile

La réconciliation de React est rapide, mais les redépendants inutiles des arbres de composants complexes peuvent créer des goulots d’étranglement. Assurez-vous que les composants ne rendent que lorsque leurs accessoires ou leur état changent vraiment.

React.memo (composants fonctionnels): Mémoise la sortie du composant, empêchant les redevances si les accessoires sont inchangés. Utilisez pour des composants fréquemment rendus coûteux avec des accessoires stables.

const ProductCard = React.memo(({ product, onAddToCart }) => {  });

useMemo (valeurs de mémoire): Cache les résultats de la fonction, relancez uniquement si les dépendances changent. Idéal pour les calculs coûteux dans un composant.

function ShoppingCart({ items }) {
  const total = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }, [items]);
  
  return (  );
}

UseCallback (fonctions de mémoire): Mémoise les définitions de fonctions, empêchant la recréation sur chaque rendu si les dépendances sont inchangées. Crucial lors de la réussite des rappels aux composants enfants mémorisés.

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(
    () => setCount(prevCount => prevCount + 1), 
    [count]
  );
  
  return <ChildComponent onClick={handleClick} />;
}

const ChildComponent = React.memo(({ onClick }) => { 
   
});

Rendu côté serveur (SSR) et génération de sites statiques (SSG)

Pour une charge de page initiale plus rapide, un référencement amélioré et une visibilité du contenu avant l’exécution JavaScript, SSR et SSG sont inestimables.

• Rendement côté serveur (SSR): Les rendus réagissent à HTML sur le serveur par demande. Le client reçoit une page HTML complète pour le rendu immédiat, puis réagit «l’hydrate».
  • Avantages: Charge perçue plus rapide (temps au premier octet), amélioration du référencement.
  • Mise en œuvre: Des frameworks comme Next.js.
• Génération de sites statiques (SSG): Construit toute l’application React en HTML statique, CSS et JS à du temps de construction. Ces fichiers prédéfinis sont servis à partir d’un CDN.
  • Avantages: Des temps de chargement extrêmement rapides, un excellent référencement, très bon marché à héberger.
  • Mise en œuvre: Next.js, Gatsby.

Gérer efficacement de grands ensembles de données

Afficher des centaines ou des milliers de points de données directement dans le DOM paralysera les performances. Utilisez ces stratégies pour des expériences d’utilisateurs lisses:

• Listes virtualisées (fenêtre): Ne rend que les articles actuellement visibles dans la fenêtre.
  • Bibliothèques: react-window, react-virtualized.
  • Avantages: Réduit considérablement les nœuds DOM, améliorant le rendu et la mémoire.
• Pagination: Brise de grands ensembles de données en pages plus petites et gérables.
  • Mise en œuvre: Remplissez les données en morceaux de l’API (par exemple ,? Page = 1 & limite = 20).
• Infini défile: Charge plus de données lorsque l’utilisateur défile vers la fin de la liste actuelle.
  • Mise en œuvre: Utilisez un internetobserver pour déclencher des appels API pour de nouvelles données.
  • Bibliothèques: USEYInfiniteQuery de React-Query prend en charge cela.

Exemple du monde réel: mise à l’échelle d’un catalogue de produits de commerce électronique

Considérez une plate-forme de commerce électronique qui a été confrontée à des problèmes de performances avec un catalogue de produits en croissance rapide et un trafic utilisateur.

Défis initiaux:

• Charge initiale lente: Grand bundle JS (3 Mo +), impactant le mobile.
• Grides de produit janky: Le défilement de centaines de produits a provoqué des gels d’interface utilisateur.
• État de paiement complexe: Le paiement en plusieurs étapes était sujet aux erreurs.
• Remplacement des données inefficaces: Les appels d’API redondants ont conduit à des demandes de cascade.

Solutions d’évolutivité mises en œuvre:

1. Fissure de code et chargement paresseux:

Basé sur des itinéraires: React.lazy () et suspense pour des itinéraires comme / produit /: id, / Checkout. Réduction de la charge initiale de la page d’accueil de plus de 50%.

import ProductPage from './pages/ProductPage';


const ProductPage = lazy(() => import('./pages/ProductPage'));


<Route 
  path="/product/:id" 
  element={
    <Suspense fallback={<Spinner />}>
      <ProductPage />
    </Suspense>
  } 
/>

Au niveau des composants: Composants moins chargés chargés paresseusement (par exemple, examen du widget) à la demande.

const ReviewWidget = lazy(() => import('./components/ReviewWidget'));



{showReviews && (
  <Suspense fallback={<div>Loading Reviews...</div>}>
    <ReviewWidget productId={currentProductId} />
  </Suspense>
)}

• Optimisation d’image: Utilisé chargage = « Lazy » et CDN pour le dimensionnement d’image adaptatif.

2. Gestion efficace de l’État avec requête React:
   
   • État du serveur: Adopté React-Queery pour toutes les données sur le serveur (produits, CART).
   • Cache et déduplication: Empêcher les demandes de réseau redondantes.
   • Rassis à révalider: Assuré une interface utilisateur instantanée sur Revisiter avec actualisation des données d’arrière-plan.
   • Mutations: Gérée des mises à jour de panier / commande avec usémutation et queryClient.invalidateDeries pour la synchronisation de l’interface utilisateur.

<!-- end list -->


function ProductList() {
  const { data: products, isLoading } = useQuery(
    ['products', { category: 'electronics' }],
    fetchProductsByCategory
  );
  
  
}


const queryClient = useQueryClient();

const addToCartMutation = useMutation(addProductToCart, {
  onSuccess: () => {
    queryClient.invalidateQueries(['cart']); 
  },
});

3. Architecture basée sur les composants et crochets personnalisés:
   • Conception atomique: Des composants rigoureusement brisés en atomes, molécules, organismes pour une structure claire.

Logique du formulaire réutilisable: Built Use Custom Hook pour l’état / validation du formulaire commun, en réduisant la baillée.

function useCheckoutForm() { 
   
}

• Évitement des formes d’accessoires: API Split Context Split (par exemple, AuthContext, ThemeContext) pour les préoccupations globales.

4. Listes virtualisées pour les réseaux de produits:

react-window: Mis en œuvre pour les réseaux de produits, ne rendant que 20 à 30 articles visibles sur des centaines.

import { FixedSizeGrid } from 'react-window';



<FixedSizeGrid
  columnCount={columns}
  columnWidth={300}
  height={600}
  rowCount={Math.ceil(products.length / columns)}
  rowHeight={400}
  width={listWidth}
>
  {({ columnIndex, rowIndex, style }) => {
    const index = rowIndex * columns + columnIndex;
    const product = products[index];
    return product ? <ProductCard product={product} style={style} /> : null;
  }}
</FixedSizeGrid>

• Éliminé le défilement de Jank, assurant une navigation fluide.

Résultat:

Le site de commerce électronique a réalisé des améliorations significatives:

• Temps de chargement initial: Réduit de 60%, augmentant le référencement et la baisse des taux de rebond.
• Réactivité de l’interface utilisateur: Soufflement et interactions lisses même avec de grands ensembles de données.
• Productivité des développeurs: Développement de fonctionnalités plus rapide et intégration plus facile d’équipe.
• Maintenabilité: Diminution de la dette technique et réduit les risques chauds.

En appliquant ces forces REACT Core et ces optimisations avancées, vous pouvez créer une application Web vraiment évolutive et maintenable.