Microfrontends and UI Composition - a Code-First Dive
summary
Starts from an ASP.NET MVC music store and builds multiple integration patterns: a separate Node Express checkout redirected or iframe embedded, component exports via webpack and npm, Angular Elements turned into a 400KB web component, and a multi framework composition using single-spa parcels to mount React Vue and Angular side by side. Demos show tradeoffs concretely: full tech/runtime isolation versus poor cache and slow load times, partial deployment reuse with smaller bundles, and when each approach actually works.
AI-written summary · about
chapters (9)
- 0:00Introduction to micro frontends
- 5:06Microservices primer
- 8:42Application isolation approach
- 14:20Iframe-based integration
- 17:46Componentization techniques
- 21:30Shared component integration
- 33:42Using web components
- 41:37Managing multiple frameworks
- 48:59Conclusion and resources
related talks
46mMicro Frontend: the microservice puzzle extended to frontend
25mMicrofrontends: a Modern Approach to Complex Web Applications
57mMicro Frontends – a strive for fully verticalized systems
36mMicro Frontends in Action!
47mCamel and Eye of a Needle: Integration Approaches for SPA-based Micro Frontends
45mMicro Frontends in Action!
47mMicro Frontends Unmasked
31mMicro Frontends: The Good, the Bad, and the Ugly