Method and device for building micro front-end application

Abstract

The present invention discloses a method and device for building a micro-front-end application, and relates to the field of computer technology. A specific implementation of the method includes: defining a micro-application tag, and creating a shadow document object model through the micro-application tag to generate a micro-application web native component; in response to the micro-front-end application construction operation, obtaining static resources under the sub-application domain name according to the domain name address of the sub-application; inserting the static resources into the shadow document object model to render the elements of the sub-application into the shadow document object model to introduce the sub-application into the main application. This implementation can solve the selector conflict problem and the problem of separation of the sub-application from the main application DOM structure, and there is no need to monitor route changes, and it can be rendered anywhere on the page, thereby reducing the configuration threshold, and realizing that a line of code can render the micro-front-end application, with high communication efficiency and flexible implementation.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and device for building a micro-frontend application. Background Art

[0002] As the monolithic application evolves into a monolithic application over a long period of time, the number of people and teams involved increases, and the project changes and functions increase, which leads to the problem of difficult application maintenance. Micro frontends are the solution to this problem. Micro frontends are a technical means and method strategy for jointly building modern web applications by independently developing and deploying applications by multiple teams. Currently, the commonly used implementation solutions for micro frontend applications are mostly based on micro frontend frameworks such as iframe tags in HTML, single-spa and qiankun.

[0003] However, the current implementation of micro frontends through iframe or single-spa, qiankun and other solutions is not perfect. Micro frontend frameworks such as single-spa and qiankun will have selector conflicts, and iframe will have the problem of separating the rendered sub-application from the main application DOM structure. Summary of the invention

[0004] In view of this, the embodiments of the present invention provide a method and device for building a micro-front-end application, which can solve the selector conflict problem that micro-front-end frameworks such as single-spa and qiankun cannot solve, as well as the problem of separation of the sub-application rendered by the iframe from the DOM structure of the main application. There is no need to monitor route changes and rendering can be done anywhere on the page, thereby lowering the configuration threshold and realizing rendering of the micro-front-end application with one line of code, with high communication efficiency and flexible implementation.

[0005] To achieve the above objective, according to one aspect of an embodiment of the present invention, a method for building a micro-frontend application is provided.

[0006] A method for building a micro front-end application, wherein the micro front-end application includes a main application and a sub-application, and the method includes:

[0007] Define a micro-application tag, and create a shadow document object model through the micro-application tag to generate a micro-application web native component;

[0008] In response to the micro-frontend application building operation, obtain static resources under the sub-application domain name according to the domain name address of the sub-application;

[0009] The static resource is inserted into the shadow document object model to render the elements of the sub-application into the shadow document object model to introduce the sub-application into the main application.

[0010] Optionally, after defining the micro-app tag, also include:

[0011] Register a monitoring method to monitor whether the micro-application tag is rendered or uninstalled.

[0012] Optionally, before inserting the static resource into the shadow document object model, the method further includes:

[0013] The page document object of the sub-application is rewritten, and when obtaining elements from the sub-application, it will point to obtaining elements from the shadow document object model.

[0014] Optionally, it also includes:

[0015] When the domain name address of the sub-application changes, the static resources of the sub-application are updated.

[0016] Optionally, updating the static resources of the sub-application includes:

[0017] Generate a custom sub-application uninstall event, so that the sub-application uninstalls the sub-application by listening to the uninstall event;

[0018] The updated static resources are obtained according to the changed domain name address, and the obtained updated static resources are inserted into the shadow document object model to update the static resources of the sub-application.

[0019] Optionally, it also includes:

[0020] When the sub-application is uninstalled by the main application, a custom sub-application uninstall event is generated, so that the sub-application uninstalls the sub-application through the monitored uninstall event.

[0021] According to another aspect of an embodiment of the present invention, a device for building a micro-frontend application is provided.

[0022] A device for building a micro front-end application, wherein the micro front-end application includes a main application and a sub-application, and the device includes:

[0023] A component creation module, used to define a micro-application tag, and create a shadow document object model through the micro-application tag to generate a micro-application web native component;

[0024] A resource acquisition module, configured to respond to a micro-frontend application construction operation and acquire static resources under the sub-application domain name according to the domain name address of the sub-application;

[0025] An element rendering module is used to insert the static resource into the shadow document object model to render the elements of the sub-application into the shadow document object model to introduce the sub-application into the main application.

[0026] Optionally, a monitoring registration module is also included, which is used to:

[0027] After defining the micro-application tag, register a monitoring method to monitor whether the micro-application tag is rendered or uninstalled.

[0028] Optionally, a file rewriting module is also included, for:

[0029] Before inserting the static resource into the shadow document object model, the page document object of the sub-application is rewritten, and when obtaining an element from the sub-application, it will point to obtaining the element from the shadow document object model.

[0030] Optionally, a sub-application update module is further included, for:

[0031] When the domain name address of the sub-application changes, the static resources of the sub-application are updated.

[0032] Optionally, the application update module is further used to:

[0033] Generate a custom sub-application uninstall event, so that the sub-application uninstalls the sub-application by listening to the uninstall event;

[0034] The updated static resources are obtained according to the changed domain name address, and the obtained updated static resources are inserted into the shadow document object model to update the static resources of the sub-application.

[0035] Optionally, a sub-application uninstallation module is further included, which is used to:

[0036] When the sub-application is uninstalled by the main application, a custom sub-application uninstall event is generated, so that the sub-application uninstalls the sub-application through the monitored uninstall event.

[0037] According to another aspect of an embodiment of the present invention, an electronic device for building a micro-front-end application is provided.

[0038] An electronic device for building a micro-frontend application, comprising: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, the one or more processors implement the method for building a micro-frontend application provided by an embodiment of the present invention.

[0039] According to still another aspect of the embodiments of the present invention, a computer readable medium is provided.

[0040] A computer-readable medium stores a computer program, which, when executed by a processor, implements a method for building a micro-frontend application provided in an embodiment of the present invention.

[0041] One embodiment of the above invention has the following advantages or beneficial effects: by defining a micro-application tag, and creating a shadow document object model through the micro-application tag to generate a micro-application web native component; in response to a micro-front-end application construction operation, obtaining static resources under the sub-application domain name according to the domain name address of the sub-application; inserting static resources into the shadow document object model to render the elements of the sub-application into the shadow document object model, so as to introduce the sub-application into the main application, by using the web native component Web Components to perform encapsulation rendering of the micro-front-end, data isolation can be performed through the created shadow document object model, thereby solving the selector conflict problem that the micro-front-end frameworks such as single-sp a and qiankun cannot solve; and Web Comp onents belong to the DOM structure of the current page, which can solve the problem of the separation of the sub-application rendered by the iframe from the main application DOM structure. In addition, as a web native component, Web Components can break through the limitations of the web front-end framework, without monitoring routing changes, and can be rendered anywhere on the page, thereby reducing the configuration threshold, and realizing that a line of code can render the micro-front-end application, with high communication efficiency and flexible implementation.

[0042] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with the specific implementation manner. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0044] Figure 1 This is a schematic diagram of the main steps of a method for building a micro-frontend application according to an embodiment of the present invention;

[0045] Figure 2 It is a schematic diagram of the implementation process of building a micro-frontend application according to an embodiment of the present invention;

[0046] Figure 3 is a schematic diagram of main modules of a device for building a micro-frontend application according to an embodiment of the present invention;

[0047] Figure 4 is an exemplary system architecture diagram to which embodiments of the present invention may be applied;

[0048] Figure 5 It is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION

[0049] The following is a description of exemplary embodiments of the present invention in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0050] The technical terms involved in the present invention are explained as follows:

[0051] Web Components: Web native components, consisting of Custom Elements, Shadow Dom, etc.

[0052] HTML: Hyper Text Markup Language (HTML for short);

[0053] DOM: Document Object Model (DOM for short);

[0054] Custom Elements: custom label elements;

[0055] Shadow Dom: Shadow DOM;

[0056] Fetch: The browser's built-in method for requesting data;

[0057] getAttribute: The browser's built-in method for obtaining element attributes;

[0058] customEvent: The browser's built-in method for creating custom events.

[0059] At present, the implementation of micro front-end through iframe, single-spa, qiankun and other solutions is not perfect. After analysis, the main shortcomings are as follows:

[0060] 1. iframe

[0061] The isolation of the iframe tag cannot be broken, resulting in the separation of the DOM structure, the inability to share the application context, and inefficient data communication, which leads to problems with the development experience and product experience.

[0062] 2. Micro front-end frameworks such as single-spa and qiankun

[0063] Micro-frontend frameworks such as single-spa and qiankun can solve the problems caused by iframes. However, although their simulated sandbox function can bring Javascript and CSS style isolation, they cannot solve the conflicts of class, ID and other selectors, which brings risks to projects that frequently operate DOM. The mechanism of using route monitoring and matching rendering makes the configuration complex and inflexible. Sub-applications need to modify the rendering method and build configuration.

[0064] In order to solve the above technical problems, the present invention uses Web Components to encapsulate and render micro-frontends. The sandbox isolation property of Web Components can solve the selector conflict problem that micro-frontend frameworks such as single-spa and qiankun cannot solve, and WebComponents belong to the DOM structure of the current page, which can avoid the problem of the sub-application rendered by iframe being separated from the DOM structure of the main application.

[0065] As a web native component, Web Components can break through the limitations of the web front-end framework. It does not need to monitor route changes and can be rendered anywhere on the page, thereby lowering the configuration threshold and enabling micro-front-end applications to be rendered with just one line of code.

[0066] The micro-frontend application is divided into a main application (also called a base application) and a sub-application, which are different browser pages. The main application (that is, the browser page) merges other pages into its own page for rendering. The merged page is called a sub-page, so that the main application page and the sub-application page can be seen at the same time in the main application. The overall process of the construction method of the micro-frontend application of the present invention is: by defining and encapsulating a Web Components component named "micro-app", when using this component in the project, the static resources of the sub-application are requested according to the path attribute of the incoming sub-application resource path, and rendered into the Shadow Do m of the current component, thereby realizing the introduction of the sub-application into the main application.

[0067] Figure 1 Schematic diagram of the main steps of the method for building a micro-frontend application according to an embodiment of the present invention. Figure 1 As shown, the method for building a micro-frontend application in an embodiment of the present invention mainly includes the following steps S101 to S103.

[0068] Step S101: define a micro-application tag, and create a shadow document object model through the micro-application tag to generate a micro-application web native component. According to an embodiment of the present invention, after defining the micro-application tag, a monitoring method can also be registered to monitor whether the micro-application tag is rendered or uninstalled. In the specific implementation, a tag named micro-app can be created by calling the define method of Custom Elements, and a connectedCallback method is registered to monitor whether the tag is rendered, and a disconnectedCallback method is registered to monitor whether the tag is uninstalled. After defining the micro-application tag, a shadow document object model Shadow Dom is created by calling the attachShadow method of the micro-app tag. Shadow Dom is used as a container. All static files and final rendered elements of all sub-applications will be inserted into Shadow Dom. It isolates the current sub-application from the outside to prevent global variables, styles, and selector pollution, thereby achieving a sandbox effect. At this time, the micro-app tag becomes a standard web native component (i.e., Web Components component), which will be referred to as a micro-app component in the following introduction.

[0069] After creating the micro-app component, you can use the micro-app component to render the sub-application of the micro frontend. You can import the sub-application into the main application by importing and rendering the micro-app component in the main application. When importing and rendering the micro-app component in the main application, its usage is, for example:<micro-app path=' / / localhost:3001'> The usage method can be specifically divided into the following steps S102 and S103.

[0070] Step S102: In response to the micro-frontend application construction operation, obtain the static resources under the sub-application domain name according to the sub-application domain name address. When the micro-app component is rendered, the previously registered connectedCallback method will be called, and the value of the path attribute will be obtained through getAttribute('path'), where the value of the path attribute is the domain name address of the sub-application. After that, the fetch method can be used according to the value of the path attribute to obtain the static resources under the sub-application domain name, including html, javascript, css and other resources.

[0071] After obtaining the static resources under the sub-application domain name and inserting them into the shadow document object model, you also need to rewrite the sub-application's page document object. When obtaining elements from the sub-application, it will point to the element obtained from the shadow document object model. This is because the document can only obtain elements from the external main application, so the sub-application's document needs to be rewritten. When obtaining elements in the sub-application, the document will point to the Shadow Dom. Document refers to the document object in HTML. Every page loaded into the browser will become a document. It comes with many methods, such as adding, deleting, modifying, and checking elements. Because Shadow Dom is a closed environment, document cannot obtain elements inside ShadowDom, but can only get external ones. Usually, sub-applications will use documents extensively to operate elements, so some modifications need to be made to the document.

[0072] Step S103: insert static resources into the shadow document object model to render the elements of the sub-application into the shadow document object model to introduce the sub-application into the main application. Insert the acquired static resources into the container Shadow Dom, and the sub-application can run normally, and its elements will be rendered into the current Shadow Dom.

[0073] Since the running process of the micro-frontend application also involves the updating of sub-application resources and the uninstallation of sub-applications, the method for constructing a micro-frontend application of the present invention may also include: when the domain name address of the sub-application changes, the static resource of the sub-application is updated. When the value of the path attribute changes, the micro-app component will determine whether the domain name of the new value after the change is the same as the value before the change. If only the parameter or hash value changes, the domain name address of the sub-application is considered to be the same, and the update operation of the sub-application resources is not performed at this time, and the sub-application continues to run normally; otherwise, it is considered that the domain name address of the sub-application is different and the sub-application resources need to be updated.

[0074] According to an embodiment of the present invention, when updating the static resources of a sub-application, the following operations need to be performed:

[0075] 1. Generate a custom sub-application uninstall event so that the sub-application can uninstall the sub-application by listening to the uninstall event. Specifically, define a custom event named unmount (unmount) through customEvent and send it. The sub-application can perform uninstall-related operations such as clearing data and unbinding events by listening to the unmount event, and the sub-application is uninstalled;

[0076] 2. Obtain the updated static resources according to the changed domain name address, and insert the obtained updated static resources into the shadow document object model to update the static resources of the sub-application. Fetch the static resources, including html, javascript, css, etc., according to the value of the changed path attribute through a fetch request, and rewrite the document. When obtaining elements in the sub-application, the document will point to the Shadow Dom. Insert the obtained new static resources into the container ShadowDom and run the new sub-application.

[0077] Similarly, the method for constructing a micro front-end application of the present invention may further include:

[0078] When the sub-application is unloaded by the main application, a custom sub-application unloading event is generated so that the sub-application can be unloaded through the listened unloading event. When the micro-app component is unloaded by the main application, the disconnectedCallback method will be automatically triggered. In this method, a custom event named unmount is defined through customEvent and sent. The sub-application performs unloading-related operations, such as data clearing and event unbinding, by listening to the unmount event, and the sub-application is unloaded.

[0079] From the above description, it can be seen that the coupling between the main application and the sub-application in the present invention is very small, and operations such as unloading are also progressively optional. Only by adding <micro-app path='domain name address'> at the place of use can a micro front-end sub-application be rendered, and the construction of the micro front-end can be simply realized.

[0080] Figure 2 It is a schematic diagram of the implementation process for constructing a micro front-end application according to an embodiment of the present invention. As Figure 2 shown, when constructing a micro front-end application according to an embodiment of the present invention, first, a Web Components component needs to be created. Specifically, the define method of CustomElements can be called to define an HTML tag named micro-app, and at the same time, the connectedCallback method is registered to listen for whether the tag is rendered, and the disconnectedCallback method is registered to listen for whether the component is unloaded. Then, the attachShadow method自带 by the micro-app tag is called to create a container element ShadowDom that can be isolated from the outside.

[0081] Then, the micro-app component is introduced and rendered in the main application. When the micro-app component is rendered and inserted into the DOM structure, the connectedCallback method is automatically called, and the value of the path attribute is obtained through getAttribute('path'); according to the value of the path attribute, the static resources under the sub-application domain name are requested through the fetch method, including html, javascript, css, etc. After that, the document of the sub-application is rewritten, and when the document is used to select an element, the document will be redirected to the Shadow Dom. After that, the obtained static resources are inserted into the container Shadow Dom and the sub-application is rendered. After that, the micro-frontend application can be run.

[0082] During the operation of the micro-frontend application, if the value of the path attribute changes, it is determined whether the domain name of the sub-application has changed. If the domain name has changed, the old sub-application is uninstalled and the new sub-application is reloaded. Otherwise, no operation is performed. If a component is uninstalled, the disconnectedCallback method is automatically triggered. In this method, a custom event named unmount is defined and sent through customEvent. The sub-application performs uninstall-related operations such as clearing data and unbinding events by listening to the unmount event, and the current sub-application ends the process.

[0083] Figure 3 Schematic diagram of the main modules of the apparatus for building a micro-frontend application according to an embodiment of the present invention. Figure 3 As shown, the device 300 for building a micro-frontend application according to an embodiment of the present invention mainly includes a component creation module 301, a resource acquisition module 302 and an element rendering module 303.

[0084] A component creation module 301 is used to define a micro-application tag and create a shadow document object model through the micro-application tag to generate a micro-application web native component;

[0085] The resource acquisition module 302 is used to obtain the static resources under the sub-application domain name according to the domain name address of the sub-application in response to the micro-frontend application construction operation;

[0086] The element rendering module 303 is used to insert the static resource into the shadow document object model to render the elements of the sub-application into the shadow document object model to introduce the sub-application into the main application.

[0087] According to one embodiment of the present invention, the apparatus 300 for building a micro-frontend application further includes a monitoring registration module (not shown in the figure) for:

[0088] After defining the micro-application tag, register a monitoring method to monitor whether the micro-application tag is rendered or uninstalled.

[0089] According to another embodiment of the present invention, the apparatus 300 for building a micro-frontend application further includes a file rewriting module (not shown in the figure) for:

[0090] Before inserting the static resource into the shadow document object model, the page document object of the sub-application is rewritten, and when obtaining an element from the sub-application, it will point to obtaining the element from the shadow document object model.

[0091] According to another embodiment of the present invention, the apparatus 300 for building a micro-frontend application further includes a sub-application update module (not shown in the figure) for:

[0092] When the domain name address of the sub-application changes, the static resources of the sub-application are updated.

[0093] According to another embodiment of the present invention, the application update module (not shown in the figure) is further used for:

[0094] Generate a custom sub-application uninstall event, so that the sub-application uninstalls the sub-application by listening to the uninstall event;

[0095] The updated static resources are obtained according to the changed domain name address, and the obtained updated static resources are inserted into the shadow document object model to update the static resources of the sub-application.

[0096] According to another embodiment of the present invention, the apparatus 300 for building a micro-frontend application further includes a sub-application uninstallation module (not shown in the figure) for:

[0097] When the sub-application is uninstalled by the main application, a custom sub-application uninstall event is generated, so that the sub-application uninstalls the sub-application through the monitored uninstall event.

[0098] According to the technical solution of the embodiment of the present invention, by defining a micro-application tag, and creating a shadow document object model through the micro-application tag to generate a micro-application web native component; in response to the micro-front-end application construction operation, obtain the static resources under the sub-application domain name according to the domain name address of the sub-application; insert the static resources into the shadow document object model to render the elements of the sub-application into the shadow document object model, so as to introduce the sub-application into the main application, and by using the web native component Web Components to perform encapsulation rendering of the micro-front-end, the created shadow document object model can be used to isolate data, thereby solving the selector conflict problem that the micro-front-end frameworks such as single-spa and qiankun cannot solve; and WebComponents belongs to the DOM structure of the current page, which can solve the problem of the separation of the sub-application rendered by the iframe and the main application DOM structure. In addition, as a web native component, Web Components can break through the limitations of the web front-end framework, without monitoring routing changes, and can be rendered anywhere on the page, thereby reducing the configuration threshold, and realizing that a line of code can render the micro-front-end application, with high communication efficiency and flexible implementation.

[0099] Figure 4 An exemplary system architecture 400 is shown to which the method for building a micro-frontend application or the apparatus for building a micro-frontend application according to an embodiment of the present invention can be applied.

[0100] like Figure 4 As shown, system architecture 400 may include terminal devices 401, 402, 403, network 404 and server 405. Network 404 is used to provide a medium for communication links between terminal devices 401, 402, 403 and server 405. Network 404 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0101] Users can use terminal devices 401, 402, 403 to interact with server 405 through network 404 to receive or send messages, etc. Various client applications can be installed on terminal devices 401, 402, 403, such as web development applications, web browser applications, front-end development applications, APP development applications, social platform software, etc. (only as examples).

[0102] The terminal devices 401 , 402 , and 403 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers.

[0103] Server 405 may be a server that provides various services, such as a background management server (only an example) that provides support for micro-frontend build requests sent by users using terminal devices 401, 402, and 403. The background management server may define micro-application tags for the received micro-frontend build request and other data, and create a shadow document object model through the micro-application tag to generate a micro-application web native component; in response to the micro-frontend application build operation, obtain the static resources under the sub-application domain name according to the domain name address of the sub-application; insert the static resources into the shadow document object model to render the elements of the sub-application into the shadow document object model, so as to introduce the sub-application and other processing in the main application, and feed back the processing results (such as the constructed micro-frontend application - only an example) to the terminal device.

[0104] It should be noted that the method for building a micro-front-end application provided in the embodiment of the present invention is generally executed by the server 405, and accordingly, the device for building a micro-front-end application is generally set in the server 405.

[0105] It should be understood that Figure 4 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to the implementation requirements.

[0106] Reference below Figure 5 , which shows a schematic diagram of the structure of a computer system 500 of a terminal device or a server suitable for implementing an embodiment of the present invention. Figure 5 The terminal device or server shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0107] like Figure 5 As shown, the computer system 500 includes a central processing unit (CPU) 501, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 502 or a program loaded from a storage part 508 into a random access memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the system 500 are also stored. The CPU 501, the ROM 502, and the RAM 503 are connected to each other via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0108] The following components are connected to the I / O interface 505: an input section 506 including a keyboard, a mouse, etc.; an output section 507 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 508 including a hard disk, etc.; and a communication section 509 including a network interface card such as a LAN card, a modem, etc. The communication section 509 performs communication processing via a network such as the Internet. A drive 510 is also connected to the I / O interface 505 as needed. A removable medium 511, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 510 as needed, so that a computer program read therefrom is installed into the storage section 508 as needed.

[0109] In particular, according to the embodiments disclosed in the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present invention include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 509, and / or installed from the removable medium 511. When the computer program is executed by the central processing unit (CPU) 501, the above-mentioned functions defined in the system of the present invention are executed.

[0110] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0111] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, a program segment, or a part of a code, and the above-mentioned module, program segment, or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0112] The units or modules involved in the embodiments of the present invention may be implemented in software or in hardware. The units or modules described may also be provided in a processor, for example, may be described as: a processor including a component creation module, a resource acquisition module, and an element rendering module. Among them, the names of these units or modules do not constitute a limitation on the unit or module itself under certain circumstances, for example, the component creation module may also be described as "a module for defining micro-application tags, and creating a shadow document object model through the micro-application tags to generate a micro-application web native component".

[0113] As another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiment; or it may exist independently without being assembled into the device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by a device, the device includes: defining a micro-application tag, and creating a shadow document object model through the micro-application tag to generate a micro-application web native component; in response to a micro-frontend application building operation, obtaining static resources under the sub-application domain name according to the domain name address of the sub-application; inserting the static resources into the shadow document object model to render the elements of the sub-application into the shadow document object model to introduce the sub-application into the main application.

[0114] According to the technical solution of the embodiment of the present invention, by defining a micro-application tag, and creating a shadow document object model through the micro-application tag to generate a micro-application web native component; in response to the micro-front-end application construction operation, obtain the static resources under the sub-application domain name according to the domain name address of the sub-application; insert the static resources into the shadow document object model to render the elements of the sub-application into the shadow document object model, so as to introduce the sub-application into the main application, and by using the web native component Web Components to perform encapsulation rendering of the micro-front-end, the created shadow document object model can be used to isolate data, thereby solving the selector conflict problem that the micro-front-end frameworks such as single-spa and qiankun cannot solve; and WebComponents belongs to the DOM structure of the current page, which can solve the problem of the separation of the sub-application rendered by the iframe and the main application DOM structure. In addition, as a web native component, Web Components can break through the limitations of the web front-end framework, without monitoring routing changes, and can be rendered anywhere on the page, thereby reducing the configuration threshold, and realizing that a line of code can render the micro-front-end application, with high communication efficiency and flexible implementation.

[0115] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for building a micro front-end application, characterized in that: The micro front-end application includes a main application and a sub-application, and the method includes: Define a micro-application tag, and create a shadow document object model through the micro-application tag to generate a micro-application web native component, wherein the shadow document object model is created by calling the attachShadow method of the micro-application tag, and the shadow document object model is used as a container to insert the static files and elements of the sub-application into the shadow document object model to generate a micro-application web native component; In response to the micro-frontend application building operation, obtain static resources under the sub-application domain name according to the domain name address of the sub-application; The static resource is inserted into the shadow document object model to render the elements of the sub-application into the shadow document object model to introduce the sub-application into the main application.

2. The method according to claim 1, characterized in that After defining the micro-app tag, it also includes: Register a monitoring method to monitor whether the micro-application tag is rendered or uninstalled.

3. The method according to claim 1, characterized in that Before inserting the static resource into the shadow document object model, the method further includes: The page document object of the sub-application is rewritten, and when obtaining elements from the sub-application, it will point to obtaining elements from the shadow document object model.

4. The method according to claim 1, characterized in that Also includes: When the domain name address of the sub-application changes, the static resources of the sub-application are updated.

5. The method according to claim 4, characterized in that Updating the static resources of the sub-application includes: Generate a custom sub-application uninstall event, so that the sub-application uninstalls the sub-application by listening to the uninstall event; The updated static resources are obtained according to the changed domain name address, and the obtained updated static resources are inserted into the shadow document object model to update the static resources of the sub-application.

6. The method according to claim 1 or 2, characterized in that: Also includes: When the sub-application is uninstalled by the main application, a custom sub-application uninstall event is generated, so that the sub-application uninstalls the sub-application through the monitored uninstall event.

7. A device for building a micro front-end application, characterized in that: The micro front-end application includes a main application and a sub-application, and the device includes: A component creation module, used to define a micro-application tag, and create a shadow document object model through the micro-application tag to generate a micro-application web native component, wherein the shadow document object model is created by calling the attachShadow method of the micro-application tag, and the shadow document object model is used as a container to insert the static files and elements of the sub-application into the shadow document object model to generate a micro-application web native component; A resource acquisition module, configured to respond to a micro-frontend application construction operation and acquire static resources under the sub-application domain name according to the domain name address of the sub-application; An element rendering module is used to insert the static resource into the shadow document object model to render the elements of the sub-application into the shadow document object model to introduce the sub-application into the main application.

8. The device according to claim 7, characterized in that Also includes file rewriting modules for: Before inserting the static resource into the shadow document object model, the page document object of the sub-application is rewritten, and when obtaining an element from the sub-application, it will point to obtaining the element from the shadow document object model.

9. An electronic device for building a micro-front-end application, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 6.

10. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.

Images