Inhaltsverzeichnis
Wir können auch komplexere Komponenten freigeben, die eine beträchtliche Menge an UI-Logik enthalten können, wie z. Achten Sie jedoch darauf, dass Ihre gemeinsam genutzten Komponenten nur UI-Logik und keine Geschäfts- oder Domänenlogik enthalten. Wenn Domänenlogik in einer gemeinsam genutzten Bibliothek enthalten ist, führt dies zu einem hohen Maß an Kopplung zwischen den Anwendungen und erschwert Änderungen. Nicht versuchen, eine ProductTable gemeinsam zu nutzen, die alle möglichen Annahmen darüber enthält, was genau ein „Produkt“ ist und wie es sich verhalten sollte.
Dies gewährleistet die gleiche Skalierbarkeit, Flexibilität und Anpassungsfähigkeit wie bei der Microservice-Architektur im Backend. Darüber hinaus ermöglicht dieser Ansatz die Mischung von Mikro-Frontend-Komponenten, die mit Bibliotheken oder verschiedenen Frameworks entwickelt wurden, auf derselben Webseite. Red Records hat zwei getrennte Entwicklungsteams, die in zwei verschiedenen Zeitzonen arbeiten, und sie streiten sich gerade darüber, ob sie React oder Vue.js für ihr Frontend verwenden sollen. Ihre Aufgabe ist es, eine neue Mikro-Frontend-Architektur aufzubauen, die es ihnen ermöglicht, unabhängig und parallel zu arbeiten, mit separaten Stacks, ohne miteinander reden zu müssen! React erstellen und einen Bootstrap-Client-seitigen Orchestrator einrichten, der das Laden, die Authentifizierung und das Routing übernimmt. Die naheliegendsten Kandidaten für die gemeinsame Nutzung sind „dumme“ visuelle Primitive wie Icons, Labels und Schaltflächen.
Fünf Dinge, Die Sie Vor Der Wahl Von Microfrontends Beachten Sollten
Bit ermöglicht es mehreren Teams, ihre Komponenten unabhängig voneinander zu erstellen und zu veröffentlichen, und erleichtert gleichzeitig die funktionsübergreifende Zusammenarbeit. Es erzeugt ein einziges einsatzfähiges Javascript-Bündel, wie es üblich ist, und ermöglicht es uns, gemeinsame Abhängigkeiten von unseren verschiedenen Anwendungen zu de-duplizieren. Allerdings bedeutet dieser Ansatz, dass wir jedes einzelne Mikro-Frontend neu kompilieren und freigeben müssen, um eine Änderung an einem einzelnen Teil des Produkts zu veröffentlichen. Genau wie bei Microservices haben wir genug Schmerzen gesehen, die durch einen solchen Lockstep-Release-Prozess verursacht werden, so dass wir von dieser Art von Ansatz für Micro-Frontends dringend abraten würden. Micro-Frontends ermöglichen es uns, Webanwendungen zu erstellen, die separat entwickelt und bereitgestellt werden, aber als eine einzige Anwendung funktionieren.
- Ein Muster, das hier hilft, ist das BFF-Muster, bei dem jede Frontend-Anwendung ein entsprechendes Backend hat, dessen Zweck ausschließlich darin besteht, die Anforderungen dieses Frontends zu erfüllen.
- Sobald wir unsere Datenstrukturen und Domänenmodelle gemeinsam nutzen, entsteht eine enorme Kopplung, und es wird extrem schwierig, Änderungen vorzunehmen, genau wie bei der gemeinsamen Nutzung einer Datenbank durch Microservices.
- Es löst auch das Problem der Code-Abhängigkeit und der erhöhten Paketgröße, indem es die gemeinsame Nutzung von Abhängigkeiten ermöglicht.
- Oder Sie möchten Ihre Entwicklung so skalieren, dass mehrere Teams gleichzeitig an einem Produkt arbeiten können, aber die Kopplung und Komplexität des bestehenden Monolithen bedeutet, dass sich alle gegenseitig auf die Füße treten.
Die Hauptvorteile einer solchen Bibliothek sind die Verringerung des Aufwands durch die Wiederverwendung von Code und die visuelle Konsistenz. Darüber hinaus kann Ihre Komponentenbibliothek als lebendiger Styleguide dienen und ein wichtiger Punkt für die Zusammenarbeit zwischen Entwicklern und Designern sein. Die Teams haben die volle Verantwortung für alles, was sie brauchen, um den Kunden einen Mehrwert zu bieten, und können so schnell und effektiv arbeiten. Damit dies funktioniert, müssen unsere Teams um vertikale Abschnitte der Geschäftsfunktionalität herum gebildet werden und nicht um technische Fähigkeiten herum.
Webpack Modul Föderation
Es löst auch das Problem der Code-Abhängigkeit und der erhöhten Paketgröße, indem es die gemeinsame Nutzung von Abhängigkeiten ermöglicht. Wenn Sie zum Beispiel eine React-Komponente herunterladen, wird Ihre Anwendung den React-Code nicht zweimal importieren. Das Modul nutzt den React-Quellcode, den Sie bereits haben, und importiert nur den Code der Komponente.
Aber seit wir den Mikro-Frontend-Ansatz eingeführt haben, hat sich alles geändert. Jedes Team ist jetzt für das Testen der von ihm entwickelten Funktionen verantwortlich, die viel kleiner sind als eine komplette Frontend-Anwendung. Außerdem kann nun jedes einzelne Team die Testwerkzeuge und -technologien einsetzen, die es bevorzugt. Bit gehört zu den weit verbreiteten und bevorzugten Werkzeugen zur Erstellung von Mikro-Frontends. Bit ermöglicht es Entwicklern, unabhängige Komponenten in der Build-Zeit zu komponieren, während es die Robustheit eines traditionellen Monolithen und die Einfachheit von Mikro-Frontends bietet.
In diesem Artikel wird ein einfaches Mikro-Frontend-Projekt untersucht, um zu zeigen, wie Sie Produktfunktionen strukturieren, erstellen, bereitstellen und in eine bestehende monolithische Anwendung integrieren können. In den letzten Jahren wurde der Weg für eine Reihe von serviceorientierten Architekturen geebnet – die vielversprechendste von ihnen sind Microservices. Dabei wurde eine Anwendung in kleinere Abschnitte unterteilt, die unabhängig voneinander entwickelt, bereitgestellt und getestet werden können, aber dennoch als einheitliche Einheit funktionieren. Sie sind die Antwort auf die meisten architektonischen Probleme, da sie sich leicht von mehreren Teams einsetzen lassen. Verschiedene Frontend-Architekturen – MVC, MVVM, Webkomponenten – wurden entwickelt, aber keine konnte die Vorteile von Microservices voll ausschöpfen. Die BFF kann in sich geschlossen sein, mit eigener Geschäftslogik und Datenbank, oder sie ist nur ein Aggregator für nachgelagerte Dienste.
