Granted Patent B2

US 12,608,251 · App. 17/962,218 · Granted Apr 21, 2026

Inventors: Siming Chen (Shenzhen, CN); Liangzhi Luo (Shenzhen, CN); Jiangsong Chen (Shenzhen, CN); Peng Jiang (Shenzhen, CN)

Assignee: TENCENT TECHNOLOGY (SHENZHEN) COMPANY LIMITED

G06F9/547G06F9/541G06F16/9566

Abstract

Claims (74)

1 . A micro-frontend system, comprising at least one memory and at least one processor, the at least one memory storing a computer program, and the at least one processor being configured to execute the computer program to implement:

a routing registration service, a command line tool, and a micro-frontend running framework, wherein

the routing registration service is configured to provide routing information of a sub-application, a loading manner of the sub-application, and deployment information of the sub-application for the micro-frontend running framework of a primary application, the routing registration service being a Node backend service, that is maintained and run independently of the primary application;

the command line tool is configured to provide a sub-application creation function, a sub-application access function, and a service registration function through a command line; and

the micro-frontend running framework is a framework running in the primary application and is configured to load and run, based on a network request, the sub-application and provide a multi-framework sub-application running ability.

2 . The micro-frontend system according to claim 1 , the micro-frontend system further comprising:

a frontend interface, corresponding to the routing registration service and configured to acquire sub-application registration information and transmit the sub-application registration information to the routing registration service, the sub-application registration information comprising: a sub-application framework, a sub-application routing mode and a sub-application loading mode;

the routing registration service being further configured to receive the sub-application registration information and register, based on the sub-application registration information, the sub-application.

3 . The micro-frontend system according to claim 1 , wherein

the command line tool is further configured to receive a sub-application creation command and acquire the routing information of the sub-application, resource information of the sub-application, and sub-application template information;

the command line tool is further configured to generate, based on the sub-application template information, a sub-application template, and transmit a sub-application creation request to the routing registration service, the sub-application creation request carrying the routing information and the resource information; and

the command line tool is further configured to transmit, to a deployment server, a sub-application deployment request including a sub-application resource address, upon which resource deployment is performed.

4 . The micro-frontend system according to claim 2 , wherein

the command line tool is further configured to receive a sub-application access command and acquire the routing information of the sub-application and resource information of the sub-application;

the command line tool is further configured to transmit a sub-application access request to the routing registration service, the sub-application access request carrying the routing information and the resource information of the sub-application;

the routing registration service is further configured to receive the sub-application access request and register, based on the routing information and the resource information of the sub-application, the sub-application.

5 . The micro-frontend system according to claim 1 , wherein

the micro-frontend running framework comprises: a basic function library module, a communication module, a unified routing module, a sub-application loading module, and a sub-application running module, wherein

the basic function library module is configured to provide a public method and a public component, and inject, by a global variable and a function, the public method and the public component into the sub-application for use by the sub-application;

the communication module is configured to support a communication mechanism from the primary application to the sub-application, a communication mechanism from the sub-application to the sub-application, and a communication mechanism from the sub-application to the primary application;

the unified routing module is configured to monitor a browser routing change;

the sub-application loading module is configured to acquire a sub-application resource address from the routing registration service and load a resource corresponding to the sub-application resource address; and

the sub-application running module is configured to run the resource corresponding to the sub-application resource address and render a sub-application page.

6 . The micro-frontend system according to claim 5 , wherein the communication mechanism from the primary application to the sub-application comprises Props transmission and Custom Event transmission; the communication mechanism from the sub-application to the sub-application comprises PostMessage transmission; the communication mechanism from the sub-application to the primary application comprises the Custom Event transmission; and

the sub-application loading module comprises modes for loading the sub-application, the modes comprising: a HyperText Markup Language (HTML) entity mode, a JS an entity mode, and an Iframe mode.

7 . The micro-frontend system according to claim 5 , wherein the micro-frontend running framework further comprises: a data management module, a performance monitoring module, an error handling module, wherein

the data management module is configured to provide a two-way data binding function by using data provided by a Props transmission mechanism;

the performance monitoring module is configured to monitor a loading duration and a running duration of the sub-application; and

the error handling module is configured to monitor and handle error information of the sub-application in the loading and running process.

8 . The micro-frontend system according to claim 5 , wherein

the sub-application loading module is further configured to parse a service code of the sub-application, and transmit the parsed service code to the sub-application running module; and

the sub-application running module comprises a runtime environment sandbox, in which the parsed service code runs.

9 . The micro-frontend system according to claim 8 , wherein the runtime environment sandbox comprises: a JS-sandbox, a cascading style sheet (CSS) sandbox, and a Web Worker sandbox.

10 . The micro-frontend system according to claim 9 , wherein the Web Worker sandbox is configured to perform inline running on a script file allocated to a Web Worker and execute cross-domain invocation on the Web Worker.

11 . The micro-frontend system according to claim 1 , wherein the micro-frontend system further comprises a server that supports cross-domain resource sharing.

12 . A sub-application loading method, the method being executed by an electronic device that is configured as a micro-frontend system comprising at least one memory and at least one processor, the at least one memory storing a computer program, and the at least one processor being configured to execute the computer program to implement: a routing registration service, a sub-application loading module and a sub-application running module; the method comprising:

acquiring a network access request, the network access request carrying a uniform resource locator (URL) address of a page to be accessed;

pulling corresponding routing information from the routing registration service based on the URL address;

acquiring, by the sub-application loading module based on the routing information, a sub-application resource corresponding to the routing information from the routing registration service based on a determination that, based on the routing information, the page to be accessed is a page of a sub-application;

loading, by the sub-application loading module, the sub-application resource; and

running, by the sub-application running module, the sub-application resource, and rendering the page of the sub-application,

wherein

the routing registration service is configured to provide routing information of a sub-application, a loading manner of the sub-application, and deployment information of the sub-application for the micro-frontend running framework of a primary application, the routing registration service being a Node backend service, that is maintained and run independently of the primary application;

the command line tool is configured to provide a sub-application creation function, a sub-application access function, and a service registration function through a command line; and

the micro-frontend running framework is a framework running in the primary application and is configured to load and run, based on a network request, the sub-application and provide a multi-framework sub-application running ability.

13 . The method according to claim 12 , wherein the loading comprises:

loading the sub-application resource based on a determination that the sub-application resource is not preloaded and not opened.

14 . The method according to claim 12 , further comprising:

acquiring sub-application registration information, and transmitting the sub-application registration information to the routing registration service, the sub-application registration information comprising: a sub-application framework, a sub-application routing mode, and a sub-application loading mode; and

receiving, by the routing registration service, the sub-application registration information, and registering, based on the sub-application registration information, the sub-application.

15 . The method according to claim 14 , wherein the acquiring the sub-application registration information comprises:

acquiring an inputting operation for sub-application registration, by a frontend interface corresponding to the routing registration service, or by a command line tool, which receives a sub-application creation command and acquires the routing information of the sub-application, resource information of the sub-application, and sub-application template information; and

determining the sub-application registration information based on the inputting operation.

16 . The method according to claim 12 , wherein the loading the sub-application resource comprises:

acquiring a framework identifier and a resource loading type of the sub-application; and

loading, according to the resource loading type, the sub-application resource in a sub-application framework corresponding to the framework identifier.

17 . The method according to claim 12 , further comprising:

based on a determination that, based on the routing information, the page to be accessed is a page of a primary application, determining a currently mounted sub-application of the primary application according to a life cycle;

determining a target sub-application to be rendered from the currently mounted sub-application;

simulating, based on an exposed loading function and the target sub-application, routing switching, and acquiring a sub-application resource and a primary application resource of the target sub-application; and

loading and running the sub-application resource and the primary application resource, and rendering the sub-application in a rendered page of the primary application.

18 . A non-transitory computer readable storage medium, storing executable instructions, the executable instructions, when executed by a processor, implementing a sub-application loading method and included in a micro-frontend system, the micro-frontend system comprising: a routing registration service, a sub-application loading module and a sub-application running module, the method comprising: =

acquiring a network access request, the network access request carrying a uniform resource locator (URL) address of a page to be accessed;

pulling corresponding routing information from the routing registration service based on the URL address;

acquiring, by the sub-application loading module based on the routing information, a sub-application resource corresponding to the routing information from the routing registration service based on a determination that, based on the routing information, the page to be accessed is a page of a sub-application;

loading, by the sub-application loading module, the sub-application resource; and

running, by the sub-application running module, the sub-application resource, and rendering the page of the sub-application,

wherein

the routing registration service is configured to provide routing information of a sub-application, a loading manner of the sub-application, and deployment information of the sub-application for the micro-frontend running framework of a primary application, the routing registration service being a Node backend service, that is maintained and run independently of the primary application;

the command line tool is configured to provide a sub-application creation function, a sub-application access function, and a service registration function through a command line; and

the micro-frontend running framework is a framework running in the primary application and is configured to load and run, based on a network request, the sub-application and provide a multi-framework sub-application running ability.

19 . The computer readable storage medium according to claim 18 , wherein the method further comprises:

acquiring sub-application registration information, and transmitting the sub-application registration information to the routing registration service, the sub-application registration information comprising: a sub-application framework, a sub-application routing mode, and a sub-application loading mode; and

receiving, by the routing registration service, the sub-application registration information, and registering, based on the sub-application registration information, the sub-application.

Assignments (2)

Priority Claims (1)

Continuity (2)

References Cited (13)