From Monolithic Web App to Micro-Frontends – Extending Microservices Architecture to the Frontend
summary
A large React monolithic web app was refactored into independently built, runtime‑loaded feature packages using a thin SPA that performs dependency injection. A monorepo with Lerna and Yarn wires local packages and publishes only changed packages; runtime‑loaded bundles allow teams to deploy or run multiple bundle versions (canary/A‑B) without changing others. The migration took about six weeks of refactor, did not reduce total download size, but reduced cross‑team coordination and release friction.
AI-written summary · about
chapters (13)
- 0:00Micro-frontends transition
- 10:43Monolithic frontend apps
- 12:28SPA growth challenges
- 14:16Thin SPA with DI
- 16:43Architecture changes impact
- 18:12Monorepo for frontend
- 20:46Monorepo versioning
- 21:51Lerna local dev
- 23:16Micro-frontends deployment
- 24:43Refactoring timeline
- 25:47Dependency management
- 26:52A/B testing deployments
- 27:37Future with web components
related talks
46mMicro Frontends, Keep Using That Word, I Don’t Think It Means What You Think It Means
48mMicrofrontend Architecture – technical implementation.
24mMicrofrontends
45mMicro Frontends in Action!
29mSPAs are dead. Long live Microfrontends.
32mFrom Monolith to Micro Frontend
44mApplications instead of libraries: Micro frontends implemented through module federation
36mMicro Frontends in Action!