qiankun(乾坤)

为微型前端提供快速、简单和完整的解决方案。「??Blazing fast, simple and completed solution for micro frontends.」

Github stars Tracking Chart

qiankun(乾坤)

qiankun 是一个基于 single-spa微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台,在经过一批线上应用的充分检验及打磨后,我们将其微前端内核抽取出来并开源,希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统,同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。

目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用,在易用性及完备性上,绝对是值得信赖的。

什么是微前端

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

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端架构具备以下几个核心价值:

  • 技术栈无关
    主框架不限制接入应用的技术栈,微应用具备完全自主权
  • 独立开发、独立部署
    微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
  • 增量升级在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
  • 独立运行时
    每个微应用之间状态隔离,运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

安装

$ yarn add qiankun  # or npm i qiankun -S

文档

https://qiankun.umijs.org/

入门

此存储库包含一个示例文件夹,其中包含示例 Shell 应用程序和多个已安装的 Micro FE 应用程序。要运行此应用程序,请先克隆 qiankun:

$ git clone https://github.com/umijs/qiankun.git
$ cd qiankun

现在运行yarn脚本来安装和运行示例项目:

$ yarn install
$ yarn examples:install
$ yarn examples:start

访问 http://localhost:7099

特性

  • ? 基于 single-spa 封装,提供了更加开箱即用的 API。
  • ? 技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。
  • ? HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单。
  • ? 样式隔离,确保微应用之间样式互相不干扰。
  • ? JS 沙箱,确保微应用之间 全局变量/事件 不冲突。
  • ⚡️ 资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度。
  • ? umi 插件,提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

路线图

  • Parcel apps integration (multiple sub apps displayed at the same time, but only one uses router at most)
  • Communication development kits between master and sub apps
  • Custom side effects hijacker
  • Nested Microfrontends

FAQ

https://qiankun.umijs.org/faq/

社区

https://qiankun.umijs.org/#community

致谢

Overview

Name With Ownerumijs/qiankun
Primary LanguageTypeScript
Program languageTypeScript (Language Count: 2)
PlatformLinux, Mac, Web browsers, Windows
License:MIT License
Release Count262
Last Release Name@qiankunjs/vue@0.0.1-rc.1 (Posted on 2024-01-08 13:38:55)
First Release Namev0.0.2 (Posted on 2019-05-23 18:35:33)
Created At2019-05-15 05:27:23
Pushed At2024-03-11 13:28:02
Last Commit At2024-03-11 21:11:43
Stargazers Count15.4k
Watchers Count231
Fork Count2k
Commits Count349
Has Issues Enabled
Issues Count1984
Issue Open Count371
Pull Requests Count686
Pull Requests Open Count9
Pull Requests Close Count116
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

qiankun(乾坤)

npm version coverage npm downloads Build Status

In Chinese traditional culture qian means heaven and kun stands for earth, so qiankun is the universe.

An implementation of Micro Frontends, based on single-spa, but made it production-ready.

? Motivation

As we know what micro-frontends aims for:

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends

Modularity is very important for large application. By breaking down a large system into individual sub-applications, we can achieve good divide-and-conquer between products and when necessary combination, especially for enterprise applications that usually involve multi-team collaboration. But if you're trying to implement such a micro frontends architecture system by yourself, you're likely to run into some tricky problems:

  • In what form do subapplications publish static resources?
  • How does the main application integrate individual sub-applications?
  • How do you ensure that sub-applications are independent of each other (development independent, deployment independent) and runtime isolated?
  • Performance issues? What about public dependencies?
  • And so on...

After solving these common problems of micro frontends, we extracted the kernel of our solution after a lot of internal online application testing and polishing, and then named it qiankun.

Probably the most complete micro-frontends solution you ever met?.

? Installation

$ yarn add qiankun  # or npm i qiankun -S

? Documentation

https://qiankun.umijs.org/

? Examples

$yarn
$yarn install:examples
$yarn start

Visit http://localhost:7099

:sparkles: Features

  • ? Based On single-spa
  • ? Technology Agnostic
  • ? HTML Entry Access Mode
  • ? Style Isolation
  • ? JS Sandbox
  • Prefetch Assets
  • ? Umi Plugin Integration

? Roadmap

  • Parcel apps integration (multiple sub apps displayed at the same time, but only one uses router at most)
  • Communication development kits between master and sub apps
  • Custom side effects hijacker
  • Nested Microfrontends

❓ FAQ

https://qiankun.umijs.org/faq/

? Community

https://qiankun.umijs.org/#community

? Acknowledgements

To the top