Application loading method and device, computer program product and electronic equipment

Abstract

The invention relates to the technical field of computers, in particular to an application loading method and device, a computer program product and electronic equipment. The application loading method comprises the steps that a browser is responded to switch an access address, base route information of a base application is determined, and a base route of the base application and component rendering configuration of a sub-application have a binding relation; component configuration information is determined based on the base routing information and the binding relation through the base application, the component configuration information is sent to sub-applications, and different sub-applications have corresponding component configuration information; the sub-application component is loaded through the sub-application according to the component configuration information, and page rendering is performed on the base application according to the sub-application component, so that loading of the sub-application is completed. According to the method and the device, the micro-front-end pages of a plurality of different sub-applications can be loaded under the same routing address, so that the application loading efficiency is improved.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more specifically, to an application loading method, an application loading device, a computer program product, and an electronic device. Background Technology

[0002] Micro-frontends are an architecture similar to microservices, a style of architecture where multiple independently delivered frontend applications form a cohesive whole. They break down frontend applications into smaller, simpler ones that can be developed, tested, and deployed independently, while still appearing as a cohesive single product to the user. As frontend projects become more complex and maintenance more difficult, micro-frontend technology is finding increasingly wider applications to better maintain projects and improve development efficiency.

[0003] In related technologies, sub-applications render sub-application pages by listening to route changes in the base application and loading the routed pages of the sub-applications in the base application. In this method, the base application needs to assign basic routes to each sub-application and load different micro-frontend applications according to the basic routes. However, for the same route address, only the matching sub-application can be loaded at a time, and multiple different micro-frontend pages cannot be loaded at the same time, thus preventing the simultaneous loading of multiple sub-applications.

[0004] It should be noted that the information in the background section above is only used to enhance the understanding of the background of this disclosure, and therefore may include information that does not constitute prior art known to those skilled in the art. Summary of the Invention

[0005] The purpose of this disclosure is to provide an application loading method and apparatus, computer program product and electronic device, thereby enabling the loading of micro-frontend pages of multiple different sub-applications under at least the same routing address, thereby improving application loading efficiency.

[0006] Other features and advantages of this disclosure will become apparent from the following detailed description, or may be learned in part from practice of this disclosure.

[0007] According to one aspect of this disclosure, an application loading method is provided, comprising: in response to a browser switching access addresses, determining base routing information of a base application, wherein the base route of the base application is bound to the component rendering configuration of a sub-application; determining component configuration information by the base application based on the base routing information and the binding relationship, and sending the component configuration information to the sub-application, wherein different sub-applications have their own corresponding component configuration information; loading sub-application components by the sub-application according to the component configuration information, and rendering the page in the base application according to the sub-application components to complete the loading of the sub-application.

[0008] In one exemplary embodiment of this disclosure, before determining the base routing information of the base application in response to a browser switching access addresses, the method further includes: pre-setting the base route of each sub-application of the base application as the root route, so that each sub-application provides the target route page corresponding to the root route; wherein, in response to a change in the base routing information of the base application, the sub-application loads the target route page corresponding to the root route.

[0009] In one exemplary embodiment of this disclosure, the method further includes: loading a base application in response to a browser switching access addresses; if the base application is loading a sub-application for the first time, initializing the micro-frontend configuration of the sub-application; and receiving the component rendering configuration sent by the sub-application through the base application in response to the sub-application completing the loading of the micro-frontend configuration, and binding the base route of the base application with the component rendering configuration.

[0010] In one exemplary embodiment of this disclosure, in response to the completion of micro-frontend configuration loading by a sub-application, receiving component rendering configuration sent by the sub-application through a base application includes: in response to the completion of micro-frontend configuration loading by a sub-application, receiving component rendering configuration sent by the sub-application through a base application based on the application programming interface between the base application and the sub-application in the micro-frontend framework.

[0011] In one exemplary embodiment of this disclosure, the method further includes: if the base application is not loading the sub-application for the first time, then intercepting the access address after the browser switches through the routing guard of the base application; and determining the base routing information of the base application based on the access address after the switch.

[0012] In one exemplary embodiment of this disclosure, determining component configuration information based on base routing information and binding relationships by a base application, and sending the component configuration information to a sub-application, includes: determining a mapping relationship between base routing information and routing information of the sub-application based on the binding relationship; determining target component information corresponding to the sub-application from the base routing information based on the mapping relationship by the base application; and determining the component configuration information of the sub-application based on the target component information corresponding to each sub-application.

[0013] In one exemplary embodiment of this disclosure, loading a sub-application component based on component configuration information by a sub-application includes: determining whether target component information indicated by component configuration information exists by the sub-application; if target component information exists, loading the sub-application component in the corresponding target route page by the sub-application based on the target component information.

[0014] In one exemplary embodiment of this disclosure, the method further includes: if the sub-application does not have target component information, then the sub-application loads a default component in the corresponding target route page.

[0015] According to one aspect of this disclosure, an application loading apparatus is provided, comprising: an information determination module, configured to determine base routing information of a base application in response to a browser switching access addresses, wherein the base routing of the base application is bound to the component rendering configuration of a sub-application; a component configuration module, configured to determine component configuration information through the base application based on the base routing information and the binding relationship, and send the component configuration information to the sub-application, wherein different sub-applications have their own corresponding component configuration information; and an application loading module, configured to load sub-application components through the sub-applications according to the component configuration information, and perform page rendering in the base application according to the sub-application components to complete the loading of the sub-application.

[0016] According to one aspect of this disclosure, a computer program product is provided, comprising a computer program that, when executed by a processor, implements any of the above methods.

[0017] According to one aspect of this disclosure, an electronic device is provided, comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to perform a method of any of the above by executing the executable instructions.

[0018] The application loading method in the exemplary embodiments of this disclosure, in response to a browser switching access addresses, determines the base application's base routing information, wherein the base application's base routes are bound to the component rendering configurations of sub-applications. The base application determines component configuration information based on the base routing information and the binding relationship, and sends the component configuration information to the sub-applications, where different sub-applications have their own corresponding component configuration information. The sub-applications load their components according to the component configuration information and render pages in the base application based on the sub-application components, thus completing the loading of the sub-applications. This process, based on the communication mechanism between the base application and sub-applications, establishes a binding relationship between the component rendering configurations of each sub-application of the base application and the base routes. Therefore, when the browser switches access addresses, the base application can determine the component configuration information of each sub-application and send it to the corresponding sub-applications, enabling each sub-application to load its corresponding components and render the corresponding pages to the base application. This achieves loading of multiple sub-applications of the base application under the same routing address, improving application loading efficiency and solving the problem in related technologies where one-to-one matching of base application and sub-application addresses makes practical application difficult.

[0019] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0020] The above and other objects, features, and advantages of this disclosure will become readily apparent from the following detailed description of exemplary embodiments, taken in conjunction with the accompanying drawings. Several embodiments of this disclosure are illustrated in the drawings by way of example and not limitation.

[0021] Figure 1 A schematic diagram of a micro-frontend architecture according to an exemplary embodiment of the present disclosure is shown.

[0022] Figure 2 A flowchart of an application loading method according to an exemplary embodiment of the present disclosure is shown.

[0023] Figure 3 This diagram illustrates a basic process for loading a micro-frontend page.

[0024] Figure 4 A schematic diagram of a process for loading a micro-frontend page according to an exemplary embodiment of the present disclosure is shown.

[0025] Figure 5 A flowchart illustrating an implementation of determining the binding relationship between a base route and the component rendering configuration of a sub-application, according to an exemplary embodiment of the present disclosure, is shown.

[0026] Figure 6 A flowchart illustrating an implementation of switching base station routing information according to an exemplary embodiment of this disclosure is shown.

[0027] Figure 7 A flowchart illustrating an implementation method for distributing component configuration information by a base application according to an exemplary embodiment of the present disclosure is shown.

[0028] Figure 8 A complete flowchart illustrating the simultaneous loading of multiple sub-applications under the same root path according to an exemplary embodiment of this disclosure is shown.

[0029] Figure 9 A schematic diagram of the composition of an application loading apparatus according to an exemplary embodiment of the present disclosure is shown.

[0030] Figure 10 A block diagram of an electronic device according to an exemplary embodiment of the present disclosure is shown.

[0031] In the accompanying drawings, the same or corresponding reference numerals indicate the same or corresponding parts. Detailed Implementation

[0032] Exemplary embodiments will now be described more fully with reference to the accompanying drawings. However, exemplary embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be more comprehensive and complete, and will fully convey the concept of exemplary embodiments to those skilled in the art. The same reference numerals in the drawings denote the same or similar structures, and therefore their detailed description will be omitted.

[0033] Furthermore, the described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. Numerous specific details are provided in the following description to give a thorough understanding of embodiments of this disclosure. However, those skilled in the art will recognize that the technical solutions of this disclosure can be practiced without one or more of the specific details described, or other methods, components, apparatuses, steps, etc., can be employed. In other instances, well-known structures, methods, apparatuses, implementations, or operations are not shown or described in detail to avoid obscuring various aspects of this disclosure.

[0034] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, or in one or more software-hardened modules, or in different network and / or processor devices and / or microcontroller devices.

[0035] First, the concepts or terms involved in the exemplary embodiments of this disclosure will be explained.

[0036] Micro-frontend: An architectural style that consists of multiple independently delivered frontend applications. It breaks down the frontend application into smaller, simpler applications that can be developed, tested, and deployed independently, while still appearing as a cohesive single product to the user.

[0037] Main application: Micro frontends include main application and sub-applications. The main application, also known as the base application, is the container for other applications. In the micro frontend architecture, the main application serves as the entry point and can be responsible for loading sub-applications, identifying frontend routes, and distributing routing information to sub-applications. In some scenarios, it can also manage state and inter-application communication.

[0038] Sub-application: refers to an application with specific business characteristics, which is the one being embedded, such as... Figure 1 The diagram shown is a schematic of a micro-frontend architecture, as follows: Figure 1As shown, the base application can be a system base that encapsulates common parts into a complete main application, such as accounts, permissions, and logs, and then integrates characteristic parts into the main application as sub-applications. This allows for independent development of sub-applications without affecting the main application, reducing development tasks. For example, the development of sub-application functions can focus only on its own business needs without having to repeatedly implement other common requirements such as "login and registration" and "permission management".

[0039] Dynamic components: Meta-components used to render dynamic components or elements.

[0040] Route guards are functions used to control page navigation behavior. When switching routes in an application, route guards allow specific logic to be executed before or after the route change. Examples include checking if the user is logged in, has permission to access a page, or prompting the user to save unfinished work before leaving the current page. Route guards are essentially lifecycle hooks, triggered sequentially when a route is manipulated.

[0041] In related technologies, sub-applications can render their pages by listening to changes in the base route. The base application loads the route pages configured in the sub-applications. The base assigns a base route to each sub-application, and different micro-frontend applications are loaded based on the base route. However, rendering different micro-frontend pages under the same route address is currently not possible.

[0042] For example, taking product selection in business operations, when multiple sub-applications are loaded via micro-frontends under the same path address in the base application, it is difficult to render multiple micro-frontend pages with the same route address because the base application assigns different base routes to each application. To address this, different system pages (sub-pages) can be loaded by embedding them using an inline frame, or the route addresses of the base application and sub-applications can be matched one-to-one. However, this requires the routes of the base application and each sub-application to be completely consistent, resulting in low loading efficiency and making it difficult to apply in actual production.

[0043] In exemplary embodiments of this disclosure, an application loading method is provided to address one or more of the aforementioned problems, with reference to... Figure 2 The diagram shown is a flowchart of an application loading method according to an exemplary embodiment of this disclosure. Figure 2 As shown, the application loading method includes steps S210 to S230, as detailed below:

[0044] In step S210, in response to the browser switching the access address, the base application's base routing information is determined, wherein the base application's base routing is bound to the component rendering configuration of the sub-application.

[0045] In the exemplary embodiments of this disclosure, switching the browser access address refers to a change in the browser's request address. This can be achieved by the user entering the browser access address, or by the user switching the browser access address through selection, copying, pasting, or other methods; there are no limitations on this. The browser's access address may include the protocol, domain name, port, path and filename, query string, and anchor point; there are also no limitations on this content.

[0046] The base application's base routing information refers to the routing information used within the base application to manage the loading and unloading of various sub-applications. The base application uses this base routing information to embed and manage different sub-applications, ensuring they load and unload correctly. The base routing information corresponds to the browser's access address; that is, when the browser switches access addresses, the base routing information changes accordingly. The sub-application's component rendering configuration includes, but is not limited to, component instances, component names, and component style configuration information. This component rendering configuration is pre-configured. Through the binding relationship between the component rendering configuration and the base application's base routes, the component configuration information used to load the sub-application can be read. This component configuration information indicates which components the sub-application needs to load.

[0047] It should be understood that by binding the base application's base routes to the component rendering configurations of the sub-applications, the mapping relationship between the base application's base route information and the sub-application's route information can be determined. For example, the base route information may include information such as " / a" and " / b". Based on the binding relationship, it can be determined which sub-application needs to load component A and which sub-application needs to load component B. The exemplary embodiments of this disclosure do not limit the specific implementation of the binding relationship.

[0048] In step S220, the base application determines the component configuration information based on the base routing information and binding relationship, and sends the component configuration information to the sub-applications, where different sub-applications have their own corresponding component configuration information.

[0049] In an exemplary embodiment of this disclosure, the base application can determine the component configuration information to be sent to different sub-applications based on the base routing information and binding relationships. Typically, different sub-applications need to load different components, so each sub-application has its own corresponding component configuration information. Through the communication mechanism between the base application and the sub-applications, the base application sends the determined component configuration information to each sub-application to guide the sub-applications in loading the corresponding components.

[0050] As an example, component configuration information can be a unique identifier for a sub-application, enabling the sub-application to determine whether it possesses the corresponding component. This unique identifier can be the sub-application's name or other identifier pre-assigned to the sub-application; there are no restrictions on which one is chosen.

[0051] In step S230, the sub-application loads the sub-application component according to the component configuration information, and the base application renders the page according to the sub-application component to complete the loading of the sub-application.

[0052] In the exemplary embodiments of this disclosure, page rendering of sub-application components in the base application can be achieved by the base application calling a preset lifecycle method when loading the sub-application through the micro-frontend framework, thereby mounting the sub-application components to the corresponding pages. If the base application includes multiple sub-applications, each sub-application loads its own sub-application components according to its received component configuration information, thus enabling simultaneous loading of multiple micro-frontend application pages and improving page loading efficiency.

[0053] It should be noted that the exemplary embodiments of this disclosure perform page rendering in the base application based on the sub-application components, and complete the process of loading multiple sub-application pages in the base application at the same time. The process of loading each sub-application page can be referred to in related technologies, and no specific limitations are made thereto.

[0054] The application loading method in the exemplary embodiments of this disclosure is based on the communication mechanism between the base application and the sub-applications. It establishes a binding relationship between the component rendering configuration of each sub-application of the base application and the base route in the base application. Thus, when the browser switches access addresses, the base application can determine the component configuration information of each sub-application and send it to the corresponding sub-applications, so that each sub-application loads the corresponding sub-application components and renders the corresponding pages to the base application. This realizes the loading of multiple sub-applications of the base application under the same route address, improves the application loading efficiency, and solves the problem in related technologies where the one-to-one matching of base application and sub-application addresses makes it difficult to apply to actual production.

[0055] In one exemplary embodiment, an implementation method for configuring the base route of a sub-application is provided. This method may further include, before determining the base route information of the base application in response to a browser switching its access address:

[0056] The base application's sub-applications are pre-configured with the root route as the base route, so that each sub-application can provide the target route page corresponding to the root route; in response to changes in the base application's base route information, the sub-application loads the target route page corresponding to the root route.

[0057] Specifically, such as Figure 3 This diagram illustrates a basic process for loading a micro-frontend page. Figure 4 A schematic diagram illustrating a process for loading a micro-frontend page, as exemplified by an embodiment of this disclosure, is shown. Comparative Description Figure 3 and Figure 4 This section explains how the basic routing for configuring sub-applications is implemented. For example... Figure 3As shown, the base application assigns a basic route to each sub-application. The micro-frontend framework listens for route changes; if a route address changes, it matches the corresponding sub-application's basic route based on the changed route address, thereby loading the matched sub-application's micro-frontend page. Therefore, during route address switching, the changed route address must be matched against each sub-application's basic route one by one to determine a unique matching basic route and load its corresponding sub-application page. This method cannot load multiple sub-application pages simultaneously under the same route address.

[0058] Correspondingly, such as Figure 4 As shown, the root route " / " for each sub-application can be pre-set. The root route is the top-level route in the project, and it's the first place all requests pass through. While the definition and function of the root route vary slightly across different frameworks, the basic concepts are similar. The root route's functions include request distribution, path matching, and project configuration. Taking path matching as an example, the project entry point can be defined through the root path. All requests first match the root route, and then, based on rules, are further matched to specific paths and / or processing logic. In the exemplary embodiment of this disclosure, the base route of each sub-application is uniformly set as the root route. Sub-applications can provide target route pages corresponding to the root routes. The target route page refers to a general route page that is loaded by all routes. That is, if the base route information changes, the target route page corresponding to the sub-application's root route will be loaded. The dynamic components contained in the target route page are related to the component configuration information of the sub-application determined by the base route. The dynamic components are rendered using the component configuration information to load the sub-application components, as will be described in detail later.

[0059] The exemplary embodiments of this disclosure enable different micro-frontend pages (sub-application pages) to be loaded under the same route address by setting the base route of the sub-application as the root route and providing a common route page through the root route.

[0060] In one exemplary embodiment, an implementation method is provided for determining the binding relationship between a base route and the component rendering configuration of a sub-application. For example... Figure 5 As shown, this implementation method may include:

[0061] Step S510: In response to the browser switching the access address, load the base application.

[0062] The base application can be loaded using a specified mechanism (micro-frontend framework) and the sub-applications can be loaded and managed through this mechanism. The base application can load configuration information such as routing mode, sub-application configuration, services to be started, and service proxy configuration. The exemplary embodiments disclosed herein do not limit the method of loading the base application.

[0063] Step S520: If the base application is loading the sub-application for the first time, initialize the micro-frontend configuration of the sub-application.

[0064] After the base application is loaded, the base application can determine whether the micro-frontend application (sub-application) has been loaded. If the sub-application is being loaded for the first time, the process of loading the micro-frontend configuration of the sub-application is triggered.

[0065] Among them, the micro-frontend configuration of a sub-application refers to the static resources of the sub-application, which are front-end resource files that can be directly loaded and executed in the browser, including but not limited to CSS (Cascading Style Sheets) style sheets and JavaScript (JS) script files, which are the basic elements that constitute the front-end page. Each sub-application is responsible for different functional modules, and these CSS and JS files are the specific code content that each independent sub-application provides to the user for the implementation of the interface and functions.

[0066] Step S530: In response to the completion of the micro-frontend configuration loading by the sub-application, the base application receives the component rendering configuration sent by the sub-application and binds the base application's base route to the component rendering configuration.

[0067] After the sub-application completes its micro-frontend configuration, it sends its component rendering configuration to the base application via a communication mechanism with the base application. This allows the base application to bind the sub-application's component rendering configuration to its base routes. Specifically, in response to the sub-application completing its micro-frontend configuration, the base application receives the component rendering configuration sent by the sub-application through the application programming interface (API) between the base application and the sub-application within the micro-frontend framework. Optionally, the communication mechanism between the base application and the sub-application can be implemented using the API already configured between them within the micro-frontend framework. Alternatively, the API can be reconfigured according to actual needs. Exemplary embodiments of this disclosure include, but are not limited to, the aforementioned communication mechanism between the base application and the sub-application.

[0068] Binding the base application's base routes to component rendering configurations associates the base application's base routes with the component rendering configurations of the sub-applications. This allows the base application to analyze the base route information based on this association, determining which components / components / sub-applications are required, as indicated in the base route information. In other words, the binding relationship establishes a mapping between base route information and sub-application route information, thus determining the components that the sub-applications need to load.

[0069] In some alternative embodiments, the base routing and sub-application component rendering configurations can also be stored in memory for quick invocation.

[0070] In some alternative embodiments, if the component rendering configuration of a sub-application changes, the sub-application can also send the component rendering configuration of the sub-application to the base application through a communication mechanism with the base application. This allows the base application to bind the component rendering configuration of the sub-application to the base application's base route, thereby ensuring that components are loaded accurately when the sub-application page is loaded subsequently.

[0071] By binding the base route to the component rendering configuration of the sub-application during the sub-application initialization process, the base route can determine the configuration information of multiple components based on the same route address (base route information) and send it to each sub-application, thereby enabling multiple micro-frontend applications to be loaded from the same route address.

[0072] In one exemplary embodiment, an implementation method for switching base station routing information is also provided. For example... Figure 6 As shown, this implementation method may include:

[0073] Step S610: If the base application is not loading the sub-application for the first time, then the access address after the browser switches is intercepted through the base application's route guard.

[0074] If the base application has already initialized the sub-application, meaning a second route address switch is required, then in response to the route address switch (browser switching access address), the base application's route guards can intercept the browser's new access address. As mentioned above, when an application switches routes, route guards allow specific logic to be executed before or after the route change. A route guard is a lifecycle hook function that is triggered sequentially when a route is manipulated. In the exemplary embodiment of this disclosure, route guards can intercept browser switching operations and obtain the browser's new access address.

[0075] Step S620: Determine the base station routing information for the base station application based on the switched access address.

[0076] After the route guard intercepts the access address after the switch, the base route information of the base application can be determined based on the access address after the switch before the route switch is triggered.

[0077] By intercepting the access address after the route switch through route guards, the base route can obtain the access address after the switch, thereby accurately determining the base application's base route information. This allows the base application to subsequently determine which / which sub-applications need to load which / which components need to be distributed to the sub-applications based on the base application's base route information and binding relationships. This enables multiple micro-frontend applications to be loaded under the same route address even during a second route switch.

[0078] In one exemplary embodiment, a method for distributing component configuration information by a base application is also provided. For example... Figure 7As shown, determining component configuration information based on base routing information and binding relationships through the base application, and sending the component configuration information to the sub-application, may include:

[0079] Step S710: Determine the mapping relationship between the base routing information and the sub-application routing information based on the binding relationship.

[0080] The mapping relationship determines the correspondence between the field content in the base routing information and the routing information of the sub-applications based on the binding relationship. The base application can analyze the base routing information based on the mapping relationship to determine which / which components of which / which sub-applications are needed, as indicated in the base routing information. For example, based on the mapping relationship, the field content " / a" in the base routing information can be determined to represent component A of sub-application 1, the field " / b" to represent component B of sub-application 2, and so on. Routing rules can be configured for the base application, such as defining a routing file and defining the routing paths of the sub-applications and the corresponding component rendering configurations in the routing file. The exemplary embodiments of this disclosure do not limit the specific implementation method of the binding relationship.

[0081] Step S720: The base application determines the target component information corresponding to the sub-application from the base routing information based on the mapping relationship.

[0082] For each sub-application, the base application can analyze the base routing information based on the mapping relationship to determine the target component information corresponding to that sub-application. For example, the target component information could be a unique identifier of the component that requires the sub-application.

[0083] Step S730: Determine the component configuration information of each sub-application based on the target component information corresponding to each sub-application.

[0084] Component configuration information indicates the types of components that sub-applications need to load. When a browser switches access addresses, the base application needs to load each sub-application. Based on the base routing information, the target component information for each sub-application can be the same or different, depending on the actual sub-application page to be loaded; there are no restrictions on this. The component configuration information for each sub-application can be determined separately based on its target component information. Accordingly, the component configuration information for each sub-application can be the same or different.

[0085] The exemplary embodiments of this disclosure determine the components that each sub-application needs to load based on the mapping relationship between the base routing information and the routing information of the sub-applications through the base routing. By sending component configuration information to each sub-application, each sub-application is instructed to load components based on the component configuration information, thereby enabling multiple micro-frontend applications to be loaded simultaneously under the same routing address, and also ensuring the accuracy of component loading by each sub-application.

[0086] In one exemplary embodiment, a method for loading a sub-application component by a sub-application is also provided. Loading a sub-application component based on component configuration information by the sub-application may include:

[0087] The sub-application determines whether the target component information indicated by the component configuration information exists.

[0088] If target component information exists, the sub-application loads the sub-application component in the corresponding target route page based on the target component information.

[0089] After receiving the component configuration information from the base application, the sub-application needs to evaluate the configuration information. Specifically, it needs to determine whether the configuration information contains the target component information for the sub-application, i.e., whether the sub-application is allowed to load the component indicated by the configuration information. If so, the sub-application can load the corresponding sub-application component in the target route page based on the target component information.

[0090] In some optional embodiments, if the target component information does not exist in the sub-application, the default component is loaded in the corresponding target route page by the sub-application. In some scenarios, the component configuration information issued by the base application indicates that the sub-application itself does not have the ability to load the component (e.g., the relevant information does not exist). In this case, to avoid route switching failure due to the sub-application page failing to load, the sub-application can load the default component on the target route page, thereby ensuring that multiple micro-frontend applications are loaded completely and simultaneously.

[0091] The default components can be flexibly configured according to actual needs or scenarios, without any restrictions.

[0092] It should be understood that if the base application sends component configuration information to multiple sub-applications at the same time, each of these sub-applications will judge the component configuration information and load the corresponding sub-application component on the target route page according to the judgment result. This achieves the simultaneous loading of multiple sub-application pages under the same route address, and the component loading of each sub-application does not interfere with each other, thus maintaining independence.

[0093] Figure 8 This diagram illustrates a complete flowchart for loading multiple sub-applications simultaneously under the same root path. The following section combines... Figure 8 An application loading method for an exemplary embodiment of this disclosure will be described.

[0094] First, the browser switches the access address and loads the base application.

[0095] In this way, the base application's sub-applications are pre-configured as root routes so that each sub-application can provide the target route page corresponding to the root route.

[0096] Secondly, once the base application has finished loading, the system determines whether the sub-applications have been loaded.

[0097] In one scenario, if the base application is loading a sub-application for the first time, the following steps are performed:

[0098] Initialize the micro-frontend configuration of the sub-application and respond to the completion of the sub-application's micro-frontend configuration loading (configuration loading, micro-frontend resource loading, and sub-application instance initialization). Receive component rendering configurations sent by the sub-application through the base application and bind the base application's base routes to the component rendering configurations. When the base application initially loads the sub-application page, it determines the component configuration information based on the base route information and binding relationships, and sends this information to the sub-application. The sub-application then loads its components according to the component configuration information and renders the page within the base application based on these components, thus completing the sub-application's loading process.

[0099] In another scenario, if the base application is not loading the child application for the first time, the following steps are performed:

[0100] The base application intercepts the browser's access address after switching by using its route guards. Based on the switched access address, the base application determines its base route information. Then, the base application determines the component configuration information based on the base route information and binding relationships, and sends the component configuration information to the sub-application. The sub-application then loads its components according to the component configuration information and renders the page in the base application based on the sub-application components to complete the loading of the sub-application.

[0101] In both scenarios described above, when a sub-application loads a component based on its configuration information, the sub-application determines whether the target component information indicated by the configuration information exists. If the target component information exists, the sub-application loads the component in the corresponding target route page based on the target component information. Conversely, if the target component information does not exist, the sub-application loads the default component in the corresponding target route page.

[0102] It should be noted that, Figure 8 The details of each step have been described in the exemplary embodiments above and will not be repeated here.

[0103] In an exemplary embodiment of this disclosure, an application loading device is also provided. (See reference...) Figure 9 As shown, the application loading device 900 may include an information determination module 910, a component configuration module 920, and an application loading module 930. Specifically:

[0104] The information determination module 910 is used to determine the base application's base route information in response to the browser switching access addresses. The base application's base route is bound to the component rendering configuration of the sub-application. The component configuration module 920 is used to determine the component configuration information based on the base application's base route information and binding relationship, and send the component configuration information to the sub-application. Different sub-applications have their own corresponding component configuration information. The application loading module 930 is used to load the sub-application components according to the component configuration information, and perform page rendering in the base application according to the sub-application components to complete the loading of the sub-application.

[0105] In one exemplary embodiment of this disclosure, the information determination module 910 is further configured to perform: pre-setting the base route of each sub-application of the base application as the root route, so that each sub-application provides the target route page corresponding to the root route; wherein, in response to a change in the base route information of the base application, the sub-application loads the target route page corresponding to the root route.

[0106] In one exemplary embodiment of this disclosure, the information determination module 910 is further configured to perform: in response to the browser switching access address, load the base application; if the base application is loading a sub-application for the first time, initialize the micro-frontend configuration of the sub-application; in response to the sub-application completing the loading of the micro-frontend configuration, receive the component rendering configuration sent by the sub-application through the base application, and bind the base route of the base application to the component rendering configuration.

[0107] In one exemplary embodiment of this disclosure, the information determination module 910 is further configured to perform: in response to the completion of micro-frontend configuration loading by the sub-application, receiving component rendering configuration sent by the sub-application through the base application based on the application programming interface between the base application and the sub-application in the micro-frontend framework.

[0108] In one exemplary embodiment of this disclosure, the information determination module 910 is further configured to perform: if the base application is not loading the sub-application for the first time, intercept the access address after the browser switch through the routing guard of the base application; and determine the base routing information of the base application based on the access address after the switch.

[0109] In one exemplary embodiment of this disclosure, the component configuration module 920 is configured to perform: determining the mapping relationship between base routing information and sub-application routing information based on the binding relationship; determining the target component information corresponding to the sub-application from the base routing information based on the mapping relationship through the base application; and determining the component configuration information of the sub-application based on the target component information corresponding to each sub-application.

[0110] In one exemplary embodiment of this disclosure, the application loading module 930 is configured to: determine whether there is target component information indicated by component configuration information through the sub-application; if target component information exists, load the sub-application component in the corresponding target route page according to the target component information through the sub-application.

[0111] In one exemplary embodiment of this disclosure, the application loading module 930 is further configured to execute:

[0112] If the target component information does not exist in the sub-application, the default component will be loaded in the corresponding target route page through the sub-application.

[0113] Since the details of each functional module of the application loading apparatus of the exemplary embodiments of this disclosure have been described in the exemplary embodiments of the application loading method described above, they will not be repeated here.

[0114] It should be noted that although several modules or units of the application loading device have been mentioned in the detailed description above, this division is not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0115] Exemplary embodiments of this disclosure also provide a computer program product. The computer program product includes a computer program that, when executed by a processor, implements the application loading method described above.

[0116] In one embodiment, the computer program product can be a tangible product containing a computer program, such as a computer-readable storage medium storing the computer program. The readable storage medium can be a storage medium based on electrical, magnetic, optical, electromagnetic, infrared, or other signals, including but not limited to: random access memory (RAM), read-only memory (ROM), magnetic tape, floppy disk, flash memory, hard disk drive (HDD), solid-state drive (SSD), etc. For example, the computer program product can be implemented as a non-volatile storage medium storing the computer program, such as read-only memory, NAND flash memory, etc.

[0117] In one implementation, the computer program product can be an intangible product containing a computer program. For example, the computer program product can be implemented as a virtual digital product, such as an executable file, installation package, or other digital file storing the computer program.

[0118] Computer program code can be written in one or more programming languages. Examples of programming languages ​​include C, Java, and C++. Program code can execute entirely on the user's computing device, partially on the user's computing device, or as a standalone software package. It can also execute partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, such as a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via an internet connection provided by a mobile network operator).

[0119] Computer programs can be carried or transmitted via signals such as electrical, magnetic, optical, electromagnetic, and infrared rays. Electronic devices can convert the signals carrying computer programs into digital signals, thereby running the computer programs. When a computer program runs on an electronic device, its code is used to cause the electronic device to execute (more specifically, the processor of the electronic device to execute) the method steps of various exemplary embodiments of this disclosure, such as the application loading method described above.

[0120] Furthermore, in exemplary embodiments of this disclosure, an electronic device capable of implementing the above-described methods is also provided. Those skilled in the art will understand that various aspects of this disclosure can be implemented as systems, methods, or program products. Therefore, various aspects of this disclosure can be specifically implemented as entirely hardware embodiments, entirely software embodiments (including firmware, microcode, etc.), or embodiments combining hardware and software aspects, collectively referred to herein as "circuit," "module," or "system."

[0121] The following reference Figure 10 To describe an electronic device 1000 according to such an embodiment of the present disclosure. Figure 10 The electronic device 1000 shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments disclosed herein.

[0122] like Figure 10 As shown, the electronic device 1000 is manifested in the form of a general-purpose computing device. The components of the electronic device 1000 may include, but are not limited to: at least one processing unit 1010, at least one storage unit 1020, a bus 1030 connecting different system components (including storage unit 1020 and processing unit 1010), and a display unit 1040.

[0123] The storage unit stores program code that can be executed by the processing unit 1010, causing the processing unit 1010 to perform the steps described in the "Exemplary Methods" section of this specification according to various exemplary embodiments of this disclosure. For example, the processing unit 1010 can perform the steps of the above exemplary embodiments.

[0124] Storage unit 1020 may include readable media in the form of volatile storage units, such as random access memory (RAM) 1021 and / or cache memory 1022, and may further include read-only memory (ROM) 1023.

[0125] Storage unit 1020 may also include a program / utility 1024 having a set (at least one) program module 1025, such program module 1025 including but not limited to: operating system, one or more application programs, other program modules and program data, each or some combination of these examples may include an implementation of a network environment.

[0126] Bus 1030 can represent one or more of several types of bus structures, including a memory cell bus or memory cell controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any of the various bus structures.

[0127] Electronic device 1000 can also communicate with one or more external devices 1100 (e.g., keyboard, pointing device, Bluetooth device, etc.), one or more devices that enable a user to interact with electronic device 1000, and / or any device that enables electronic device 1000 to communicate with one or more other computing devices (e.g., router, modem, etc.). This communication can be performed via input / output (I / O) interface 1050. Furthermore, electronic device 1000 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 1060. As shown, network adapter 1060 communicates with other modules of electronic device 1000 via bus 1030. It should be understood that, although not shown in the figures, other hardware and / or software modules can be used in conjunction with electronic device 1000, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0128] From the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, terminal device, or network device, etc.) to execute the methods according to the embodiments of this disclosure.

[0129] Furthermore, the above figures are merely illustrative of the processes included in the method according to exemplary embodiments of this disclosure and are not intended to be limiting. It is readily understood that the processes shown in the above figures do not indicate or limit the temporal order of these processes. Additionally, it is readily understood that these processes may be executed synchronously or asynchronously, for example, in multiple modules.

[0130] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and embodiments are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the claims.

Claims

1. An application loading method, characterized in that, include: In response to the browser switching access addresses, the base application's base routing information is determined, wherein the base application's base routing is bound to the component rendering configuration of the sub-application; The base application determines component configuration information based on the base routing information and the binding relationship, and sends the component configuration information to the sub-application, wherein different sub-applications have their own corresponding component configuration information; The sub-application loads the sub-application component according to the component configuration information, and then renders the page in the base application according to the sub-application component to complete the loading of the sub-application.

2. The method according to claim 1, characterized in that, Before determining the base station routing information of the base station application in response to the browser switching access addresses, the method further includes: The base application's sub-applications are pre-configured as root routes so that each sub-application can provide the target route page corresponding to the root route. In response to a change in the base routing information of the base application, the sub-application loads the target route page corresponding to the root route.

3. The method according to claim 1 or 2, characterized in that, The method further includes: The base application is loaded in response to the browser switching access addresses; If the base application is loading a sub-application for the first time, then initialize the micro-frontend configuration of the sub-application; In response to the completion of the micro-frontend configuration loading of the sub-application, the base application receives the component rendering configuration sent by the sub-application and binds the base route of the base application to the component rendering configuration.

4. The method according to claim 3, characterized in that, The response to the completion of the micro-frontend configuration loading by the sub-application, receiving the component rendering configuration sent by the sub-application through the base application, includes: In response to the completion of the micro-frontend configuration loading of the sub-application, the base application receives the component rendering configuration sent by the sub-application through the application programming interface between the base application and the sub-application in the micro-frontend framework.

5. The method according to claim 3, characterized in that, The method further includes: If the base application is not loading the sub-application for the first time, the access address after the browser switches will be intercepted through the routing guard of the base application; Based on the switched access address, determine the base routing information of the base application.

6. The method according to claim 2, characterized in that, The step of determining component configuration information based on the base application's routing information and the binding relationship, and sending the component configuration information to the sub-application, includes: The mapping relationship between the base routing information and the routing information of the sub-application is determined based on the binding relationship; The base application determines the target component information corresponding to the sub-application from the base routing information based on the mapping relationship; Based on the target component information corresponding to each sub-application, determine the component configuration information of that sub-application.

7. The method according to claim 6, characterized in that, The step of loading the sub-application component according to the component configuration information through the sub-application includes: The sub-application determines whether the target component information indicated by the component configuration information exists. If the target component information exists, the sub-application loads the sub-application component in the corresponding target route page based on the target component information.

8. The method according to claim 7, characterized in that, The method further includes: If the target component information does not exist in the sub-application, the default component is loaded in the corresponding target route page through the sub-application.

9. An application loading device, characterized in that, The device includes: The information determination module is used to determine the base route information of the base application in response to the browser switching the access address, wherein the base route of the base application is bound to the component rendering configuration of the sub-application; The component configuration module is used to determine component configuration information based on the base application and the binding relationship, and send the component configuration information to the sub-application, wherein different sub-applications have their own corresponding component configuration information; The application loading module is used to load the sub-application component according to the component configuration information through the sub-application, and to perform page rendering on the base application according to the sub-application component to complete the loading of the sub-application.

10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the method of any one of claims 1 to 8.

11. An electronic device, characterized in that, include: processor; as well as Memory for storing the executable instructions of the processor; The processor is configured to perform the method of any one of claims 1 to 8 by executing the executable instructions.

Images