Problem: Your web app is too big for one team to build
Problem: Your web app is too big for one team to build.
Solution: Use Module Federation (MF) to compose apps.
Here's how it works:
1. One team builds the "shell" (the parent app). It handles global stuff (the header, footer, auth, nav etc).
2. All other teams build remotes (child apps). Each remote is published to a unique URL.
3. The shell loads each remote at their deployed URL. So each remote can be deployed in isolation.
Here's a set of repos I created that conveys the approach:
https://github.com/coryhouse/shell
I used webpack, but you could use other tools like esbuild if you like.
Here's the magic piece: I specify the remotes that webpack should load, and the remote to load varies depending on an…
To clarify, Module Federation is just one way for multiple teams to collaborate.
A few other options:
1. A cross-team monorepo
2. Separate teams contribute npm packages that the "shell" consumes
3. Completely separate apps in separate repos and on separate domains that share common code via npm packages, and link between one another.
The advantage of MF is, the shell provides a cohesive cross-cutting experience, but each team can still deploy their "slice" of the app in isolation.
That said, module federation is a tradeoff. It provides a lot of team autonomy, but this autonomy complicates standardization, code sharing, performance optimization, and cross-team changes.
So, I actually prefer a cross-team monolith and a monorepo if the teams can agree to it and collaborate as needed.
Doing so fosters continuous integration between teams and makes cross-team changes easy to do in one PR.