This article will be a theoretical introduction to the concept of micro front to do an overall literacy, most of the theoretical knowledge involved will not be too extensive, if the reader is interested in some details, you can leave a message or search for related concepts.

What is a micro front end?

Micro-frontends are a microservice-like architecture that applies the concept of microservices to the browser, transforming a Web application from a single individual application to multiple small front-end applications that can be integrated into one application. Each front-end application can also run, develop, and deploy independently. Micro frontend is not a simple front-end framework or tool, but a set of architecture system, this concept was first proposed in late 2016, you can refer to Google search micro-frontends, the top micro-frontends.org blog post, proposed the early Micro frontend model.

Why is there a micro front end

Any new technology is created to address the technical pain points under existing scenarios and requirements, and the micro front end is no exception:

  1. Separation and refinement: the front area, single page application (SPA) is one of the popular project form, but with the passage of time and function of the rich, single-page applications become no longer single but is growing more and more difficult to maintain, change is often of a whole body, the hair of the resulting version costs more and more is also high. The point of the micro front is to break these huge applications down and then decouple them so that each part can be maintained and deployed separately, improving efficiency.
  2. Integrating historical systems: In many businesses, there are more or less historical projects, most of which are based on b-side management systems similar to the old framework (backbone. js, Angular.js 1). For daily operations, these systems need to be integrated into the new framework and should not be abandoned. There’s no reason to waste time and energy rewriting old logic. The micro front end can integrate these systems, and at the same time compatible with the old and new systems running in parallel without modifying the logic.

What are the solutions to implement the micro front end

Just according to the understanding of concepts, it is easy to think of for the front of the important thought is to disassemble and integration, application and is usually a parent with some application, then use a similar forwarding, Nginx configuration on different application or use the iframe to apply multiple together etc. These are really belongs to the implementation scheme of micro front end, The pairing between them is as follows:

plan describe advantages disadvantages
Nginx Routing and forwarding Nginx uses the reverse proxy configuration 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 does not belong to the transformation of the front-end layer, but is more about the configuration of operation and maintenance. Simple, fast and easy to configure When switching between apps, browser refresh is triggered, affecting the experience
Nested iframe The parent application is a separate page, and each child application is nested with an iframe. Communication between the parent and child can be postMessage or contentWindow Simple implementation, sandbox between sub-applications, natural isolation, do not affect each other Iframe style display, compatibility and other limitations; Too simple to appear low
Web Components Each sub-application needs to use pure Web Components technology to write Components, a new set of development model Each subapplication has its own script and CSS and can be deployed separately For the historical system reconstruction cost is high, sub-application communication is more complex and easy to step pit
Combined application route distribution Each child application is built and deployed independently, and the parent application handles routing management, application loading, startup, unloading, and communication mechanisms at runtime Pure front-end transformation, good experience, can switch without perception, sub-applications are isolated from each other It needs to be designed and developed. Since the parent application runs on the same page, it needs to solve the style conflict, variable object pollution, communication mechanism and other technical points of the child application

In the above solutions, each has its own advantages and disadvantages. The original Nginx configuration reverse proxy separates the system from the perspective of the access layer, but requires operation and maintenance configuration. Iframe nesting is the simplest and fastest solution, but the disadvantages of iframe are unavoidable. However, the solution of Web Components requires a large amount of renovation costs. The final combined application routing distribution solution has a medium renovation cost and can meet most requirements without affecting the experience of front-end applications. It is a widely used solution for various businesses at present.

Which modules the micro front end consists of

Based on the above, the current micro front end mainly adopts the combined application routing scheme. The core of the scheme is the “master-sub” idea, which includes a MainApp application and several MicroApp applications. Most of the base application is a front-end SPA project, mainly responsible for application registration, route mapping, message delivery, etc. Micro-applications are independent front-end projects that are not limited to React, Vue, Angular, or JQuery. Each micro-application is registered with the dock application and managed by the dock, but can be accessed separately from the dock. The basic process is shown below:

When the entire micro front end framework is running, the user experience is something like the following:

In a brief description, there are some menu items in the base application, and click each menu item to display the corresponding micro application. The switch of these applications is pure front-end without perception. Therefore, based on the current scheme, a base framework of micro front-end needs to solve the following problems:

  1. Routing switchover distribution problem.
  2. Isolation problems for main microapplications.
  3. Communication problems.

The following is to elaborate on these issues.

Route distribution on the micro front end

As a micro front end, the base application is the entrance of the whole application, responsible for carrying the display of current micro applications and forwarding of other route micro applications. The display of current micro applications is generally composed of the following steps:

  1. As a SPA base application, itself is a set of purely front-end projects, in order to display the micro application page in addition to using iframe, to be able to pull the micro application page content, this requires remote pull mechanism.
  2. The remote pull mechanism usually uses the FETCH API to get the HTML content of the micro application first, then extracts the JavaScript and CSS of the micro application through parsing, and uses the eval method to run the JavaScript. And append CSS and HTML content to the base application to the display area of micro application, when the micro application switch time, synchronous uninstall these content, this constitutes the current application display process.
  3. Of course, this process involves CSS style pollution and JavaScript pollution of global objects, which involves the isolation problem will be discussed later. Currently, there are ready-made libraries for the remote pull mechanism process, such as import-html-entry and System.js.

For route distribution, the base SPA application developed with vue-Router is taken as an example. The process is as follows:

  1. When the browser path changes, vue-router listens for a HashChange or PopState event to determine when the route is switched.
  2. The first router to receive this change is the base router. It queries the registration information to get a route to the micro application. After some logical processing, it changes the hash method or pushState method to route the information to the micro application. The microapplication can manually listen for hashChange or PopState event reception, or use react-Router or Vue-router to take over the route, and then the logic is controlled by the microapplication itself.

Micro front end application isolation

Application isolation issues are divided into main and micro applications, JavaScript execution environment isolation between micro and micro applications, CSS style isolation, let’s talk about CSS isolation first.

CSS isolation: When the main application and micro application are rendered on the same screen, some styles may contaminate each other. If you want to completely isolate THE CSS contamination, you can use CSS Module or namespace to give each micro application Module a specific prefix to ensure that they will not interfere with each other. You can use WebPack’s PostCSS plug-in. Add specific prefixes at packaging time.

The CSS isolation between microapps is as simple as marking all the link and style content of the app each time the app loads. After the application is uninstalled, synchronize the corresponding link and style on the uninstallation page.

JavaScript isolation: When the JavaScript of a micro application is loaded and run, its core is actually the modification of the global object Window and some global event changes. For example, jQuery will mount a Window.$object on the Window after the JavaScript is run. To do this, you need to eliminate this conflict and impact as much as possible while loading and unloading each microapplication, most commonly by using a SandBox mechanism.

The core of the sandbox mechanism is to allow the local JavaScript runtime to access and modify external objects within the scope of control, that is, whatever is going on inside does not affect the external objects. In general, you can use the VM module on the Node.js side, but for the browser, you need to combine the with keyword and window.Proxy object to implement the sandbox on the browser side.

Message communication on the micro front end

There are many ways to communicate between applications, and of course, in order for multiple separate microapplications to communicate with each other, it is still essential to have an intermediary or global object. Therefore, the communication mechanism of message subscription (PUB/SUB) mode is very applicable. The Event center Event is defined in the base application, and each micro-application registers the Event separately. When the Event is triggered, the Event center uniformly distributes the Event, which constitutes the basic communication mechanism.

Of course, if the base and microapplication use React or Vue, it can be used together with Redux and Vuex to achieve communication between applications.

What are the frames of the micro front end

Based on the above description of the overall concept and theory of the micro front end, there are a number of frameworks to help developers easily integrate the micro front end architecture, such as these:

  • Mooa: Angular based micro front-end services framework
  • Single-spa: The earliest micro front-end framework, compatible with a variety of front-end technology stacks.
  • Qiankun: Based on single-SPA, Ali open source micro front end framework.
  • Icestark: Ali Flyice micro front end frame, compatible with a variety of front end technology stacks.
  • Ara Framework: A micro front-end Framework that extends from server-side rendering.

The above framework, the author here is not too much extension, readers interested in the words can come to try.

Whether to use a micro front end

Microfronts help developers solve practical problems, but whether they are appropriate for each business, and whether they are used correctly, depends on the following principles:

  1. The best use scenarios for the micro front end are some b-side management systems that are compatible with integrated historical systems or can integrate new systems without affecting the original interactive experience.

  2. The overall micro front end is not only the integration of the system, but also the improvement of the entire micro front end system, which includes:

    1) : Automated deployment capabilities for base applications and microapplications.

    2) : Micro-application configuration management capability.

    3) : Local development and debugging capability.

    4) : Online monitoring and statistical ability, etc.

    Only when the entire capability system is built and perfected can it be said that the entire micro front end system process is improved.

  3. When it is found that the use of micro front end makes the efficiency become low, simple changes are complex that means micro front end is not suitable.