Micro front-end: Qiankun, Wujie, single-spa, iframe comparison

2024-07-12

1. Overview of Micro Frontend Framework

The micro front-end framework is a technical solution that aims to split large front-end applications into multiple small, independent, and maintainable micro front-end applications. Each micro front-end application can be independently developed, tested, deployed, and run while maintaining overall collaboration and user experience. This architecture is similar to the microservice architecture, but focuses on the front-end field.

2. Common Micro-frontend Frameworks

Qiankun (Qiankun): Developed and maintained by Ant Financial, based on Single-SPA, it provides features that are independent of technology stack and easy to access. It supports multiple front-end frameworks such as Vue and React, and has low transformation costs and friendly development experience.
single-spa: is a lightweight JavaScript front-end routing framework that focuses on routing management for single-page applications (SPA). Although it is not a complete micro-frontend framework itself, it is the basis for many micro-frontend implementations.
iframe：Although iframe itself is not a micro frontend framework, it is often used as a simple implementation of micro frontends
Unbounded：The Unbounded Micro Frontend Framework is a micro frontend solution based on Web Components + iframe. It has a series of advantages such as low cost, fast speed, native isolation, and powerful functions. The following is a detailed introduction to the Unbounded Micro Frontend Framework

Common points:When the route is switched, you can load the code of the corresponding application and let it run in the container.

haveAbility to load and unload sub-applications, when the page switches from one sub-application to another, it can be loaded and rendered normally;
haveRouting state retention capabilityAfter activating the sub-application, the browser refresh, forward, and backward sub-application routes can all work normally;
Between main application and sub-application, and between sub-applicationsCan communicate with each other；
Each micro-applicationIndependent warehouse management, independent technology stack development, independent deployment, and independent operation are possible；

3. Comparison of Micro Front-end Frameworks

characteristic	qiankun	Unbounded	single-spa	iframe
Technology stack support	Technology stack independent, supports React, Vue, Angular, etc.	Based on WebComponent, supports multiple technology stacks	Technology stack independent, supports multiple front-end frameworks	The technology stack is irrelevant, but integration needs to consider compatibility
Access method	Simple, access through JS API	Relatively simple, encapsulated through WebComponent	Complex, need to configure single-spa life cycle	Simple, embed via HTML tags
Sandbox Isolation	Provide JS sandbox and style isolation	Use WebComponent for natural isolation	Developers need to implement sandbox isolation by themselves	iframe natural isolation
Route Management	Supports routing status retention and configurable routing mapping	Support virtual routing and maintain routing status	As a top-level router, you need to manage sub-application routes yourself	Routing is managed by the application in the iframe
Application Communication	Provides communication mechanism between parent-child applications and child-child applications	Provide component-based API to support communication	Developers need to implement the communication mechanism themselves	Communication can be done through postMessage or URL parameters
Resource preloading	Support static resource preloading	Support static resource preloading	Support lazy loading of applications	Does not support preloading, load on demand
Performance impact	Lower, optimized through sandboxing and lazy loading	Lower, but WebComponent may have performance overhead	Low, but depends on application optimization	Higher, iframe loading and rendering overhead is high
Development Experience	Better, provides rich API and documentation	Better, component-based API is more intuitive	Generally, you need to handle many details yourself	Better, easy to integrate with existing applications
Production availability	Proven and suitable for production environments	Suitable for production environments, but may have less community support	Applicable to production environment, developers need to improve it themselves	Suitable for production environments, but security and performance issues need to be handled with caution
Adaptation cost	Higher, need to adapt routing, life cycle, etc.	Moderate, mainly adapted to WebComponent	Higher, requires in-depth understanding of single-spa architecture	Low, but pay attention to compatibility and performance issues

The micro-frontend framework brings many advantages to the development of front-end applications, such as technology stack independence, independent development and deployment, incremental upgrades, etc. However, it also has certain disadvantages, such as high access difficulty and poor resource sharing capabilities. Therefore, when choosing whether to use a micro-frontend framework, it is necessary to make a comprehensive consideration based on the specific needs of the project and the technical capabilities of the team. At the same time, in actual applications, it is also necessary to pay attention to the selection, architecture design, code management and other aspects of the micro-frontend framework to ensure the smooth progress of the project and the stable operation of the system.

Technology Sharing