micro frontend concept and scheme comparison
I have been working on the front end for more than a year. Today, I suddenly heard a term called micro frontend. I was very curious, so I went to inquire about some information and summarized it here.
What is Micro Frontend?
Micro frontend (Micro-Frontends) is an architecture similar to microservices. It applies the concept of microservices to the browser side, that is, web applications are transformed from a single single monolithic application to an application that aggregates multiple small front-end applications into one. Each front-end application can also run independently, develop independently, and deploy independently. ** Micro frontend is not a simple front-end framework or tool, but an architectural system **. This concept was first proposed at the end of 2016. You can refer to searching Micro-Frontends on Google.
That is to say, micro frontend is more like a concept, just like microservices split a large system into multiple systems, micro frontend also splits a large front-end project into multiple systems.
From this point of view, micro frontend is not necessarily implemented with front-end technology, and the fact is that there are many solutions for micro frontend, which we will introduce and compare one by one below.
What problem is the micro frontend designed to solve?
The emergence of any new technology is to solve the technical pain points under existing scenarios and needs, and micro frontend is no exception:
- ** Splitting and refinement **: In the current front-end field, Single Page Application (SPA) is one of the most popular project forms. With the passage of time and the enrichment of application functions, Single Page Application has become no longer single. Instead, it is getting bigger and harder to maintain. It is often changed in one place, and the cost of publishing is getting higher and higher. The meaning of micro frontend is to split these huge applications and decouple them. Each part can be maintained and deployed separately to improve efficiency.
- ** Integration of historical systems **: In many businesses, there will be more or less some historical projects, most of which are based on B-side management systems similar to the old framework (Backbone.js, Angular.js 1) Mainly, between daily operations, these systems need to be combined with the new framework to use and cannot be abandoned. There is no reason for us to waste time and energy rewriting the old logic. The micro front-end can integrate these systems and run in parallel with the old and new systems while basically not modifying the logic.
That is to say, on the one hand, micro frontend can split existing large-scale projects for future project maintenance, and on the other hand, it can also integrate new projects and old historical projects together, even if their languages and frameworks are completely different.
In order to solve the above problems, what does micro frontend have to do?
To put it bluntly, micro frontend is to split a large front-end project into multiple small front-end projects. And these front-end projects can use completely different frameworks, but at the same time they can communicate with each other.
To achieve this goal, we need to design several things.
To be honest, as soon as this picture was drawn, I thought of electron. The main process of electron is like the main project here, and each rendering process of electron is like the microapplication here.
The difference is that electron can only communicate between the main process and the rendering process, not between the rendering process.
A brief description is that there are some menu items in the base application. Click on each menu item to display the corresponding micro-application. The switching of these applications is purely front-end agnostic. Therefore, based on the current solution, a micro frontend The base frame needs to solve the following problems:
- Distribution problem of route switching.
- Isolation problem of main micro-application.
- Communication issues.
The following is to explain these issues one by one.
Comparison of several programs
Simply based on the understanding of the concept, it is easy to think that the important idea of implementing micro frontend is to disassemble and integrate the application, usually a parent application plus some child applications, then use similar Nginx to configure the forwarding of different applications, or use iframe to integrate multiple applications together, etc. These are actually the implementation solutions of micro frontend. The comparison between them is as follows:
| Scheme | Description | Advantages | Disadvantages |
|---|---|---|---|
| Nginx route forwarding | Configure reverse proxy through Nginx to map different paths to different applications. For example, www.abc.com/app1 corresponds to app1, and www.abc.com/app2 corresponds to app2. This solution itself does not belong to the transformation of the front-end level, but more of an operation and maintenance configuration. | Simple, fast, easy to configure | When switching applications, it will trigger browser refresh, affecting the experience |
| Iframe nesting | The parent application is a separate page, and each sub-application nests an iframe. The parent-child communication can be achieved by postMessage or contentWindow. The implementation is simple, and the sub-applications have their own sandbox, which is naturally isolated and does not affect each other. | iframe The style display, compatibility, etc. have limitations; it is too simple and appears low | |
| Web Components | Each sub-application needs to use pure Web Components technology to write components, which is a new development model | Each sub-application has an independent script and css, and can also be deployed separately | For historical system transformation, the cost is high, and sub-application communication is relatively complex. Easy to step into the pit |
| Combined application routing and distribution | Each sub-application is built and deployed independently, and the parent application performs routing management, application loading, startup, unloading, and communication mechanism at runtime | Pure front-end transformation, good experience, no perceptual switching, and sub-applications Isolation from each other | Need to design and develop. Since parent and child applications run on the same page, technical points such as style conflicts, variable object pollution, and communication mechanisms of sub-applications need to be resolved |
Among the above schemes, each has its own advantages and disadvantages. The most primitive Nginx configuration reverse proxy is to separate the system from the perspective of the access layer, but operation and maintenance configuration is required, and iframe nesting is the simplest and fastest solution., but the drawbacks of iframe are unavoidable, and the solution of Web Components requires a lot of transformation costs. The final combined application routing and distribution solution has a moderate transformation cost and can meet most of the needs, and does not affect the experience of each front-end application. It is a solution commonly used by various businesses at present. The content later in this article is mainly based on this solution.
Routing distribution problem
As the base application of micro frontend, it is the entrance of the entire application, responsible for carrying the display of the current micro application and forwarding to other routed micro applications. For the display of the current micro application, it is generally composed of the following steps:
As a base application of SPA, it is a set of pure front-end projects. In order to display the page of micro-application, in addition to using iframe, it is necessary to pull the page content of micro-application first, which requires ** remote pull mechanism **.
The remote pull mechanism usually uses the fetch API to first obtain the HTML content of the micro-application, and then extracts the JavaScript and CSS of the micro-application by parsing, uses the eval method to run the JavaScript, and appends the CSS and HTML content to the base. The display area left for the micro-application in the application, when the micro-application switches away, uninstall these contents synchronously, which constitutes the display process of the current application.
In fact, you can also use the new Function method to execute JavaScript here.
When switching between microapplications, we should also be able to imitate the process switching of core solo CPU, save the mirroring of the current application first, then switch, and restore the mirroring when switching back.
Of course, this process will involve the pollution of CSS styles and the pollution of JavaScript to global objects
For route distribution, take the base SPA application developed by vue-router as an example, mainly the following process:
- When the path of the browser changes, vue-router will listen for hashchange or popstate events to get the timing of route switching.
- The first to receive this change is the router of the base. By querying the registration information, you can obtain and forward it to the micro-application. After some logical processing, the modified hash method or the pushState method is used to route the information pushed to the micro-application. The micro-application can manually monitor the hashchange or popstate event reception, or use the React-router and vue-router to take over the routing, and the latter logic is controlled by the micro-application itself.
You can use namespace or basePath to determine the distribution of routes
Application isolation
Application isolation problems are mainly divided into main applications and micro applications, JavaScript execution environment isolation between micro applications and micro applications, CSS style isolation, let’s first talk about CSS isolation.
** CSS isolation **: When the main application and micro-application are rendered on the same screen, there may be some styles that pollute each other. If you want to completely isolate CSS pollution, you can use CSS Module or namespace to give each micro-application module with a specific prefix to ensure that they will not interfere with each other. You can use the postcss plugin of webpack to add a specific prefix when packaging.
For the CSS isolation between micro-applications and micro-applications, it is very simple. Every time the application is loaded, all links and style contents of the application are marked. After the application is uninstalled, just synchronize the corresponding link and style on the uninstall page.
** JavaScript isolation **: Whenever the JavaScript of a microapplication is loaded and run, its core is actually the modification of the global object Window and the change of some global events, such as jQuery. After js runs, it will mount on Window. A’window. $'object, for other libraries React, Vue is no exception. To this end, it is necessary to eliminate this conflict and impact as much as possible while loading and unloading each microapplication. The most common approach is to use a sandbox mechanism (SandBox).
The core of the sandbox mechanism is to allow the local JavaScript runtime to access and modify external objects within a controllable range, that is, no matter how it runs internally, it will not affect external objects. Usually, the vm module can be used on the Node.js side, while for the browser, it needs to be combined with keywords and window. Proxy objects to implement the browser-side sandbox.
Message communication
There are many ways to communicate between applications. Of course, in order to communicate between multiple separate micro-applications, the intermediary medium or global object is essentially still inseparable. Therefore, the communication mechanism of the subscription (pub/sub) mode is very suitable. The event center Event will be defined in the base application, and each micro-application will register the event separately. When the event is triggered, the event center will be distributed uniformly, which constitutes the basic communication mechanism.
If you use React or Vue, you can use it in combination with Redux and Vuex to achieve communication between applications.
Question to be retrieved
- with
- sandbox
- Advantages and disadvantages of iframe