# umijs/qiankun

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/umijs-qiankun).**

16,565 stars · 2,079 forks · TypeScript · mit

## Links

- GitHub: https://github.com/umijs/qiankun
- Homepage: https://qiankun.umijs.org
- awesome-repositories: https://awesome-repositories.com/repository/umijs-qiankun.md

## Topics

`framework` `javascript` `micro-frontend` `micro-frontends` `microfrontend` `microfrontends` `microservices`

## Description

Qiankun is a micro-frontend orchestration framework designed to compose multiple independent web applications into a single, unified interface. It functions as a JavaScript library that manages the lifecycle of autonomous applications, allowing them to coexist within a shared browser environment while maintaining their independence.

The framework enables cross-framework integration, allowing developers to combine applications built with different technologies into one cohesive system. It provides a runtime sandbox that isolates global variables and prevents style conflicts between applications, ensuring that individual modules do not interfere with the host environment or each other.

To support large-scale web systems, the framework utilizes HTML-based entry points and standardized lifecycle hooks to manage the mounting, unmounting, and updating of sub-applications. It also includes performance optimization features such as idle-time asset prefetching, which downloads resources for inactive applications to reduce latency during navigation.

## Tags

### Web Development

- [Micro-Frontend Frameworks](https://awesome-repositories.com/f/web-development/single-page-applications/micro-frontend-frameworks.md) — Provides a runtime environment that orchestrates multiple independent web applications into a single cohesive interface while isolating their styles and global states.
- [Frontend Frameworks](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks.md) — Composes multiple independent web applications into a single unified interface while isolating styles and global environments.
- [Micro-Frontend Libraries](https://awesome-repositories.com/f/web-development/micro-frontend-libraries.md) — Provides a solution for loading and managing the lifecycle of autonomous web applications.
- [Micro-Frontend Orchestrators](https://awesome-repositories.com/f/web-development/micro-frontend-orchestrators.md) — Combines multiple autonomous web applications into a single unified interface for seamless user navigation. ([source](https://qiankun.umijs.org/guide/getting-started))
- [Cross-Framework Integration Utilities](https://awesome-repositories.com/f/web-development/cross-framework-integration-utilities.md) — Connects autonomous web applications built with different technologies into one cohesive system.
- [Micro-Frontend Routers](https://awesome-repositories.com/f/web-development/micro-frontend-routers.md) — Maps browser URL changes to specific application entry points to manage navigation state across multiple modules.
- [Cross-Framework Integrators](https://awesome-repositories.com/f/web-development/single-page-applications/cross-framework-integrators.md) — Connects multiple autonomous web applications into a single unified system regardless of the underlying technology. ([source](https://qiankun.umijs.org/guide))
- [Application Lifecycle Hooks](https://awesome-repositories.com/f/web-development/application-lifecycle-hooks.md) — Establishes standard entry points for mounting, unmounting, and updating sub-applications. ([source](https://qiankun.umijs.org/guide/tutorial))
- [Lifecycle Hooks](https://awesome-repositories.com/f/web-development/application-lifecycle-hooks/lifecycle-hooks.md) — Coordinates the mounting and unmounting of independent applications through a standardized set of lifecycle events.
- [Application Lifecycle Managers](https://awesome-repositories.com/f/web-development/application-lifecycle-managers.md) — Executes standardized initialization, mounting, and unmounting routines to control sub-application rendering. ([source](https://qiankun.umijs.org/guide/getting-started))
- [Frontend Environments](https://awesome-repositories.com/f/web-development/frontend-environments.md) — Protects the global browser environment and prevents style conflicts when running multiple independent applications.
- [HTML Entry Loaders](https://awesome-repositories.com/f/web-development/html-entry-loaders.md) — Provides a mechanism to load and execute independent sub-applications via their entry HTML files.
- [Performance Optimization Tools](https://awesome-repositories.com/f/web-development/performance-optimizations/performance-optimization-tools.md) — Improves user experience by prefetching assets for inactive sub-applications to ensure fast transitions.
- [Idle Asset Prefetchers](https://awesome-repositories.com/f/web-development/idle-asset-prefetchers.md) — Downloads resources for inactive applications during browser downtime to accelerate subsequent navigation.

### Software Engineering & Architecture

- [Frontend Architecture Patterns](https://awesome-repositories.com/f/software-engineering-architecture/frontend-architecture-patterns.md) — Builds large-scale web systems by composing multiple independent applications into a single unified interface.
- [Application Entry Point Registrars](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/application-architecture-patterns/single-page-applications/application-entry-point-registrars.md) — Simplifies integration by loading sub-applications directly through standard HTML entry points. ([source](https://qiankun.umijs.org/guide))

### Security & Cryptography

- [Global Environment Sandboxes](https://awesome-repositories.com/f/security-cryptography/global-environment-sandboxes.md) — Uses JavaScript proxies to intercept and isolate global object modifications, preventing state leakage.

### Development Tools & Productivity

- [Global Application Contexts](https://awesome-repositories.com/f/development-tools-productivity/global-application-contexts.md) — Protects the global scope by preventing sub-applications from interfering with each other through shared variables. ([source](https://qiankun.umijs.org/guide))

### User Interface & Experience

- [Style Isolation Mechanisms](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms.md) — Prevents visual conflicts by ensuring styles defined in one sub-application do not leak into others. ([source](https://qiankun.umijs.org/guide))
- [Shadow DOM Utilities](https://awesome-repositories.com/f/user-interface-experience/shadow-dom-utilities.md) — Wraps sub-application content in isolated DOM trees to prevent CSS rules from bleeding across the interface.

### System Administration & Monitoring

- [Application Performance Profiling](https://awesome-repositories.com/f/system-administration-monitoring/performance-monitoring-tools/application-performance-profiling.md) — Downloads resources for inactive sub-applications during browser idle time to reduce latency. ([source](https://qiankun.umijs.org/guide))