1. Project Overview

qiankun

Possibly the Most Comprehensive Micro-Frontend Solution You Have Ever Seen

qiankun is a micro-frontend implementation library based on single-spa, designed to help developers build production-ready micro-frontend architecture systems more easily and with minimal effort.

qiankun originated from Ant Financial Technology's unified cloud product access platform based on micro-frontend architecture. After extensive testing and refinement across numerous production applications, we extracted its micro-frontend core and open-sourced it. Our goal is to help systems in the community with similar requirements build their own micro-frontend systems more easily, while also leveraging community contributions to make qiankun more mature and comprehensive.

qiankun currently serves more than 2,000 production applications within Ant Group. Its usability and comprehensive feature set make it a highly reliable solution.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Core Design Principles of qiankun

• Simplicity

• Since both the main application and micro-applications are technology-stack agnostic, qiankun is essentially a library similar to jQuery from the user's perspective. You only need to call a few qiankun APIs to transform your application into a micro-frontend architecture. In addition, its HTML entry and sandbox designs make integrating micro-applications as simple as using an iframe.

• Decoupling / Technology-Stack Agnostic

• The core goal of micro-frontends is to break down monolithic applications into multiple loosely coupled micro-applications that can operate autonomously. Many of qiankun's design features follow this principle, including HTML entry, sandboxing, and inter-application communication. This ensures that micro-applications truly support independent development and independent operation.

Features

• Built on single-spa with additional APIs that provide a more out-of-the-box experience.

• Technology-stack agnostic: Applications built with any technology stack can be used or integrated, including React/Vue/Angular/jQuery and other frameworks.

• HTML Entry integration makes connecting micro-applications as simple as using an iframe.

• Style isolation ensures that styles between micro-applications do not interfere with each other.

• JS sandboxing ensures that global variables and events do not conflict between micro-applications.

• ⚡️ Resource preloading: Preloads resources of unopened micro-applications during browser idle time to accelerate micro-application loading.

• umi Plugin: Provides @umijs/plugin-qiankun, allowing umi applications to switch to a micro-frontend architecture with a single command.

5. Tech Stack

Quick start

Main Application

1. Install qiankun

$ yarn add qiankun # Or run npm i qiankun -S

2. Register Micro-Applications in the Main Application

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);

start();

After the micro-application information has been registered, whenever the browser URL changes, qiankun automatically triggers its matching logic. All micro-applications whose activeRule conditions are matched will be inserted into the specified container, and their exposed lifecycle hooks will be called sequentially.

If a micro-application is not directly associated with a route, you can also choose to load it manually:

import { loadMicroApp } from 'qiankun';

loadMicroApp({
  name: 'app',
  entry: '//localhost:7100',
  container: '#yourContainer',
});

Micro-Application

Micro-applications can be integrated into the qiankun main application without installing any additional dependencies.

For more information, please refer to the official qiankun documentation.

What Is Micro-Frontend?

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

Micro-frontend is a technical approach and methodology that allows multiple teams to jointly build modern web applications by independently developing and releasing features.

The micro-frontend architecture offers the following core benefits:

• Technology-Stack Agnostic
  The main framework does not restrict the technology stack used by integrated applications. Micro-applications have complete autonomy.

• Independent Development and Deployment
  Each micro-application has its own independent repository. Frontend and backend development can proceed independently. Once deployment is complete, the main framework automatically synchronizes the updates.

• Incremental Upgrades

• When dealing with various complex scenarios, it is often difficult to perform a full technology-stack upgrade or refactoring of an existing system. Micro-frontend is an excellent approach and strategy for implementing gradual refactoring.

• Independent Runtime
  Each micro-application maintains isolated state, and runtime states are not shared.

The micro-frontend architecture aims to solve the maintainability problems that arise when monolithic applications evolve over a relatively long period of time. As the number of contributors and teams increases and changes, an ordinary application can gradually evolve into a frontend monolith (Frontend Monolith), making it increasingly difficult to maintain. Such problems are particularly common in enterprise-level web applications.

For more information about micro-frontends, we recommend reading the following articles:

• Micro Frontends

• Micro Frontends from martinfowler.com

• Possibly the Most Comprehensive Micro-Frontend Solution You Have Ever Seen

• The Core Value of Micro-Frontends