CN-121980107-A - Multi-Web application integration system and method based on micro front end architecture

CN121980107ACN 121980107 ACN121980107 ACN 121980107ACN-121980107-A

Abstract

The invention provides a multi-Web application integration system and method based on a micro front end architecture, aiming at solving the problems of state persistence, cross-application communication and pattern isolation in multi-Web application integration. The system takes the main application as a host, integrates a configuration module, a routing module, a micro front end component module and a Bus module to work cooperatively. The configuration module realizes complex configuration loading through enhanced JSON analysis, the routing module dynamically generates a route and supports hot update, the micro front end component module combines an iframe sandbox and a Shadow DOM to realize dual isolation of codes and patterns, and realizes state persistence through a keep-alive mode, and the Bus module provides a decentralizing release-subscription communication mechanism. The method and the system realize seamless integration and flexible layout of multiple sub-applications, support multi-technology stack adaptation, improve user experience continuity and development efficiency, reduce the coupling degree between applications, and are suitable for various multi-Web application integration scenes.

Inventors

XIAO GE
DAI ZHENHU
LI ZEQI
LI BAOQIN
CHEN JUNLIN
QU YUAN

Assignees

上海宝信软件股份有限公司

Dates

Publication Date: 20260505
Application Date: 20251230

Claims (10)

1. The multi-Web application integrated system based on the micro front end architecture is characterized by comprising a configuration module, a routing module, a micro front end assembly module and a Bus module; the configuration module is used for defining the integration rule of the sub-application, loading the sub-application by creating a sandbox environment and proxy the interface operation in the sub-application to the protected container node in the main application; the routing module is connected with the configuration module and is used for dynamically generating an application route based on the integration rule; the micro front-end component module is called by the routing module and is used for creating a container with style isolation for the sub-application; The Bus module is used for providing an event Bus instance injected into the sandbox environment so as to realize cross-application communication.
2. The micro front end architecture based multi-Web application integration system of claim 1, wherein the configuration module achieves a visual fusion from the runtime environment by creating an invisible iframe as the sandbox environment and hijacking the document object model application program interface and routing application program interface within the iframe to proxy the operation to a container node protected by the shadow document object model in the host application.
3. The micro front end architecture based multi-Web application integration system of claim 1, wherein the micro front end component module creates a Web component custom element for each sub-application instance and creates independent document object model trees and cascading style sheet scopes for sub-applications by enabling shadow document object models inside the custom element, thereby achieving the style isolation.
4. The micro front end architecture based multi-Web application integration system according to claim 1, wherein the Bus module implemented event Bus instance comprises a monitoring method and a triggering method; the monitoring method is used for registering an event monitor, and the triggering method is used for triggering an event and transmitting parameters; the event bus instance is injected into a global window object of an iframe where the sub-application is located, and the sub-application can directly call the monitoring method and the triggering method to realize decoupled cross-application communication.
5. The micro front end architecture based multi-Web application integration system of claim 1, wherein the integration rules include an operating mode configuration for on or off state persistence keep-alive; when the keep-alive mode is started, the internal running state of the sub-application is completely reserved after switching, and reloading and initialization are not needed.
6. The multi-Web application integration method based on the micro front end architecture is characterized by comprising the following steps of: step S1, defining an integration rule of a sub-application through a configuration module; Step S2, dynamically generating an application route based on the integration rule through a routing module; S3, responding to the application route, creating a container with style isolation for the sub-application through the micro front-end component module, and loading the sub-application in a sandbox environment; and S4, injecting event bus instances into the sandbox environment through a communication module so as to realize cross-application communication.
7. The micro front end architecture based multi-Web application integration method of claim 6, wherein the integration rules are stored in one or more configuration files; The configuration file adopts a JSON format and comprises a unique identifier id of a sub-application, a resource entry url, an operation mode identifier alive and a life cycle hook function; the step S1 further comprises a step of analyzing the configuration file, wherein the analysis process realizes serialization and deserialization reduction of complex data types including functions and regular expressions by rewriting JSON.stringing and JSON.parameter methods.
8. The method for integrating multiple Web applications based on micro front end architecture according to claim 7, wherein said step S2 further comprises a routing and menu hot update step: The master application monitors the change of the configuration file through the file monitor, and when the configuration file is modified, the configuration module reloads and analyzes the configuration file and pushes new configuration information to the routing module; the routing module compares the difference between the new routing table and the old routing table, the routing table is updated in an increment mode, and the navigation menu component synchronously re-renders.
9. The method for integrating multiple Web applications based on micro front end architecture according to claim 6, wherein the step S3 comprises: Step S3.1, checking a sub-application running mode identifier alive, if alive is true and the sub-application instance exists in a cache pool, directly recovering the instance and the corresponding state and displaying the instance and the corresponding state; Step S3.2, creating a Web Component container named based on sub-application id and a timestamp, enabling a Shadow DOM for the container to realize style isolation, creating an iframe sandbox invisible to vision, setting the src attribute of the iframe as a sub-application resource inlet url, and constructing an independent code execution environment; And S3.3, after the iframe is loaded, hijacking a DOM operation API and a routing API in the child application JS environment, and enabling the DOM operation to be proxy to the inside of a Shadow DOM of the Web Component container, so that seamless rendering of the child application in the main application DOM and isolation of a code execution environment are realized.
10. The method for integrating multiple Web applications based on micro front end architecture according to claim 9, wherein in step S3.3, the main application penetrates the theme variable through the Shadow DOM boundary through the CSS custom attribute for the sub-application to use, so as to realize unified global theme switching.

Description

Multi-Web application integration system and method based on micro front end architecture Technical Field The invention relates to the technical field of Web front-end development, in particular to a multi-Web application integration system and method based on a micro front-end architecture. And more particularly to a multi-application integration system and method for building large, complex Web applications. Background With the rapid development of enterprise business, web application systems are increasingly large and complex. The traditional single front-end architecture, namely that all functional modules are packaged in one project for development and deployment, faces many challenges such as low development efficiency, old technical stacks, difficult maintenance, high deployment risk and the like. To solve these problems, micro front-end architecture has developed that splits a large front-end application into multiple smaller, more manageable, independent sub-applications that can be independently developed, tested and deployed by different teams and finally integrated by one main application. In the prior art, patent document CN115794093B discloses a micro front-end integration method based on a main application registry, and the loading, loading and unloading of each sub-application are controlled by a predefined life cycle function. However, such schemes still have several drawbacks in practical applications. First, during application switching, old sub-application instances are usually completely unloaded and destroyed, resulting in the total loss of information about the internal running state, such as form data filled by the user, and scroll positions of pages, and when the user returns to the application again, reloading and initialization are required, which not only interrupts the operation flow of the user, but also brings unnecessary performance overhead. Secondly, the cross-application communication mechanism in the existing scheme often depends on a centralized global state manager or performs data transfer through a monitoring function, so that the configuration is complicated, the coupling degree between applications is increased, and the data security risk is possibly caused by global state pollution. Furthermore, style isolation between different sub-applications is also a problem, especially when integrating sub-applications developed by different technology stacks, the global style or component library style is easy to overlay each other, resulting in a user interface confusion. Finally, the lifecycle management manner of the main application for all the sub-applications is single, and lacks flexibility, so that differentiated configuration and management cannot be provided according to the characteristics and service scenarios of different sub-applications (for example, some applications need to keep active, while others do not). Therefore, there is a need in the market for a multi-Web application integration system and method based on micro-front-end architecture that supports highly custom configuration by introducing application keep-alive mechanism, event bus communication model and Web Component Shadow DOM style isolation policies. Disclosure of Invention Aiming at the defects in the prior art, the invention aims to provide a multi-Web application integration system and method based on a micro front-end architecture, aiming at solving the technical problems of state loss, complex cross-application communication, easy pollution of patterns, inflexible configuration management and the like caused by sub-application switching in the existing micro front-end technology. The invention provides a multi-Web application integrated system based on a micro front end architecture, which comprises a configuration module, a routing module, a micro front end assembly module and a Bus module, wherein the configuration module is used for connecting the micro front end assembly module to the Bus module; the configuration module is used for defining the integration rule of the sub-application, loading the sub-application by creating a sandbox environment and proxy the interface operation in the sub-application to the protected container node in the main application; the routing module is connected with the configuration module and is used for dynamically generating an application route based on the integration rule; the micro front-end component module is called by the routing module and is used for creating a container with style isolation for the sub-application; The Bus module is used for providing an event Bus instance injected into the sandbox environment so as to realize cross-application communication. Preferably, the configuration module creates an invisible iframe as the sandbox environment, and hijacking a document object model application program interface and a routing application program interface in the iframe to proxy the operation to a container node protected by a shadow docu