A micro-frontend implementation method based on multi-application integration

Abstract

The present invention provides a micro-frontend implementation method based on multi-application fusion, comprising: developing a main application and multiple independent sub-applications; each sub-application registering with the main application, so that the main application has a sub-application registry; wherein the sub-application registry stores each sub-application's sub-application ID and application entry; and the main application managing each sub-application throughout its lifecycle. The micro-frontend implementation method based on multi-application fusion provided by the present invention has the following advantages: it integrates multiple independent web applications into a single micro-frontend application, allows for free combination of menus, and allows for the free allocation of data permissions, providing users with highly customized product and service items.

Description

Technical Field

[0001] The present invention belongs to the field of front-end architecture technology in the cloud era, and specifically relates to a micro-front-end implementation method based on multi-application integration. Background Art

[0002] In the early days, the splitting and combination of giant stone applications were achieved through iframe nesting or direct jump of sub-applications. The advantage was natural sandbox isolation, but there were also obvious problems, such as the white screen problem when switching applications and the inability to share data.

[0003] The concept of micro-frontends was introduced in the industry in 2014. With the advent of Webpack and the widespread adoption of SPAs like React and Vue, a new challenge arose: the need to break up large-scale monolithic applications. In 2018, the first open-source micro-frontend tool, single-spa, was released. It primarily addressed two issues: sub-application registration and sub-application lifecycle management. It's a combination of a sub-application loader and a state machine.

[0004] Specifically, first register the entry configuration of each sub-application on the micro-frontend interface, including the sub-application name, the entry js file (JS Entry method), the data passed to the sub-application by the main application, and configure activeWhen to control whether to activate the sub-application by judging the matching route status. By monitoring related events through routing, three important lifecycle hook functions are exposed: bootstrap (called before the sub-application is mounted on the page for the first time), mount (called when the sub-application is activated to implement the sub-application mounting, page rendering and other logic), and unmount (called when the sub-application is uninstalled to implement component uninstallation, clear event monitoring and other logic). When managing sub-applications, the main application uses the lifecycle functions exposed by the sub-application to implement sub-application mounting and uninstallation.

[0005] The above micro-frontend architecture single-spa has the following obvious problems:

[0006] 1. Micro-app loading methods must be maintained independently, using JS Entry to access micro-apps. Therefore, the entire sub-app must be packaged into a single JS bundle, making optimizations like unpacking, CSS extraction, and first-screen loading nearly impossible. 2. Application switching has side effects. 3. There are issues with sandboxing JS and CSS between applications. 4. Sub-app preloading is not implemented. 5. There are communication issues between applications. Summary of the Invention

[0007] In response to the defects of the existing technology, the present invention provides a micro-front-end implementation method based on multi-application fusion, which can effectively solve the above problems.

[0008] The technical solution adopted in the present invention is as follows:

[0009] The present invention provides a micro-front-end implementation method based on multi-application fusion, comprising the following steps:

[0010] Step 1: Develop a main application and multiple independent sub-applications; each sub-application is registered with the main application, so that the main application has a sub-application registration table; wherein the sub-application registration table stores the sub-application ID and application entry of each sub-application;

[0011] Step 2: The main application manages the entire life cycle of each sub-application, specifically:

[0012] Step 2.1, the main application includes a user login module, a layout module, a routing module and a global state sharing module;

[0013] Step 2.2: When the main application receives user login information through the user login module, it obtains user permissions based on the user login information and pushes a menu configuration based on the user permissions; the menu configuration includes sub-application IDs of multiple sub-applications that can be combined and match the user permissions; then, the main application receives the sub-application IDs of the multiple sub-applications that need to be combined;

[0014] Step 2.3: The main application, through the layout module, combines the multiple sub-applications that need to be combined into a sub-application unit;

[0015] Step 2.4: The main application configures routing for each sub-application through the routing module, including: configuring the browser routing address URL and the path of the application entry of each sub-application;

[0016] In step 2.5, the main application switches to load each sub-application in the following manner:

[0017] The main application hijacks the browser routing address URL. When the browser routing address URL changes, the path corresponding to the browser routing address URL determined in step 2.4 is matched to the application entry of the corresponding sub-application, and the corresponding sub-application is loaded according to the application entry;

[0018] Step 2.6: For the loaded sub-application, the main application manages its entire life cycle from startup, mounting to destruction.

[0019] Preferably, step 2.6 is specifically as follows:

[0020] Expose relevant Hook functions during the lifecycle changes of sub-applications, and add additional functions to the corresponding hooks according to different business scenarios.

[0021] Preferably, step 2.6 more specifically includes:

[0022] When the browser routing address URL changes, the routing jump is triggered. Menu authentication and user identity authentication are performed in the hook function before the routing jump. If the token has expired, it jumps to the login page to log in again.

[0023] After the sub-application obtains certain data, it needs to make the data globally shared. At this time, the communication hook is used to pass the new payload and synchronously update the global state.

[0024] Preferably, sandbox isolation is used between each sub-application, as well as between the sub-application and the main application. Through sandbox isolation, each sub-application has an independent execution context scope.

[0025] Preferably, the main application has a sub-application status monitoring function, a sub-application status update function and a sub-application status removal monitoring function;

[0026] The status of each sub-application is monitored through the sub-application status monitoring function; when the sub-application status changes, the sub-application status is updated through the sub-application status update function; when the sub-application is uninstalled, the sub-application status monitoring function and the sub-application status update function are moved through the sub-application status removal monitoring function to complete the resource release.

[0027] Preferably, the global state sharing module is specifically used to:

[0028] The main application stores the sub-application global states of all sub-applications, and shares the sub-application global states of all sub-applications with each sub-application through the global state sharing module.

[0029] The micro-frontend implementation method based on multi-application integration provided by the present invention has the following advantages:

[0030] Integrate multiple independent web applications into a micro-front-end application, where menus can be freely combined and data permissions can be freely allocated, providing users with highly customizable product and service projects. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 A basic architecture diagram of a micro-frontend architecture for a micro-frontend implementation method based on multi-application integration provided by the present invention;

[0032] Figure 2 The main application to sub-application routing design diagram provided by the present invention;

[0033] Figure 3 The master-sub application communication and status management flow chart provided by the present invention;

[0034] Figure 4 A complete architectural diagram of the micro-frontend architecture of a micro-frontend implementation method based on multi-application integration provided by the present invention. DETAILED DESCRIPTION

[0035] In order to make the technical problems, technical solutions and beneficial effects solved by the present invention more clearly understood, the present invention is further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0036] The present invention provides a method for implementing a micro-front-end architecture that integrates multiple applications based on a B / S structure, which belongs to the field of Web development technology. The micro-front-end architecture mainly includes two parts: a main application and a sub-application. The main functions of the main application include authentication operations such as user login, logout, password modification, Layout, routing permissions, and a globally shared GlobalState. After login, the user permission-related information is initialized and a menu is generated after filtering the routing permissions. The sub-application is a completely independent individual with the characteristics of independent development, independent deployment, and independent operation. It can be developed based on any framework library class, such as mainstream spa applications such as vue and react, or based on old projects such as jQuery, to achieve a relatively ideal compatibility effect.

[0037] Specifically, the present invention provides a micro-frontend implementation method based on multi-application integration, comprising the following steps:

[0038] Step 1: Develop a main application and multiple independent sub-applications; each sub-application is registered with the main application, so that the main application has a sub-application registration table; wherein the sub-application registration table stores the sub-application ID and application entry of each sub-application;

[0039] Step 2: The main application manages the entire life cycle of each sub-application, specifically:

[0040] Step 2.1, the main application includes a user login module, a layout module, a routing module and a global state sharing module;

[0041] Step 2.2: When the main application receives user login information through the user login module, it obtains user permissions based on the user login information and pushes a menu configuration based on the user permissions; the menu configuration includes sub-application IDs of multiple sub-applications that can be combined and match the user permissions; then, the main application receives the sub-application IDs of the multiple sub-applications that need to be combined;

[0042] Step 2.3: The main application, through the layout module, combines the multiple sub-applications that need to be combined into a sub-application unit;

[0043] Step 2.4: The main application configures routing for each sub-application through the routing module, including: configuring the browser routing address URL and the path of the application entry of each sub-application;

[0044] In step 2.5, the main application switches to load each sub-application in the following manner:

[0045] The main application hijacks the browser routing address URL. When the browser routing address URL changes, the path corresponding to the browser routing address URL determined in step 2.4 is matched to the application entry of the corresponding sub-application, and the corresponding sub-application is loaded according to the application entry;

[0046] Step 2.6: For the loaded sub-application, the main application manages its entire life cycle from startup, mounting to destruction.

[0047] Step 2.6 is as follows:

[0048] Expose relevant Hook functions during the lifecycle changes of sub-applications, and add additional functions to the corresponding hooks according to different business scenarios.

[0049] Step 2.6 more specifically includes:

[0050] When the browser routing address URL changes, the routing jump is triggered. Menu authentication and user identity authentication are performed in the hook function before the routing jump. If the token has expired, it jumps to the login page to log in again.

[0051] After the sub-application obtains certain data, it needs to make the data globally shared. At this time, the communication hook is used to pass the new payload and synchronously update the global state.

[0052] In the present invention, sandbox isolation is adopted between each sub-application, as well as between the sub-application and the main application. Through sandbox isolation, each sub-application has an independent execution context scope.

[0053] In addition, the main application has a sub-application status monitoring function, a sub-application status update function and a sub-application status removal monitoring function;

[0054] The status of each sub-application is monitored through the sub-application status monitoring function; when the sub-application status changes, the sub-application status is updated through the sub-application status update function; when the sub-application is uninstalled, the sub-application status monitoring function and the sub-application status update function are moved through the sub-application status removal monitoring function to complete the resource release.

[0055] The global state sharing module is specifically used to:

[0056] The main application stores the sub-application global states of all sub-applications, and shares the sub-application global states of all sub-applications with each sub-application through the global state sharing module.

[0057] The design ideas and principles of the present invention are described in detail below:

[0058] like Figure 1 As shown in the figure, it is the basic architecture diagram of the micro front-end architecture. Figure 4 As shown, this is the complete architecture diagram of the micro front-end architecture.

[0059] 1. User login module, which implements unified authentication, including user menu permissions, data permissions, basic user information, etc. Data can be stored in multiple ways. Depending on different data characteristics, it can be temporarily stored in the project store, refreshed in real time through the interface, or stored locally for persistence, so that data is not lost when refreshing the page. As a user, it provides personalized menu configuration, combines different sub-applications, and assigns permissions to quickly meet personalized website building needs in combination with business needs.

[0060] 2. After the user logs in, a new routing menu is generated after filtering based on routing permissions. Layered technology is introduced on the basis of SPA. The Base application takes over the browser address switching to achieve the purpose of switching between sub-applications. It also manages the entire life cycle of each sub-application from startup to destruction. The relevant Hooks functions are exposed during the life cycle changes, and additional functions can be added to the corresponding hooks according to different business scenarios. For example: (1) The browser address changes to trigger the routing jump, and the hook function before the routing jump performs menu authentication, user identity authentication, etc. If the token has expired, it jumps to the login page to log in again; (2) After sub-application A obtains certain data and wants to use the data as global shared data, it can use the communication hook to pass the new payload and synchronously update the global GlobalState;

[0061] 3. Regarding the routing module, the Base main application needs to configure routing for the micro-application, specify the path and application entry corresponding to the URL, hijack the browser routing address, and when the URL changes, match the corresponding sub-application according to the path, and load the corresponding sub-application according to the entry; the routing design is as follows Figure 2 shown.

[0062] 4. To prevent cross-application contamination, internal JS and CSS sandbox isolation is implemented. Each sub-application has its own independent execution context. State management tools are also integrated to achieve data persistence, primary-sub-application communication, and indirect sub-sub-application communication, ensuring the consistency of shared data.

[0063] Currently, one of the sub-applications features a special project: DVP, a web-based, low-code visual editing and generation system. This system integrates native script components within DVP with mainstream frameworks. The micro-frontend architecture enables communication with native script components by exposing specific Window objects. To avoid contaminating global objects, communication between native script components and the outside world requires the introduction of responsive programming and streams. Custom hooks are written to send and listen for events, pass payloads, and support asynchronous data streaming, ensuring the consistency and integrity of shared data.

[0064] The CSS sandbox is implemented internally through the Shadow DOM interface. The main application can also store a global CSS file, which is shared by all sub-applications. In this case, the CSS sandbox needs to be disabled. There are many ways for sub-applications to implement CSS sandbox isolation. Vue itself has implemented CSS modularization, and React officially provides a CSS in JS method. Alternatively, it can be implemented through postcss, CSS modules, project conventions, and other methods. Therefore, whether to enable the CSS sandbox depends on actual needs.

[0065] 5. Sub-applications are independently developed, deployed, and run. Therefore, they can have their own independent state management, internal event communication (vuex / redux / mobx), and so on. Unlike ordinary projects, sub-applications only require a little additional configuration to support merging the main and sub-applications.

[0066] During initialization, if it is running as a sub-application in a micro-frontend architecture, you need to modify the routing parameters, that is, different browser addresses, to match and load the corresponding sub-application. At the same time, you can also obtain the globally shared GlobalState through the monitoring hook (onGlobalChange) exposed by the communication mechanism, and the load sending hook (setGlobalState) to achieve communication with other main and sub-applications. If it is not a micro-frontend architecture environment, it is no different from a normal project.

[0067] like Figure 3 As shown in the figure, it is a flow chart of master-sub-application communication and status management.

[0068] 6. Regarding build and deployment: Build output is typically in the form of a umd lib. There are no deployment restrictions, and you can use web servers like nginx or Apache, or even node applications managed by PM2. As long as the sub-applications are accessible, the base application will automatically match the sub-application's publicPath based on the browser address and load the corresponding sub-application.

[0069] The present invention is a micro-frontend architecture system based on single-spa, which can be used out of the box. After simple API configuration, menu and data permission configuration, a micro-frontend application integrating multiple applications can be completed.

[0070] Key technical points of this architecture:

[0071] 1. It’s independent of the technology stack

[0072] The sub-application technology stack has complete autonomy. You can choose any mainstream front-end framework such as React, Vue, Angular, jQuery, etc., with no version restrictions. For example, you can use Vue2 or Vue3, React15 or React16+, and output the UMD format during the build.

[0073] 2. Independent development and deployment

[0074] Enterprise-level Web projects are split into small modules, each with its own independent repository. Multiple teams develop in parallel and jointly maintain a common business component library. Each module is deployed independently.

[0075] 3. Sandbox Isolation

[0076] Implementing CSS sandbox:

[0077] Sandbox mode is internally implemented through the Shadow DOM interface. Web components already implement encapsulation. The Shadow DOM interface can attach a hidden, independent DOM to a specified element in the main container, natively achieving style isolation. Furthermore, mainstream browsers support Shadow DOM, so Vue projects have no obvious issues.

[0078] If sandbox mode isn't enabled, different frameworks have their own approaches. The Vue framework's scoped style directive implements CSS modularity, generating unique attributes for elements after compilation and adding attribute prefixes to CSS styles. React, on the other hand, can avoid global style pollution through methods like CSS in JS, CSS modules, and prefix conventions.

[0079] Implement js sandbox:

[0080] Internally, the ProxySandbox sandbox is used to achieve scope isolation between sub-applications. The main application uses the Proxy proxy window to proxy each sub-application window to generate a fakeWindow. The sub-application window is proxied to the proxy object of the sandbox. Finally, a new scope chain is constructed. When searching for variables, the sub-application first searches on the local fakeWindow, and then searches on the main application window. Any changes (addition, modification, deletion, etc.) are only for the local fakeWindow and will not affect other applications. When uninstalling, just remove the fakeWindow. Operations on the window object are completely isolated, and state isolation of the multi-instance mode is achieved. In general scenarios, there will only be one active sub-application at a time.

[0081] 4. Application Communication

[0082] Communication between a master and sub-application is achieved through a publish-subscribe model. The master application defines global state and executes an initialization method, which returns communication instances called Actions. These methods include methods for monitoring global state, setting global state, and removing state monitoring. The master application passes props to the sub-application, which receives these props during the mount phase, enabling communication between the master and sub-application.

[0083] 5. Resource preloading

[0084] For a better user experience, the main application can specify a preloaded sub-application when registering a sub-application. The framework re-encapsulates the single-spa lifecycle, and sub-applications have three important lifecycle hooks (bootstrap, mount, and unmount). After the first sub-application is mounted, the static resources of the specified sub-application are loaded to avoid blocking.

[0085] The beneficial effects of the present invention are:

[0086] 1. Split enterprise-level web applications into modules with specific functions, and each R&D line can independently develop and deploy them. Old projects can be upgraded in new warehouses, achieving technological changes and extending the product life cycle.

[0087] 2. More optimization methods for individual sub-applications, faster packaging, smaller size, and shorter production release time;

[0088] 3. Integrate multiple independent web applications into a micro-front-end application, where menus can be freely combined and data permissions can be freely allocated to provide users with highly customizable product and service projects.

[0089] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present invention. These improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A micro-frontend implementation method based on multi-application integration, characterized in that: The following steps are involved: Step 1: Develop a main application and multiple independent sub-applications; each sub-application is registered with the main application, so that the main application has a sub-application registration table; wherein the sub-application registration table stores the sub-application ID and application entry of each sub-application; Step 2: The main application manages the entire life cycle of each sub-application, specifically: Step 2.1, the main application includes a user login module, a layout module, a routing module and a global state sharing module; Step 2.2: When the main application receives user login information through the user login module, it obtains user permissions based on the user login information and pushes a menu configuration based on the user permissions; the menu configuration includes sub-application IDs of multiple sub-applications that can be combined and match the user permissions; then, the main application receives the sub-application IDs of the multiple sub-applications that need to be combined; Step 2.3: The main application, through the layout module, combines the multiple sub-applications that need to be combined into a sub-application unit; Step 2.4: The main application configures routing for each sub-application through the routing module, including: configuring the browser routing address URL and the path of the application entry of each sub-application; In step 2.5, the main application switches to load each sub-application in the following manner: The main application hijacks the browser routing address URL. When the browser routing address URL changes, the path corresponding to the browser routing address URL determined in step 2.4 is matched to the application entry of the corresponding sub-application, and the corresponding sub-application is loaded according to the application entry; Step 2.6: For the loaded sub-application, the main application manages its entire life cycle from startup, mounting to destruction.

2. A micro-frontend implementation method based on multi-application integration according to claim 1, characterized in that: Step 2.6 is as follows: Expose relevant Hook functions during the lifecycle changes of sub-applications, and add additional functions to the corresponding hooks according to different business scenarios.

3. A micro-frontend implementation method based on multi-application integration according to claim 2, characterized in that: Step 2.6 more specifically includes: When the browser routing address URL changes, the routing jump is triggered. Menu authentication and user identity authentication are performed in the hook function before the routing jump. If the token has expired, it jumps to the login page to log in again. After the sub-application obtains certain data, it needs to make the data globally shared. At this time, the communication hook is used to pass the new payload and synchronously update the global state.

4. A micro-frontend implementation method based on multi-application integration according to claim 1, characterized in that: Sandbox isolation is used between each sub-application, as well as between the sub-application and the main application. Through sandbox isolation, each sub-application has an independent execution context scope.

5. The micro-frontend implementation method based on multi-application integration according to claim 1 is characterized in that: The main application has a sub-application status monitoring function, a sub-application status update function and a sub-application status removal monitoring function; The status of each sub-application is monitored through the sub-application status monitoring function; when the sub-application status changes, the sub-application status is updated through the sub-application status update function; when the sub-application is uninstalled, the sub-application status monitoring function and the sub-application status update function are moved through the sub-application status removal monitoring function to complete the resource release.

6. A micro-frontend implementation method based on multi-application integration according to claim 1, characterized in that: The global state sharing module is specifically used to: The main application stores the sub-application global states of all sub-applications, and shares the sub-application global states of all sub-applications with each sub-application through the global state sharing module.

Images