Technology Sharing

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

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

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

  1. 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.
  2. 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.
  3. iframe:Although iframe itself is not a micro frontend framework, it is often used as a simple implementation of micro frontends
  4. 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

characteristicqiankunUnboundedsingle-spaiframe
Technology stack supportTechnology stack independent, supports React, Vue, Angular, etc.Based on WebComponent, supports multiple technology stacksTechnology stack independent, supports multiple front-end frameworksThe technology stack is irrelevant, but integration needs to consider compatibility
Access methodSimple, access through JS APIRelatively simple, encapsulated through WebComponentComplex, need to configure single-spa life cycleSimple, embed via HTML tags
Sandbox IsolationProvide JS sandbox and style isolationUse WebComponent for natural isolationDevelopers need to implement sandbox isolation by themselvesiframe natural isolation
Route ManagementSupports routing status retention and configurable routing mappingSupport virtual routing and maintain routing statusAs a top-level router, you need to manage sub-application routes yourselfRouting is managed by the application in the iframe
Application CommunicationProvides communication mechanism between parent-child applications and child-child applicationsProvide component-based API to support communicationDevelopers need to implement the communication mechanism themselvesCommunication can be done through postMessage or URL parameters
Resource preloadingSupport static resource preloadingSupport static resource preloadingSupport lazy loading of applicationsDoes not support preloading, load on demand
Performance impactLower, optimized through sandboxing and lazy loadingLower, but WebComponent may have performance overheadLow, but depends on application optimizationHigher, iframe loading and rendering overhead is high
Development ExperienceBetter, provides rich API and documentationBetter, component-based API is more intuitiveGenerally, you need to handle many details yourselfBetter, easy to integrate with existing applications
Production availabilityProven and suitable for production environmentsSuitable for production environments, but may have less community supportApplicable to production environment, developers need to improve it themselvesSuitable for production environments, but security and performance issues need to be handled with caution
Adaptation costHigher, need to adapt routing, life cycle, etc.Moderate, mainly adapted to WebComponentHigher, requires in-depth understanding of single-spa architectureLow, 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.