Micro‑Frontend Architecture Overview, Practices, and Sandbox Isolation

This article answers four key questions about micro‑frontends: why migrate, what the industry ecosystem includes, which technologies are used for micro‑frontend frameworks, and how to assess a project's readiness for migration.

What Do We Want?

A typical micro‑frontend layout consists of a main (host) application and multiple independent sub‑applications (A, B, C) that can be developed and deployed separately without affecting each other.

Independent Deployment and Non‑Interference

The primary benefit is the ability to release sub‑applications independently, ensuring that updates to one sub‑application do not require rebuilding or redeploying the host or other sub‑applications.

For example, when Main App is at version v1.0.1 and Sub App A updates from v2.1.0 to v2.1.1 , the host and other sub‑apps remain unchanged.

Micro‑Frontend System

The micro‑frontend ecosystem includes two major parts: a governance platform (for application and dependency management) and the runtime container (the actual framework that loads sub‑applications).

Governance Platform

The platform provides application management (registering and versioning sub‑apps) and dependency management (injecting sub‑app entry URLs into the host).

Sub‑application entry URLs are versioned, e.g., https://cdn/.../[email protected] , allowing updates without modifying the host code.

Development Support

Documentation must cover both the framework usage and the full release workflow, including local development of sub‑apps, integration testing with the host, and debugging production issues.

Micro‑Material

Future extensions may treat micro‑components as remotely loadable functions or plugins, blurring the line between apps, pages, widgets, functions, and plugins.

Runtime Container Responsibilities

Application loading: fetch sub‑app entry URLs and mount them.

Lifecycle management: init, mount, update, unmount.

Route synchronization between host and sub‑apps.

Application communication via an event hub.

Sandbox isolation to prevent CSS/JS conflicts.

Error handling for loading or routing failures.

Sandbox Isolation

JS Isolation Techniques

Early approaches used a snapshot of the global window object, but modern sandboxes employ a combination of with , new Function , and Proxy to create a shallow isolated environment.

window = new Proxy(pick(window, whiteListProperties), {...});
document = new Proxy(document, {...});
sandbox = new Function(`return function({window,location,history,document}, code){
  with(window){
    ${code}
  }
}`);

To achieve deeper isolation, an empty same‑origin iframe provides a separate contentWindow that serves as the sandboxed global object.

frame = document.body.appendChild(document.createElement('iframe', {
  src: 'about:blank',
  sandbox: 'allow-scripts allow-same-origin',
  style: 'display:none;'
}));
window = new Proxy(frame.contentWindow, {...});

TC39’s Realms proposal (stage 2) aims to create fully isolated global objects, though no mainstream micro‑frontend framework has adopted it yet.

CSS Isolation

Current solutions rely on engineering conventions (BEM, CSS modules, CSS‑in‑JS) but struggle with shared UI library version conflicts. Shadow DOM offers true CSS isolation, but compatibility issues and limitations with dynamically inserted elements (e.g., tooltips, modals) remain.

A pragmatic hack creates a dedicated Shadow DOM container for each sub‑app’s dynamically inserted DOM nodes, synchronizing styles between the host and the sub‑app.

<div id="sub-app-a-container">
  #shadow-root (open)
    <style>...</style>
    <link rel="stylesheet">...
    <div id="sub-app-a">...</div>
</div>

Technical Debt and Migration Checklist

Decouple cross‑module component dependencies.

Extract shared utilities into independent packages.

Upgrade routing from hash to browser history.

Upgrade React to v17 for Shadow DOM fixes.

Replace hard‑coded class names with prefixed or modular styles.

Stabilize CI/CD pipelines before starting micro‑frontend migration.

References

A curated list of articles, documentation, and repositories covering micro‑frontend concepts, Module Federation, Qiankun, sandbox implementations, and related standards.