Fundamentals of Module Federation

Mathew Byrne

@mathewbyrne

Problem

How do you build and deploy a large client-side application developed between multiple teams?

Microfrontends

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

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.

Example: Simple Host Remote Setup

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.

Thank you

Further Reading

https://module-federation.github.io/

Zack Jackson

@ScriptedAlchemy