Fundamentals of Module Federation
Mathew Byrne
@mathewbyrne
Problem
How do you build and deploy a large client-side application developed between multiple teams?
Microfrontends
- Architectural pattern
- Compose/orchestrate frontend application on the client
- Each frontend is often separated by route, by component, or by feature.
source: https://micro-frontends.org/
Solution: Single Build
Problems:
- Scaling build times
- Dependency versioning
- Deployments
- Bottlenecks!
Solution: Multiple Apps
Problems:
- User Experience Compromise/ rebuilding client state
- Scaling challenges still exist within each app.
- Duplicate dependencies.
Solution: Webpack Externals
Problems:
- No on-demand loading of code
- Must exist on page globally
- Lack of flexibility
Solution: Native ESM
Problems:
- Performance — RTT, volume of requests
- ESM only
- Features like import-maps still limited by clients
Module Federation
- A run-time method of sharing modules between independent builds.
- Designed to address many of the shortcomings just mentioned.
- Modules as seam between bundles allows for many different configurations and use-cases.
Terminology
Host
Remote
First Webpack runtime to boot on the client
Remote modules loaded from a separate build
Module Federation (cont)
- Redundancy, self-healing and versioning come built-in.
- Developer experience without complex new patterns.
- Works in any Javascript environment.
- Remote loads "hoisted" to nearest synchronous parent.
Many Configurations
- Bi-directional — hosts loading remotes from one another.
- App Shell — single host loads multiple remotes. Acts as remote.
- Nested — remotes load other remotes
Future
- MF first shipped with WebPack 5 (Oct 2020)
- Next 13, SSR support
- Delegate Modules
Summary
- Module Federation enables a lot of different strategies for dividing up an SPA.
- Runtime technology with built in loading, versioning and redundancy.
- Developer experience is at the forefront.
