Teil 1: Die Evolution vom Monolithen zu Micro-Frontends
Matteo Baratella beschreibt, wie sich AUTODOC von einem starren PHP-Monolithen zu einer flexiblen Micro-Frontend-Architektur entwickelt hat. Erfahren Sie, wie die Aufteilung des Frontends in unabhängige „Remotes“ es den Teams ermöglicht, neue Funktionen schneller bereitzustellen und Komponenten wie Warenkorb und Katalog unabhängig voneinander ohne infrastrukturelle Engpässe zu skalieren.
Veröffentlicht am 17.10.2022
Eine Reise vom Monolithen zu Micro-Frontends
Seit über 16 Jahren hat sich AUTODOC von einem kleinen Startup zu einem dynamischen Unternehmen mit über 5000 Mitarbeiter:innen entwickelt. Unsere ursprüngliche Architektur war ein Monolith, der auf PHP basierte. Mit dem Wachstum des Unternehmens vergrößerten sich auch unsere Codebasis und unser Entwickler:innen-Team. Dieses Wachstum brachte jedoch Herausforderungen mit sich: Der Monolith wurde zunehmend unüberschaubar, was es schwierig machte, neue Features schnell zu veröffentlichen und Infrastrukturprobleme effektiv zu bewältigen.
Um diese Herausforderungen anzugehen, haben wir uns für einen modernen architektonischen Ansatz entschieden: Micro-Frontends und Microservices. Dieser Wandel markiert eine bedeutende Transformation in der Art und Weise, wie wir unsere Anwendungen erstellen, bereitstellen und verwalten. Er verspricht mehr Agilität, eine bessere Skalierbarkeit und eine leichtere Wartbarkeit.
Was ist ein Monolith?
Ein Monolith ist wie ein einziges, großes Puzzle, bei dem alle Teile fest miteinander verzahnt sind. Zu Beginn war dieser Ansatz ideal, da sich alles an einem Ort befand, was die Entwicklung und das Deployment vereinfachte. Mit dem Wachstum unserer Anwendung wurde es jedoch immer schwieriger, neue Teile (Features) zu ergänzen. Änderungen in einem Bereich wirkten sich oft auf andere Abschnitte aus, was zu einer höheren Komplexität und einem längeren Entwicklungszyklen führte.
Warum Micro-Frontends?
Micro-Frontends brechen das monolithische Frontend in kleinere, unabhängige Teile auf. Stellen Sie sich vor, Sie hätten anstelle eines einzigen großen Puzzles mehrere kleinere, die unabhängig voneinander zusammengesetzt werden können. Dieser Ansatz ermöglicht es verschiedenen Teams, gleichzeitig an unterschiedlichen Bereichen der Anwendung zu arbeiten, ohne sich dabei gegenseitig auf die Füße zu treten.“
„Die Micro-Frontend-Architektur
Die Micro-Frontend-Architektur
In unserer neuen Architektur nutzen wir eine SHELL-Applikation, die auf Astro.js basiert. Betrachten Sie die SHELL als den Rahmen, der all unsere kleineren Puzzleteile zusammenhält. Die SHELL verwaltet verschiedene Micro-Frontends, von uns „Remotes“ genannt, die mit React.js erstellt wurden. Diese Remotes können unabhängig voneinander entwickelt, bereitgestellt und aktualisiert werden.
Hier ist eine vereinfachte Darstellung unseres neuen Setups:
- SHELL-Anwendung (Astro.js): Dies ist die Hauptanwendung, welche die verschiedenen Micro-Frontends lädt und koordiniert.
- Remotes (React.js): Dies sind die unabhängigen Micro-Frontends, die in die SHELL eingebunden werden. (Kopfzeile, Fußzeile, Warenkorb, Retouren, Katalog usw.).
Die wichtigsten Vorteile von Micro-Frontends
- Unabhängiges Deployment: Unsere Teams können Änderungen eigenständig bereitstellen, ohne die gesamte Anwendung zu beeinträchtigen.
- Skalierbarkeit: Wir können einzelne Micro-Frontends gezielt basierend auf ihrer Nutzung skalieren.
- Schnellere Entwicklung: Kleinere Codebasen sind einfacher zu verwalten, was zu kürzeren Entwicklungszyklen führt.
- Flexibilität: Unterschiedliche Teams können die Tools und Frameworks wählen, die für ihre spezifischen Anforderungen am besten geeignet sind.
Herausforderungen und Überlegungen
Während Micro-Frontends viele Vorteile bieten, bringen sie auch Herausforderungen mit sich:
- Komplexität der Integration: Die Verwaltung mehrerer Micro-Frontends erfordert eine sorgfältige Koordination, um sicherzustellen, dass sie nahtlos zusammenarbeiten.
- Performance: Schnelle Ladezeiten und eine reibungslose Leistung bei der Integration mehrerer Micro-Frontends sicherzustellen, kann schwierig sein.
- Konsistenz: Ein einheitliches Erscheinungsbild über alle Micro-Frontends hinweg beizubehalten, ist für ein stimmiges Nutzererlebnis essenziell.
In Teil 2 werden wir tiefer in die technischen Details unserer Micro-Frontend-Architektur eintauchen, einschließlich State Management, Server-Side Rendering (SSR), SEO, Authentifizierung, Übersetzungen, Routing und Performance-Optimierung.