Micro-Frontend Architecture: Theory, Implementation, and Practice

Introduction

Micro-frontend is a technique that transforms a single web application into a combination of multiple small frontend applications. This article starts from the basic theory of micro-frontends, explains the core technologies, and concludes with practical application examples.

1. Micro-Frontend Background

Micro-frontend provides a technology that combines multiple independent web applications into a unified entry point. From a user's perspective, a micro-frontend application appears as a complete application, but technically it is composed of independent applications combined through certain methods.

The three main characteristics of micro-frontend frameworks are: technology stack independence (the main framework does not restrict the technology stack of sub-applications), strong independence (independent development, deployment, and repository), and state isolation (runtime isolation between sub-applications).

Micro-frontends evolved from the microservices concept proposed by Martin Fowler and James Lewis in 2014. The main idea is to decompose applications into small, interconnected microservices, where each microservice completes a specific function. Applying this concept to frontend development gave birth to micro-frontends.

2. Implementation Methods

Server-side Integration: Implemented through Nginx reverse proxy to map different paths to different applications. However, this approach loses the SPA experience as every route hit requires re-requesting resources.

Runtime Integration: One implementation uses iframe to load different sub-application pages via src configuration. Iframe provides natural sandboxing with style and environment isolation, but has drawbacks including inability to preserve state on navigation, invalid URL records, hijacked keyboard shortcuts, and complex communication.

3. Open Source Solutions

single-spa: The first micro-frontend framework, defining a protocol including configuration information and lifecycle for sub-applications. It requires sub-applications to implement bootstrap, mount, and unmount lifecycle functions. However, it lacks JS and CSS isolation out of the box.

qiankun: Based on single-spa, providing more out-of-the-box APIs. Key features include HTML Entry loading (parsing HTML to extract HTML, JS, and CSS), CSS isolation (via Shadow DOM or experimental style isolation), JS isolation (SnapshotSandbox, legacySandBox, ProxySandbox), lifecycle extensions, sub-app preloading, global state management, and global error handling.

Module Federation (Webpack 5): Enables code sharing between applications with Remote and Host concepts. EMP is built on this foundation for cross-application resource sharing.

4. Technical Selection Recommendations

For production environments, qiankun is recommended due to its active community, comprehensive Chinese documentation, and mature ecosystem. single-spa is suitable for learning purposes or building custom solutions. EMP, while promising, is not yet mature for production use.

5. Significance of Micro-Frontends

Micro-frontends achieve "breaking whole into parts" by decomposing monolithic applications into independently maintainable and deployable units, improving team development and maintenance efficiency. They also enable "combining parts into whole" by integrating legacy systems built with different frameworks, giving old projects new life while preserving existing user bases.