Das Thema der Arbeit ist die Gestaltung eines Micro Frontends für Kalendereinträge in eine existierende web-basierte Anwendung von der Firma Abenteuerhallenkalk5 in Köln, die den Benutzer dabei unterstützt, Termine für kommende Veranstaltungen bzw. Events bei Abenteuerhallenkalk zu erkennen. Die Idee zu diesem Thema hat mich besonders interessiert, weil der Architekturstil von Micro Frontends wie der Architekturstil von Microservices immer weiter an Bedeutung gewinnt. Während der Architekturstil der Microservices im Backend immer mehr angewendet wird, etabliert sich der Architekturstil von Micro Frontends im Front-end-Bereich weiter. Zudem wird die Produktivität der Entwicklungsteams bei großen Projekten gesteigert, denn jedes Team kann selbstständig und unabhängig an seinem Frontend arbeiten bei und gleichzeitig zunehmender Stellenwert der fachlichen Zerlegung bzw. Skalierbarkeit der Anwendung während der Entwicklung.
Inhaltsverzeichnis
1 Einleitung
1.1 Motivation
1.2 Aufgabenstellung
1.3 Projektziele
1.4 Methodisches Vorgehen
2 Micro Frontend
2.1 Definition vom Micro Frontend
2.2 Vor- und Nachteile von Micro Frontends
2.3 Microservices
2.4 Abgrenzung des Micro Frontends von Microservices
3 Herausforderung bei der Implementierung von Micro Frontends
3.1 Styling
3.2 Kommunikation zwischen Shell und Micro Frontend
4 Unterschiedliche Ansätze zur Realisierung von Micro Frontends
4.1 Hyperlink mit Vor- und Nachteilen
4.2 iFrame mit Vor- und Nachteilen
4.3 Web Component mit Vor- und Nachteilen
4.4 Module Federation mit Vor- und Nachteilen
5 Implementierung
5.1 Vorstellen des Projekts
5.2 Auswahl des Ansatzes
5.3 Prototypische Implementierung
5.3.1 Anwendungsfalldiagramme und Anwendungsfallbeschreibungen
5.3.2 Die benötigten Daten
5.3.3 Die verwendete Technologien
5.3.4 Prototypische Implementierung
5.3.5 Testen und Auswertung der Tests
5.3.6 Sourcecode für das Projekt
6 Fazit
7 Glossar
Zielsetzung & Themen
Das Hauptziel dieser Arbeit ist die Konzeption, Implementierung und Validierung eines Micro-Frontend-Ansatzes für Kalendereinträge in einer existierenden Webanwendung. Im Fokus steht dabei die Untersuchung der technischen Herausforderungen und die Auswahl einer geeigneten Architektur zur modularen Erweiterung der Benutzeroberfläche.
- Grundlagen der Micro-Frontend-Architektur und Abgrenzung zu Microservices.
- Analyse technischer Hürden beim Styling und der Kommunikation zwischen Komponenten.
- Vergleich verschiedener Integrationstechniken wie Hyperlinks, iFrames, Web Components und Module Federation.
- Prototypische Umsetzung eines Kalender-Moduls inklusive Filterfunktionen und Testmethodik.
Auszug aus dem Buch
4.4 Module Federation mit Vor- und Nachteilen
Die Implementierung von Micro Frontends und deren Integration in anderen Webseiten waren lange nicht problemlos und einfach, weil die Frameworks und Build-Tools diesen Architekturstil noch nicht kennen. Aber mit der Einführung der neuen Integrationstechnik Module Federation, welche von dem Webpack-Mitarbeiter Zack Jackson implementiert wurde, ist die Implementierung von Micro Frontends einfacher geworden.
Dieser Ansatz könnte wahrscheinlich der neue Goldstandard für Implementierung des Micro Frontend-Architekturstils werden. Und der Begriff Module Federation wird nach „Zack Jackson“ wie folgt definiert werden:
„Module federation allows a JavaScript application to dynamically run code from another bundle/build, on both client and server.“
Also Module Federation bietet die Möglichkeit, dass die Programmteile in einer Webseite eingebettet werden können, die zum Zeitpunkt der Kompilierung noch nicht bekannt war. Dies können selbst kompilierte Micro Frontends sein.
Mit diesem Ansatz kann man Webpack mitteilen, dass Teile der Anwendung nicht lokal existieren, sondern zur Laufzeit in die Anwendung geladen werden können.
Zusammenfassung der Kapitel
1 Einleitung: Dieses Kapitel stellt das Forschungsfeld der Micro-Frontend-Architektur vor, definiert die Zielsetzung der Arbeit und erläutert das methodische Vorgehen.
2 Micro Frontend: Hier werden der Begriff Micro Frontend, dessen Definition sowie die Vor- und Nachteile gegenüber monolithischen Architekturen und Microservices behandelt.
3 Herausforderung bei der Implementierung von Micro Frontends: Dieses Kapitel widmet sich den technischen Schwierigkeiten, insbesondere bei der Gestaltung von Stilen und der notwendigen Kommunikation zwischen verschiedenen Anwendungsbausteinen.
4 Unterschiedliche Ansätze zur Realisierung von Micro Frontends: Eine detaillierte Untersuchung der Integrationsmöglichkeiten wie Hyperlinks, iFrames, Web Components und Module Federation, jeweils mit einer Bewertung ihrer Vor- und Nachteile.
5 Implementierung: Der Hauptteil der Arbeit, in dem die prototypische Umsetzung des Kalender-Moduls, die Datenstruktur, das gewählte technologische Konzept sowie die Testergebnisse präsentiert werden.
6 Fazit: Eine abschließende Zusammenfassung der erarbeiteten Ergebnisse und eine Reflexion über den Erfolg der Prototyp-Entwicklung.
7 Glossar: Erläuterung wichtiger Fachbegriffe, die im Rahmen der Arbeit Verwendung finden.
Schlüsselwörter
Micro Frontend, Webanwendung, Softwarearchitektur, Module Federation, Web Components, iFrame, Hyperlink, Kalender-Modul, Schnittstellen, Frontend-Entwicklung, Skalierbarkeit, JSON-Server, Webpack, User Experience, Testmethodik.
Häufig gestellte Fragen
Worum geht es in dieser Arbeit grundsätzlich?
Die Arbeit befasst sich mit der Implementierung von Micro Frontends am Beispiel eines spezifischen Kalender-Moduls, um die Vorteile einer modularen Webentwicklung in einem realen Anwendungsszenario zu demonstrieren.
Was sind die zentralen Themenfelder?
Die zentralen Themen sind Architekturkonzepte von Micro Frontends, die Herausforderungen bei der Integration einzelner Module in ein Gesamtsystem sowie die praktische Realisierung mittels funktionaler Prototypen.
Was ist das primäre Ziel der Arbeit?
Das Hauptziel ist der Entwurf, die Implementierung und die Validierung eines Micro Frontends, das in eine bestehende Anwendung eingebettet wird, um die Wartbarkeit und Skalierbarkeit der Frontend-Landschaft zu verbessern.
Welche wissenschaftliche Methode wird verwendet?
Die Arbeit nutzt einen methodischen Top-down-Ansatz nach dem Wasserfallmodell, um das System schrittweise von der Planung bis zur prototypischen Implementierung zu entwickeln.
Was wird im Hauptteil behandelt?
Im Hauptteil werden neben der theoretischen Abgrenzung von Microservices die verschiedenen technischen Ansätze zur Realisierung von Micro Frontends verglichen und die tatsächliche Umsetzung des Kalender-Moduls detailliert beschrieben.
Welche Schlüsselwörter charakterisieren die Arbeit?
Die wichtigsten Schlagworte sind Micro Frontend, Architekturen, Module Federation, Web-Integration und Software-Wartbarkeit.
Wie unterscheidet sich Micro Frontend von Microservices?
Während sich Microservices auf die fachliche Zerlegung der Backend-Schicht konzentrieren, führt der Micro-Frontend-Ansatz diese vertikale Zerlegung bis in die Benutzeroberfläche fort, um Teams volle Autonomie über den gesamten Technologie-Stapel zu geben.
Warum wurde für die Umsetzung Module Federation gewählt?
Module Federation stellt sich nach dem Vergleich als flexibelste Technik heraus, da sie sowohl eine dynamische Einbettung ermöglicht als auch effiziente Mechanismen zur Vermeidung von Codeduplikaten bietet.
Welche Rolle spielt die Mini-Shell im Projekt?
Die Mini-Shell fungiert als Testumgebung für das Micro Frontend, in der die Integrationsszenarien sowie die Kommunikation zwischen den Modulen validiert werden können.
Was zeigen die Testergebnisse am Ende des Projekts?
Die Tests bestätigen, dass das entwickelte System die Anforderungen an Filterung, Datenabfragen und Modulintegration erfüllt, wobei die gewählten Technologien robust zusammenarbeiten.
- Arbeit zitieren
- Basel Hussein (Autor:in), 2021, Implementierung von Micro Frontends am Beispiel eines Kalender-Moduls, München, GRIN Verlag, https://www.grin.com/document/1467499