Previously, the company developed a system that was composed of multiple small projects with different functions into a relatively large system. At that time, it was considered to develop one application directly, but it was found that the small projects could be used in other systems, so it was thought of using micro front-ends for project development. Develop small projects with different functions independently, and then merge the systems through the portal. In this way, when other projects need to use the systems of these small projects later, they can directly use them, so single-spa was used for development at that time. The previous article also talked about the use of single-spa , so now I will talk about the micro front end (refer to the summary of many big guys)
What is micro frontend
1. It first appeared in 2016, extending the concept of back-end microservices to the front-end world.
2. Microservices: Microservices are a variant of service-oriented architecture (SOA), which designs applications as a series of loosely coupled details. Granular services and organized specifically through lightweight communication protocols, building applications into a set of small services. These services can be deployed and expanded independently. Each service has a solid module boundary, which even allows different services to be written in different programming languages and managed by different teams.
3. An architectural style that consists of multiple front-end applications delivered geographically. Specifically, the front-end application is decomposed into smaller and simpler pieces that can be developed, tested, and deployed independently, while still appearing as a cohesive single product to users.
What can you expect from using micro frontends?
In the current front-end field, the single-page application (spa) development model based on vue, react, and angular has become the mainstream in the industry. With the passage of time and the rich functions of the application, the application began to become huge and bloated, and gradually became a monolithic application. Not only was it difficult to maintain, it also took a lot of time to build the project every time new requirements were developed and launched, and it was possible Changing one area affects the whole system, which has a negative impact on the development efficiency and experience of developers. Therefore, it is imperative to split a monolith application into multiple sub-applications.
1. Split and refine: Split applications based on business. Each application has its own warehouse, with independent development, independent deployment, independent access, and independent maintenance . You can also choose the technology stack that suits you according to the characteristics of the team, which greatly improves the efficiency and experience of developers, even next door It doesn’t matter that the team mistakenly released a half-finished or problematic feature. If a microfrontend is ready for release, it should be ready for release at any time and only determined by the team that develops and maintains it.
2. Integrate historical systems: In many businesses, there are more or less historical projects, which are involved in daily operations. These systems need to be integrated into the new framework for use and cannot be abandoned. There is no reason for us to waste time on this. and energy to rewrite old logic. The micro front-end can integrate these systems and be compatible with the new and old systems to run in parallel without basically modifying the logic.
3. Technology stack-independent: through the base application, you can integrate sub-projects developed by vue, react, angla, or js
What modules does the micro front end consist of?
At present, micro front-ends mainly adopt a combined application routing solution. The core of this solution is the "master-slave" idea, which includes a base (MainApp) application and several micro (MicroApp) applications. Most of the base applications are a front-end SPA projects are mainly responsible for application registration, routing mapping, message delivery, etc. Micro applications are independent front-end projects. These projects are not limited to development using React, Vue, Angular or JQuery. Each micro application is registered in the base application, and is The base is managed, but it can be accessed separately if it is separated from the base. The basic process is as shown in the figure below:
As a micro-front-end base application, it is the entrance to the entire application and is responsible for hosting the display of the current micro-application and other routing micro-applications. For forwarding, the display of current micro-applications generally consists of the following steps:
1. As a SPA base application, it is a pure front-end project. In order to display the micro-application page, in addition to using iframe, it is necessary to To be able to pull the page content of the micro application first, this requires a remote pull mechanism.
2. The remote pull mechanism usually uses the fetch API to first obtain the HTML content of the micro-application, then extract the JavaScript and CSS of the micro-application through parsing, use the eval method to run the JavaScript, and append the CSS and HTML content to The display area reserved for micro-applications in the base application is unloaded synchronously when the micro-application is switched, which constitutes the display process of the current application.
For route distribution, take the base SPA application developed with vue-router as an example. The main process is as follows: 1.
When the browser path changes, vue-router will listen to the hashchange or popstate event to obtain the route. Switching timing.
2. The router of the base is the first to receive this change. By querying the registration information, the micro-application can be forwarded to. After some logical processing, the route information is pushed to the micro-application by modifying the hash method or the pushState method. , the micro-application can manually monitor the hashchange or popstate event reception, or use React-router or vue-router to take over routing, and the subsequent logic is controlled by the micro-application itself.
Commonly used technical solutions for micro frontends
1. iframe
As a very old technology, iframe can also be used to implement micro front-ends. Through iframe, we can easily embed one application into another application, and the css and javascript between the two applications are isolated from each other and will not interfere with each other.
Advantages :
simple implementation;
css and js are naturally isolated and do not interfere with each other;
completely independent of the technology stack;
multiple sub-applications can coexist;
no need to modify existing applications;
disadvantages :
poor user experience, every time you switch applications, the browser The page needs to be reloaded;
the UI is not synchronized, the DOM structure is not shared;
the global context is completely isolated, memory variables are not shared, and the communication and data synchronization process between sub-applications is complicated;
not friendly to SEO;
you may need to log in again when switching sub-applications. Bad experience;
2. single-spa: The earliest micro front-end framework, compatible with multiple front-end technology stacks.
Although the iframe mode can implement micro front-end, the experience is not good. Every time we switch back to a sub-application we have visited, we need to reload the sub-application, which has a great impact on performance.
We know that the current mainstream model of front-end application development is the single-page application development model based on vue/react/angular. In this mode, we need to maintain a routing registry, each route corresponding to the respective page component URL. When switching routes, if it is a new page, you need to dynamically obtain the js script corresponding to the route, then execute the script and render the corresponding page; if it is a page that has already been visited, then directly obtain the cached page method from the cache , execute and render the corresponding page.
So, is there a similar implementation solution for micro frontends to obtain the same user experience as single-page applications?
The answer is yes. single-spa provides a new technical solution that can help us achieve an experience similar to a single-page application.
In the single-spa solution, applications are divided into two categories: base applications and sub-applications. Among them, the sub-application is the sub-application that needs to be aggregated as described in the article above; and the base application is another separate application used to aggregate sub-applications.
Similar to the implementation principle of single-page applications, single-spa will maintain a routing registry in the base application, and each route corresponds to a sub-application. After the base application is started, when we switch routes, if it is a new sub-application, the js script of the sub-application will be dynamically obtained, and then the script will be executed and the corresponding page will be rendered; if it is a sub-application that has already been visited, then The cached sub-application will be obtained from the cache, the sub-application will be activated and the corresponding page will be rendered.
Advantages :
When switching applications, the browser does not need to reload the page, providing the same user experience as a single-page application;
completely independent of the technology stack;
multiple sub-applications can coexist;
rich ecosystem;
Disadvantages :
The original application needs to be modified, and the application must be compatible with sing-spa and used independently;
there is additional learning cost;
it is complex to use, and issues such as sub-application loading, application isolation, and sub-application communication require framework users themselves Implementation;
the same resources are loaded repeatedly between sub-applications;
when starting the application, the base application must be started first;
3. qiankun: Based on Single-Spa, Alibaba’s open source micro front-end framework
. Like single-spa, qiankun can also provide us with a user experience similar to a single-page application. qiankun is a secondary development based on single-spa. At the framework level, it solves the problem that when using single-spa, developers need to write their own logic such as sub-application loading, communication, isolation, etc. It is a more powerful tool than single-spa. Excellent micro front-end solution.
Advantages :
When switching applications, the browser does not need to reload the page, providing the same user experience as a single-page application;
compared with single-spa, it solves the problems of sub-application loading, application isolation, sub-application communication, etc., and is relatively simple to use;
completely It has nothing to do with the technology stack;
multiple sub-applications can coexist;
Disadvantages :
the original application needs to be modified, and the application must be compatible with qiankun and used independently;
there is additional learning cost;
the same resources are loaded repeatedly;
when starting the application, the base must be started first seat application;
4. Webpack5: module federation
The newly released webpack5 provides a new feature - module federation. Based on this feature, we can dynamically load and run the code of another JavaScript application in one JavaScript application, and realize dependency sharing between applications.
Through module federation, we can dynamically render the page of another application in one application, thus realizing the aggregation of multiple sub-applications.
5. Web Component
Based on the Shadow Dom capability of Web Component, we can also implement micro front-ends to aggregate multiple sub-applications.
const shadow = document.querySelector('#hostElement').attachShadow({mode: 'open'}); // url is the address of the application. Based on fetch, we can get the html template of the application and add it to the specified node under fetch (url).then(res => { shadow.innerHTML = res });
Advantages :
simple implementation;
css and js are naturally isolated and do not interfere with each other;
completely independent of the technology stack;
multiple sub-applications can coexist;
no need to modify existing applications Transformation;
Disadvantages :
Mainly browser compatibility issues;
higher development costs;
Not all projects are suitable for using micro frontends, and developers need to make their own judgments. Generally, using micro frontends requires independent deployment capabilities for base applications and sub-applications. If it is found that using micro frontends actually reduces development efficiency, then it is not suitable. Use micro frontends
Use of single-spa: https://blog.csdn.net/qq_32881447/article/details/108978277?spm=1001.2014.3001.5501
Reference: https://juejin.cn/post/6955341801381167112#heading-3