Einführung in das Micro-Frontend

Im Micro-Frontend teilen wir eine monolithische App in mehrere kleinere Apps auf.

Jede App ist für bestimmte Funktionen der monolithischen App verantwortlich.
Zum Beispiel
Eine E-Commerce-App kann in die folgenden kleineren unabhängigen Micro-Frontend-Apps unterteilt werden.

• Produktliste
• Warenkorb
• Versand
• Zahlung
• Sendungsverfolgung
• Kundendienst usw.

Warum Micro-Frontend?

• Mehrere Teams können isoliert an einer MFE-App arbeiten.
• Die Wiederverwendbarkeit des Codes ist sehr hoch.
• Jedem Team steht es frei, seine eigene Technologie (React/Angular/Vue), Bereitstellung, Entwicklungsstrategien usw. zu wählen.
• Wenn eine App ausfällt, können die restlichen Apps weiterhin funktionieren.
• Jede MFE-App ist kleiner und daher einfacher zu verstehen und Änderungen vorzunehmen.

Monolithische vs. Micro-Frontend-App-Architektur

Monolithische App:-Alle Funktionen einer Webanwendung in einer einzigen App.
Micro-Frontend-App:-Jede Funktion wird von einer unabhängigen MFE-App verwaltet, d. h.
MFE Nr. 1 ist für die App-Leiste verantwortlich.
MFE #2 ist für die Produktliste verantwortlich.
MFE #3 ist für die Side-Nav-Leiste verantwortlich.
Container App ist für die Koordination zwischen diesen MFE-Apps verantwortlich.

Wie MFE-Apps miteinander integriert werden

1. Build-Time-Integration (Compile-Time-Integration)
2. Laufzeitintegration (clientseitige Integration)
3. Serverseitige Integration (SSR-Integration).

Build-Time-Integration (Compile-Time-Integration)
Bei dieser Integration hat die Container-App Zugriff auf den gesamten Quellcode der MFE-Apps und ein kombiniertes Paket wird erstellt, wenn die Container-App vor dem Laden im Browser erstellt/kompiliert wird.

Vorteile

• Sehr einfach einzurichten und zu verstehen.
• MFEs können verzögert geladen werden, um die Leistung zu verbessern.

Nachteile

• Die Container-App muss jedes Mal neu erstellt und bereitgestellt werden, wenn Änderungen am MFE-npm-Paket vorgenommen werden.
• Wenn mehrere MFEs eng mit der Container-App gekoppelt werden, besteht die Möglichkeit, dass eine MFE-App zu einer verteilten monolithischen App wird.
• Kurz gesagt, Ihr MFE ist ähnlich wie ein NPM-Paket in die Container-App integriert.

Wie MFE-Apps in Build Time Integration integriert werden (hier am Beispiel einer E-Commerce-Anwendung)

1. Team Nr. 1 entwickelt die Produktlisten-MFE-App.
2. Team Nr. 1 stellt die MFE-App „Products-List“ bereit und veröffentlicht sie als NPM-Paket.
3. Team Nr. 2, das die Container-App verwaltet, fügt die Products-List-MFE-App als NPM-Paketabhängigkeit in die Container-App ein.
4. Team Nr. 2 kompiliert und erstellt das Container-App-Bundle. Dieses Bundle enthält den Code der Container-App, einschließlich des Produktlisten-MFE-App-Codes.
5. Kurz gesagt, Ihr MFE ist ähnlich wie ein NPM-Paket in die Container-App integriert.
6. Das ist es.

Laufzeitintegration (clientseitige Integration)
Bei dieser Integration kann die Container-App, sobald sie im Browser geladen ist, über die URLs der MFE-Apps auf MFE-Apps zugreifen.

Vorteile

• Jedes MFE kann ohne erneute Bereitstellung der Container-App bereitgestellt werden.
• Es können verschiedene Versionen derselben MFE-App verwendet werden. Der Container kann entscheiden, welche MFE-Version wann verwendet werden soll, was das Testen und die Integration vereinfacht.
• Jede MFE-App kann für Entwicklungszwecke über eigene Tools und Bibliotheken verfügen.

Nachteile

• Laufzeit-MFEs sind komplexer einzurichten und zu integrieren als Buildzeit-MFEs.

Wie MFE-Apps in die Laufzeitintegration integriert werden (hier am Beispiel einer E-Commerce-Anwendung)

1. Team Nr. 1 entwickelt die Produktlisten-MFE-App.
2. Team Nr. 1 stellt Products-List MFE bereit, d. h. https://mystore.in/productslist.js
3. Team Nr. 2, das die Container-App verwaltet, wird Webpack-Module-Federation verwenden, um sie in die Container-App zu integrieren.
4. Wenn der Benutzer https://mystore.in/ öffnet, wird die Container-App in den Browser geladen, ruft die Produktlisten-MFE-App ab und zeigt sie an einem definierten Ort auf der Container-App-Seite an.
5. Das ist es.

Serve-Side-Integration (SSR-Integration)

In dieser Integration funktioniert die Micro-Frontend-App auf ähnliche Weise wie SSR-Komponenten. Alle MFE-Apps werden serverseitig integriert und eine zusammengesetzte Container-App wird an den Browser zurückgegeben.

Vorteile

• App wird schneller geladen.
• SEO-freundlicher Ansatz.

Nachteile

Eingeschränkte Interaktivität.
Entwicklungsherausforderung.

Das war's vorerst. Vielen Dank für Ihre Zeit.

Das obige ist der detaillierte Inhalt vonEinführung in das Micro-Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!