Micro-Frontends Architecture for Agency Websites
As our client applications grew in size and complexity, our build times slowed down and deployments became risky. We transitioned to a micro-frontend architecture using Webpack Module Federation.
Table of contents:
Independent Deployments
Different teams can work on different sections of the website (e.g., the store, the blog, the dashboard) and deploy them independently without forcing a full site rebuild.
Shared Dependencies
Module Federation smartly handles shared libraries like React and Lodash. If multiple micro-frontends use the same version of React, it's only downloaded once by the user's browser.
State Management Across Boundaries
Passing state between completely different JavaScript applications requires a robust event bus or shared global state wrapper, which we implemented using custom events.