How Micro Frontends Transform Large‑Scale Frontend Architecture

Micro Frontends Overview

Micro frontends allow multiple teams to build a modern web application using different JavaScript frameworks, extending the micro‑service concept to the frontend.

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends

Why Adopt Micro Frontends?

Two main motivations: engineering value (e.g., reducing bundle size, avoiding legacy code, improving build time) and product value (consistent UI, seamless navigation, reduced duplication).

Typical Problems in Legacy Projects

Long‑running projects accumulate large dependency trees, oversized bundles (build >3 minutes), framework version lock‑in, and UI inconsistencies across consoles.

Key Requirements for a Viable Micro Frontend Solution

Technology‑stack independence – sub‑apps must not be locked to a specific framework version.

Independent development, release and deployment – main and sub‑apps are decoupled.

Application isolation – runtime style, JS, and error isolation.

Technical Decisions

To achieve stack independence, a protocol‑based bootstrap is used:

export async function bootstrap() {
  console.log('react app bootstraped');
}
export async function mount(props) {
  console.log(props);
  ReactDOM.render(<App/>, document.getElementById('react15Root'));
}
export async function unmount() {
  ReactDOM.unmountComponentAtNode(document.getElementById('react15Root'));
}

A framework‑coupled example (bad practice) shows direct imports of React and a hard‑coded micro‑frontend component.

// main app
import React from 'react';
import ReactDOM from 'react-dom';
import MicroFrontend from 'micro-frontend';
ReactDOM.render(<MicroFrontend base="/app1" entry="//localhost/a.js"/>);

// sub‑app
window.microFrontends = { app:{...}, reduxStore:{...}, globals:(...) };

Routing must handle 404 fallback to asynchronously registered sub‑app routes.

Application Import Strategies

Two common approaches:

Config Entry : main app registers JS/CSS URLs. Simple but loses full manifest information.

HTML Entry : sub‑app provides a complete HTML manifest, preserving titles, container IDs, and assets.

registerMicroApps([
  {
    name: 'react app',
    entry: '//localhost:8080/index.html',
    render,
    activeRule: '/react'
  }
]);

Isolation Techniques

Style isolation can use CSS Modules (preferred) or Web Components; BEM prefixes are discouraged.

JS sandbox isolates lifecycle methods (bootstrap, mount, unmount) and cleans up global side effects on unmount.

Resource Loading and Version Management

Shared dependencies are loaded once in the main app; a semantic version map selects the appropriate framework version for each sub‑app, allowing React 15 and React 16 to coexist.

Communication Between Apps

Two principles:

Pass props as a one‑way data flow to sub‑apps.

Use native browser events for cross‑app messaging.

// main app
window.dispatchEvent(new CustomEvent('master:collapse-menu', {detail:{collapsed:true}}));

// sub‑app
window.addEventListener('master:collapse-menu', event => console.log(event.detail.collapsed));

Performance Optimizations

Async style loading can cause flash‑of‑unstyled‑content; Ant Financial solves this with dynamic style injection and removal.

Prefetching idle resources improves perceived speed:

export function prefetch(entry, fetch) {
  const requestIdleCallback = window.requestIdleCallback || noop;
  requestIdleCallback(async () => {
    const { getExternalScripts, getExternalStyleSheets } = await importEntry(entry, { fetch });
    requestIdleCallback(getExternalStyleSheets);
    requestIdleCallback(getExternalScripts);
  });
}

Real‑World Outcomes at Ant Financial

The OneX platform integrates multiple products into a unified console, delivering brand, product, and technical value. Over 70 online applications (including 15 in a single console) across Alibaba Cloud, Ant Cloud, and private clouds now run on a micro‑frontend architecture with four+ different tech stacks, full‑chain automation, and multi‑cloud deployment.

The solution has been open‑sourced as qiankun (framework‑agnostic micro‑frontend core) and umi‑plugin‑qiankun (plugin for Umi applications).

qiankun: https://github.com/umijs/qiankun/

umi-plugin-qiankun: https://github.com/umijs/umi-plugin-qiankun