Wie FloQast unsere Micro-Frontend-Architektur skaliert

Vor fast einem Jahr haben wir beschrieben, wie FloQast funktioniert. unseren Frontend-Monolithen zugunsten unabhängiger Mikrofrontends abzubauen mit React gebaut. Und ich würde mir gerne eine Sekunde Zeit nehmen, um zu sagen: „Juhu, wir! Wir haben es geschafft!“

Ich kann mit Stolz sagen, dass unsere kundenorientierte Web-App jetzt ein vollständiges Aggregat entkoppelter Mikro-Apps ist, die zur Laufzeit zusammengefügt werden, um sich wie eine Einheit zu verhalten. Es war ein Major Einsatz mehrerer Teams, und das Endergebnis war ein großer Erfolg! Durch die Möglichkeit, jede bestimmte Funktion der App in einer speziellen Mikro-App zu isolieren, die einem einzigen verantwortlichen Team mit einer eigenen, einzigartigen Bereitstellungspipeline gehört, trägt diese Architektur dazu bei, unser Ziel zu erreichen ermöglicht kleinen, fokussierten Teams, schnell und unabhängig zu iterieren.Und um das Ganze abzurunden, indem wir unsere internen GRAIL-Projekt, wir können innerhalb weniger Minuten mit einem einzigen Slack-Befehl ein brandneues Micro-Frontend einrichten!

Aber wird es skalieren?

In diesem vorheriger Beitrag, haben wir einige konkrete Beispiele gegeben, darunter funktionierende Code-Sandboxen, dafür, wie wir den Client-Hub und die Micro-Frontends aufgebaut haben. Der Kern des Ganzen ist ein Mikroclient Komponente, die eine URL akzeptiert, die auf das JS/CSS-Paket verweist, verpackt in React-Router. Immer wenn eine definierte Route getroffen wird, wird Mikroclient ruft das entsprechende Paket ab und lädt den Client. Dieser Ansatz hat sehr gut funktioniert. Aber zu der Zeit hatten wir nur ein paar Micro-Frontends und wir wollten das deutlich ausbauen. Aber es gab ein großes Problem. Das Muster beinhaltete, einen Klienten aus dem Monolithen zu extrahieren und ihn sofort wieder hineinzuinjizieren. Das heißt, der Monolith fungierte sowohl als Kunde. und der Hub. Das würde nicht gut skalieren, also beschlossen wir, es erneut zu evaluieren und zu sehen, ob wir es besser machen könnten.

Sie müssen das Rad nicht neu erfinden

Der Grund, warum es nicht skaliert werden konnte, war zweifach:

1. Es gab mehrere Verantwortlichkeiten und daher arbeiteten mehrere verschiedene Teams alle im selben Repo. Der Monolith selbst wurde von einem Team kontrolliert, während jeder einzelne Kunde von anderen kontrolliert wurde. Dies führte zu einer ständigen Flut von Zusammenführungskonflikten und Release-Queue-Backups, die sich nur verschärfen würden, wenn immer mehr Clients verfügbar waren.
2. Das Mikroclient Die Komponente war vollständig einheimisch. Das heißt, alle Bugfixes oder neuen Funktionen müssten ausschließlich von uns implementiert werden. Der Aufbau einer Microfrontend-Architektur ist cool und so, aber das ist nicht unser täglich Brot. Wir sollten uns auf das konzentrieren, was uns einzigartig macht.

Letztlich haben wir beschlossen, ein bestehendes Framework zu nutzen, Einzel-Spa, bei dem es sich um ein unglaublich gut dokumentiertes Open-Source-Framework für die Erstellung von Front-End-Microservices handelt. JackpotWir waren in der Lage, einen brandneuen Kunden-Hub mit Single-Spa einzurichten, all unsere bestehenden Kunden zu integrieren und endlich alle Hub-Verantwortlichkeiten aus dem Monolithen zu entfernen. Hier sind einige der bemerkenswertesten Verbesserungen, die dies gegenüber unserem vorherigen Setup bietet:

• Wir haben zwar ein Team, das für die Wartung des Hubs verantwortlich ist, aber sie müssen sich nicht speziell um den zugrunde liegenden Micro-Frontend-Code kümmern, was Zeit spart, um sich auf andere Projekte zu konzentrieren.
• Mehr Kontrolle über das Laden/Entladen von Clients. Bisher konnten wir nur Clients laden; d. h. wenn der Client einmal gemountet war, blieb er bis zu einem vollständigen Reload bestehen. Wenn Sie jetzt von einem gemounteten Client wegnavigieren, wird er automatisch ausgemountet, wodurch wertvolle Browserressourcen freigesetzt werden.
• Single-Spa ist aufgebaut auf Karten importieren und System JS was einigen ernsthaft die Tür öffnet lokale Entwicklung.

Probiere es selbst

Wenn Sie mehr erfahren möchten, haben die Single-Spa-Entwickler einen interaktiven Spielplatz zusammengestellt, auf dem Sie das Framework vollständig testen können. Sehr zu empfehlen! Es gibt auch eine CLI für die Generierung aller notwendigen Aspekte einer Micro-Frontend-Anwendung; was das Bootstrapping von Grund auf zum Kinderspiel macht.

Was kommt als Nächstes?

Da die Grundarbeiten nun abgeschlossen sind, verfügen wir über eine solide Grundlage an Microservices sowohl im Backend. und Frontend, auf dem Sie mit unseren Hochleistungsteams eine erstklassige Anwendung erstellen können! Bleiben Sie dran, um zu sehen, was wir uns als Nächstes einfallen lassen. Die Zukunft sieht rosig aus