Iframe-based global micro-front-end implementation method and Iframe-based global micro-front-end implementation device

Abstract

The invention provides an Iframe-based global micro-front-end implementation method and device. The Iframe-based global micro-front-end implementation method comprises the following contents: newly-added base service, sub-application service access configuration, service deployment configuration and browser cache configuration. The access process comprises the following steps: a user accesses a base service and initiates a request to the base service; the base service matches a corresponding front-end sub-application according to a preset routing rule, and forwards the request to the front-end sub-application through Iframe; the front-end sub-application performs initialization loading, and renders a user interface according to the request; when back-end data is needed, the front-end sub-application sends an interface request to the gateway service, and the interface request is forwarded to the back-end micro-service through the gateway service; and after receiving the interface request, the back-end micro-service executes the corresponding business logic and stores the processing result data. The method can be compatible with the IE9-11 version browser, and ensures that the user experience is consistent with the original service.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end development, and in particular to an Iframe-based global micro-front-end implementation method and device. Background Art

[0002] The current business involves a lot of content and has many business processes and links. A single front-end service cannot meet the needs of rapid business iteration stability and development efficiency. Therefore, it is necessary to split large front-end services into multiple front-end services.

[0003] However, as the business process progresses, users need to switch between different front-end services. Each time the front-end service is switched, the corresponding images, corresponding instruction files and other resources of the service need to be reloaded, resulting in an obvious white screen perception experience for users. In addition, since all resources are reloaded, the interface will be requested again to obtain data, resulting in additional overhead for network resources. In addition, the existing technology has requirements for browsers and their versions. For example, the business needs to support IE browsers, and the compatible browser range is IE9-IE11, which has compatibility restrictions.

[0004] The front-end frameworks that solve similar technical problems on the market are mainly single-spa maintained by the open source team, Qiankun maintained by the Alibaba team, Micro-App maintained by the JD team, and Wujie maintained by the Tencent team.

[0005] The racks use different technologies and have different requirements. The details are shown in the following table:

[0006] Based on the above existing front-end framework, there are the following defects:

[0007] (1) Browser compatibility issues: single-spa and Qiankun are only compatible with IE11, which is inconsistent with current business requirements and cannot fully meet them. Micro-App is not compatible with IE and cannot support business. Ultrasurf has the best compatibility and can be compatible with IE9, but Ultrasurf directly uses Iframe to achieve style and function isolation in IE mode. Iframe will have very obvious style fragmentation and page routing address asynchrony, resulting in a significant decline in user experience.

[0008] (2) Technical usage restrictions: JavaScript files need to be isolated during operation, so it is necessary to ensure that each sub-application does not affect each other, which involves JavaScript sandbox and isolation strategy. There will be restrictions on technical content such as packaging and resource loading. The current use of tool libraries such as pdf-dist to implement resource preview and resource sharing module federation will be affected. When Qiankun loads sub-application resources, it loads them through interface requests, and all resources must be allowed to cross-domain, which requires additional solutions to cross-domain resource acquisition and other issues. There is no downgrade plan for services that do not meet the access conditions. For complex business scenarios, there is a risk of business process interruption. Summary of the invention

[0009] In view of this, an embodiment of the present invention provides an Iframe-based global micro-front-end implementation method and device to eliminate or improve one or more defects existing in the prior art.

[0010] On the one hand, the present invention provides a method for implementing a global micro-frontend based on Iframe, the method comprising the following steps:

[0011] The user accesses the service through a browser and initiates a request to the base service;

[0012] The base service matches the corresponding front-end sub-application according to the preset routing rules, and forwards the request to the front-end sub-application through the Iframe; wherein, an identifier is added to the routing and static resource context of the front-end sub-application to distinguish them from the routing and static resource context of the base service;

[0013] The front-end sub-application performs initialization loading and renders the user interface according to the request; when back-end data is needed, the front-end sub-application sends an interface request to the gateway service, and the gateway service forwards the interface request to the back-end microservice;

[0014] After receiving the interface request, the backend microservice executes the corresponding business logic and stores the processing result data.

[0015] In some embodiments of the present invention, the base service forwards the request to the front-end sub-application via an Iframe, further comprising:

[0016] storing the public data on the base service and synchronizing it to the front-end sub-application;

[0017] The front-end sub-application notifies the base service sub-application of data changes by calling the base service method or event, so as to synchronize the base service and the front-end sub-application data. In some embodiments of the present invention, the base service forwards the request to the front-end sub-application via an Iframe, further comprising:

[0018] Use the Iframe display area as the current window, reserve space for the webpage header and menu, and place the header and menu on the upper layer of the Iframe;

[0019] When the front-end sub-application needs to open the mask, the front-end sub-application notifies the base service to sink the header and the menu;

[0020] When the front-end sub-application needs to close the mask, the front-end sub-application notifies the base service to float the header and the menu.

[0021] In some embodiments of the present invention, adding an identifier to the routing and static resource context of the front-end sub-application to distinguish it from the routing and static resource context of the base service further includes:

[0022] Adding a prefix identifier to the route of the front-end sub-application;

[0023] When the routing of the front-end sub-application changes, the routing method is rewritten; when the business code calls the routing method (push or replace), the base service routing is notified to synchronize the front-end sub-application routing with the base service routing.

[0024] In some embodiments of the present invention, when the front end is deployed for service, it also includes:

[0025] The front-end code is constructed to generate static resource files, and the static resource files are published to the server; wherein the front-end service is independently deployed on the server and remains independent from the back-end service.

[0026] In some embodiments of the present invention, when the front end is deployed for service, it also includes:

[0027] When the front-end sub-application and the base service are in different domain names, the servers are mutually proxied to ensure that the front-end sub-application and the base service are in the same source state when communicating.

[0028] In some embodiments of the present invention, when managing the front-end sub-application, the method further includes:

[0029] The server adds a conditional cache configuration and returns it to the browser. The browser conditionally caches the static resources of the front-end sub-application according to the conditional cache configuration to reduce the waiting time for resource loading; the conditions at least include caching programming languages, cascading style sheets and image resources with hash numbers of preset digits.

[0030] On the other hand, the present invention also provides a global micro-frontend implementation device of Iframe, which implements the steps of the global micro-frontend implementation method based on Iframe as mentioned above when the device is executed, and the device includes:

[0031] User module, used to initiate requests to the base service;

[0032] The base service module is used to match the corresponding front-end sub-application according to the preset routing rules, and forward the request to the front-end sub-application through the Iframe;

[0033] The front-end sub-application module includes multiple front-end sub-applications, which are used to initialize and load according to the request and render the user interface; when back-end data is needed, an interface request is sent to the gateway service, and the gateway service forwards the interface request to the back-end microservice;

[0034] The backend microservice module includes multiple backend microservices, which are used to execute corresponding business logic after receiving the interface request;

[0035] The data storage module is used to store the processing result data.

[0036] On the other hand, the present invention further provides a computer-readable storage medium having a computer program / instruction stored thereon, which implements the steps of any of the methods mentioned above when the computer program / instruction is executed by a processor.

[0037] The present invention provides a globalized micro-frontend implementation method and device based on Iframe, including: a user accesses a base service and initiates a request to the base service; the base service matches the corresponding frontend sub-application according to a preset routing rule, and forwards the request to the frontend sub-application through Iframe; the frontend sub-application performs initial loading and renders a user interface according to the request; when backend data is needed, the frontend sub-application sends an interface request to the gateway service, and the gateway service forwards the interface request to the backend micro-service; after the backend micro-service receives the interface request, it executes the corresponding business logic and stores the processing result data. The present invention is compatible with standard browsers such as IE9-11 and Chrome; the technical problems existing in the browser native capability Iframe are optimized, and the mask layer covers the whole; by adding an identifier and rewriting the routing method, the routing state synchronization of the base service and the frontend sub-application is realized; by designing a frontend service proxy strategy, the Iframe communication requirements are solved, and the secure loading and data interaction of cross-domain resources are realized; and by conditionally caching the early sub-application resources, the service switching time is reduced and the resource loading waiting time is reduced.

[0038] Additional advantages, purposes, and features of the present invention will be described in part in the following description, and will become apparent to those skilled in the art after studying the following, or may be learned from the practice of the present invention. The purposes and other advantages of the present invention may be achieved and obtained by the structures specifically indicated in the specification and the accompanying drawings.

[0039] Those skilled in the art will appreciate that the objectives and advantages that can be achieved with the present invention are not limited to the above specific description, and the above and other objectives that can be achieved by the present invention will be more clearly understood from the following detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] The drawings described herein are used to provide a further understanding of the present invention, constitute a part of the present application, and do not constitute a limitation of the present invention. In the drawings:

[0041] Figure 1 The figure is a schematic diagram of the steps of a method for implementing a globalized micro-frontend based on Iframe in one embodiment of the present invention.

[0042] Figure 2 The present invention is a diagram of a globalized micro-frontend technology architecture based on Iframe in one embodiment of the present invention.

[0043] Figure 3 This is an adaptation dependency graph in one embodiment of the present invention.

[0044] Figure 4 This is a front-end service deployment diagram in one embodiment of the present invention.

[0045] Figure 5The present invention is a diagram of the architecture of a global micro-frontend implementation device based on Iframe in one embodiment of the present invention. DETAILED DESCRIPTION

[0046] 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 the embodiments and the accompanying drawings. Here, the illustrative embodiments of the present invention and their descriptions are used to explain the present invention, but are not intended to limit the present invention.

[0047] It should also be noted that, in order to avoid obscuring the present invention due to unnecessary details, only structures and / or processing steps closely related to the solutions according to the present invention are shown in the accompanying drawings, while other details that are not closely related to the present invention are omitted.

[0048] It should be emphasized that the term “include / comprises” when used herein refers to the presence of features, elements, steps or components, but does not exclude the presence or addition of one or more other features, elements, steps or components.

[0049] It should also be noted that, unless otherwise specified, the term “connection” herein may refer not only to a direct connection but also to an indirect connection with an intermediate.

[0050] Hereinafter, embodiments of the present invention will be described with reference to the accompanying drawings. In the accompanying drawings, the same reference numerals represent the same or similar components, or the same or similar steps.

[0051] In order to solve the browser compatibility problem of the existing micro-frontend technical solution, as well as the problems of style isolation between sub-applications and base applications, asynchronous page link address status, and cross-domain when using Iframe technology, the present invention provides a global micro-frontend implementation method based on Iframe, such as Figure 1 As shown, the method includes the following steps S101 to S104:

[0052] Step S101: A user accesses a base service and initiates a request to the base service.

[0053] Step S102: The base service matches the corresponding front-end sub-application according to the preset routing rules, and forwards the request to the front-end sub-application through the Iframe, wherein an identifier is added to the routing and static resource context of the front-end sub-application to distinguish it from the routing and static resource context of the base service.

[0054] Step S103: The front-end sub-application performs initial loading and renders the user interface according to the request; when the back-end data is needed, the front-end sub-application sends an interface request to the gateway service, and the gateway service forwards the interface request to the back-end microservice.

[0055] Step S104: After receiving the interface request, the backend microservice executes the corresponding business logic and stores the processing result data.

[0056] In step S101, the base service is the front-end service closest to the user, and the user needs to go through the base service first to access. Among them, the large front-end is split into multiple sub-applications to form micro-applications or sub-applications. In order to coordinate these sub-applications, a service will be set up to control and coordinate the function, which is called the base service. The base service mainly includes routing management, sub-application loading, and data communication.

[0057] In some embodiments, user access to the base service includes: the user enters an access address in a browser or clicks a link to initiate an HTTP request to the base service, and the request is first resolved by DNS to resolve the domain name into the IP address of the base service.

[0058] In step S102, after receiving the user request, the base service parses it according to the preset routing rules to determine which front-end sub-application the user is accessing, and forwards the request to the front-end sub-application via Iframe. Iframe is a native capability of the browser, which supports embedding another HTML document in the current HTML document without affecting each other.

[0059] like Figure 2 As shown, in the present invention, the base service loads and unloads the corresponding front-end sub-applications through Iframe, which mainly includes routing management, static resource management, data communication and style isolation.

[0060] In some embodiments, considering that the front-end sub-application and base service routes are maintained separately and cannot be repeated, the routes of the front-end sub-application and the base service need to follow a unified specification. The base service route is the route seen by the user. An identifier is added to the front-end sub-application route to distinguish it from the base application. For example, the prefix / subapp is enhanced in the front-end sub-application route. Then, when the base service is distributed to the front-end sub-application, a prefix identifier is added. When the front-end sub-application notifies the base service, the base identifier will be cancelled, and the route of the front-end sub-application will be rewritten to achieve the above functions.

[0061] In some embodiments, considering the differentiated configuration of the base service and the front-end sub-application for routing, the static resource context of the front-end sub-application must also be differentiated. For example, a -static suffix is ​​added to the static resource context of the front-end sub-application to distinguish it. Each front-end sub-application has its own unique context to ensure the acquisition of static resources.

[0062] In some embodiments, public data is stored on the base service, such as uniformly mounted on the window object of the base service, to synchronize data with the front-end sub-application; at the same time, the front-end sub-application can notify the base service of changed data, such as routing information changes, by calling the base service method or event, thus realizing two-way communication from the base service to the front-end sub-application and from the front-end sub-application to the base service. This data communication method is compatible with IE9 browser.

[0063] In some embodiments, the base service loads the corresponding front-end sub-applications through Iframe respectively, but Iframe will cause the front-end sub-application to be obviously isolated from the base service, and the mask and other styles will reoccur and cover the whole world. Therefore, in addition to Iframe, it is necessary to add top navigation and floating strategies on the left side in style isolation. Specifically, the Iframe display area is used as the current window, and the space for the web page header (header) and menu (menu) is reserved. The header and menu are set on the upper layer of the Iframe without occupying the actual document flow. When the current terminal application needs to turn on the mask, the front-end sub-application notifies the base service to control the header and menu to sink; when the interaction is completed and the front-end sub-application needs to close the mask, the front-end sub-application notifies the base service to control the header and menu to float. Based on this design, the mask seen by the user is complete, thereby ensuring the user experience.

[0064] In some embodiments, if an application does not meet the access requirements, the service flow can be guaranteed by canceling data communication, reducing user experience and other degradation methods.

[0065] Based on the above description, the micro-frontend solution of the present invention includes routing management, static resource management, data communication and style isolation. Figure 3 As shown, the front-end sub-application needs to be adapted accordingly before it can be connected to the base application, including routing adaptation, static resource adaptation, data communication adaptation, and style adaptation.

[0066] Exemplarily, according to the base service distribution rules, the front-end sub-application adds the prefix identifier / subapp to the route. When the route of the current sub-application changes, the routing methods, such as the push method and the replace method, are rewritten. When the business code calls the routing method, the base service routing is notified to synchronize the front-end sub-application routing with the base service routing, thus fixing the problem that Iframe cannot guarantee routing synchronization.

[0067] In some embodiments, in style isolation, components are also adapted, and hooks are added to the component mask when it is turned on and off, so that the navigation level of the outer base service is changed, reducing the experience degradation caused by style isolation problems.

[0068] In some embodiments, Figure 4 As shown, the front-end service deployment is further explained. The front-end code is constructed to generate static resource files, which are usually HTML, CSS, JavaScript and related static resource files, and the static resource files are published to the server or content delivery network (Content Delivery Network, CDN), so that users can access the application through the network.

[0069] Among them, the front-end service is independently deployed on the Nginx or CDN server and remains independent of the back-end service. One Nginx service can deploy multiple front-end services, and one front-end service can also be deployed on multiple Nginx services.

[0070] Considering that the communication between the base service and the front-end sub-application needs to ensure the same origin, it is necessary to eliminate cross-domain issues during deployment. Specifically, when the current sub-application and the base service are under different domain names, they are proxied to each other through Nginx services. Based on the above, the Nginx configuration rules of the front-end sub-application need to distinguish between routing rules and static resource rules. For example, routing needs to match the subapp identifier, static resource rules need to match the static identifier, and the base service matches the / identifier.

[0071] In some embodiments, considering that the base service loads and unloads the corresponding front-end sub-application through Iframe, and there is no sub-application registry, it is impossible to implement the management of all front-end sub-applications, and thus it is impossible to provide preloading capabilities similar to technologies such as Qiankun. Therefore, the present invention reduces the service switching time and reduces the waiting time for resource loading by combining resource loading with caching technology to achieve similar effects. Specifically, the static resources of the front-end sub-application are conditionally cached. For example, JavaScript programming language, CSS cascading style sheets and image resources with 8-bit hash numbers are cached, and resources such as page HTML and JavaScript that do not meet the conditions are not cached. This caching scheme can control changes within a single location rule, which has a smaller impact on the service scope, thereby reducing the scope of impact of configuration changes. Among them, location is an instruction used to define request processing rules under a specific URL path, which is usually used for servers such as Nginx, allowing different processing logic to be configured for different paths.

[0072] In step S103, the front-end sub-application performs initialization loading, obtains necessary resources and configurations, and renders the user interface according to the request. When back-end data is needed, the front-end sub-application sends an API interface request to the gateway service, which forwards the interface request to the back-end microservice through the gateway service.

[0073] In step S104, after receiving the interface request, the backend microservice executes the corresponding business logic, such as database operations, external API calls, etc. After the processing is completed, the processing results are stored in the database or other storage services.

[0074] Corresponding to the global micro-frontend implementation method based on Iframe, the present invention also provides a global micro-frontend implementation device based on Iframe, such as Figure 5 As shown, the device comprises:

[0075] The user module is used to initiate a request to the base service.

[0076] The base service module is used to match the corresponding front-end sub-application according to the preset routing rules and forward the request to the front-end sub-application through the Iframe.

[0077] The front-end sub-application module contains multiple front-end sub-applications, which are used to initialize loading and render the user interface according to the request; when the back-end data is needed, an interface request is sent to the gateway service, and the interface request is forwarded to the back-end microservice through the gateway service.

[0078] The backend microservice module contains multiple backend microservices, which are used to execute corresponding business logic after receiving interface requests.

[0079] The embodiment of the present invention also provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a processor, the steps of the aforementioned edge computing server deployment method are implemented. The computer-readable storage medium can be a tangible storage medium, such as a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a floppy disk, a hard disk, a removable storage disk, a CD-ROM, or any other form of storage medium known in the technical field.

[0080] It should be understood by those skilled in the art that the exemplary components, systems and methods described in conjunction with the embodiments disclosed herein can be implemented in hardware, software or a combination of the two. Whether it is performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention. It should be clear that the present invention is not limited to the specific configurations and processes described above and shown in the figures. For the sake of simplicity, a detailed description of known methods is omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of the present invention is not limited to the specific steps described and shown, and those skilled in the art can make various changes, modifications and additions, or change the order between the steps after understanding the spirit of the present invention.

[0081] In the present invention, features described and / or illustrated for one embodiment may be used in the same or similar manner in one or more other embodiments, and / or combined with features of other embodiments or replace features of other embodiments.

[0082] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the embodiments of the present invention may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A global micro-frontend implementation method based on Iframe, characterized in that: The method comprises the following steps: The user accesses the base service and initiates a request to the base service; The base service matches the corresponding front-end sub-application according to the preset routing rules, and forwards the request to the front-end sub-application through the Iframe; wherein, an identifier is added to the routing and static resource context of the front-end sub-application to distinguish them from the routing and static resource context of the base service; The front-end sub-application performs initialization loading and renders the user interface according to the request; when back-end data is needed, the front-end sub-application sends an interface request to the gateway service, and the gateway service forwards the interface request to the back-end microservice; After receiving the interface request, the backend microservice executes the corresponding business logic and stores the processing result data.

2. The method for implementing a globalized micro-frontend based on Iframe according to claim 1, characterized in that: The base service forwards the request to the front-end sub-application via an Iframe, further comprising: storing the public data on the base service and synchronizing it to the front-end sub-application; The front-end sub-application notifies the base service sub-application of data changes by calling the base service method or event, so as to achieve data synchronization between the base service and the front-end sub-application.

3. The method for implementing a globalized micro-frontend based on Iframe according to claim 1, characterized in that: The base service forwards the request to the front-end sub-application via an Iframe, further comprising: Use the Iframe display area as the current window, reserve space for the webpage header and menu, and place the header and menu on the upper layer of the Iframe; When the front-end sub-application needs to open the mask, the front-end sub-application notifies the base service to sink the header and the menu; When the front-end sub-application needs to close the mask, the front-end sub-application notifies the base service to float the header and the menu.

4. The method for implementing a globalized micro-frontend based on Iframe according to claim 1, characterized in that: The method further comprises: Adding a prefix identifier to the route of the front-end sub-application; When the routing of the front-end sub-application changes, the routing method is rewritten; when the business code calls the routing method, the base service routing is notified to synchronize the front-end sub-application routing with the base service routing.

5. The method for implementing a globalized micro-frontend based on Iframe according to claim 1, characterized in that: When deploying services on the front end, it also includes: The front-end code is constructed to generate static resource files, and the static resource files are published to the server; wherein the front-end service is independently deployed on the server and remains independent from the back-end service.

6. The method for implementing a globalized micro-frontend based on Iframe according to claim 5, characterized in that: When deploying services on the front end, it also includes: When the front-end sub-application and the base service are in different domain names, the servers are mutually proxied to ensure that the front-end sub-application and the base service are in the same source state when communicating.

7. The method for implementing a globalized micro-frontend based on Iframe according to claim 1, characterized in that: When managing the front-end sub-application, it also includes: The server adds a conditional cache configuration and returns it to the browser. The browser conditionally caches the static resources of the front-end sub-application according to the conditional cache configuration to reduce the waiting time for resource loading; the conditions at least include caching programming languages, cascading style sheets and image resources with hash numbers of preset digits.

8. A global micro-frontend implementation device based on Iframe, characterized in that: When the device is executed, the method for implementing a globalized micro-frontend based on Iframe according to any one of claims 1 to 7 is implemented, and the device includes: User module, used to initiate requests to the base service; The base service module is used to match the corresponding front-end sub-application according to the preset routing rules, and forward the request to the front-end sub-application through the Iframe; The front-end sub-application module includes multiple front-end sub-applications, which are used to initialize and load according to the request and render the user interface; when back-end data is needed, an interface request is sent to the gateway service, and the gateway service forwards the interface request to the back-end microservice; The backend microservice module includes multiple backend microservices, which are used to execute corresponding business logic after receiving the interface request; The data storage module is used to store the processing result data.

9. A computer-readable storage medium having a computer program / instruction stored thereon, characterized in that: When the computer program / instructions are executed by a processor, the steps of the method as claimed in any one of claims 1 to 7 are implemented.

10. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instructions are executed by a processor, the steps of the method as claimed in any one of claims 1 to 7 are implemented.

Images