Native Module Federation is a modern approach to building modular and independently deployable JavaScript applications using native browser features—specifically import maps and ESM (ECMAScript Modules).
It allows JavaScript assets—such as micro frontends or individual app components—to be developed, tested, and deployed independently. These assets are then fetched remotely and integrated at runtime using the browser’s native ESM capabilities, without relying on a bundler like Webpack to stitch them together.
The development of this architecture arose from the need to transform deliveries of from a Siloed Workflow to a Value Stream.
Note: Using Native Module Federation is a strategy that lends itself to working in value streams, however, it can be an interesting application architecture for any workflow.
Silos separate work by department or function (e.g., design, development, QA, operations), often with:
- Poor communication across teams
- Handoffs and delays between stages
- Local optimization over global outcomes
- A focus on task completion rather than customer value
| Aspect | Value Stream | vs | Siloed Process |
|---|---|---|---|
| Focus | End-to-end customer value | Departmental tasks or KPIs | |
| Flow | Continuous, cross-functional | Fragmented, with handoffs | |
| Visibility | Full workflow is transparent | Limited to functional areas | |
| Feedback Loops | Fast, integrated | Slow, disconnected | |
| Optimization | System-level (global) | Local (per team or department) | |
| Deployment | Small Deployments, less risk | Monotlithic Deployment, high risk |
Native Module Federation focuses on a strategy for decoupling yet maintaining cohesion betweeen each front end application that represents a value stream.
This section will outline the necessary implementation requirements to build an application using the Native Module Federation approach.
Javascript assets MUST be ECMAScript Modules
In Native Module Federation (ESM) refers to both:
- The module system (language feature) defined by the ECMAScript standard
- The build type or format of the JavaScript file produced by a bundler or build tool
Import maps are required for Native Module Federation because they provide a way for the browser to resolve bare module specifiers (like 'app1/Button' or 'shared-lib') to actual URLs at runtime — a critical part of how Native Module Federation works.
Important: Each module/application must be able to run as a stand alone module/application.
-
Static/Common Web Application (index.html with importmap)
A static application, which simply includes an index.html with the import map. Generally this web application should not require any build tools or package management.
-
Host Web Module/Application
A host web application in the context of Micro Frontends (MFEs) is the main shell or container that loads and integrates multiple independently developed frontend modules (called remote or child applications) into a single user interface. The host application would be the first script that is loaded in index.html.
-
Sub Web Module(s)/Application(s)
A sub web application is any javascript module that can be consumed by the Host Web Application, as well as other Sub Web Application.