docs/guide/index.md
qiankun is a micro-frontend implementation library based on single-spa, designed to help you build a production-ready micro-frontend architecture system more simply and painlessly.
qiankun hatched from Ant Financial's unified front-end platform for cloud products based on micro-frontends architecture. After full testing and polishing of a number of online applications, we extracted its micro-frontends kernel and open sourced it. We hope to help the systems who has the same requirement more convenient to build its own micro-frontends application in the community. At the same time, with the help of community, qiankun will be polished and improved.
At present qiankun has served more than 2000 online applications inside Ant, and it is definitely trustworthy in terms of ease of use and completeness.
Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends
Micro Frontends architecture has the following core values:
The micro-frontends architecture is designed to solve the application of a single application in a relatively long time span. As a result of the increase in the number of people and teams involved, it has evolved from a common application to a Frontend Monolith then becomes unmaintainable. Such a problem is especially common in enterprise web applications.
┌─────────────────────────────────────┐
│ Monolithic Frontend │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Mod A│ │Mod B│ │Mod C│ │Mod D│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ Tightly coupled, hard to │
│ maintain │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ Main Application │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │App A│ │App B│ │App C│ │App D│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ Independent development, deploy, │
│ technology agnostic │
└─────────────────────────────────────┘
The core design philosophy of qiankun is decentralized runtime, which means:
🥄 Simple - Since the main application sub-applications can be independent of the technology stack, qiankun is just a jQuery-like library for users. You need to call several qiankun APIs to complete the micro frontends transformation of your application. At the same time, due to the design of qiankun's HTML entry and sandbox, accessing sub-applications is as simple as using an iframe.
🍡 Decoupling/Technology Agnostic - As the core goal of the micro frontends is to disassemble the monolithic application into a number of loosely coupled micro applications that can be autonomous, all the designs of qiankun are follow this principle, such as HTML Entry, sandbox, and communicating mechanism between applications. Only in this way can we ensure that sub-applications truly have the ability to develop and run independently.
graph TD
A[Main App] --> B[qiankun]
B --> C[Micro App A]
B --> D[Micro App B]
B --> E[Micro App C]
F[Routing] --> A
G[Resource Loading] --> B
H[Lifecycle] --> B
I[Sandbox Isolation] --> B
qiankun is based on the following core capabilities:
Each micro application has a complete lifecycle:
While iframe is the most natural solution for implementing micro frontends, it has some serious limitations:
qiankun solves these problems by providing a complete micro-frontend solution that maintains the isolation benefits of iframe while avoiding its limitations.
qiankun provides the following key features:
qiankun is particularly suitable for the following scenarios:
Ready to start using qiankun? Check out our Quick Start guide to build your first micro-frontend application in minutes!