Teil 2: Ein tiefer Einblick in die technischen Details von Micro-Front

Die technische Seite von Micro-Frontends bei AUTODOC

In Teil 1 haben wir den Weg von einer monolithischen Architektur hin zu Micro-Frontends bei AUTODOC vorgestellt. Jetzt tauchen wir tiefer in die technischen Aspekte dieser Transformation ein. Wir besprechen, wie wir States verwalten, Server-Side Rendering (SSR) handhaben, SEO (Suchmaschinenoptimierung) sicherstellen und wie wir mit Authentifizierung, Übersetzungen, Routing sowie Hydration umgehen und die Performance optimieren.

State-Management mit Event-Emittern

Die Zustandsverwaltung in einer monolithischen Anwendung war unkompliziert, aber bei Micro-Frontends benötigten wir einen neuen Ansatz. Wir verwenden Event-Emitter, um den State über verschiedene Micro-Frontends hinweg während des SSR zu steuern. Event-Emitter ermöglichen es den verschiedenen Komponenten, effizient miteinander zu kommunizieren und so ein nahtloses Nutzererlebnis zu gewährleisten.

Server-Side Rendering (SSR) und SEO

SSR ist für die Performance und SEO von entscheidender Bedeutung. Indem wir Inhalte bereits auf dem Server rendern, bevor sie an den Client gesendet werden, gewährleisten wir schnellere Ladezeiten und eine bessere Sichtbarkeit in den Suchmaschinen. Unsere SHELL-Anwendung, die auf Astro.js basiert, übernimmt dabei das SSR. Sie stellt sicher, dass alle Micro-Frontends korrekt und effizient gerendert werden.

In Bezug auf SEO stellen wir sicher, dass jedes Micro-Frontend alle notwendigen Meta-Tags, Titel und Beschreibungen mitliefert. Dies ermöglicht es Suchmaschinen, unsere Inhalte effektiv zu indexieren, was letztlich unsere Sichtbarkeit und unser Ranking verbessert.

Authentifizierung und Cookies

Die Verwaltung der Authentifizierung in einem System, das sowohl aus einem Monolithen als auch aus Micro-Frontends besteht, kann komplex sein. Wir nutzen Cookies, um die Authentifizierung nahtlos abzuwickeln. Die in den Cookies gespeicherten Authentifizierungsdaten sind sowohl für den Monolithen als auch für die Micro-Frontends zugänglich. Das stellt sicher, dass die Nutzererfahrung konsistent und sicher bleibt.

Übersetzungen

Da AUTODOC in vielen verschiedenen Ländern und Sprachen aktiv ist, ist ein effizienter Umgang mit Übersetzungen essenziell. Jedes Micro-Frontend ist für seine eigenen Übersetzungen selbst verantwortlich. Das hat den Vorteil, dass wir Texte unabhängig voneinander aktualisieren und bereitstellen können. Wir verwenden eine gemeinsame Bibliothek für häufige Übersetzungen, um die Konsistenz in der gesamten Anwendung zu gewährleisten.

Routing: Statisch und dynamisch

Das Routing in einer monolithischen Anwendung ist unkompliziert, aber bei Micro-Frontends wird es komplexer. Wir verwenden eine Kombination aus statischem und dynamischem Routing, um verschiedene Pfade zu handhaben. Die SHELL-Anwendung verwaltet die zentrale Routing-Logik und delegiert die Verarbeitung der Routen an die jeweiligen Micro-Frontends.

• Statisches Routing: Vordefinierte Routen, die sich nicht häufig ändern.
• Dynamisches Routing: Routen, die basierend auf Benutzerinteraktionen oder von APIs abgerufenen Daten generiert werden.

Hydrierung für bessere Performance

Hydrierung (Hydration) ist der Prozess, bei dem während des SSR erzeugtes statisches HTML auf der Client-Seite in eine vollständig interaktive Anwendung umgewandelt wird. Dies stellt sicher, dass der:die Nutzer:in Inhalte schnell sieht, während JavaScript die Steuerung übernimmt, um die Seite interaktiv zu machen. Unser Ansatz zur Hydrierung gewährleistet ein reibungsloses und schnelles Nutzererlebnis, selbst bei mehreren Micro-Frontends.

Optimierung der Performance

Performance hat für uns oberste Priorität. Wir setzen verschiedene Strategien ein, um sicherzustellen, dass unsere Micro-Frontends schnell laden und reibungslos laufen:

1. Code-Splitting: Wir teilen unseren Code in kleinere Chunks auf, sodass der Browser nur die notwendigen Teile laden muss.
2. Lazy Loading: Wir laden Komponenten erst dann, wenn sie benötigt werden, was die initialen Ladezeiten verkürzt.
3. Caching: Wir nutzen Caching-Strategien, um häufig abgerufene Daten zu speichern, was die Serverlast verringert und die Antwortzeiten verbessert.
4. CDNs: Content Delivery Networks (CDNs) verteilen unsere statischen Assets weltweit und gewährleisten so eine schnelle Auslieferung an die Nutzer:innen, unabhängig von deren Standort.

Fazit

Der Übergang von einer monolithischen Architektur zu Micro-Frontends war für AUTODOC eine transformative Reise. Obwohl dies Herausforderungen mit sich bringt, sind die Vorteile in Bezug auf Skalierbarkeit, Agilität und Performance immens. Durch den Einsatz moderner Technologien und Best Practices bauen wir ein robustes, flexibles und zukunftssicheres System auf, das unseren Kund:innen und geschäftlichen Anforderungen über Jahre hinweg gerecht wird.

Bleiben Sie dran, während wir weiter innovieren und unsere Erkenntnisse aus dieser spannenden Reise teilen!