Inhaltsverzeichnis[Ausblenden][Zeigen]
- Was ist also ein Modulverbund?
- Warum Modulföderation?
- Kernkomponenten des Modulverbunds
Kernfunktionen des Modulverbunds+-
- Hervorragende Web-Performance
- Effektive Entwicklung
- Die Fähigkeit zur Selbstheilung und Redundanz
- Effektiver Umgang mit gemeinsamen Abhängigkeiten
- Anstatt Verbraucher erneut bereitzustellen, stellen Sie unabhängigen Code bereit.
- Importieren Sie während der Ausführung Code aus anderen Builds.
- Verbesserte Entwicklererfahrung bei gleichzeitiger Beibehaltung der Kundenerfahrung
- Micro-Frontends arbeiten monolithisch.
- Zusammenfassung
Das Konzept der Micro-Frontends wendet Microservices auf die Frontend-Entwicklung an.
Die Idee besteht darin, die Anwendung oder Website in kleinere, unabhängig voneinander entwickelte Teile zu zerlegen, die dann während der Laufzeit verbunden werden, anstatt sie als einen einzigen, zusammenhängenden Monolithen zu erstellen.
Die Methode ermöglicht es Ihnen, andere Komponenten der Anwendung mit anderen Technologien und mit unabhängigen Teams zu erstellen.
Die Idee ist, die Wartungskosten im Zusammenhang mit einem typischen Monolithen zu reduzieren, indem die Entwicklung auf diese Weise segmentiert wird.
Indem sie sich als geschlossenes Team auf einen bestimmten Bereich einer Anwendung konzentrieren können, werden auch neue Formen der Zusammenarbeit zwischen Backend- und Frontend-Entwicklern möglich.
Beispielsweise haben Sie möglicherweise ein Team, das allein für die Suchfunktion oder einen anderen Aspekt eines Schlüsselprodukts verantwortlich ist, das für ein Unternehmen von entscheidender Bedeutung ist.
Dank der Modulföderation haben Sie genügend Funktionalität, um den Workflow zu bewältigen, den die Mikro-Frontend Mandate angehen.
Dieser Beitrag wirft einen tiefen Blick auf die Architektur der Modulföderation sowie auf ihre Hauptfunktionen und Anwendungsmuster.
Also, was ist ein Modul Föderation?
Das Modulföderationsdesign von Javascript verwendet in vielen Anwendungen wiederverwendete Teile.
Es ist ein ziemlich einfacher Jargon, aber ich habe es einfach so erscheinen lassen, um luftig zu wirken.
Da wir alle mit der gemeinsamen Nutzung von Komponenten innerhalb einer React-Anwendung vertraut sind, erreicht Module Federation in der Praxis effektiv dasselbe Ziel, mit der Ausnahme, dass Anwendungsmodule dynamisch für die Nutzung durch andere Anwendungen verfügbar gemacht werden.
Module Federation versucht, das Problem der gemeinsamen Nutzung von Modulen in einem verteilten System zu überwinden, indem diese gemeinsamen Schlüsselelemente je nach Wunsch als Makro oder Mikro bereitgestellt werden.
Dies wird erreicht, indem sie aus Ihren Apps und dem Build-Workflow entfernt werden.
Warum Modulföderation?
Hier sind einige Faktoren, die der Modulverbund problemlos handhaben kann:
- Externals und DLLs (Dynamic Link Libraries) waren alles, was wir gelegentlich hatten, um Funktionen zwischen Apps zu teilen. All dies machte die Skalierung von Codesharing zu einer extremen Herausforderung.
- NPM ist träge.
- Wenn zwei separate Programme entscheidenden Code gemeinsam nutzen, müssen sie dynamisch und flexibel sein.
Damit sich eigenständige Apps vollständig in ihrem eigenen Repository befinden, separat bereitgestellt und als ihre eigene unabhängige SPA betrieben werden können, wurde Module Federation erstellt.
Kernkomponenten des Modulverbunds
Bevor Sie tiefer eintauchen, ist es wichtig, kurz einige neue Konzepte zu diskutieren, die die Modulföderation mit sich bringt.
- Host: Wenn eine Seite geladen wird, wird das anfänglich initialisierte Build oder Modul als Host bezeichnet. Ein Anbieter kann als Host betrachtet werden.
- Remote: Eine Remote ist ein anderes Konstrukt, das einen Teil des Hosts verwendet. Sie werden auch als Kunden bezeichnet.
- Bidirektionaler Host: Ein Webpack-Build, der sowohl als Remote fungiert, die andere Hosts konsumieren, als auch als Host, der Remotes konsumiert.
- Anbieterföderation: ermöglicht die deklarativ freigegebene Laufzeitfreigabe von npm-Modulabhängigkeiten für einen Host oder Remote, unabhängig von dem Ort, von dem sie geladen werden. Eines der größten Performance-Probleme bei Micro-Frontends wird auf diese Weise gelöst.
Muster der föderierten Anwendung
Immergrünes Designsystem
Eine der grundlegendsten Formen von Verbundanwendungen ist eine „immergrüne Fernbedienung“, die eine gemeinsam genutzte Fernbedienung wie ein „Design System“ oder eine „Komponentenbibliothek“ ist, die für alle Benutzer unabhängig verteilt und aktualisiert wird.
Ohne dass jedes App-Team Zeit für Überarbeitungen aufwenden muss, kann dies hilfreich sein, um sicherzustellen, dass alle Online-Sites der neuesten Corporate Identity entsprechen.
Um die Grenzen und Verfahren zu entwerfen und umzusetzen, die erforderlich sind, um sichere, kontinuierliche Updates zu gewährleisten, könnte dies ein nützlicher Ausgangspunkt für Unternehmen sein, wenn sie eine föderierte Anwendungsarchitektur in Betracht ziehen.
Im Folgenden sind einige Anwendungsfälle aufgeführt, in denen unabhängig bereitgestellte gemeinsam genutzte Fernbedienungen geeignet sein könnten:
- Systeme entwerfen
- Anwendungsschalen
- Komponentenbibliotheken
- KUNDEN
- Gemeinsame Toolkits
- Alternative Verteilungsmodelle für Widgets, die intern oder extern verwendet werden
Multi-SPA-Modul-Sharing
Verwenden Sie bereits exportierte Funktionen wie Komponenten in verschiedenen eigenständigen Single-Page-Apps wieder. Zu den Vorteilen gehören:
- Verbraucher erhalten automatische Updates
- Domänenexpertise verbleibt bei dem Team, das dafür verantwortlich ist.
- Optimiert das Bereitstellungsverfahren, da keine separaten Modulversionen erforderlich sind.
Shell-gesteuerte Föderation
Die Shell-gesteuerte Föderation umfasst:
- Beim Erstellen einer neuen Produktversion wartet das Produktteam nicht darauf, dass das Checkout-Team seine Arbeit abschließt.
- Beim Wechseln der Fernbedienungen erfolgt kein Seitenneuladen.
- Bei Bedarf bietet Shell langsames Remote-Laden und (Top-Level-)Routing.
- Das Routing über Remotes hinweg wird über die Vendor Federation ermöglicht, was die Wiederverwendung häufig verwendeter npm-Pakete ermöglicht.
- Shell bietet das Framework und andere allgemeine Abhängigkeiten, die von den verzögert geladenen Remotes wiederverwendet werden.
Multi-Shell-Föderation
Ähnlich wie bei der oben beschriebenen Shell-gesteuerten Föderation, aber es wurden andere Shells verwendet.
Es beinhaltet:
- eine Reihe von Muscheln
- White-Labeling
- Nicht alle Fernbedienungen werden von Shell B benötigt oder haben unabhängige Implementierungen.
Kernfunktionen des Modulverbunds
Hervorragende Web-Performance
Das Problem bei der normalen Zusammensetzung von NPM-Modulen besteht darin, dass die Größe der Anwendung im Allgemeinen zunimmt, wenn die Anzahl der Abhängigen steigt.
Um das Laden von Bundles beim Laden Ihrer Anwendung zu vermeiden und sie nur bei Bedarf zu laden, bietet Ihnen Module Federation die Möglichkeit, Bundles träge zu laden.
Dies verhindert, dass Module heruntergeladen werden müssen, bevor sie tatsächlich benötigt werden, was die Geschwindigkeit der Website verbessert.
Effektive Entwicklung
Jedes Projekt kann isoliert erstellt und bereitgestellt und von verschiedenen Teams ausgeführt werden, da Module Federation Sie dazu ermutigt, Ihre Anwendung in einzelne Projekte zu organisieren, damit Sie diese separat (und somit parallel) erstellen und bereitstellen können.
Die Fähigkeit zur Selbstheilung und Redundanz
Gemeinsame Abhängigkeiten ermöglichen es Module Federation, alle Abhängigkeiten Ihres Programms an einem Ort zu verfolgen.
Auf diese Weise weiß eine Anwendung, selbst wenn sie keine Abhängigkeit erklärt oder wenn es Netzwerkprobleme gibt, immer noch, was sie benötigt, und kann sie bei Bedarf herunterladen.
Effektiver Umgang mit gemeinsamen Abhängigkeiten
Darüber hinaus bietet Module Federation ein überlegenes Abhängigkeitsmanagement, das Anforderungen von Anbietern und Drittanbietern effektiv löst, sodass Ihre Anwendung nie mehr als eine Version einer Bibliothek lädt.
Anstatt Verbraucher erneut bereitzustellen, stellen Sie unabhängigen Code bereit.
Der Entwickler ist sehr an Evergreen-Funktionalität interessiert. Sobald sich die exponierte abhängige Funktionalität geändert hat, ist es nicht mehr erforderlich, die Verbraucher neu zu installieren.
Ich muss zugeben, dass dies an und für sich ein hochwirksames Merkmal ist, das einer sorgfältigen Prüfung bedarf, um unerwartete Ergebnisse zu vermeiden.
Importieren Sie während der Ausführung Code aus anderen Builds.
Bei der Übernahme des NPM-Paketmodells könnten wir Apps in Betracht ziehen, die Module Federation ähnlich wie APIs verwenden, anstatt Code zu teilen und an „Bibliothek“ zu denken.
Auf die gleiche Weise, wie sie auch Funktionalität von anderen Apps erhalten können, können Webanwendungen nun die Funktionalität für andere Anwendungen bereitstellen.
Verbesserte Entwicklererfahrung bei gleichzeitiger Beibehaltung der Kundenerfahrung
Jedes JavaScript-Entwickler werden sich mit Module Federation recht wohl fühlen, da es sich um ein Webpack-Plugin handelt, das ab Webpack-Version 5 verfügbar ist.
Das ist eigentlich ziemlich stark und faszinierend, wenn wir darüber nachdenken.
Berücksichtigen Sie bei der Verwendung von Webpack-Loadern von Drittanbietern alle Komponenten, die Webpack Bundles, einschließlich Skripts, Assets, Stile, Bilder, Preisnachlässe und mehr.
Durch die Verwendung von Module Federation können all diese gemeinsam genutzt und verbunden werden.
Micro-Frontends arbeiten monolithisch.
Es ist ganz einfach, gemeinsame Funktionen zu Ihrer Anwendung hinzuzufügen; Importieren Sie das Bundle einfach wie gewohnt oder verwenden Sie das synchrone Laden.
Alternativ kann asynchrones Laden verwendet werden, um Abhängigkeiten nur bei Bedarf zu laden, indem Lazy Loading verwendet wird.
Zusammenfassung
In diesem Beitrag haben wir Module Federation als fantastische Wahl für die Entwicklung Ihrer Micro-Frontend-Anwendung besprochen.
Das Austauschen und Nutzen von Funktionen zur Laufzeit durch Apps fördert die Skalierbarkeit, da verschiedene Teams an unabhängigen Anwendungen arbeiten können.
Wenn sich die allgemeine Funktionalität ändert, müssen Sie Ihre Verbraucher nicht entwerfen und bereitstellen, da sie Evergreen-Funktionalität unterstützt.
Ihr Programm wird nach der Einrichtung wie ein Monolith funktionieren, was fantastisch ist.
Gemeinsam nutzbare Abhängigkeiten werden verwendet, um die Größe von Apps zu reduzieren. Da viele Entwickler bereits mit der Webpack-Umgebung vertraut sind, ist die Entwicklererfahrung ausgezeichnet.
Hinterlassen Sie uns einen Kommentar