Micro‑Frontend Architecture and Implementation with Qiankun for the Huasheng Data Management Platform

Introduction – When facing legacy front‑end migration, back‑end decoupling, large projects, slow builds, or a single technology stack that cannot meet business needs, a micro‑frontend approach can transform a monolithic web application into a composition of small, independent front‑end apps.

Background – The Huasheng Data Management Platform, a risk‑control decision‑support system, contains many modules built with jQuery and JSP. To integrate these legacy modules into a unified platform, a more flexible architecture is required.

Problems with the current monolithic approach – Codebase growth leads to slower builds, low fault tolerance (full redeployment for any change), and unwieldy file structures that hinder development.

Requirements – 1) Compatibility with existing jQuery apps, 2) Split the monolith into independently managed modules, 3) Enable partial upgrades, 4) Accelerate project startup and improve maintenance experience.

Solution selection – After evaluating several micro‑frontend options, the Qiankun framework was chosen for its built‑in JS/CSS sandbox, low‑complexity communication, and moderate intrusiveness, which satisfies the need to integrate legacy jQuery projects.

Architecture design – The design follows four core principles: centralized routing, identifiable applications, lifecycle management (load, bootstrap, mount, unmount, unload), and independent deployment with automated configuration.

Main application (base) construction – The base app is built with React + Umi + DVA (the team’s stack). Steps include creating a container for sub‑apps, registering sub‑apps with activation rules, and starting Qiankun.

Sub‑application integration – 1) Non‑Webpack sub‑apps: provide an entry file that declares lifecycle functions. 2) React Umi sub‑apps: configure umi settings, runtime sub‑app configuration, and shared global state. 3) Conventional React sub‑apps: add a public‑path.js , adjust entry files, and modify Webpack to expose the lifecycle. 4) Vue and Angular sub‑apps: integration follows the same pattern as React.

Shared plugins and dependencies – By configuring Webpack externals and loading common scripts via <script> tags, shared libraries are cached globally, reducing duplicate loads across sub‑apps.

Deployment strategy – Each sub‑app is built and uploaded to a CDN. Configuration (resource URLs, routing) is stored in a Node service; the main app fetches this config to load sub‑apps dynamically. The internal Aurthur platform automates CDN deployment, testing, and rollback.

Monitoring and permission – A proprietary front‑end monitoring platform provides real‑time error detection. The main app integrates the company’s permission system, centrally managing access control for all sub‑apps.

Conclusion – By adopting the micro‑frontend approach with Qiankun, the platform successfully migrated legacy systems, eliminated engineering bloat, accelerated build times, and achieved independent development, deployment, and scaling of sub‑applications.