Implementierung von Micro Frontends am Beispiel eines Kalender-Moduls

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

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.