Challenges in Building Micro Front Ends
summary
Shows a working demo that composes separately built front ends: a Next.js + Webpack Module Federation host that dynamically imports a remote header exposed as a remoteEntry, built in an NX monorepo and deployed per-app to Vercel. Describes concrete tradeoffs: solved a slow fintech portfolio by replacing the route with a micro front end, warns of 10–20 MB payload bloat, recommends sharing framework deps, CSP and Cypress visual tests, and reports the demo remote header successfully loads and composes.
AI-written summary · about
chapters (32)
- 0:00Start
- 2:29Basic Introduction
- 7:14Operational Complexity
- 11:47Isolating Application Blocks
- 12:22Performance Degradation
- 13:57Flexibility
- 17:34Iframes
- 18:03What Is an Iframe Solution
- 19:32Alternatives Um to Iframes
- 22:28Web Components
- 22:59What Are Web Components
- 29:05Security
- 29:37Server-Side Attacks
- 31:09Json Css Override
- 31:28Css Overrides
- 31:53The Solution
- 32:54Content Security Policy
- 34:32The Content Security Policy
- 35:25Css Inheritance
- 37:07Testability
- 37:46Browser-Based Testing
- 38:39Integration Testing
- 39:40Component Interaction
- 40:45Managing Styles
- 46:44How Would You Share Data
- 47:19Ui Inconsistency
- 50:05Increased Payload
- 54:49How Will You Minimize Payloads
- 56:49Code Repetition
- 59:50Repo Management
- 1:04:28Code Walkthrough
- 1:12:06Model Federation
related talks
45mMicro Frontends in Action!
21mEmbracing Micro-frontends: A Comprehensive Guide for Modern Web Development
36mMicro Frontends in Action!
47mMicro Frontends Unmasked
48mMicrofrontend Architecture – technical implementation.
31mMicro frontends and the multiverse of Frameworks
25mBeyond Micro Frontends - Three Additional Things Module Federation Makes Possible
30mMicro Frontends in React — a State of the Art Approach