How Ant Financial Implements a Standard Micro‑Frontend Architecture at Scale

Micro‑Frontend Scenario

Before adopting micro‑frontend, large projects suffer from long development cycles, massive bundle sizes, inconsistent UI, and fragmented workflows, which degrade both engineering efficiency and product experience.

Definition of Micro‑Frontend

Micro‑frontend is an approach where multiple teams can use different technology stacks to build a modern web application, extending the micro‑service concept to the frontend.

The architecture consists of a shared composition layer that loads and orchestrates independent sub‑applications (SPA) at runtime, handling lifecycle, event management, and dynamic assembly of a complete SPA.

Key Implementation Challenges

Key criteria for a viable micro‑frontend solution include:

Technology‑stack independence, preventing framework lock‑in.

Independent development, release, and deployment of sub‑applications.

Application isolation (style, JavaScript, error handling).

Dynamic composition capability for product value.

Technical Decision Details

To address these challenges, Ant Financial made several technical decisions:

Ensuring stack‑agnostic sub‑applications via a protocol‑based integration.

Designing routing and import mechanisms: Config Entry (explicit JS/CSS registration) vs HTML Entry (full manifest).

Achieving style isolation: preferring CSS Modules over BEM; Web Components considered but with caveats.

Implementing a JavaScript sandbox with bootstrap, mount, and unmount lifecycles to manage side effects.

Managing shared dependencies and version mapping for multiple React versions.

Data sharing via unidirectional props and browser native events.

Performance optimizations such as asynchronous style loading, pre‑loading, and avoiding flash of unstyled content.

Practical Outcomes at Ant Financial

Ant Financial built a unified micro‑frontend platform called OneX , delivering brand, product, and technical value: a consistent UI, free composition of multiple consoles, and improved development efficiency across public, private, and hybrid clouds.

Metrics include over 70 online applications integrated across Alibaba Cloud, Ant Cloud, and private cloud; the most complex console integrates 15 applications with more than four technology stacks, supporting end‑to‑end CI/CD automation and multi‑cloud deployment.

Open‑Source Contributions

Ant Financial released the framework‑agnostic core qiankun and the umi‑plugin‑qiankun for Umi applications, demonstrating that micro‑frontend architecture is viable for large‑scale back‑office scenarios.