Micro‑Frontend Implementation in a Financial Management System: Architecture, Solutions, and Outcomes

The financial company needed a multi‑team, multi‑business‑line management system that offers a seamless experience for product operators while keeping development costs low; to achieve this they gradually introduced a micro‑frontend architecture across their financial management backend.

Application Scenario : Various business lines required similar admin dashboards, demanding a unified UI, consistent user experience, and easy extensibility for both users and developers.

Micro‑Frontend Introduction : Inspired by micro‑services, the architecture separates services (bottom layer), a gateway for validation and authentication (middle layer), and a unified composition layer (top) that assembles the full system. An effective micro‑frontend must allow independent development and deployment, isolate sub‑systems, and be technology‑stack agnostic.

Problem Solving : The team needed a solution that combined the smooth user experience of SPA with the modularity of MPA, avoiding the maintenance overhead of a monolithic SPA and the poor UX of traditional MPA page reloads.

Technical Support :

Publish System Support : A unified deployment pipeline pushes each sub‑system to a designated web service, enabling seamless composition.

Frontend Bridge Component : The bms-same-layout component bridges the main framework and sub‑systems, handling domain‑based configuration, environment switching, mobile compatibility, and embedded mini‑program support.

Backend Service Integration : A common web‑service layer provides aggregation functions such as SSO login, CSRF protection, user‑permission retrieval, and file upload, reducing duplicated effort across sub‑systems.

Unified Permission Management : Permissions are split into UI display rights and data access rights, with gateway‑level control for API permissions and business‑side control for data permissions.

Menu Configuration : A static fragment management system allows each team to configure sidebar menus independently, with permission checks ensuring appropriate visibility.

Practice Results : After deploying micro‑frontends, the platform achieved isolated menu configuration, role‑based UI rendering, single‑sign‑on across all back‑office systems, independent sub‑system releases, reduced development risk, higher developer productivity, and added mobile and mini‑program capabilities.

Future Outlook : The team plans to further enhance the web‑service layer to embed HTML entry points, combining MPA and SPA patterns for even greater flexibility and usability.

Author Bio : Feng Dewang, front‑end developer at 58 Finance, responsible for the architecture and development of consumer finance, housing finance, and wealth‑management front‑end systems.