Communication and state management for micro frontend architectures - Challenges and solution patterns

Abstract

Die Micro Frontend Architektur ermöglicht es, Teams um vertikale Features, anstatt von horizontalen Applikationsschichten zu bilden. Um am Endgerät eine interaktive und reaktive Benutzererfahrung anbieten zu können, müssen isolierte Micro Frontend Instanzen jedoch kooperieren. In dieser Diplomarbeit untersuchen wir mögliche Kommunikationskanäle, mit denen Zustandssynchronisierung zwischen mehreren Micro Frontends ermöglicht werden sollen. Mithilfe der Action Research Methodologie erstellen wir drei Prototypen der gleichen Webapplikation: Zuerst wird eine monolithische Applikation entwickelt, die als Vergleichsbasis dient. Danach werden zwei Micro Frontend-basierte Applikationen mit iframes bzw. Web Components entwickelt. Beide Technologien haben dabei unterschiedliche Herausforderungen und Limitationen. Zuletzt vergleichen wir die Ergebnisse anhand des Ressourcenverbrauchs und Entwicklungsaufwands bei sich ändernden Anforderungen.

Micro frontends have enabled developers to think in feature vertices rather than application layers. But on the client, isolated micro frontends need to communicate with each other to provide rich and dynamic user experiences. This thesis explores possible communication channels in order to implement state synchronization across multiple micro frontend instances. Using the Action Research methodology, we test our theory by developing three prototypes of the same web application: First, a monolithic baseline, followed by two micro frontend based applications using iframes and Web Components - each posing different challenges and limitations. Finally, we compare the prototypes' resource consumption and development overhead of changes.