A comparison on Microfrontends composition techniques Module Federation
summary
Demo shows two apps Main and Dogs apps on ports 3000 and 3001 where the main loads the Dogs microfrontend without an iframe. Comparison finds Module Federation (webpack) supports vertical and horizontal composition but needs heavy config; initial Vercel/Next setup fails. A Vite/Turbopack approach avoids bundling and exposes modules to the browser, and there is a Vite plugin to reuse module federation behavior. Real issues: dependency resolution errors, duplicated configs, and fragile testing that require wrappers and extra tooling.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:56Microfrontends evolution
- 5:08Composition types
- 6:34Vertical setup demo
- 8:42Module Federation explained
- 10:28Dependency challenges
- 11:55Module Federation in Next.js/Vite
- 13:41Vite advantages
- 14:26Key challenges and solutions
related talks
30mMo Frontends Mo Problems Mo Solutions
29mMicrofrontend using Vanilla JS
45mMicro Frontends in Action!
25mShipping Federated React Applications
36mMicro Frontends in Action!
31mMicro frontends and the multiverse of Frameworks
01h 17mChallenges in Building Micro Front Ends
25mBeyond Micro Frontends - Three Additional Things Module Federation Makes Possible