Keyboard, contrast, and semantics for design systems that have to survive enterprise procurement.
The Challenge of Scale
As Developer X grows, the need for a cohesive yet decentralized frontend strategy becomes paramount. Traditional module federation has served us well, but at the enterprise tier, we require stronger contracts between host and remote applications to prevent runtime failures.
The cost of getting this wrong is not a slow build — it is a host that cannot ship because one remote owns a shared global. Keep ownership at the team boundary, version the events you publish, and treat the design system as a package both sides pin.
Pro Tip
The goal of micro-frontends is not just to split code, but to split the responsibility. Empower teams to ship features independently without breaking the global orchestration.
Implementation Logic
We leverage a container-based approach where the shell acts as the central registry. Below is a simplified look at how we handle shared state across remote modules using a custom event bus:
registry.config.ts
const moduleRegistry = {
auth: {
entry: 'https://auth.devx.io/remoteEntry.js',
scope: 'auth_service',
module: './AuthApp'
},
dashboard: {
entry: 'https://dash.devx.io/remoteEntry.js',
scope: 'dashboard_service',
module: './DashboardApp'
}
};
export const useModuleLoader = (moduleName) => {
useEffect(() => {
loadRemoteModule(moduleRegistry[moduleName]);
}, [moduleName]);
};Notice how the registry defines clear entry points. This decoupling allows the Auth team to deploy a new version of the login flow without the Dashboard team even being aware of the change. Visual consistency is maintained through shared Design System tokens.
Architecture Overview
Figure 1: Container shell connecting Billing, CRM, and Inventory via a shared state bus.
Key Performance Metrics
Independent deployability only pays off when the host remains stable. Measure bundle isolation, shared-token coverage, and time-to-recover when a remote module fails so teams can ship without coordinating a global freeze.
Contracts Between Host and Remote
A remote module should fail closed. If the dashboard remote is down, the shell still renders navigation and a fallback. Version the event names you publish; do not treat the bus as an implicit API. Shared design tokens belong in a package both sides pin — not in copy-pasted CSS.
Rolling Out Without a Global Freeze
Ship the shell first with a feature flag that loads one remote. Measure time-to-interactive and error rate for that remote in isolation. Only then add the next team. Independent deployability is a process: CI for each remote, a contract test against the host, and a rollback that does not require coordinating five calendars.
David Kim
Product Designer
David designs interfaces that engineering can implement without a second translation.
View all articles →