Giter VIP home page Giter VIP logo

qiankun's Introduction

qiankun

npm version coverage npm downloads build status

qiankun(乾坤)

In Chinese, qian(乾) means heaven and kun(坤) earth. qiankun is the universe.

Qiankun enables you and your teams to build next-generation and enterprise-ready web applications leveraging Micro Frontends. It is inspired by and based on single-spa.

🤔 Motivation

A quick recap about the concept of Micro Frontends:

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

Qiankun was birthed internally in our group during the time web app development by distributed teams had turned to complete chaos. We faced every problem micro frontend was conceived to solve, so naturally, it became part of our solution.

The path was never easy, we stepped on every challenge there could possibly be. Just to name a few:

  • In what form do micro-apps publish static resources?
  • How does the framework integrate individual micro-apps?
  • How to ensure that sub-applications are isolated from one another (development independence and deployment independence) and runtime sandboxed?
  • Performance issues? What about public dependencies?
  • The list goes on long ...

After solving these common problems of micro frontends and lots of polishing and testing, we extracted the minimal viable framework of our solution, and named it qiankun, as it can contain and serve anything. Not long after, it became the cornerstone of hundreds of our web applications in production, and we decided to open-source it to save you the suffering.

TLDR: Qiankun is probably the most complete micro-frontend solution you ever met🧐.

✨ Features

Qiankun inherits many benefits from single-spa:

  • 📦 Micro-apps Independent Deployment
  • 🛴 Lazy Load
  • 📱 Technology Agnostic

And on top of these, it offers:

  • 💃 Elegant API
  • 💪 HTML Entry Access Mode
  • 🛡 Style Isolation
  • 🧳 JS Sandbox
  • Prefetch Assets
  • 🔌 Umi Plugin Integration

📦 Installation

$ yarn add qiankun  # or npm i qiankun -S

📖 Documentation

You can find the Qiankun documentation on the website

Check out the Getting Started page for a quick overview.

The documentation is divided into several sections:

💿 Examples

Inside the examples folder, there is a sample Shell app and multiple mounted Micro FE apps. To get it running, first clone qiankun:

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

Now install and run the example:

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

Visit http://localhost:7099.

🎯 Roadmap

See Qiankun 3.0 Roadmap

👥 Contributors

Thanks to all the contributors!

contributors

🎁 Acknowledgements

📄 License

Qiankun is MIT licensed.

qiankun's People

Contributors

kuitos avatar gongshun avatar howel52 avatar deturium avatar peachscript avatar ice-zjchen avatar saviio avatar humorhan avatar xrkffgg avatar dbkillerf6 avatar eynol avatar ycjcl868 avatar xinhailishi avatar ohiamfine avatar skyline-123 avatar veath avatar ttys026 avatar h-a-n-a avatar wukang0718 avatar wubaiqing avatar wusp1994 avatar npm-ued avatar kaifuny avatar dannysu09 avatar a1029563229 avatar ruralist-siyi avatar qtpalmtop avatar wanghao1221 avatar nupthale avatar mango-lzp avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.