Ant Financial Frontend Framework and Engineering Practices: Evolution, Architecture, and Future Directions

At the 2019 InfoQ GMTC Global Front‑End Technology Conference, Ant Financial senior engineer Chen Cheng presented "Ant Financial Frontend Framework and Engineering Practices," and this article provides a comprehensive summary.

Framework Evolution

Before 2015: Sea.JS, Arale, SPM.

2015‑2016: Adoption of React, development of Roof, Redux, and open‑source Dva.

2017: Introduction of the next‑generation enterprise‑level frameworks Umi (originating from mobile) and Bigfish (originating from middle‑platform).

Later: Merged the two teams into a single group, consolidating the frameworks.

The merged framework now consists of five layers: dependency, plugin, plugin‑set, application‑type, and deployment‑mode, allowing contributions at any layer.

Why the Framework Succeeded

People: a large, cross‑functional team.

Business: close coupling of framework and product needs.

Process: well‑defined development and release workflows.

Open‑source: transparent code, community contributions, and high code quality.

The plugin system is central: developers can create independent functional plugins, group them into plugin sets, extend application types (SPA, MPA, micro‑frontend), and add deployment modes. Plugin lifecycle covers node‑time compilation, browser‑time runtime, and UI‑time editing.

Example plugin skeleton (similar to a Vue‑CLI plugin):

export default function (api) {
  // add/modify/bind events here
}

Implementation details include injecting CSS via <style> tags that are removed on unmount, and sandboxing JavaScript using a Proxy‑based eval.

Asset Market

The asset market categorises reusable assets into components, business components, blocks (code snippets), and page templates, enabling visual addition through Umi UI and command‑line tools.

Micro‑Frontend

Based on SingleSPA, each sub‑application provides bootstrap , mount , and unmount lifecycles, while the host registers and renders them. Key technical challenges addressed include JS sandbox, CSS isolation, entry configuration, on‑demand loading, performance optimizations, and parent‑child communication.

Routing

Umi supports both configuration‑based and convention‑based routing, dynamic routes, nested routes, YAML‑based metadata, permission guards, transition animations, breadcrumbs, scroll handling, keep‑alive, title switching, menu generation, and route‑driven code splitting.

Performance Optimizations

Build‑time: DLL, external, cache‑loader, hard‑source, webpack@5, Plug'n'Play.

Advanced: auto‑external plugin, uglifyjs hash cache.

Experimental: cloud‑based compilation, Rust‑based bundlers, ESM‑only delivery.

Additional optimizations cover on‑demand loading, asset reuse, SSR/Prerender, prefetch/preload, modern mode, and targeted polyfills.

Tooling and Testing

Editor plugins provide TypeScript hints for Dva actions and Umi route paths. Testing combines Jest, test‑react‑library, and Puppeteer, with a vision for route‑driven automated testing to reduce manual effort.

Monitoring and CI

Build‑time reports, data cleaning jobs, and dashboards show build duration, version distribution, and error alerts. Runtime monitoring automatically injects tracking IDs during cloud builds.

Future and Planning

The goal is to unify internal and external framework solutions by standardising on Umi, adjusting plugin configuration, and introducing preset concepts (e.g., umi‑preset‑bigfish ) to simplify ISV adoption.