Sub-application operation method, electronic device and storage medium based on micro-frontend architecture

Abstract

The present application discloses a sub-application operation method based on a micro-frontend architecture, an electronic device, and a storage medium, and relates to the field of Internet technology. First, an entry component for a sub-application running in a main application is constructed, and first, in response to a trigger request for loading a sub-application, the main application resources are obtained, and then the entry component is used to execute the sub-application resource list according to the entry address to obtain the sub-application resources, and finally, the entry component is used to create a sandbox for the sub-application, and the sub-application resources are injected into the sandbox to load the sub-application. The sub-application operation method, electronic device, and storage medium based on a micro-frontend architecture provided by the present application have the advantages of loading sub-applications built in more scripting languages, faster loading speed, and more convenient loading.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a method, electronic device and storage medium for running a sub-application based on a micro-front-end architecture. Background Art

[0002] With the rapid development of the Internet industry, the complexity of application projects has increased dramatically, and business needs have become increasingly complex. In order to improve development efficiency, the front-end and back-end separation architecture has gradually become popular, and the front-end and back-end development, construction, deployment and operation processes are all run independently.

[0003] With the rise of front-end engineering, the size of front-end applications is getting bigger and bigger. Therefore, the micro-front-end technology architecture is proposed. As a recent new architecture, micro-front-end transforms large applications into multiple smaller and simpler aggregations of small applications that can be independently developed, tested, and deployed.

[0004] The currently known implementation solutions of micro-frontend architecture can be implemented based on micro-frontend frameworks such as singleSPA and Qiankun.

[0005] However, current micro-frontend frameworks such as singleSPA and Qiankun may not support building sub-applications using modules built in certain scripting languages.

[0006] At the same time, the current micro-frontend frameworks such as singleSPA and Qiankun need to be loaded synchronously with the main application framework, which may affect the storage space size and loading speed of the main application.

[0007] In addition, current micro-frontend frameworks such as singleSPA and Qiankun may require and control the life cycle of sub-applications, and the access of sub-applications requires specific pre-configuration to perceive different operating scenarios to start or otherwise operate sub-applications.

[0008] The content of this background technology description is only for facilitating understanding of the relevant technology in this field and is not regarded as an admission of the prior art. Summary of the invention

[0009] Therefore, the purpose of the present invention is to provide a sub-application operation, electronic device and storage medium based on a micro-front-end architecture to solve the problem of many limitations in the prior art when loading sub-applications in the micro-front-end framework.

[0010] In a first aspect, an embodiment of the present application provides a sub-application running method based on a micro-frontend architecture, comprising:

[0011] Build entry components for sub-applications that run in the main application;

[0012] Responding to a trigger request to load the sub-application, obtaining a main application resource;

[0013] Parsing the main application resources to obtain a list of executable sub-application resources;

[0014] Load the entry component and obtain the entry address of the sub-application;

[0015] Utilizing the entry component to execute the sub-application resource list according to the entry address to obtain sub-application resources;

[0016] A sandbox for the sub-application is created using the entry component, and the sub-application resources are injected into the sandbox to load the sub-application.

[0017] Optionally, the sub-application is a sub-application implemented based on ES modules.

[0018] Optionally, creating a sandbox for the sub-application includes:

[0019] A window proxy for the sandbox is created, and the window proxy connects the window object of the main application and the sandbox.

[0020] Optionally, the method further comprises:

[0021] In response to a request by the sub-application to access a first target variable, determining whether the first target variable exists in the sandbox;

[0022] If so, sending the first target variable in the sandbox to the sub-application;

[0023] If not, the first target variable in the main application window object is sent to the sub-application through the window proxy.

[0024] Optionally, the method further comprises:

[0025] In response to a request from the sub-application to set a second target variable, determining whether the second target variable exists in the sandbox;

[0026] If yes, setting the second target variable in the sandbox;

[0027] If not, determining through the window agent whether the second target variable in the main application window object is settable;

[0028] If yes, setting the second target variable in the main application window object through the window proxy;

[0029] If not, the second target variable in the main application window object remains unchanged.

[0030] Optionally, the method further comprises:

[0031] In response to a trigger request to uninstall the sub-application, the entry component is uninstalled to uninstall the sub-application.

[0032] Optionally, the step of constructing an entry component of a sub-application to be run in a main application includes:

[0033] defining a first function and a second function for the sub-application;

[0034] The method further comprises:

[0035] After the sub-application is loaded, recording an operation of the sub-application executing the first function;

[0036] The step of uninstalling the entry component in response to the triggering request to uninstall the sub-application, so as to uninstall the sub-application, comprises:

[0037] The operation of the first function executed by the sub-application is cleared.

[0038] Optionally, the method further comprises:

[0039] After the sub-application is loaded, recording an operation of the sub-application executing the second function and an operation on the sandbox;

[0040] The step of uninstalling the entry component in response to the triggering request to uninstall the sub-application, so as to uninstall the sub-application, further includes:

[0041] The operation of the second function executed by the sub-application and the operation of the sandbox are retained.

[0042] In a second aspect, the embodiment of the present application further provides a sub-application running device based on a micro-frontend architecture, including:

[0043] A processing unit for building an entry component of a sub-application to be run in the main application;

[0044] An entry component loading unit, configured to obtain the main application resources in response to a trigger request for loading the sub-application;

[0045] A resource parsing unit, used to parse the main application resources to obtain an executable sub-application resource list;

[0046] The entry component loading unit is also used to load the entry component and obtain the entry address of the sub-application;

[0047] A processing unit, configured to utilize the entry component to execute the sub-application resource list according to the entry address to obtain sub-application resources;

[0048] The processing unit is further used to create a sandbox for the sub-application using the entry component, and inject the sub-application resources into the sandbox to load the sub-application.

[0049] In a third aspect, the embodiment of the present application further provides a sub-application operation method based on a micro-frontend architecture, including:

[0050] Construct a first entry component of a first sub-application for running in a main application;

[0051] Building a second entry component for a second sub-application running in the main application;

[0052] In response to a trigger request to switch from the first sub-application to the second sub-application, obtaining main application resources, and uninstalling the first entry component to uninstall the first sub-application;

[0053] Parsing the main application resources to obtain a list of executable second sub-application resources;

[0054] Load the second entry component and obtain the entry address of the second sub-application;

[0055] Utilizing the second entry component to execute the second sub-application resource list according to the entry address to obtain a second sub-application resource;

[0056] A second sandbox for the second sub-application is created using the second entry component, and the second sub-application resources are injected into the second sandbox to load the second sub-application.

[0057] Optionally, the step of constructing a first entry component of a first sub-application to be run in a main application includes:

[0058] defining a first function and a second function for the first sub-application;

[0059] The step of uninstalling the first entry component to uninstall the first sub-application includes:

[0060] Clear operations of the first function executed by the first sub-application.

[0061] Optionally, the first sub-application and the second sub-application are sub-applications implemented based on ES modules.

[0062] In a fourth aspect, the embodiment of the present application further provides a sub-application running device based on a micro-frontend architecture, including:

[0063] An entry component building unit, used to build a first entry component of a first sub-application for running in a main application;

[0064] The entry component construction unit is further used to construct a second entry component of a second sub-application for running in the main application;

[0065] A processing unit, configured to, in response to a trigger request to switch from the first sub-application to the second sub-application, obtain a main application resource, and uninstall the first entry component to uninstall the first sub-application;

[0066] A resource parsing unit, configured to parse the main application resources to obtain a list of executable second sub-application resources;

[0067] A processing unit, configured to load the second entry component and obtain an entry address of the second sub-application;

[0068] A processing unit, configured to execute the second sub-application resource list according to the entry address using the second entry component to obtain a second sub-application resource;

[0069] The processing unit is also used to use the second entry component to create a second sandbox for the second sub-application, and inject the second sub-application resources into the second sandbox to load the second sub-application.

[0070] In a fifth aspect, an embodiment of the present application further provides an electronic device, comprising: a processor and a memory storing a computer program, wherein the processor is configured to execute the above-mentioned sub-application running method based on the micro-front-end architecture when running the computer program.

[0071] In a sixth aspect, an embodiment of the present application further provides a storage medium, wherein the storage medium stores a computer program, and the computer program is configured to execute the above-mentioned sub-application operation method based on the micro-front-end architecture when being run.

[0072] The present application provides a sub-application operation method, electronic device and storage medium based on a micro-frontend architecture, constructs an entry component for a sub-application running in a main application, first responds to a trigger request for loading a sub-application, obtains the main application resources, then parses the main application resources to obtain an executable sub-application resource list, then loads the entry component, and obtains the entry address of the sub-application, and then uses the entry component to execute the sub-application resource list according to the entry address to obtain the sub-application resource, and finally uses the entry component to create a sandbox for the sub-application, and injects the sub-application resource into the sandbox to load the sub-application. Since the present application uses the entry component to load the sub-application, the URL monitoring of the Qiankun system is avoided, so the loading of the sub-application is more flexible. At the same time, since the entry component is loaded according to the trigger request of the sub-application, each sub-application can correspond to an entry component, asynchronous loading can be achieved, and the loading speed is faster. In addition, since the entry component provided in the present application corresponds to the sub-application, there is no need to master the life cycle of the sub-application and the matching path in advance, and the sub-application loading is more convenient.

[0073] Optional features and other effects of the embodiments of the present invention are partially described below and partially understood by reading this document. BRIEF DESCRIPTION OF THE DRAWINGS

[0074] The embodiments of the present invention are described in detail with reference to the accompanying drawings. The elements shown are not limited by the proportions shown in the accompanying drawings. The same or similar reference numerals in the accompanying drawings represent the same or similar elements, wherein:

[0075] Figure 1 A module diagram of the scheduling scheme of the Qiankun micro-frontend framework is shown;

[0076] Figure 2 A first exemplary flow chart of a sub-application running method based on a micro-frontend architecture provided according to an embodiment of the present invention is shown;

[0077] Figure 3 A module schematic diagram of using an entry component to load a sub-application based on an ES module according to an embodiment of the present invention is shown;

[0078] Figure 4 A second exemplary flow chart of a sub-application running method based on a micro-frontend architecture provided according to an embodiment of the present invention is shown;

[0079] Figure 5 A third exemplary flow chart of a sub-application running method based on a micro-frontend architecture provided according to an embodiment of the present invention is shown;

[0080] Figure 6 A first interaction schematic diagram of a sandbox executing a sub-application provided in an embodiment of the present invention is shown;

[0081] Figure 7 A second interaction schematic diagram of a sandbox execution sub-application provided according to an embodiment of the present invention is shown;

[0082] Figure 8 A third interaction schematic diagram of a sandbox execution sub-application provided according to an embodiment of the present invention is shown;

[0083] Fig. 9 A third exemplary flow chart of a sub-application running method based on a micro-frontend architecture provided according to an embodiment of the present invention is shown;

[0084] Fig.10 A fourth exemplary flow chart of a sub-application running method based on a micro-frontend architecture provided according to an embodiment of the present invention is shown;

[0085] Fig.11 A fifth exemplary flow chart of a sub-application running method based on a micro-frontend architecture provided according to an embodiment of the present invention is shown;

[0086] Fig.12 An exemplary interface diagram of a sub-application running method provided according to an embodiment of the present invention is shown.

[0087] Fig.13 Another exemplary interface diagram of the sub-application running method provided according to an embodiment of the present invention is shown.

[0088] Fig.14 A module schematic diagram of a sub-application running device based on a micro-frontend architecture provided according to an embodiment of the present invention is shown.

[0089] Fig.15 A sixth exemplary flow chart of a sub-application running method based on a micro-frontend architecture provided according to an embodiment of the present invention is shown;

[0090] Fig.16 An exemplary hardware structure diagram of a mobile terminal capable of implementing a sub-application running method based on a micro-frontend architecture according to an embodiment of the present invention is shown;

[0091] Fig.17 A schematic diagram of an exemplary operating system structure of a mobile terminal capable of implementing a sub-application running method based on a micro-frontend architecture according to an embodiment of the present invention is shown;

[0092] Fig.18 A schematic diagram of an exemplary operating system structure of a mobile terminal capable of implementing a sub-application running method based on a micro-frontend architecture according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0093] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with specific implementation methods and drawings. Here, the exemplary implementation methods of the present invention and their descriptions are used to explain the present invention, but are not intended to limit the present invention.

[0094] Micro frontend is a microservice-like architecture that applies the concept of microservice to the browser side, that is, transforming the single-page frontend application from a single monolithic application to an application that aggregates multiple small frontend applications. Each frontend application can also be developed and deployed independently. The mainstream micro frontend solutions on the market include Qiankun and singleSPA, among which Qiankun's access method is the simplest.

[0095] Qiankun system is a micro-frontend framework for secondary development based on single-spa, which is used to transform a Web application from a single monolithic application to an application that aggregates multiple small frontend applications. It should be noted that when using Qiankun system to load applications, it is necessary to distinguish between the main application and the sub-application. The main application is the application that governs each sub-application, that is, the merged result page, responsible for the registration of sub-applications, routing distribution, etc. The sub-application is each SPA application, that is, the page component in SPA (single page web application), and the sub-application is mainly responsible for exposing some functions to connect to the main application.

[0096] Figure 1 The scheduling scheme of the Qiankun system when loading sub-applications is shown. First, the base framework of the Qiankun system needs to actively monitor the URL changes in real time to implement the operation of the sub-application. For example, as shown in the figure, switching from sub-application A to B, that is, from path \Aapp to path \Bapp; or operations in sub-application A, such as \Aapp to \Aapp\xxxx. However, as described in the background technology, the Qiankun system may not currently support the use of certain scripting language building modules to build sub-applications. For example, the Qiankun system cannot implement the loading of sub-applications of ES (ECMAScript) modules. The main reason is that ES applications have import and exports keywords, and these two keywords stipulate that they must be executed at the top level of the code and cannot be wrapped. However, the Qiankun system uses import-html-entry to load sub-applications. When using the eval loop to execute the sub-application resource list, an IIFE function is used to execute the sub-application code. The sub-application resources loaded in this way will be wrapped and run once by the Qiankun system, which contradicts the nature that ES applications cannot be wrapped. Therefore, the Qiankun system cannot be used to load ES applications.

[0097] In addition, the Qiankun system uses a scheduling scheme to monitor changes in URLs and then switch sub-applications according to the corresponding configuration rules. However, with this scheduling method, the micro-frontend framework needs to be loaded synchronously with the main application framework, which may affect the storage space size and loading speed of the main application.

[0098] In addition, the micro-frontend framework based on the Qiankun system may need and control the life cycle of the sub-application, and the access of the sub-application requires specific pre-configuration, and perceives different operating scenarios to start or operate the sub-application in other ways. In summary, the existing technology of using the Qiankun system to load sub-applications has at least the following problems:

[0099] 1. The current Qiankun system does not support the loading of sub-applications based on ES modules.

[0100] 2. The Qiankun system has the problem of affecting the size of the main application. Because the data package itself is relatively large, it will affect the loading speed of the main application.

[0101] 3. The Qiankun system requires and controls the life cycle of sub-applications, so sub-applications need to be pre-configured when connected and need to perceive different operating scenarios to start or perform other operations.

[0102] In view of this, in order to solve the above problems, the present application provides a sub-application running method based on a micro-front-end architecture, which enables a more simplified loading of sub-applications based on ES modules by building corresponding components for each sub-application.

[0103] The following is an exemplary description of the sub-application operation method based on the micro-frontend architecture provided by this application:

[0104] As an implementation, see Figure 2 , the sub-application running method based on the micro-frontend architecture includes:

[0105] S102, constructing an entry component of a sub-application for running in a main application.

[0106] S104, in response to a trigger request for loading a sub-application, obtaining main application resources.

[0107] S106, parsing the main application resources to obtain a list of executable sub-application resources.

[0108] S108, load the entry component and obtain the entry address of the sub-application.

[0109] S110, using the entry component to execute the sub-application resource list according to the entry address to obtain the sub-application resources.

[0110] S112, using the entry component to create a sandbox for the sub-application, and injecting the sub-application resources into the sandbox to load the sub-application.

[0111] In the embodiment of the present invention, the main application may include a main frame, a browser main frame, etc. The entry component may include a Web component, which is an entity that encapsulates Web data and methods.

[0112] Since this application uses the entry component to load the sub-application, avoiding the URL monitoring of the Qiankun system, the loading of the sub-application can be made more flexible.

[0113] In addition, the present application adopts the method of loading sub-applications constructed in different scripting languages ​​through the entry component, for example, loading sub-applications based on ES modules. On this basis, as an implementation method, the sub-application described in the present application can be a sub-application implemented based on ES modules.

[0114] It should be noted that ES modules are a mechanism for reusing JavaScript code, and ES modules are mainly used in browsers. In an embodiment of the present invention, a sub-application based on an ES module means a sub-function built using an ES module, which may also be referred to as an ES sub-application in this article. Of course, by using the entry component provided by this application for loading, sub-applications built in other scripting languages ​​can also be loaded, such as loading a sub-application after conversion using a CommonJS module through a build tool.

[0115] As an implementation, each ES module-based sub-application has a corresponding entry component to load it. For example, see Figure 3 , when there are sub-application A based on ES modules and sub-application B based on ES modules, the entry component includes entry component A and entry component B. Entry component A can be used to load sub-application A based on ES modules, and entry component B can be used to load sub-application B based on ES modules, and so on. Through this implementation method, there is essentially no need to modify the sub-application based on ES modules, thereby simplifying the access method and making it more convenient to load sub-applications based on ES modules. Of course, by using the entry component to load sub-applications based on ES modules, asynchronous loading of micro-frontend frameworks and sub-applications can be supported. For example, sub-application A based on ES modules can be loaded using entry component A, while sub-application B based on ES modules can be loaded using entry component B, and the two do not affect each other.

[0116] Therefore, when a trigger request of a sub-application is detected, the corresponding entry component can be loaded according to the request, and the main application resource can be obtained. Among them, the main application resource described in the present application includes a hypertext markup language (HTML) resource, and the full name of HTML is hypertext markup language, which is a markup language. It includes a series of tags. Through these tags, the document format on the network can be unified, so that the scattered Internet resources can be connected into a logical whole. HTML text is a descriptive text composed of HTML commands, and HTML commands can describe text, graphics, animations, sounds, tables, links, etc. After obtaining the HTML file, the corresponding entry component is loaded, and after parsing the HTML resource, the executable sub-application resource list is obtained, and the corresponding sub-application resource list is loaded using the entry component, and then the corresponding sub-application resource is obtained. In an embodiment of the present invention, the sub-application resource list may include an executable Javascript (JS) list, wherein the JS list is a Javascript array, and the list is a set of ordered data, and the data items in each list are called elements. In JavaScript, the elements in the list can be any data type. In an embodiment of the present invention, the sub-application resource list may include an executable CSS list. Accordingly, the sub-application resource may include JS resources and / or CSS resources.

[0117] As an implementation, when obtaining a sub-application resource list, the corresponding sub-application resource list is obtained. For example, when it is determined that entry component A and entry component B need to be loaded based on the content of the HTML file, after parsing the HTML resource, an executable sub-application resource list including sub-application A and sub-application B is obtained, and sub-application A is loaded using entry component A, and sub-application B is loaded using entry component B. As another implementation, when obtaining a sub-application resource list, more sub-application resource lists may also be obtained. For example, when it is determined that entry component A and entry component B need to be loaded based on the content of the HTML file, after parsing the HTML resource, an executable sub-application resource list including sub-application A, sub-application B, sub-application C, and sub-application D is obtained. At this time, sub-application A is loaded using entry component A, and sub-application B is loaded using entry component B.

[0118] It should be noted that after determining the sub-application resource list, this application uses the entry address method to determine the corresponding sub-application resources, that is, after loading the entry component, first obtain the entry address of the sub-application, and then use the entry component to execute the sub-application resource list according to the entry address, and then obtain the corresponding sub-application resources.

[0119] After obtaining the sub-application resources, the relevant instructions to be executed are obtained. On this basis, when the sub-application needs to access or set global variables, in order to avoid affecting other applications, the sandbox can be set, and the provided sandbox can be accessed and set. Therefore, after obtaining the sub-application resources, the entry component will be used to create a sandbox for the corresponding sub-application, and the sub-application resources will be injected into the sandbox to achieve the purpose of loading the sub-application.

[0120] It should be noted that the sandbox can be constructed as a proxy of the main application, such as a browser window object. Therefore, by setting up the sandbox, on the one hand, it is possible to prevent the sub-application based on the ES module from directly accessing the main application, such as the browser window object; on the other hand, it is also possible to avoid affecting other applications. At the same time, by using the sandbox to load the sub-application based on the ES module, the sandbox can record the execution data related to the sub-application based on the ES module, and the execution data is the execution result of the sub-application based on the ES module, so that when the system executes different sub-applications based on the ES module, it can directly call the execution data of the sandbox, thereby realizing the loading of the sub-application based on the ES module.

[0121] Optionally, see Figure 4 , S112 includes:

[0122] S112′: Create a window proxy for the sandbox, which connects the window object of the main application and the sandbox.

[0123] Among them, the window proxy is the middleware used to connect the sandbox and the main application. By creating the window proxy, the sub-application can access and set global variables. As an implementation method, the window proxy can be composed of sandboxes. In an optional implementation method, each sub-application based on the ES module requires a sandbox for loading. For example, when loading the sub-application A based on the ES module, the entry component A needs to create a new sandbox A, and then use sandbox A to run the sub-application A based on the ES module; and when loading the sub-application B based on the ES module, it is necessary to create a new sandbox B, and then use sandbox B to run the sub-application B based on the ES module.

[0124] Among them, when loading a sub-application based on an ES module, the sandbox is used to execute the parsed sub-application resources, and the execution methods include but are not limited to calling, changing, and creating new functions in the sandbox.

[0125] As an implementation, see Figure 5 After S112, that is, after the sub-application is loaded, the method further includes:

[0126] S114, in response to the request of the sub-application to access the first target variable, determine whether the first target variable exists in the sandbox, if yes, execute S116; if not, execute S118.

[0127] S116: Send the first target variable in the sandbox to the sub-application.

[0128] S118, sending the first target variable in the main application window object to the sub-application through the window proxy.

[0129] The target variable described in this application involves a global vector, that is, a vector at the main application framework, such as a browser level. When a sub-application issues a request to access the first target variable, the value in the sandbox is obtained first. If the value does not exist in the sandbox, it is obtained from the main application window object.

[0130] For example, see Figure 6 When the ES module-based sub-application A accesses the first target variable (value) a, if the first target variable a exists in the sandbox, the sandbox will feed the first target variable a back to the ES module-based sub-application A. Correspondingly, when the ES module-based sub-application A accesses another first target variable (value) b, if the first target variable b does not exist in the sandbox, it is necessary to obtain the corresponding first target variable b from the main application window object and send the first target variable b to the ES module-based sub-application.

[0131] Optionally, in one implementation, see Figure 7 When executing the above method, the sub-application A based on the ES module first sends an access request, which includes the need to access the first target variable a and the first target variable b. After receiving the access request, it checks whether the first target variable a and the first target variable b exist in the sandbox. If only the first target variable a exists, the first target variable a is sent to the sub-application A based on the ES module, and the information of the first target variable b is sent to the sub-application A based on the ES module. After receiving the information, the sub-application A based on the ES module continues to send an access request to the main application window object to access the first target variable b, and the main application window object then sends the first target variable b to the sub-application A based on the ES module, thereby realizing the access to the first target variable a and the first target variable b.

[0132] As another implementation, see Figure 8When executing the above method, the sub-application A based on the ES module first issues an access request, and the access request includes the need to access the first target variable a and the first target variable b. After receiving the access request, the sandbox checks whether the first target variable a and the first target variable b exist in the sandbox. If only the first target variable a exists, the sandbox issues an access request to the main application window object, and the access request only needs to access the first target variable b. On this basis, the main application window object will send the first target variable to the sandbox. At this time, the first target variables a and b exist in the sandbox at the same time, and the first target variables a and b are sent to the sub-application based on the ES module at the same time, thereby realizing access to the first target variable a and the first target variable b.

[0133] Optionally, see Fig. 9 After S112, the method further includes:

[0134] S120 , in response to the sub-application's request to set the second target variable, determine whether the second target variable exists in the sandbox, if yes, execute S122 , if not, execute S124 .

[0135] S122, setting the second target variable in the sandbox.

[0136] S124, determining through the window agent whether the second target variable in the main application window object is settable, if yes, executing S126, if not, executing S128.

[0137] S126, setting a second target variable in the main application window object through the window proxy;

[0138] S128, keeping the second target variable in the main application window object unchanged.

[0139] The request for setting the second target variable of the sandbox described in the present application refers to operations such as changing, setting or deleting the second target variable, for example, changing parameters in certain functions.

[0140] It should be noted that when setting the second target variable, some global variables cannot be changed. If they are changed, it may cause failures.

[0141] On this basis, when the sandbox receives a change request, for example, when a second target variable (value) is to be modified, such as changing the global variable value x to the global variable value y, first determine whether the global variable x exists in the sandbox. If so, change the global variable value x in the sandbox to the global variable value y. If not, optionally change the global variable value x in the main application window object. At this time, it is necessary to first determine whether the global variable value x in the main application window object can be changed. If it can be changed, change the global variable value x in the main application window object to the global variable value y. If it cannot be changed, keep the second target variable in the main application window object unchanged.

[0142] It can be understood that the changes described in this application include setting a certain parameter. For example, a parameter in the sandbox does not have a value. The sub-application based on the ES module can set the value. Before that, the sandbox needs to determine whether the value can be set. This is not limited here.

[0143] Here, it should be noted that the sub-application running method based on the micro-frontend architecture provided in this application can not only realize the loading of the sub-application, but also realize the unloading of the sub-application. On this basis, after S102, please refer to Fig.10 , the method further comprises:

[0144] S103, in response to a trigger request for uninstalling the sub-application, uninstall the entry component to uninstall the sub-application.

[0145] That is, in the present application, when a request to load or unload an entry component is received, the entry component is loaded or unloaded according to the request. Specifically, by obtaining and parsing the HTML file, decide whether to load or no longer load (can also be interpreted as unloading in the embodiment of the present application) the corresponding component according to the content of the file. For example, when it is parsed that the current HTML file has an entry component A and sub-application A has not been running before, it is necessary to use entry component A to load sub-application A. For another example, when it is parsed that the current HTML file does not have an entry component B, that is, entry component B is no longer loaded (can also be interpreted as unloading entry component B in the embodiment of the present application), and sub-application B was running before, sub-application B is also uninstalled accordingly.

[0146] In actual applications, operations on HTML (such as retrieval or click) may also cause the sub-application to be loaded or not loaded (unloaded) accordingly.

[0147] It should be noted that, during the operation of the browser, the page can be actively or passively refreshed in real time, thereby enabling the HTML file to be obtained in real time and the entry component to be loaded or unloaded accordingly.

[0148] In the embodiment of the present invention, when the entry component is uninstalled, in order to prevent the influence of the side effect function, the side effect function is preferably cleared. It should also be noted that there is no strict sequence between S103 and S104-S110 in the present application.

[0149] On this basis, see Fig.11 , S102 includes:

[0150] A first function and a second function for the sub-application are defined.

[0151] The method further includes:

[0152] After the sub-application is loaded, recording the operation of the sub-application executing the first function;

[0153] S103 includes:

[0154] S103 ′: In response to the triggering request for uninstalling the sub-application, clear the operation of the first function executed by the sub-application.

[0155] In an embodiment of the present invention, the first function described in this application may be a side effect function, and the second function may be a non-side effect function. The side effect function described in this application refers to a function whose continued execution will have adverse consequences on the operation of the main application and / or other sub-applications after the corresponding sub-application is uninstalled. Therefore, the first function includes global methods on the window object (window), such as timers and global events for scroll monitoring. These functions need to be cleaned up and restored when the sub-application is switched. The second function refers to a function that, in addition to the return value, will also make changes to the global variables (sandbox operations) when the function is called. These operations are retained in the sandbox when the sub-application is switched.

[0156] It should be noted that the side effect function described in this application may include a global or non-global function called by a sub-application, which is not limited here. In a specific example, the side effect function is, for example, one or more timers (functions) created by the sub-application, such as one or more global or non-global timers (functions), preferably non-global timers (functions).

[0157] In addition, in an optional implementation, it is possible to define which functions or which function types belong to the first function, ie, the side effect function, when constructing the entry component.

[0158] Based on this, the method further includes:

[0159] Determines the type of the ES module-based sub-application.

[0160] When the type of the ES module-based sub-application is the target type, clear the side effect functions associated with the ES module-based sub-application.

[0161] When using the entry component to load the sub-application based on the ES module, the type of the sub-application based on the ES module can be determined. Different types of sub-applications based on the ES module may correspond to different side effect functions. On this basis, it can be determined that when the type of the sub-application based on the ES module is the target type, all operations of the side effect function associated with the sub-application based on the ES module are cleared. On this basis, when executing the sub-application, the execution data of the sub-application is also recorded, and after writing the sub-application, the related operations of the sub-application are cleared, that is, the operations of the sub-application executing the corresponding side effect function are cleared.

[0162] Of course, for the sub-application to perform normal functions, there is no need to clear. Optionally, the method further includes:

[0163] After the sub-application is loaded, operations of the sub-application in executing the second function and operations on the sandbox are recorded.

[0164] S103, retaining the operation of the second function executed by the sub-application and the operation on the sandbox.

[0165] That is, during the running process, after uninstalling the sub-application, the operations on the side effect function will be cleared, while the operations on the normal function will be retained.

[0166] By selectively clearing side-effect functions and retaining non-side-effect functions, sub-applications can be loaded and unloaded extremely quickly without causing abnormal operation of the main application and / or other sub-applications.

[0167] For ease of understanding, this application is explained with practical examples. Fig.12 and Fig.13 , assuming that recommended songs and recommended playlists belong to different sub-applications and have different icons on the main application interface. In one implementation, different songs in the recommended songs also belong to different sub-applications. When the user refreshes the page, or the page is passively refreshed at a fixed time, the system can determine whether to load or unload the corresponding sub-application based on the HTML file.

[0168] Based on the above implementation, please refer to Fig.14 The present application also provides a sub-application running device 200 based on a micro-frontend architecture, and the sub-application running device 200 based on a micro-frontend architecture includes:

[0169] The entry component loading unit 210 is used to obtain the main application resources and load the entry component in response to a trigger request for loading a sub-application.

[0170] It can be understood that the above S102 can be executed by the entry component construction unit 210.

[0171] The processing unit 240 is used to obtain the main application resources in response to the trigger request for loading the sub-application;

[0172] It can be understood that the above S104 can be executed by the processing unit 240.

[0173] The resource parsing unit 230 is used to parse the main application resources to obtain a list of executable sub-application resources;

[0174] It can be understood that the above S106 can be executed by the resource parsing unit 230 .

[0175] The entry component loading unit 220 is also used to load the entry component and obtain the entry address of the sub-application.

[0176] It can be understood that the above S108 can be executed through the entry component loading unit 220.

[0177] A processing unit 240 is used to execute the sub-application resource list according to the entry address using the entry component to obtain the sub-application resource;

[0178] It can be understood that the above S110 can be executed by the processing unit 240 .

[0179] The processing unit 240 is further configured to create a sandbox for the sub-application using the entry component, and inject the sub-application resources into the sandbox to load the sub-application.

[0180] It can be understood that the above S112 can be executed by the processing unit 240.

[0181] Of course, each step of the above embodiment is executed by a corresponding functional module, which will not be described in detail here.

[0182] Based on the above implementation, please refer to Fig.15 , the present application also provides another sub-application running method based on the micro-frontend architecture, the method comprising:

[0183] S202, construct a first entry component of a first sub-application for running in a main application.

[0184] S204, construct a second entry component for a second sub-application running in the main application.

[0185] S206, in response to a trigger request to switch from the first sub-application to the second sub-application, obtain the main application resources, and uninstall the first entry component to uninstall the first sub-application.

[0186] S208, parsing the main application resources to obtain a list of executable second sub-application resources.

[0187] S210, load the second entry component and obtain the entry address of the second sub-application.

[0188] S212: Utilize the second entry component to execute the second sub-application resource list according to the entry address to obtain the second sub-application resource.

[0189] S214, using the second entry component to create a second sandbox for the second sub-application, and injecting the second sub-application resources into the second sandbox to load the second sub-application.

[0190] Different from the above implementation, in this embodiment, some sub-applications can be uninstalled while another part of sub-applications can be loaded, and the two do not affect each other, thus realizing asynchronous loading.

[0191] Of course, S202 includes:

[0192] A first function and a second function for a first sub-application are defined.

[0193] S206 includes:

[0194] Clear the operation of the first function executed by the first sub-application.

[0195] This embodiment of the present invention implements scheduling between different sub-applications, such as switching from a first sub-application to a second sub-application (i.e., uninstalling the first sub-application and loading the second sub-application). Compared with the sub-application scheduling implemented by the Qiankun architecture, there is no need to monitor changes in the URL.

[0196] Since the above embodiment has already described the loading and unloading of the sub-application in detail, this embodiment will not describe it in detail.

[0197] Through the sub-application operation method based on the micro-frontend architecture provided by this application, on the one hand, it is possible to load sub-applications based on ES modules, and the application scenarios are wider. At the same time, sub-applications do not need to be adapted according to the operation scenarios, which reduces the access cost of sub-applications, and are used in the form of components, without the need to configure rules in advance, which is more flexible. Understandably, this application splits a super-large application into multiple applications, deploys them independently, and the products are not separated during development and maintenance, and the experience is still a whole, which ultimately improves the efficiency of teamwork development.

[0198] In summary, the embodiments of the present invention provide a sub-application running method and device based on a micro-frontend architecture, as well as related electronic devices and storage media. The sub-application running method can be implemented with the aid of one or more computers, such as terminals, such as mobile terminals, such as smart phones. In some embodiments, the sub-application running device can be implemented by software, hardware, or a combination of software and hardware.

[0199] On this basis, an embodiment of the present invention further provides an electronic device, which includes: a processor and a memory storing a computer program, wherein the processor is configured to implement any method according to an embodiment of the present invention when running the computer program. In addition, a sub-application running device according to an embodiment of the present invention can also be provided.

[0200] In a preferred embodiment of the present invention, the electronic device may be a mobile terminal, preferably a mobile phone. As an exemplary implementation scheme only, Fig.16 1 shows a schematic diagram of the hardware structure of a specific embodiment of an electronic device, such as a mobile terminal 1600; and Fig.17 and Fig.18 A schematic diagram of the system structure of a specific embodiment of an electronic device, such as a mobile terminal, is shown.

[0201] In the illustrated embodiment, the mobile terminal 1600 may include a processor 1601, an external memory interface 1612, an internal memory 1610, a universal serial bus (USB) interface 1613, a charging management module 1614, a power management module 1615, a battery 1616, a mobile communication module 1640, a wireless communication module 1642, antennas 1639 and 1641, an audio module 1634, a speaker 1635, a receiver 1636, a microphone 1637, an earphone interface 1638, a button 1609, a motor 1608, an indicator 1607, a subscriber identification module (SIM) card interface 1611, a display screen 1605, a camera 1606, and a sensor module 1620, etc.

[0202] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the mobile terminal 1600. In other embodiments of the present application, the mobile terminal 1600 may include more or fewer components than shown in the figure, or combine certain components, or split certain components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0203] In some embodiments, the processor 1601 may include one or more processing units. In some embodiments, the processor 1601 may include one of the following or a combination of at least two of the following: an application processor (AP), a modem processor, a baseband processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, a neural network processor (NPU), etc. Different processing units may be independent devices or integrated in one or more processors.

[0204] The controller may be the nerve center and command center of the mobile terminal 1600. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0205] A memory may also be provided in the processor for storing instructions and data. In some embodiments, the memory in the processor is a cache memory. The memory may store instructions or data that the processor has just used or circulated. If the processor needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 1601, and thus improves the efficiency of the system.

[0206] NPU is a neural network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transmission mode between neurons in the human brain, it can quickly process input information and can also continuously self-learn.

[0207] The GPU is a microprocessor for image processing that connects the display screen and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor may include one or more GPUs that execute program instructions to generate or change display information.

[0208] A digital signal processor (ISP) is used to process digital signals. In addition to processing digital image signals, it can also process other digital signals.

[0209] In some embodiments, the processor 1601 may include one or more interfaces. The interface may include an integrated circuit (I2C) interface, an integrated circuit internal sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver and transmitter (UART) interface, a mobile industry processor interface (MIPI), a general purpose input and output (GPIO) interface, a subscriber identity module (SIM) interface, a universal serial bus (USB) interface, etc.

[0210] It is understandable that the interface connection relationship between the modules illustrated in the embodiments of the present application is only a schematic illustration and does not constitute a structural limitation on the mobile terminal. In other embodiments of the present application, the mobile terminal may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.

[0211] The wireless communication function of the mobile terminal 1600 can be implemented through the antennas 1639 and 1641, the mobile communication module 1640, the wireless communication module 1642, the modem processor or the baseband processor.

[0212] Video codecs are used to compress or decompress digital video.

[0213] The mobile terminal 1600 can implement audio functions such as music playing and recording through an audio module, a speaker, a receiver, a microphone, an earphone interface, and an application processor.

[0214] The audio module is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals.

[0215] A microphone is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can put their mouth close to the microphone and speak, inputting the sound signal into the microphone.

[0216] The sensor module 1620 may include one or more of the following sensors:

[0217] The pressure sensor 1623 is configured to sense the pressure signal and convert the pressure signal into an electrical signal.

[0218] The air pressure sensor 1624 is used to measure the air pressure.

[0219] The magnetic sensor 1625 includes a Hall sensor.

[0220] The gyro sensor 1627 may be used to determine the motion posture of the mobile terminal 1600 .

[0221] The acceleration sensor 1628 can detect the magnitude of acceleration of the mobile terminal 1600 in various directions.

[0222] The distance sensor 1629 may be configured to measure distance.

[0223] The proximity light sensor 1621 may include, for example, a light emitting diode (LED) and a light detector such as a photodiode.

[0224] The ambient light sensor 1622 is used to sense the brightness of ambient light.

[0225] The fingerprint sensor 1631 may be configured to collect fingerprints.

[0226] The touch sensor 1632 may be disposed on the display screen, and the touch sensor and the display screen form a touch screen, also known as a "touch screen". The touch sensor is used to detect a touch operation applied thereto or thereabout. The touch sensor may transmit the detected touch operation to the application processor to determine the type of touch event, such as single click, double click, long press, tap, directional slide, gather, etc.

[0227] The bone conduction sensor 1633 can acquire vibration signals.

[0228] The sensor module 1620 may further include a gravity sensor 1626 and a temperature sensor 1630 .

[0229] The software operating system of an electronic device (computer), such as a mobile terminal, may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture.

[0230] The embodiments shown in this article take iOS and Android operating system platforms of layered architecture as examples to illustrate the software structure of the mobile terminal. However, it is conceivable that the embodiments of this article can be implemented in different software operating systems.

[0231] exist Fig.17 In the illustrated embodiment, the solution of the embodiment of the present invention can adopt the iOS operating system. The iOS operating system adopts a four-layer architecture, which is, from top to bottom, a touchable layer (Cocoa Touch layer) 1710, a media layer (Medialayer) 1720, a core service layer (Core ServicES layer) 1730, and a core operating system layer (Core OSlayer) 1740. The touch layer 1710 provides various commonly used frameworks for application development and most of the frameworks are related to the interface, which is responsible for the user's touch interaction operations on the iOS device. The media layer provides audio-visual technologies in the application, such as graphics and images, sound technology, video, and audio and video transmission-related frameworks. The core service layer provides the basic system services required by the application. The core operating system layer contains most of the low-level functions close to the hardware.

[0232] In the embodiment of the present invention, UIKit is a user interface framework of the touchable layer 1710, which can be supported by many image frameworks in the media layer 1720, including but not limited to: Fig.17 The core library (Core Graphics), core animation (Core Animation), open library ES (OPEN GL ES), core image (Core Image), image IO (ImageIO), and library package (GLKit) shown in.

[0233] Fig.18 18 is a schematic diagram of the structure of the Android operating system. The solution of the embodiment of the present invention can adopt the Android operating system. The layered architecture divides the software into several layers, and the layers communicate through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, namely, the application layer 1810, the application framework layer 1820, the Android runtime (Runtime) and system library 1830, and the kernel layer 1840.

[0234] The application layer 1810 may include a series of application packages.

[0235] The application framework layer 1820 provides an application programming interface (API) and a programming framework for the applications of the application layer. The application framework layer includes some predefined functions.

[0236] A window manager is used to manage window programs.

[0237] Content providers are used to store and retrieve data and make it accessible to applications.

[0238] The view system includes visual controls, such as controls for displaying text, controls for displaying images, etc. The view system can be used to build applications. A display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying images.

[0239] The phone manager is used to provide the communication function of the mobile terminal.

[0240] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0241] The notification manager enables applications to display notification information in the status bar, which can be used to convey notification-type messages and disappear automatically after a short stay without user interaction.

[0242] Android Runtime includes core libraries and virtual machines. Android Runtime is responsible for scheduling and management of the Android system. The core library consists of two parts: one is the function to be called by the Java language, and the other is the Android core library. The application layer and the framework layer run in the virtual machine.

[0243] The system library can include multiple functional modules. The surface manager is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications.

[0244] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0245] The kernel layer 1840 is a layer between hardware and software. The kernel layer may include display driver, camera driver, audio interface, sensor driver, power management and GPS interface. In some embodiments of the present invention, the display may call the display driver.

[0246] The systems, devices, modules or units described in the above embodiments may be implemented by an electronic device (computer) or its associated components, preferably by a mobile terminal. The mobile terminal may be, for example, a smart phone, a laptop computer, a vehicle-mounted human-computer interaction device, a personal digital assistant, a media player, a navigation device, a game console, a tablet computer, a wearable device or a combination thereof.

[0247] Although not shown, in some embodiments, a storage medium is further provided, storing a computer program, which is configured to execute any method of the embodiments of the present invention when executed.

[0248] Storage media in embodiments of the present invention include permanent and non-permanent, removable and non-removable items that can be used to store information by any method or technology. Examples of storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission medium that can be used to store information that can be accessed by a computing device.

[0249] Those skilled in the art should understand that the embodiments of the present specification may be provided as methods, systems or computer program products. Therefore, those skilled in the art may imagine that the functional modules / units or controllers and related method steps described in the above embodiments may be implemented in software, hardware or a combination of software / hardware.

[0250] Unless explicitly stated, the actions or steps of the methods, programs loaded according to embodiments of the present invention do not have to be executed in a particular order and still achieve the desired results. In some implementations, multitasking and parallel processing are also possible or may be advantageous.

[0251] In this article, multiple embodiments of the present invention are described, but for the sake of brevity, the description of each embodiment is not exhaustive, and the same or similar features or parts between the embodiments may be omitted. In this article, "one embodiment", "some embodiments", "examples", "specific examples", or "some examples" are meant to be applicable to at least one embodiment or example according to the present invention, but not all embodiments. The above terms do not necessarily mean to refer to the same embodiment or example. In the absence of contradiction, those skilled in the art can combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples.

[0252] The exemplary systems and methods of the present invention have been specifically shown and described with reference to the above embodiments, which are merely examples of the best modes for implementing the present systems and methods. It will be appreciated by those skilled in the art that various changes may be made to the embodiments of the systems and methods described herein when implementing the present systems and / or methods without departing from the spirit and scope of the present invention as defined in the appended claims.

Claims

1. A sub-application operation method based on a micro-frontend architecture, characterized in that: include: Build entry components for sub-applications that run in the main application; Responding to a trigger request to load the sub-application, obtaining a main application resource; Parsing the main application resources to obtain a list of executable sub-application resources; Load the entry component and obtain the entry address of the sub-application; Utilizing the entry component to execute the sub-application resource list according to the entry address to obtain sub-application resources; A sandbox for the sub-application is created using the entry component, and the sub-application resources are injected into the sandbox to load the sub-application.

2. The sub-application running method according to claim 1, characterized in that: The sub-application is a sub-application implemented based on the ES module.

3. The sub-application running method according to claim 1 or 2, characterized in that: Creating a sandbox for the sub-application, including: A window proxy for the sandbox is created, and the window proxy connects the window object of the main application and the sandbox.

4. The sub-application running method according to claim 3, characterized in that: The method further comprises: In response to a request by the sub-application to access a first target variable, determining whether the first target variable exists in the sandbox; If so, sending the first target variable in the sandbox to the sub-application; If not, the first target variable in the main application window object is sent to the sub-application through the window proxy.

5. The sub-application running method according to claim 3, characterized in that: The method further comprises: In response to a request from the sub-application to set a second target variable, determining whether the second target variable exists in the sandbox; If yes, setting the second target variable in the sandbox; If not, determining through the window agent whether the second target variable in the main application window object is settable; If yes, setting the second target variable in the main application window object through the window proxy; If not, the second target variable in the main application window object remains unchanged.

6. The sub-application running method according to claim 1 or 2, characterized in that: The method further comprises: In response to a trigger request to uninstall the sub-application, the entry component is uninstalled to uninstall the sub-application.

7. The sub-application running method according to claim 6, characterized in that: The construction of the entry component of the sub-application to be run in the main application includes: defining a first function and a second function for the sub-application; The method further comprises: After the sub-application is loaded, recording an operation of the sub-application executing the first function; The step of uninstalling the entry component in response to the triggering request to uninstall the sub-application, so as to uninstall the sub-application, comprises: The operation of the first function executed by the sub-application is cleared.

8. The sub-application running method according to claim 7, characterized in that: The method further comprises: After the sub-application is loaded, recording an operation of the sub-application executing the second function and an operation on the sandbox; The step of uninstalling the entry component in response to the triggering request to uninstall the sub-application, so as to uninstall the sub-application, further includes: The operation of the second function executed by the sub-application and the operation of the sandbox are retained.

9. A sub-application operation method based on a micro-frontend architecture, characterized in that: include: Construct a first entry component of a first sub-application for running in a main application; Building a second entry component for a second sub-application running in the main application; In response to a trigger request to switch from the first sub-application to the second sub-application, obtaining main application resources, and uninstalling the first entry component to uninstall the first sub-application; Parsing the main application resources to obtain a list of executable second sub-application resources; Load the second entry component and obtain the entry address of the second sub-application; Utilizing the second entry component to execute the second sub-application resource list according to the entry address to obtain a second sub-application resource; A second sandbox for the second sub-application is created using the second entry component, and the second sub-application resources are injected into the second sandbox to load the second sub-application.

10. The sub-application running method according to claim 9, characterized in that: The first entry component of the first sub-application constructed to run in the main application includes: defining a first function and a second function for the first sub-application; The step of uninstalling the first entry component to uninstall the first sub-application includes: Clear operations of the first function executed by the first sub-application.

11. The sub-application running method according to claim 9 or 10, characterized in that: The first sub-application and the second sub-application are sub-applications implemented based on ES modules.

12. An electronic device, characterized in that: include: A processor and a memory storing a computer program, wherein the processor is configured to execute the method according to any one of claims 1 to 11 when running the computer program.

13. A storage medium, characterized in that: The storage medium stores a computer program, and the computer program is configured to execute the method according to any one of claims 1 to 11 when executed.

Images