background

With the rapid development of the company’s business, in order to meet the needs of development, we split out a number of background management systems, some of which have been put into use. Although the split system is more convenient for development and maintenance, the use of other upstream and downstream departments is scattered and not easy to manage, so we considered using a platform to connect each subsystem, which has two advantages:

  • Easy to manage and use at the same time, and did not lose the advantages of multi – system development
  • The login of all systems is abstracted to the platform and distributed to each subsystem

Micro front-end

Based on the above business, we introduce the concept of a micro front end.

“Micro” literally means “small, little,” and a micro front end is the breaking up of a large system into smaller modules or systems.

A project will become larger and more difficult to maintain after continuous iteration for a long time. At this time, it is necessary to split the project, so that it can be developed, tested and deployed separately. In addition, the split subsystem can be realized by different technology stacks, which is more conducive to the development and iteration of different teams.

However, if the sub-system is too detailed, it will be very troublesome for us to manage it. We can have dozens or even dozens of sub-systems. Different functions need to be operated in different systems. At this time, we need to re-integrate the subsystem into a platform for maintenance, which should be the old saying “long separation, long separation”.

Company business requirements

There is no login operation for the subsystem developed by the company before, so we plan to connect all subsystems to the platform and protal for unified management. Next, we will talk about the specific implementation:

The subsystem introduces the token via iframe, then logs in on the platform and passes the token to the current subsystem (via postMessage, URL, etc.). The subsystem puts the token in the request header for back-end interface authentication, which looks perfect, simple and quick.

Why is it perfect

  • 1. Iframe isolates all subsystem styles (i.e. CSS)
  • Every subsystem is a sandbox
  • 3. Third, two-way communication is realized through PostMessage

The above three points are the necessary conditions for implementing a micro front end

1. The URL of the iframe is not in sync with the url of the browser. The browser does not record the browsing history of the iframe. Therefore, the url of iframe cannot be used by browser forward and backward operation, nor can refresh, otherwise it will lose the current page of iframe. 2. The mask inside iframe can only be in iframe. Each subsystem entry is a process of browser context reconstruction and resource reloading.

But this is all a matter of experience, as long as the backstage operators can accept it actually doesn’t matter

Think further

At the end of the day, we find that the micro front end is essentially a router, similar to vue-Router, except that component becomes a subsystem.

Our logic above is packaged separately, distributed separately, and then coupled by introducing different subsystems through iframe.

There are other ways to implement a microfront:

  • 1. Webpack5 added federated module, which is not complicated, but exported from subsystem and imported from parent system. When the parent system packages, the code will automatically add the code of fetch subsystem’s package file, so that we can use sub-modules and subsystems in the form of components. This issue only introduces the three implementations of the micro front end, not involving specific code, a later issue of webpack5 federated module. If in doubt, see the webpack5 federated module demo.

But, but, the problem is that all of your subsystems and parent systems are developed using webpack5 (wepback5 has federated modules). This model is suitable for a new Internet enterprise, and all systems are newly developed.

  • 2, so that kind of old and smelly system how to access, is also possible, there are a lot of micro front-end framework can be used in the market, such as single-SPA, Ali Qiankun (based on single-SPA secondary development), the general logic is through the life cycle of the subsystem DOM, CSS and so on in a form of parsing into the parent system, There are CSS isolation, JS sandbox, communication between each system processing, because there is no actual use of these frameworks will not be published in-depth discussion, the actual use of the later published separately

conclusion

There are three ways to achieve a micro front end:

  • 1. Iframe + postMessage
  • 2. Webpack5 federated module
  • 3. Use open source micro-front-end frameworks (Single-SPA, Alibaba’s Universe)