Micro-Frontends mit React: Ein umfassender Leitfaden

Da Webanwendungen immer komplexer werden, wird der Bedarf an skalierbaren und wartbaren Architekturen immer wichtiger. Micro-Frontends bieten eine Lösung, indem sie monolithische Frontend-Anwendungen in kleinere, überschaubare Teile zerlegen. In diesem Beitrag untersuchen wir das Konzept von Mikro-Frontends, wie man sie mit React implementiert und welche Vorteile sie für Ihren Entwicklungsprozess mit sich bringen.

Was sind Micro-Frontends?

Micro-Frontends erweitern die Microservices-Architektur auf das Frontend. Anstelle einer einzelnen monolithischen Anwendung ermöglichen Ihnen Mikro-Frontends die unabhängige Entwicklung und Bereitstellung einzelner Funktionen oder Abschnitte Ihrer Anwendung. Jedes Team kann einen bestimmten Teil der Anwendung besitzen, was zu einer besseren Skalierbarkeit und Wartbarkeit führt.

Hauptmerkmale von Micro-Frontends:

Unabhängig einsetzbar: Jedes Mikro-Frontend kann unabhängig entwickelt, getestet und bereitgestellt werden.
Technologieunabhängig: Teams können verschiedene Technologien für verschiedene Mikro-Frontends auswählen, was Flexibilität ermöglicht.
Teamautonomie: Teams können unabhängig arbeiten, wodurch Abhängigkeiten und Engpässe reduziert werden.

Warum Micro-Frontends verwenden?

Skalierbarkeit: Wenn Ihre Anwendung wächst, ermöglichen Ihnen Micro-Frontends die Skalierung der Entwicklung über mehrere Teams hinweg.
Schnellere Entwicklung: Unabhängige Bereitstellungen bedeuten schnellere Release-Zyklen und kürzere Markteinführungszeiten.
Verbesserte Wartbarkeit: Kleinere Codebasen sind einfacher zu verwalten, zu testen und umzugestalten.

Implementierung von Micro-Frontends mit React

• Wählen Sie eine Micro-Frontend-Architektur Es gibt verschiedene Ansätze zur Implementierung von Micro-Frontends. Hier sind zwei beliebte Methoden:

Iframe-basiert: Jedes Micro-Frontend wird in einen Iframe geladen. Dieser Ansatz sorgt für starke Isolation, kann aber zu Herausforderungen bei der Kommunikation und dem Styling führen.

JavaScript-Bundles: Jedes Micro-Frontend ist ein separates JavaScript-Bundle, das in eine einzelne Anwendung geladen wird. Dieser Ansatz ermöglicht eine bessere Integration und gemeinsame Zustandsverwaltung.

• Einrichten einer Micro-Frontend-Anwendung Lassen Sie uns ein einfaches Beispiel mit dem JavaScript-Bundle-Ansatz erstellen. Wir verwenden Webpack Module Federation, eine leistungsstarke Funktion, die es Ihnen ermöglicht, Code zwischen verschiedenen Anwendungen zu teilen.

Schritt 1: Erstellen Sie zwei React-Anwendungen
Erstellen Sie zwei separate React-Anwendungen, eine für den Host und eine für das Mikro-Frontend.

npx create-react-app host-app
npx create-react-app micro-frontend

Schritt 2: Webpack-Modul-Föderation konfigurieren
Installieren Sie in der Micro-Frontend-Anwendung die erforderlichen Abhängigkeiten:

npx create-react-app host-app
npx create-react-app micro-frontend

Ändern Sie dann die webpack.config.js, um Ihre Micro-Frontend-Komponente verfügbar zu machen:

npm install --save-dev webpack webpack-cli webpack-dev-server @module-federation/webpack

Konfigurieren Sie die Host-App so, dass sie das Mikro-Frontend nutzt:

// micro-frontend/webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: "micro_frontend",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button", // Expose the Button component
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

Schritt 3: Laden Sie das Micro-Frontend
In Ihrer Host-App können Sie nun die Micro-Frontend-Komponente dynamisch laden:

// host-app/webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        micro_frontend: "micro_frontend@http://localhost:3001/remoteEntry.js",
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

• Führen Sie die Anwendungen aus Stellen Sie sicher, dass Sie beide Anwendungen auf unterschiedlichen Ports ausführen. Sie können beispielsweise das Micro-Frontend auf Port 3001 und die Host-App auf Port 3000 ausführen.

// host-app/src/App.js
import React, { useEffect, useState } from "react";

const App = () => {
  const [Button, setButton] = useState(null);

  useEffect(() => {
    const loadButton = async () => {
      const { Button } = await import("micro_frontend/Button");
      setButton(() => Button);
    };
    loadButton();
  }, []);

  return (
    <div>
      <h1>Host Application</h1>
      {Button ? <Button label="Click Me!" /> : <p>Loading...</p>}
    </div>
  );
};

export default App;

Wenn Sie nun zu http://localhost:3000 navigieren, sollten Sie sehen, wie die Host-Anwendung die Schaltfläche vom Mikro-Frontend lädt.

Micro-Frontends bieten eine leistungsstarke Möglichkeit, komplexe Front-End-Anwendungen zu verwalten, indem sie sie in kleinere, unabhängig voneinander bereitstellbare Teile aufteilen. Durch die Nutzung von React und Tools wie Webpack Module Federation können Sie eine skalierbare Architektur erstellen, die die Autonomie des Teams erhöht und die Entwicklung beschleunigt. Wenn Sie über die Einführung von Mikro-Frontends nachdenken, wägen Sie die Vorteile gegen die damit verbundene Komplexität ab und wählen Sie den Ansatz, der Ihren Projektanforderungen am besten entspricht.

Das obige ist der detaillierte Inhalt vonMicro-Frontends mit React: Ein umfassender Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!