Micro Frontend Solutions

In an ideal situation, it is expected that a complex monolithic application can be vertically divided into smaller subsystems according to functional or business requirements, and the following capabilities can be achieved:

The development and release of subsystems are separated in space
Subsystems can use different technology systems
The code reuse of the basic library can be completed between subsystems
Communication between subsystems can be completed quickly
Requirement iteration between subsystems does not block each other
Sub-apps can be upgraded incrementally
Subsystems can move towards the same grayscale version control
Provide centralized subsystem authority control
The user experiences the entire system as a single product, not islands of each other
The monitoring of the project can be refined to the subsystem

The overall architecture of the micro frontend

How to provide a solution that not only has the user experience of SPA, but also has the flexibility brought by MPA applications, and can realize the same gray scale between applications, and the monitoring may also be refined to subsystems. The micro-frontend solution "Garfish" currently applied in ByteDance is mainly divided into three layers: the deployment side, the framework runtime, and the debugging tool. Currently, the SPA architecture is adopted.

Micro frontend deployment platform

As an important part of the micro-frontend R&D process, the deployment platform mainly provides: micro-frontend service discovery, service registration, sub-application version control, multiple sub-applications with the same gray scale, incremental upgrade of sub-applications, and distribution of sub-application information List, analyze sub-application dependency information and extract public base library to reduce repeated loading of dependencies of different applications.

It is used to solve the independent deployment, version control and sub-application information management of sub-applications in the micro-frontend. The sub-application list information is included in the HTML content of the main application delivered through the interface provided by the serverless platform or in the rendering service. The list includes sub-applications Detailed information such as: application id, activation path, dependency information, entry resources and other information, and through the analysis of the public dependencies of the sub-applications, the public dependencies of the sub-applications are issued, and the information of the sub-applications is obtained at runtime and registered to the framework, and then control the rendering and destruction of sub-apps on the main app.