Micro Frontends: Value, Architecture, and Practical Implementation with Single‑spa and Qiankun

Micro frontends provide techniques, strategies, and recipes for building modern web applications with multiple teams using different JavaScript frameworks, enabling a modular and scalable front‑end architecture.

The core values include technology‑stack independence, independent development and deployment, and runtime isolation, which together address the inevitable evolution of monolithic admin consoles into unmaintainable “giant‑stone” applications.

For typical back‑office scenarios two architectural patterns exist: a single‑instance model, where only one sub‑application is displayed at a time (usually driven by URL changes), and a multi‑instance model, where several sub‑applications coexist. The article focuses on the single‑instance case implemented with single‑spa .

Lazy‑loaded sub‑applications introduce a “Future State” routing problem: when the browser refreshes, the main framework loads before the sub‑application’s routes are registered, leading to /subApp/123/detail not being matched and a NotFound error. The solution is to configure the main router with entries such as subApp: { url: '/subApp/**', entry:'./subApp.js' } and to defer route handling until the sub‑application’s routes are loaded. When a sub‑application is unmounted, the main framework should trigger a destroy event, e.g. destroy = () => ReactDOM.unmountAtNode(container) , allowing the sub‑app to clean up.

Two composition strategies are compared: build‑time composition and runtime composition. Runtime composition is preferred because it preserves the technology‑stack‑agnostic and independent‑deployment goals.

Entry formats are examined next. A JavaScript entry bundles all assets (JS, CSS, images) into a single script, which can become large and block parallel loading. An HTML entry delivers the sub‑application as an HTML document fetched by the main framework, preserving the sub‑app’s context, simplifying integration, and providing natural style isolation.

For module loading, sub‑applications must expose lifecycle hooks (bootstrap, mount, unmount) compatible with single‑spa . Using the UMD format and a global export (e.g., attaching hooks to a window variable) enables the main framework to retrieve these functions without imposing a strict bundling contract.

Application isolation is tackled on two fronts. Style isolation can be achieved with Shadow DOM, CSS modules, BEM naming, or dynamic stylesheet insertion/removal; the article recommends dynamic stylesheet removal on unmount to ensure only the active sub‑application’s styles are applied. JavaScript isolation is addressed with a runtime sandbox that snapshots the global state before bootstrap and mount, restores it on unmount, and intercepts global event listeners, thereby preventing cross‑application side effects.

The culmination is qiankun , an open‑source micro‑frontend framework developed at Ant Financial. Qiankun implements the described routing, entry, module, and isolation techniques, has been running in production for over six months, integrates more than 40 applications across four technology stacks, and is available on GitHub (https://github.com/umijs/qiankun) with an accompanying Umi plugin ( @umijs/plugin-qiankun ).

In summary, the article provides a comprehensive, production‑ready guide to adopting micro‑frontend architecture for large back‑office systems, covering architectural decisions, technical challenges, and concrete solutions.