The micro front end concept has been around for a while now, and the community has relatively well-known solutions such as Single-SPA and Qiankun. But for this article I’ll leave the framework behind and talk about thinking about the micro front end.

Advantages of a micro front end

Micro front end why can fire, of course, has its advantages, the main highlights are the following:

  1. Technology stack independent (many projects may have older technology stacks due to historical baggage, etc.)
  2. Independent development, independent deployment (some large projects, often dozens or hundreds of pages, each development run will take a long time, and there may be insufficient node memory problems. At the same time, a separate environment can compare the interaction between business modules.)
  3. Each service module is independent, facilitating upgrade and reconstruction

The difficulty of the micro front end

The micro front end has its characteristics, but there are some technical difficulties in its implementation. I also encountered some related problems in the process of realizing the micro front-end solution developed by myself.

Routing switch

The micro front end is still close to the single-page application to the user’s perception, and the route of the micro front end can still adopt the route navigation scheme of the single-page application, which is relatively easy to solve. I directly borrowed vue-Router’s capabilities when implementing my solution. If you are interested, look directly at the routing implementation of the relevant framework or take a look at the browser’s History API

Child application mount

The application mount is essentially adding CSS and JS for the child application to the HTML. The implementation idea here is to monitor route changes and start mounting sub-application resources when the route changes.

In practice, I also monitored the route and stored the resources of each sub-application in corresponding variables. When entering the application, the corresponding resources were directly mounted, which was realized together with route switching in the implementation process.

Communication of child applications

The sub-applications are independent from each other, so some data cannot be shared. However, our services cannot be completely separated, so communication between applications is required. There are several approaches we can use here

  1. With the framework’s implementation, for examplevueorvuexAnd use them to implement a simpleEvent BusTo communicate, here believe can seevuexThe source code, no further details
  2. Using the browser’s own event mechanism, through the event listening and passing to achieve, the specific API is CustomEvent

CSS isolation

There are several main approaches to CSS isolation

  1. cssAdd and remove styles. Mount and destroy of child applications can be monitored from the master application’s scripts, while CSS styles can be added and removed. But there is a point to note here is to modify the child application packaging, get the packaged CSS style address
  2. usescope-css. The development process does not set the global style, all usescope-cssGlobal styles are stored in the main application. This approach is relatively simple
  3. Add prefixes to all styles of child applications. This is similar to method 2postcssTo implement the
  4. useshadow DOM. This method has compatibility problems, and if it is troublesome to do style penetration, you can learn about it if you are interested. I feel its functions are more than these.The official documentation

Js isolation

Js isolation is relatively cumbersome, because even if you remove JS, the effects of running it still exist, such as global variable contamination, timer issues, etc. Fortunately, many projects are basically built based on WebPack, with fewer global variables and relatively simple processing. At the same time, timely cleaning of scheduled tasks in the process of sub-application development can be done.

In the process of practice, it mainly defines predictable global variables in the master application, and at the same time, it realizes the function of a snapshot to save the running state of the application. When the child application is destroyed, the application state can be restored according to the snapshot. However, this is still not a complete sandbox, or there is js interaction is possible. Expect better solutions from the community.

Write in the last

The micro front end, as I understand it, is not the best solution, it’s an idea, a decoupled idea, not specific to a framework. Just fit your business needs and take advantage of the micro front end. For example, IN the process of practice, I also use some capabilities of VUE to realize the micro front end. Although there are some shortcomings at present, the transformation of original code is reduced, and the learning cost is low, which is also what I am satisfied with.