How Fliggy Built a Scalable Micro‑Frontend Operations Platform in 3 Months

The first phase of Fliggy’s integrated operations console, after three months of development, is now used internally. By adopting a micro‑frontend and SDK‑based integration approach, the team connected more than ten platforms across four major scenarios, optimized hundreds of visual and interaction elements, and achieved a usable system with experience measurement and user‑feedback tracking.

Background

As Fliggy’s business grew, multiple operational platforms were built over the past two years to improve efficiency, but increasing product complexity exposed several pain points:

Scattered entry points leading to high configuration costs.

Lack of inter‑platform connectivity preventing effective collaboration.

Missing higher‑level solutions for best‑practice operations.

Goals and Solution

To address these issues, the Universal‑Front‑End Operations Console project was launched. The first‑phase goal was to establish the technical foundation, build the console framework, and provide a micro‑frontend solution that supports multiple platform scenarios based on existing business.

Based on real‑world operational configuration scenarios and existing back‑end technologies, the team designed the architecture shown below:

Process and Results

The team built a main application using Ant Design Pro (frontend) and Midway (backend). All existing sub‑platforms were integrated via a micro‑frontend solution, allowing operators to work from a single unified console.

On the backend, a custom Gateway middleware based on http‑proxy‑middleware was created to forward requests, inject tokens for authentication, and handle cross‑origin issues. Single sign‑on was achieved by delegating login to the main app.

For sub‑application integration, the solution simplified onboarding: configuring front‑end and back‑end settings enables a sub‑app built with Ant Design Pro to be integrated within half an hour, without affecting its existing code.

Widget integration was introduced to standardize parameters, callbacks, and open‑API services, allowing any SDK to be inserted into any operational system, thus achieving cross‑platform configuration.

Visual and performance optimizations were performed over four weeks, unifying UI standards, establishing regular reviews, and applying performance techniques such as upgrading to Ant Design 4, removing unused locales, replacing Moment.js, enabling tree‑shaking, locking versions, on‑demand loading, and externalizing common dependencies via CDN, reducing resource load by roughly one‑third.

An experience‑measurement solution was integrated, providing a full‑stack SDK for data collection, performance monitoring, visitor profiling, and error tracking. A feedback‑tracking system was also added to allow operators to submit suggestions for continuous improvement.

Co‑creation and Feedback

During development, the team leveraged several foundational capabilities from Alibaba Group and Ant Financial, including the qiankun micro‑frontend framework, the experience‑measurement suite, and feedback tracking. They contributed three PRs to qiankun (routing base prefix, custom Fetch support, documentation) and a PR to extract Ant Design icons as a minified file.

The project served as an early adopter of the experience‑measurement SDK, providing valuable feedback that helped refine the solution for internal use.

Conclusion

In three months, the team delivered a functional integrated operations console, demonstrated the feasibility of a micro‑frontend‑based solution, and laid the groundwork for further iterations. Ongoing collaboration and open‑source contributions continue to enhance the platform’s value for the business.

For further discussion, interested colleagues can reach out via @侑夕 [email protected].