Micro-Frontends Performance and Centralised Data Caching
summary
Argues micro‑frontends are not inherently slow and shows concrete fixes: use Webpack 5 module federation shared api to avoid duplicate React copies, and implement a simple fetch wrapper with React hooks that implements a distributed shared cache. One App at American Express (used by ~2000 developers) ships this pattern. Result: duplicate API calls on a page drop (demo from five requests to two) and server‑rendered responses hydrate the client cache so no extra fetches occur.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 2:06MicroFrontends
- 2:35Benefits
- 3:31The Problem
- 4:07The Myth
- 4:28React and Angular
- 4:54Strangler Pattern
- 5:24Migrating to React
- 7:17Disclaimer
- 8:55Duplicate dependencies
- 10:06Shared module federation
- 11:52Distributed data fetching
- 12:49Why do we do this
- 14:03What is wrong
- 14:45Distributed Share Cache
- 15:16Fetch Library
- 16:09Demo
- 18:27Code
- 20:59Conclusion
related talks
45mMicro Frontends in Action!
30mMicro Frontends in React — a State of the Art Approach
44mApplications instead of libraries: Micro frontends implemented through module federation
30mComposition, Caching, and Architecture in modern
36mMicro Frontends in Action!
01h 17mChallenges in Building Micro Front Ends
21mEmbracing Micro-frontends: A Comprehensive Guide for Modern Web Development
19mThe Micro-Frontend Revolution at Amex