The main framework does not restrict access to the technology stack of the application, and the micro-application has complete autonomy.
Micro-application warehouse is independent, and the front and back ends can be developed independently. After deployment, the main frame will automatically update synchronously.
Facing all kinds of complicated scenes, it is usually difficult for us to upgrade or reconstruct an existing system in technology stack, and micro-front-end is a very good means and strategy to realize gradual reconstruction.
The state of each micro-application is isolated and the runtime state is not shared.
Micro-front-end architecture aims to solve the problem that a single application cannot be maintained because of the increase and change of the number of people and teams involved in a relatively long time span after it has evolved from a common application to a boulder application. This problem is particularly common in enterprise Web applications.
1.url is out of sync. Browser refresh iframe url status is lost, and the back and forward buttons cannot be used.
Number 2.2. UI is out of sync and does not enjoy DOM structure. Imagine that there is a bullet box with a mask layer of 1/4 in the iframe in the lower right corner of the screen. At the same time, we require the bullet box to be displayed in the center of the browser, and it will be automatically centered when the browser is resized.
3. The global context is completely isolated, and the memory variables are not shared. In order to meet the requirements of communication and data synchronization between internal and external systems of iframe, it is necessary to transfer the cookie of the main application to the sub-applications with different root domain names to achieve the effect of login-free.
4. Slow down. Every time a sub-application enters, it is a process of browser context reconstruction and resource overloading.
By listening to url change events, matching rendering sub-applications and rendering when routing changes, this idea is also the mainstream implementation of micro-front-end. At the same time, single-spa requires the sub-application to modify the rendering logic, and exposes three methods: bootstrap, mount and unmount, which correspond to initialization, rendering and uninstallation respectively, which also causes the sub-application to modify the entry file. Too basic, too expensive, not recommended.
Qian Kun is a micro-front-end implementation library based on single spa launched by Ali, which aims to help you build a mass-produced micro-front-end architecture system more simply and painlessly. Because it is based on single-spa package, the characteristics of single-spa have also been inherited by Qian Kun. The cost is lower than single-spa and higher than MicroApp.
MicroApp is a micro front-end framework based on WebComponent launched by JD.COM. It is different from the current popular open source framework. It realizes micro-front end from component thinking, aiming at reducing the difficulty of entry and improving work efficiency. It is the lowest cost framework for accessing micro-frontend in the market at present, and provides a series of perfect functions such as JS sandbox, style isolation, element isolation, preloading, resource address completion, plug-in system, data communication and so on. It is the lowest cost scheme to access micro-front-end in the market at present.
Single spa github address:/single spa/ single spa
Https://qiankun.umijs.org/zh Qian Kun official website
MicroApp official website: https://cangdu.org/micro-app/