Design and Implementation of the Qingtian Micro‑Frontend Framework

Background : VAPD is a project‑management tool for team collaboration that suffered from a massive, tangled front‑end codebase (≈50 MB bundle), configuration overload, and poor maintainability. A redesign was required without interrupting existing users, leading to the adoption of a micro‑frontend approach.

What is a micro‑frontend? It applies the micro‑service concept to the browser, splitting a single‑page application into multiple independently developed and deployed sub‑applications. Popular implementations include Alibaba's qiankun , which builds on single‑spa . While qiankun offers many benefits, the author experienced issues such as delayed npm releases, loading jitter, and ChunkLoadError after sub‑app updates, as well as typical micro‑frontend drawbacks: slower loading, sluggish switching, and style conflicts.

Why not use an iframe? Although iframes provide perfect isolation for styles and scripts, they suffer from URL desynchronization, UI mismatches, lack of shared global context, and performance penalties due to full page reloads. Consequently, the team abandoned the pure iframe solution.

Qingtian Framework Design

To overcome the shortcomings of existing micro‑frontend solutions, the Qingtian framework was designed with the following principles:

Speed – fast page load and instant sub‑app switching.

Complete Isolation – each sub‑app is fully isolated after initial setup.

The architecture consists of three layers:

User entry (browser address bar).

Main application layer, containing a routing engine (synchronizes URL and sub‑app visibility) and a data‑sharing engine (shares login/user data across sub‑apps).

Sub‑application collection layer, where each sub‑app is loaded in a full‑screen iframe; only one iframe is visible at a time.

Implementation Highlights

Full‑screen iframe with shared components – the iframe occupies the whole viewport, eliminating UI desynchronization. Common UI parts are packaged as an npm component and imported by each sub‑app.

Parent‑child asynchronous loading – placeholder div elements with unique IDs represent sub‑apps. The parent reads the current pathname, creates the corresponding iframe, and loads it asynchronously while other iframes remain hidden (display:none).

Instant iframe switching – URL changes trigger the parent to hide the current iframe and show the target iframe, achieving near‑zero switch latency.

Routing engine synchronization – the framework overrides Vue‑router methods (push, replace) so that sub‑app navigation updates the parent’s address bar and vice‑versa, handling both single‑app and multi‑app route changes.

Data‑sharing engine – the parent stores shared state in a store, registers it via syncStore , and exposes getTopStore , syncTopMutation , and syncTopStore . Sub‑apps access the store through mapGlobalState and modify it via mapGlobalMutations , ensuring reactive, consistent data across all sub‑apps.

Conclusion : By leveraging full‑screen iframes for hard isolation, shared component libraries, asynchronous loading, and synchronized routing and state, the Qingtian framework resolves the typical pain points of micro‑frontend architectures (slow loading, UI/URL desynchronization, and data sharing). It delivers an experience comparable to a single‑application front‑end while retaining the scalability benefits of micro‑frontends.