Micro Frontend: Research, Introduction, Capabilities, Core Concepts, Platform Selection, Implementation, and Summary

Guide: If you don't know what micro frontends are or what problems they solve, you may not need them. For any new technology, the author suggests a four‑step process: research and document, produce a demo, try it in a project (expect many pitfalls), and finally promote it to production.

1.1 Business background : A large project from 0 to 1 with two ends, where UI and most logic are identical except for authentication and some business differences. The architecture must ensure smooth development, future iteration, maintenance, and scalability.

1.2 Initial solutions : (1) Reuse a single codebase with permission checks and server‑side flags to handle differences; (2) Develop two separate codebases, copying shared UI from one to the other. Both have drawbacks: the first can become a “big mess” as differences grow, while the second incurs duplication but may be better if business diverges.

1.3 What is micro frontend? The concept, introduced by ThoughtWorks in 2016, splits a large front‑end application into multiple independent small applications that can be developed, deployed, and run separately, then integrated into a complete app, reducing coupling and improving maintainability.

2.1 Micro frontend capabilities : independent development, independent deployment, independent runtime, flexible integration, decoupling, incremental upgrade.

2.2 Core principles : splitting, integration, communication, style isolation.

2.3 Platforms : - single‑spa : a JavaScript framework that aggregates multiple single‑page applications. - qiankun : Ant Financial’s wrapper around single‑spa, requiring additional webpack configuration. - micro‑app : JD’s WebComponent‑based lightweight framework with low learning cost, small size, and better extensibility. The author chose micro‑app because it avoids the extra configuration overhead of qiankun.

3.1 Choosing micro‑app : Based on the research, micro‑app is selected for the large project.

3.2 Starting micro‑app : Four steps are needed to install and start the framework. Example code:

// Project entry import
import microApp from '@micro-zoe/micro-app'

microApp.start()

3.3 Pitfalls :

3.3.1 Routing issues – handling multi‑level menus by pushing routes via microApp.router.push({ name: 'pop', path: `${config.pop}${item.url}` }) .

3.3.2 Breadcrumb issues – recommend placing breadcrumbs in child apps; the parent listens for a back‑home event using window.microApp?.dispatch({ isBackHome: true }) .

3.3.3 Packaging issues – avoid component splitting that can cause sandbox conflicts between host and child UMI apps by setting dynamicImport: false .

4. Summary : Micro frontends enable business decoupling, high maintainability, and easy iteration for large projects. Key considerations include splitting granularity, boundaries, communication methods, data management, style isolation, and integration approach.