Verfassen von Seiten und Ansichten mit Mikrofrontends

Sie können Ansichten einer Anwendung mit clientseitiger, randseitiger und serverseitiger Komposition erstellen. Die Kompositionsmuster weisen unterschiedliche Merkmale in Bezug auf die erforderlichen Teamfähigkeiten, Fehlertoleranz, Leistung und Cache-Verhalten auf.

Das folgende Diagramm zeigt, wie die Zusammensetzung auf den clientseitigen, edge-seitigen und serverseitigen Ebenen einer Micro-Frontend-Architektur erfolgt.

Die clientseitigen, edge-seitigen und serverseitigen Schichten werden in den folgenden Abschnitten behandelt.

Clientseitige Zusammensetzung

Dynamisches Laden und Anhängen von Mikrofrontends als DOM-Fragmente (Document Object Model) auf dem Client (Browser oder mobile Webansicht). Die Mikrofrontend-Artefakte, wie JavaScript z. B. CSS-Dateien, können aus Content Delivery Networks (CDNs) geladen werden, um die Latenz zu reduzieren. Für die clientseitige Zusammenstellung ist Folgendes erforderlich:

• Ein Team, das eine Shell-Anwendung oder ein Micro-Frontend-Framework besitzt und verwaltet, um das Auffinden, Laden und Rendern von Mikro-Frontend-Komponenten zur Laufzeit im Browser zu ermöglichen

• Hohe Kenntnisse in Frontend-Technologien wie HTML, CSS und tiefes Verständnis von JavaScript Browserumgebungen

• Optimierung der Anzahl der auf einer Seite JavaScript geladenen Dateien und Disziplin zur Vermeidung globaler Namespace-Konflikte

Das folgende Diagramm zeigt eine AWS Beispielarchitektur für serverlose clientseitige Komposition.

Die clientseitige Zusammenstellung erfolgt in der Browserumgebung über eine Shell-Anwendung. Das Diagramm zeigt die folgenden Details:

1. Nachdem die Shell-Anwendung geladen wurde, sendet sie eine erste Anfrage an Amazon, um die Mikro-Frontends CloudFront zu ermitteln, die über einen Manifest-Endpunkt geladen werden sollen.

2. Manifeste enthalten Informationen zu jedem Mikro-Frontend (z. B. Name, URL, Version und Fallback-Verhalten). Die Manifeste werden vom Micro-Frontend-Discovery-Service bereitgestellt. In der Abbildung wird dieser Discovery-Service durch Amazon API Gateway, eine AWS Lambda Funktion, und Amazon DynamoDB dargestellt. Die Shell-Anwendung verwendet die Manifestinformationen, um einzelne Mikrofrontends aufzufordern, die Seite innerhalb eines bestimmten Layouts zusammenzustellen.

3. Jedes Micro-Frontend-Bundle besteht aus statischen Dateien (wie CSS JavaScript und HTML). Die Dateien werden in einem Amazon Simple Storage Service (Amazon S3) -Bucket gehostet und über bereitgestellt CloudFront.

4. Teams können neue Versionen ihrer Mikrofrontends bereitstellen und die Manifestinformationen aktualisieren, indem sie Bereitstellungspipelines verwenden, die ihnen gehören.

Randseitige Zusammensetzung

Verwenden Sie Transklusionstechniken wie Edge Side Includes (ESI) oder Server Side Includes (SSI), die von einigen CDNs und Proxys vor den Ursprungsservern unterstützt werden, um eine Seite zu erstellen, bevor Sie sie drahtgebunden an die Clients senden. ESI erfordert Folgendes:

• Ein CDN mit ESI-Fähigkeit oder eine Proxybereitstellung vor serverseitigen Mikrofrontends. Proxy-Implementierungen wie HAProxy, Varnish und NGINX unterstützen SSI.

• Ein Verständnis der Verwendung und der Einschränkungen von ESI- und SSI-Implementierungen.

Teams, die neue Anwendungen starten, wählen für ihr Kompositionsmuster in der Regel keine randseitige Zusammensetzung. Dieses Muster könnte jedoch einen Weg für ältere Anwendungen bieten, die auf Transklusion angewiesen sind.

Serverseitige Zusammensetzung

Verwenden Sie Originalserver, um Seiten zu erstellen, bevor sie am Edge zwischengespeichert werden. Dies kann mit herkömmlichen Technologien wie PHP, Jakarta Server Pages (JSP) oder Templating-Bibliotheken geschehen, um die Seiten mithilfe von Fragmenten von Mikrofrontends zusammenzustellen. Sie können auch JavaScript Frameworks wie Next.js verwenden, die auf dem Server ausgeführt werden, um Seiten auf dem Server mit serverseitigem Rendering (SSR) zu erstellen.

Nachdem die Seiten auf dem Server gerendert wurden, können sie auf CDNs zwischengespeichert werden, um die Latenz zu reduzieren. Wenn neue Versionen von Mikro-Frontends bereitgestellt werden, müssen die Seiten neu gerendert und der Cache aktualisiert werden, um den Kunden die neuesten Versionen zur Verfügung zu stellen.

Die serverseitige Zusammenstellung erfordert ein tiefes Verständnis der Serverumgebung, um Muster für die Bereitstellung, die Erkennung serverseitiger Mikrofrontends und die Cache-Verwaltung festzulegen.

Das folgende Diagramm zeigt die serverseitige Zusammensetzung.

Das Diagramm umfasst die folgenden Komponenten und Prozesse:

1. Amazon CloudFront bietet einen einzigartigen Einstiegspunkt für die Anwendung. Die Distribution hat zwei Ursprünge: den ersten für statische Dateien und den zweiten für den UI Composer.

2. Statische Dateien werden in einem Amazon S3 S3-Bucket gehostet. Sie werden vom Browser und vom UI Composer für HTML-Vorlagen verwendet.

3. Der UI Composer läuft auf einem Container-Cluster in AWS Fargate. Mit einer containerisierten Lösung können Sie bei Bedarf Streaming-Funktionen und Multithread-Rendering verwenden.

4. Parameter Store, eine Funktion von AWS Systems Manager, wird als grundlegendes System zur Erkennung von Mikro-Frontends verwendet. Diese Funktion stellt einen Schlüsselwertspeicher bereit, der vom UI Composer zum Abrufen der zu verwendenden Mikro-Frontend-Endpunkte verwendet wird.

5. Das Mikrofrontend für Benachrichtigungen speichert das optimierte Paket im S3-Bucket. JavaScript Dies wird auf dem Client gerendert, da dieser auf Benutzerinteraktionen reagieren muss.

6. Das Micro-Frontend für Bewertungen besteht aus einer Lambda-Funktion, und die Benutzerrezensionen werden in DynamoDB gespeichert. Das Mikrofrontend für Bewertungen wird vollständig serverseitig gerendert und gibt ein HTML-Fragment aus.

7. Das Mikrofrontend für Produktdetails ist ein Low-Code-Mikrofrontend, das verwendet. AWS Step Functions Der Express-Workflow kann synchron aufgerufen werden und enthält die Logik für das Rendern des HTML-Fragments und eine Caching-Ebene.

Weitere Informationen zur serverseitigen Komposition finden Sie im Blogbeitrag Mikrofrontends für serverseitiges Rendern — die Architektur.