First things first: since the start of the microfrontends, the page micro-frontends.org from Michael Geers a must readwhen it comes to gaining a basic understanding of the microfrontend topic.
Geers is also the author of the well-known book "Microfrontends in Action", which I can also highly recommend.
However, before considering which microfrontend framework is suitable for a project, it is essential to ask yourself the following question:
Is a microfrontend really needed?
("we want" !== "we need")
This is only the case if all four questions are answered with "yes.
- In general: Is the benefit of independently deployable units in the project in a healthy relationship to the integration effort?
- Is it foreseeable that the project will be implemented in several teams (at least 3 teams with at least 2 developers each) in the frontend in the future?
- Is it necessary to use different technologies (frameworks/libraries) in the frontend - if so, why?
- Is a vertical architecture (microservices) also used in the backend?
If the answer to one of the questions is "no", you inevitably have to critically question whether a microfrontend architecture makes sense, i.e. whether it is economical and sustainable.
Distribution of microfrontend frameworks
Source:https://www.npmtrends.com/qiankun-vs-@teambit/bit-vs-single-spa-vs-piral-vs-oc-vs-@luigi-project/client-vs-frint-vs-node-tailor-vs-puzzle.js
Means npm-trends.com shows very clearly that the single-spa framework is by far the most frequently downloaded and therefore the most widespread. In second place is qiankun, which is based on single-spa and is still considered a "newcomer".
What is the difference between the two frameworks?
qiankun is based on single-spa - but the basic microfrontend setup is different. Therefore, single-spa or qiankun should be selected depending on the requirements.
Both frameworks solve the problem of microfrontends very well - but in different ways. The exact differences are explained in the following table and should help with the selection of the use case.
| single-spa | qiankun | |
|---|---|---|
| Motto | "javascript router for front-end microservices" | "Probably the most complete micro-frontends solution you ever met" |
| "Micro-granularity" | Fine: Module loader (microservice approach from the backend to the frontend). → Sharing common libs, functions and variables is easy(er). No strict decoupling. | Roughly: App loader (the "generally known" microfrontend approach). → The micro apps are to be understood as separate, decoupled applications. |
| Entry mode | JS Entry (via JS imports) SystemJS | HTML Entry (via HTML tags) |
| JavaScript Sandbox | No | Yes |
| Style Isolation | No | Yes |
| Global State available | No | Yes |
| Module Federation | Yes (Webpack 4 and 5) | Only under Webpack 5 Apps |
| Visualization | ||
In summary, it can be said that single-spa is the right framework for a "fine" microfrontend architecture on a module basis, and qiankun is the method of choice for a "coarse" microfrontend architecture with separate, separate apps.
