Lingjie Page-Level Micro‑Frontend Framework: Principles, Types, and Practical Usage

Introduction – As projects grow, teams split into independent front‑end units, making a single monolithic repository impractical. Dividing a system into multiple sub‑applications that can be developed and deployed independently leads to the concept of micro‑frontends, analogous to micro‑services on the back‑end.

Definition and Goals – Micro‑frontends aim to let different front‑end teams work autonomously while preserving a seamless user experience, avoiding white‑screen flashes during transitions.

Types of Micro‑Frontends – They are classified by granularity: page‑level (each sub‑app occupies a full page) and section‑level (multiple sub‑apps share a page, with shared and switchable regions). Most modern frameworks focus on section‑level, but page‑level remains useful in certain scenarios.

Lingjie Design Philosophy – Lingjie is a page‑level micro‑frontend framework that emphasizes low integration cost, technology‑stack independence, and zero coupling. It uses a shell (the base app) that loads each sub‑application inside an iframe , managing routing via the History API (pushState/replaceState) to keep URLs in sync.

Why iframe? – Although iframes introduce challenges such as route desynchronization and performance overhead, Lingjie mitigates these by limiting the number of active iframes, storing navigation history in the browser, and providing fast back‑navigation without immediate memory release.

Key Features – No code refactoring required, near‑zero integration cost (just a script tag), no‑refresh page switches (SPA‑like experience), safe exit back to the original page, state synchronization on refresh, and complete CSS/JS isolation between sub‑apps.

Basic Usage – Create a Lingjie shell HTML that defines the matching paths for micro‑apps and includes the Lingjie script. Then, in each micro‑app’s HTML, add two snippets: one to enable/disable Lingjie and another to load the Lingjie page script. No npm/yarn installation is needed.

Advanced Usage – For scenarios with shared sidebars and distinct content, Lingjie can simulate native WebView transitions, display a progress bar during navigation, and optionally wait for a sidebar to render before switching content, improving perceived performance.

Performance Comparison – Demonstrations under high‑speed 3G show that Lingjie reduces white‑screen time and provides smoother, faster back‑navigation compared with traditional multi‑page applications.

Conclusion – Lingjie offers a low‑cost, page‑level micro‑frontend solution suitable for integrating large existing applications without refactoring, improving MPA experience to SPA‑like fluidity, and can be combined with section‑level approaches when needed.