Micro frontends split a large application into independent parts to give teams autonomy and restore the agility of a small team.
Module federation enables a shell application to dynamically load remote micro frontends at runtime and share common library dependencies.
Independent teams, company mergers, or gradual migrations can lead to multiple framework versions, which may cause conflicts due to private API dependencies.
Wrapping micro frontends in web components creates a standardized, framework-agnostic abstraction layer for easier integration.
Exposing web components via module federation allows the shell to dynamically load them while sharing dependencies when versions match or loading new versions on demand.
A live demonstration shows an application integrating different versions of Angular, React, Vue, and AngularJS, highlighting challenges like nested routing.
Alternative architectures like monoliths, monorepos, or using iframes involve trade-offs between team autonomy and managing version complexity.
Adopting a micro frontend architecture requires a dedicated platform team to provide guidelines, helper functions, and workarounds for stream-aligned teams.
The solution combines web components for abstraction, federation for dynamic loading, and a platform team for support to successfully manage multi-version architectures.
45:40Manfred Steyer
44:35Manfred Steyer
29:36Manfred Steyer
33:18Manfred Steyer
54:39Alexander Günsche
59:03Florian Rappl
21:06Lucas Braeschke & Stefan Bley
40:05Florian Rappl
.gif?w=240&auto=compress,format)
Jobs that call for the skills explored in this talk.
JO Media Software Solutions GmBh
Brunn am Gebirge, Austria
Speech Processing Solutions
Vienna, Austria
Saby New Compy
Bielefeld, Germany
doinstruct Software GmbH
Berlin, Germany
BMS Corporate Solutions GmbH
Düsseldorf, Germany
autoiXpert GmbH & Co. KG
Stuttgart, Germany
norisk Group
München, Germany