Micro-front-end system, sub-application loading method and computer readable storage medium

Abstract

Embodiments of the present application provide a micro-frontend system, a sub-application loading method and a computer readable storage medium. The micro-frontend system comprises a routing registration service, a command line tool and a micro-frontend running framework. The routing registration service is a node backend service independently maintained and run, and is configured to provide routing information, a loading mode and deployment information of a sub-application for the micro-frontend running framework of a main application. The command line tool is configured to provide a new sub-application, access to a sub-application and service registration functions through a command line. The micro-frontend running framework is a framework running in a main application, and is configured to load and run a sub-application based on an obtained network request, and provide sub-application running capabilities in multiple frameworks. The micro-frontend system provided by the present application has good expansion and disaster recovery capabilities, and also has sub-application running capabilities in multiple frameworks.

Description

TECHNICAL FIELD

[0001] The embodiment of the application relates to the technical field of Internet, and relates to but not limited to a micro-frontend system, a sub-application loading method and a computer readable storage medium. BACKGROUND

[0002] At present, in the process of front-end development, the development project is more and more huge, and the product function is complex, the code conflict is frequent, and the influence is huge. In view of this series of problems, the micro-frontend emerges as the times require. The micro-frontend borrows the concept of the back-end micro-service, and splits a huge front-end project into a plurality of small projects, and the small projects completely have the independent development and running ability. The whole system cooperates with the small projects to realize the display and interaction of all pages.

[0003] The existing micro-frontend framework routing service uses the nginx service to forward, is low in efficiency, the disaster recovery processing scheme is complex and high in maintenance cost, or the communication means is single, and the events are difficult to manage after too many applications. SUMMARY

[0004] The embodiment of the application provides a micro-frontend system, a sub-application loading method and a computer readable storage medium, and very good expansion, disaster recovery capability are provided through the node service which can be independently maintained and run, and the multi-framework sub-application capability is provided.

[0005] The technical scheme of the embodiment of the application is as follows:

[0006] The embodiment of the application provides a micro-frontend system, comprising:

[0007] A routing registration service, a command line tool and a micro-frontend running framework, wherein,

[0008] The routing registration service is a node back-end service which is independently maintained and run, and is used for providing the routing information, the loading mode and the deployment information of the sub-application for the micro-frontend running framework of the main application;

[0009] The command line tool is used for providing the functions of creating a new sub-application, accessing a sub-application and service registration through a command line;

[0010] The micro-frontend running framework is a framework running in the main application, is used for loading and running the sub-application based on the obtained network request, and can provide the sub-application running capability under the multi-framework.

[0011] In some embodiments, the micro-frontend running framework further comprises a data management module, a performance monitoring module and an error processing module, wherein:

[0012] The data management module is used for realizing the data two-way binding function through the data provided by the props transmission mechanism.

[0013] The performance monitoring module is configured to monitor loading duration and running duration of the sub-application.

[0014] The error processing module is configured to monitor and process error information of the sub-application during loading and running.

[0015] Embodiments of the present application provide a sub-application loading method, applied to a micro-frontend system, and the method comprises the following steps:

[0016] obtaining a network access request for accessing a sub-application, wherein the network access request carries a URL address of the sub-application;

[0017] pulling, based on the URL address of the sub-application, route information corresponding to the sub-application from a route registration service of the micro-frontend system;

[0018] querying, by a sub-application loading module of the micro-frontend system, sub-application resources corresponding to the route information from the route registration service based on the route information;

[0019] loading, by the sub-application loading module, the sub-application resources when the sub-application resources need to be loaded;

[0020] running, by a sub-application running module of the micro-frontend system, the sub-application resources to render a page of the sub-application.

[0021] In some embodiments, the method further comprises:

[0022] determining whether the sub-application resources are preloaded or opened;

[0023] determining that the sub-application resources need to be loaded when the sub-application resources are not preloaded and not opened.

[0024] In some embodiments, the loading, by the sub-application loading module, the sub-application resources when the sub-application resources need to be loaded comprises:

[0025] obtaining a framework identifier and a resource loading type of the sub-application when the sub-application resources need to be loaded;

[0026] loading the sub-application resources in a sub-application framework corresponding to the framework identifier according to the resource loading type.

[0027] Embodiments of the present application provide a computer readable storage medium storing executable instructions for causing a processor to execute the above method.

[0028] Embodiments of the present application have the following beneficial effects:

[0029] In the micro front-end system provided by the embodiment of the application, a routing registration service, a command line tool and a micro front-end running framework are included, wherein the routing registration service is a node backend service independently maintained and run, so that good expansion and disaster recovery capabilities can be provided, the routing registration service provides the routing information, loading mode and deployment information of the sub-applications for the micro front-end running framework of the main application; the command line tool is used to provide the functions of creating a new sub-application, accessing a sub-application and service registration through a command line; and the micro front-end running framework is a framework running in the main application, used to load and run the sub-applications based on the obtained network requests, and can provide the running capabilities of the sub-applications under multiple frameworks. BRIEF DESCRIPTION OF DRAWINGS

[0030] Figure 1 The composition structure schematic diagram of the micro front-end system provided by the embodiment of the application is shown in the figure.

[0031] Figure 2 The composition structure schematic diagram of another micro front-end system provided by the embodiment of the application is shown in the figure.

[0032] Figure 3 The implementation flowchart of the sub-application loading method based on the micro front-end provided by the embodiment of the application is shown in the figure.

[0033] Figure 4 The implementation flowchart of another sub-application loading method based on the micro front-end provided by the embodiment of the application is shown in the figure.

[0034] Figure 5 The implementation flowchart of the sub-application loading method based on the micro front-end provided by the embodiment of the application is shown in the figure.

[0035] Figure 6 The micro front-end system architecture schematic diagram provided by the embodiment of the application is shown in the figure.

[0036] Figure 7 The communication mechanism schematic diagram in the micro front-end system provided by the embodiment of the application is shown in the figure.

[0037] Figure 8 The implementation flowchart of the sub-application loading module loading sub-application resources provided by the embodiment of the application is shown in the figure.

[0038] Figure 9 The design schematic diagram of the JS sandbox provided by the embodiment of the application is shown in the figure. DETAILED DESCRIPTION

[0039] In order to make the purpose, technical solutions and advantages of the application clearer, the application will be described in further detail below with reference to the drawings, and the described embodiments should not be regarded as limiting the application, and all other embodiments obtained by those skilled in the art without creative labor shall fall within the scope of protection of the application.

[0040] In the following description, reference is made to "some embodiments", which describe a subset of all possible embodiments, but it is understood that "some embodiments" can be the same subset or different subsets and can be combined with each other as long as there is no conflict. Unless otherwise defined, all technical and scientific terms used in the embodiments of the present application have the same meaning as understood by those skilled in the art to which the embodiments of the present application belong. The terms used in the embodiments of the present application are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0041] The relevant data collection processing in the embodiments of the present application should strictly comply with the requirements of relevant laws and regulations, obtain the informed consent or separate consent of the personal information subject, and within the scope of authorization of laws and regulations and the personal information subject, carry out subsequent data use and processing.

[0042] The embodiments of the present application provide a micro-frontend system architecture, which provides an application loader module for loading front-end applications of various different frameworks, such as vue, react, etc.; a JavaScript sandbox mechanism is implemented to ensure js environment isolation; the system architecture also provides cross-domain processing of sub-application web workers, realizes css isolation through sub-application packaging injection of css prefixes, sub-application runtime injection of css prefixes, and sub-application shadow dom mode loading, provides three parent-child application communication mechanisms including props transmission, custom event, and postmessage, provides a route registration service, provides centralized route discovery capability, and supports original iframe operation.

[0043] The following describes an exemplary application of the micro-frontend system provided by the embodiments of the present application, Figure 1 The constituent structure diagram of the micro-frontend system provided by the embodiments of the present application is shown in FIG. 1, which includes a route registration service 101, a command line tool 102, and a micro-frontend running framework 103, wherein, Figure 1

[0044] The route registration service 101 is a node backend service independently maintained and run, which is used to provide the route information, loading mode, and deployment information of the sub-application for the micro-frontend running framework of the main application.

[0045] ​Here, the route registration service can be a server providing an http service, which can be implemented by nodejs in actual implementation, and a set of functions of recording routes, deleting routes, querying routes, login authorization and the like can be implemented by a web server based on a koa framework, and a database uses mysql. Of course, the route registration service 101 can be a service having the same functions and implemented by any server or language, such as java spring cloud, c++ server kit and the like.

[0046] Since the route registration service is an independent node backend service, a load balancing service can be further arranged in the route registration service, and after a network request is obtained, the network request can be distributed to a route registration service with smaller load based on the loads of the route registration services, and when the loads of a plurality of route registration services are large, good expansion and disaster recovery capabilities can be provided.

[0047] The command line tool 102 is configured to provide new sub-application creation, sub-application access and service registration functions through a command line.

[0048] Here, a tool for user interaction with the command line can be provided by Inquirer.js, that is, the command line tool 102, which can be a CLI tool, an npm library or a GUI tool in actual implementation. The command line tool 102 can receive user input commands of user sub-application creation and sub-application access, and perform service registration based on the received commands.

[0049] The micro front-end running framework 103 is a framework running in the main application, configured to load and run sub-applications based on obtained network requests, and provide sub-application running capabilities in multiple frameworks.

[0050] Here, the parent application is any application accessing the micro front-end running framework. In actual implementation, the micro front-end running framework can provide multiple framework sub-application loading capabilities based on single-spa.

[0051] In the micro front-end system provided in the embodiments of the present application, the route registration service is an independent node backend service, which can provide good expansion and disaster recovery capabilities, and the route registration service provides route information, loading methods and deployment information of sub-applications for the micro front-end running framework of the main application. The command line tool is configured to provide new sub-application creation, sub-application access and service registration functions through a command line. The micro front-end running framework is a framework running in the main application, configured to load and run sub-applications based on obtained network requests, and provide sub-application running capabilities in multiple frameworks.

[0052] In some embodiments, as shown in Figure 1 The micro-front-end system architecture further includes:

[0053] A front-end interface 104 corresponding to the routing registration service, through which sub-application registration information required to be set for sub-application registration is obtained, and the sub-application registration information is sent to the routing registration service.

[0054] The sub-application registration information at least includes a sub-application framework, a sub-application routing mode, and a sub-application loading mode. For example, the sub-application framework can include vue, react, etc., the sub-application routing mode can include hash, history, etc., and the sub-application loading mode can include a JS loading mode, a CSS loading mode, an HTML loading mode, etc.

[0055] In some embodiments, the sub-application registration information can further include a service name, a sub-application local development environment address, and a sub-application online environment address, etc.

[0056] The routing registration service 101 is configured to receive the sub-application registration information and register the sub-application based on the sub-application registration information.

[0057] In some embodiments, the command line tool 102 is configured to receive a new sub-application command, obtain routing information, resource information, and sub-application template information of the sub-application.

[0058] In the embodiments of the present application, the routing information of the sub-application can include a sub-application resource address and a sub-application resource registration path, the resource information of the sub-application can include a sub-application resource name and a sub-application resource type, and the sub-application template information can include a template identifier.

[0059] The command line tool 102 generates a sub-application template based on the sub-application template information, and sends a sub-application new creation request to the routing registration service 101, the sub-application new creation request carrying the routing information and the resource information. In some embodiments, the routing registration service 101 receives the sub-application new creation request, and creates a sub-application based on the routing information and the resource information carried in the sub-application new creation request.

[0060] In the embodiments of the present application, after the command line tool 102 sends the sub-application new creation request to the routing registration service, the command line tool 102 sends a sub-application deployment request to a deployment server, so that the deployment server deploys resources based on the sub-application resource address in the deployment request.

[0061] In some embodiments, the command line tool 102 is further configured to receive an access sub-application command, acquire route information and resource information of the sub-application, and send a sub-application access request to the route registration service 101, wherein the sub-application access request carries the route information and resource information of the sub-application.

[0062] The route registration service 101 is further configured to receive the sub-application access request, and perform sub-application registration based on the route information and resource information of the sub-application.

[0063] In some embodiments, Figure 1 The composition structure of the micro-frontend running framework 103 is shown in FIG. 3. Figure 2 The micro-frontend running framework 103 includes a basic function library module 1031, a communication module 1032, a unified route module 1033, a sub-application loading module 1034, and a sub-application running module 1035.

[0064] The basic function library module 1031 is configured to provide public methods and public components, and inject the public methods and public components into the sub-application in the form of global variables and functions, for use by the sub-application.

[0065] In some embodiments, the basic function library module can further provide common polyfills for use by the sub-application.

[0066] The communication module 1032 is configured to support a communication mechanism for parent application to sub-application, sub-application to sub-application, and sub-application to parent application.

[0067] In the embodiments of the present application, the communication mechanism for parent application to sub-application includes props transmission and custom event transmission, the communication mechanism for sub-application to sub-application includes Postmessage transmission, and the communication mechanism for sub-application to parent application includes custom event transmission. The props transmission can provide responsive bidirectional data transmission capability; the custom event can be based on the definition and registration of component events to avoid irrelevant events from affecting the application after the application is excessively large; and the Postmessage provides global event sending and receiving, and is used to implement broadcast-type message notification. In the embodiments of the present application, there are corresponding implementation schemes in each communication dimension, and the means are rich and the side effects are small.

[0068] The unified route module 1033 is configured to listen to browser route changes.

[0069] In implementation, the unified route module 1033 uses single-spa to listen to browser route changes, loads and activates, and runs the sub-application or parent application sub-path under a specified framework. The parent application initializes to pull the sub-application registration path, resources, and the like under the unified route module 1033 from the route registration service.

[0070] The sub-application loading module 1034 is configured to acquire and load resources corresponding to the sub-application resource address based on the sub-application resource address acquired from the route registration service.

[0071] Here, the sub-application loading module 1034 loads sub-application resources according to the sub-application loading mode in the sub-application registration information when loading resources corresponding to the sub-application resource address. The mode of loading sub-application by the sub-application loading module includes at least an HTML entity mode, a JS entity mode and an iframe mode. When the loading mode is the HTML entity mode, an HTML file is loaded; when the loading mode is the JS entity mode, a JS file is loaded; and when the loading mode is the iframe mode, a URL is directly embedded into an iframe to be opened.

[0072] In some embodiments, the sub-application loading module 1034 acquires business code of the sub-application based on the resources after acquiring the resources corresponding to the sub-application resource address, parses the acquired business code of the sub-application, and transmits the parsed business code to the sub-application running module 1035.

[0073] The sub-application running module 1035 is configured to run the resources corresponding to the sub-application resource address to render a sub-application page.

[0074] The sub-application running module 1035 includes a running environment sandbox, and the parsed business code is executed in the running environment sandbox after being obtained by the sub-application running module.

[0075] In actual implementation, the running environment sandbox includes a JS sandbox, a CSS sandbox and a web worker sandbox. Wherein:

[0076] A basic JS sandbox is implemented by using with and proxy to achieve basic security in the case of controllable sub-application, and to overcome scope escape means by stack inspection and keyword inspection. The proxy is a collection of objects accessible by the sub-application, and the JS sandbox is intended to allow the business code of the sub-application to access only the objects accessible in the proxy, and not to access the objects of other sub-applications or the main application. When the parsed business code is executed in the JS sandbox, the parsed business code is executed in the sandbox with the proxy as a global root object, that is, the business code can only access the objects and attributes of the proxy and cannot affect other variables in the outer layer, achieving safe isolation.

[0077] Three css sandbox means are provided in the embodiments of the present application: one is based on a sub-application webpack packaging prefix, that is, a separate namespace is allocated for the style of each sub-application, so as to avoid the mutual influence of the styles; the second is based on a sub-application runtime prefix, a prefix is dynamically added to the style of the sub-application during the runtime of the sub-application, so as to avoid the conflict of the styles; and the third is based on a shadow dom, the CSS sandbox based on the shadow dom can provide browser-level style isolation capability, and can achieve complete isolation, but the compatibility is general.

[0078] The web worker sandbox is used for inline running of a script file assigned to the web worker, so as to realize the cross-domain calling of the web worker.

[0079] The sub-application resource loading module hijacks a *.worker.js file when loading resources, loads the file as text content into the browser memory, and uses the web worker sandbox to inline run the script file (*.worker.js) of the web worker, so that the cross-domain problem of the web worker is solved.

[0080] In some embodiments, the micro-frontend system further includes a server supporting cross-domain resource sharing. In implementation, the server is automatically provided with a CORS header, so as to support cross-domain resource sharing, so that the browser can access private static resources and CDN static resources across domains.

[0081] In some embodiments, as shown in Figure 2 The micro-frontend running framework further includes a data management module 1036, a performance monitoring module 1037, and an error processing module 1038, wherein:

[0082] The data management module 1036 is used for realizing a data two-way binding function by using data provided by a props transmission mechanism, so as to share the data of parent and child applications.

[0083] In the embodiments of the present application, the parent and child applications are loaded in the same running environment, the parent application transmits an object with a listening function to the child application, and the change of the child application can be listened to by the object, so that the sharing of the data of the parent and child applications is realized.

[0084] The performance monitoring module 1037 is used for monitoring the loading duration and the running duration of the sub-application.

[0085] In implementation, the parent application monitors the loading duration and the running duration of the sub-application by using a preset function.

[0086] The error processing module 1038 is configured to monitor and process error information of the sub-application during loading and running.

[0087] In implementation, the parent application monitors and processes the error of the sub-application by registering window.addEventListener('error',errorHandler) and window.addEventListener('unhandledrejection',errorHandler), so as to process the error information of the sub-application in time and ensure the reliability of the micro front-end system.

[0088] Based on the micro front-end system provided in the foregoing embodiments, the embodiment of the present application further provides a sub-application loading method based on micro front-end, which is applied to the micro front-end system provided in the foregoing embodiments, Figure 3 The implementation process of the sub-application loading method based on micro front-end provided in the embodiment of the present application is shown in FIG. Figure 3 The method comprises the following steps:

[0089] In step S301, a network access request is acquired.

[0090] Here, the network access request carries a URL address. The network access request can be triggered by a network access operation of a user. The network access request can be a request for accessing the main application or a request for accessing the sub-application. When the network access request is a network access request for accessing the sub-application, the user can input the URL address of the main application in the browser, and the browser renders the main application interface, and then the user triggers the network access request for accessing the sub-application based on the icon of the sub-application provided in the main application interface.

[0091] In the embodiment of the present application, before step S301, the micro front-end system has completed the deployment of the main application and the deployment of the routing registration service, and has completed the creation and registration of the sub-application through the CLI tool.

[0092] In step S302, the corresponding routing information is pulled from the routing registration service of the micro front-end system based on the URL address.

[0093] Here, in implementation, step S302 can be that the URL address is sent to the routing registration service, the routing registration service determines the application identifier to be accessed according to the URL address, and then pulls the corresponding routing information based on the application identifier.

[0094] In step S303, when it is determined that the page to be accessed is a sub-application page based on the routing information, the sub-application loading module of the micro front-end system acquires the sub-application resource corresponding to the routing information from the routing registration service based on the routing information.

[0095] Here, after obtaining the routing information corresponding to the application, if it is determined that the page to be accessed is a sub-application page, the route registration service can obtain the corresponding sub-application resource, such as a CSS, JS, or other static resource file, according to the routing information.

[0096] Step S304, when the sub-application resource needs to be loaded, the sub-application loading module loads the sub-application resource.

[0097] In the embodiments of the present application, after obtaining the sub-application resource, the sub-application loading module first determines whether the sub-application resource needs to be loaded. When the sub-application resource needs to be loaded, the sub-application resource is loaded based on the loading mode of the sub-application. When it is determined that the sub-application resource does not need to be loaded, it means that the sub-application resource has been loaded. At this time, the sub-application resource is directly run to render the sub-application page.

[0098] Step S305, the sub-application running module of the micro front-end system runs the sub-application resource to render the page of the sub-application.

[0099] In some embodiments, after obtaining the sub-application resource, the sub-application loading module obtains the business code of the sub-application based on the sub-application resource, parses the obtained business code of the sub-application, and transmits the parsed business code to the sub-application running module. The sub-application running module obtains the parsed business code, executes the parsed business code in a self-running environment sandbox to render the page of the sub-application.

[0100] In actual implementation, the running environment sandbox includes a JS sandbox, a CSS sandbox, and a web worker sandbox. Among them: the basic JS sandbox is implemented by using with and proxy, and the basic security is achieved in the controllable case of the sub-application. The scope escape means is overcome through stack inspection and keyword inspection. Among them, the proxy is a collection of objects accessible by the sub-application. The JS sandbox is to let the business code of the sub-application only access the objects accessible in the proxy, and cannot access the objects of other sub-applications or the main application. When the parsed business code is executed in the JS sandbox, the parsed business code is put into the sandbox for execution with the proxy as the global root object. That is, the business code can only access the objects and attributes of the proxy and cannot affect other variables outside, achieving safe isolation.

[0101] In the embodiments of the present application, three CSS sandbox methods are provided: one is based on a sub-application webpack prefix, that is, a separate namespace is assigned to the style of each sub-application, so as to avoid the influence of styles on each other; the second is based on a sub-application runtime prefix, and the application style is dynamically loaded and unloaded by the sub-application runtime to avoid the conflict of styles; and the third is based on a shadow dom, the CSS sandbox based on the shadow dom can provide browser-level style isolation capability, and can achieve complete isolation, but the compatibility is general.

[0102] The web worker sandbox is used for inline running of a script file assigned to the web worker, so as to realize cross-domain calling of the web worker. When loading resources, the sub-application resource loading module hijacks a *.worker.js file, loads the file as text content into the browser memory, and uses the web worker sandbox to inline run the script file (*.worker.js) of the web worker. The inlinely run web worker script file does not cause a cross-domain problem, thereby solving the cross-domain problem of the web worker.

[0103] In the micro-frontend-based sub-application loading method provided in the embodiments of the present application, after a network access request is obtained, corresponding route information is pulled from a route registration service of the micro-frontend system based on a URL address carried in the network access request. When it is determined based on the route information that a page to be accessed is a sub-application page, a sub-application loading module of the micro-frontend system obtains sub-application resources corresponding to the route information from the route registration service based on the route information. When the sub-application resources need to be loaded, the sub-application loading module loads the sub-application resources, and then a sub-application running module of the micro-frontend system runs the sub-application resources, so as to render a page of the sub-application.

[0104] In some embodiments, as shown in FIG. 3, the method further includes, before step S304: Figure 4

[0105] Step S003: determining whether the sub-application resources are preloaded or opened.

[0106] Here, when the sub-application resources are not preloaded and not opened, it is determined that the sub-application resources need to be loaded, and then step S304 is entered; when the sub-application resources are preloaded or opened, it is determined that the sub-application resources do not need to be loaded again, and then step S305 is entered. In this way, the loading and calling of the sub-application can be accelerated.

[0107] ​In some embodiments, before the sub-application loading is performed, the registration and deployment of the sub-application need to be performed first, and the sub-application registration process can be implemented through the following steps:

[0108] In step S001, sub-application registration information required for sub-application registration is obtained, and the sub-application registration information is sent to the routing registration service.

[0109] Here, the sub-application registration information at least includes: sub-application framework, sub-application routing mode, and sub-application loading mode.

[0110] In the micro-frontend system, a front-end interface corresponding to the routing registration service can be included, and a command line tool for creating a new sub-application and accessing the sub-application can also be included. Correspondingly, step S001 has two implementation manners when implemented:

[0111] I. The input operation for sub-application registration is obtained through the front-end interface corresponding to the routing registration service, and the sub-application registration information is determined based on the input operation.

[0112] When the sub-application registration information is obtained based on the first manner, first, the front-end interface is presented based on the operation instruction for opening the front-end interface, and then the input operation for sub-application registration is received through the front-end interface. The input operation is to input the parameters required for sub-application registration, which can include: service name, sub-application framework, sub-application local development environment address, sub-application online environment address, sub-application registration sub-routing, sub-application routing mode (hash or history), and sub-application loading mode.

[0113] In some embodiments, the front-end interface is also provided with a graphical control for determining the registration. After the user determines that the setting of the sub-application registration information is completed, the graphical control can be clicked or touched to send the sub-application registration information to the routing registration service. When the sub-application registration information is sent to the routing registration service, an HTTP request for sub-application registration can be sent to the routing registration service, and the sub-application registration information can be carried in the HTTP request.

[0114] II. The input operation for creating a new sub-application is obtained through the command line tool, and the sub-application registration information is determined based on the input operation.

[0115] Similar to the first implementation, when the sub-application registration information is obtained based on the command line tool, first, the command line tool is started, then the new sub-application command is received through the command line tool, and then the input operation for the new sub-application is obtained, which is the input of the parameters required for sub-application registration, and then the sub-application registration information is obtained according to the input operation, which can include sub-application resource name, sub-application resource address, sub-application resource type, sub-application resource registration path and the like. In implementation, the sub-application template identifier is also selected through the command line tool, and then the corresponding template is automatically generated by the command line tool and the sub-application resource address, sub-application resource registration address and the like are injected. When the sub-application registration information is sent to the route registration service, the sub-application registration information can be sent to the route registration service by inputting a sending information command based on the sending information command.

[0116] In step S002, the route registration service receives the sub-application registration information and registers the sub-application based on the sub-application registration information.

[0117] Through the above steps S001 to S002, the micro-frontend system can register the route information and resource information of the sub-application by itself, thereby improving the flexibility of registering the sub-application.

[0118] In some embodiments, Figure 3 The step S304 "when the sub-application resource needs to be loaded, the sub-application loads the resource to load the sub-application resource" shown can be implemented by the following steps:

[0119] In step S3041, when the sub-application resource needs to be loaded, the framework identifier and resource loading mode of the sub-application are obtained.

[0120] Here, the framework identifier of the sub-application can include vue, react and the like, and the resource loading mode can include JS entity loading mode, CSS entity loading mode, iframe loading mode and the like.

[0121] In step S3042, the sub-application resource is loaded in the sub-application framework corresponding to the framework identifier according to the resource loading type.

[0122] Here, when the loading mode is HTML entity mode, the HTML file is loaded, when the loading mode is JS entity mode, the JS file is loaded, and when the loading mode is iframe mode, the URL is directly embedded into iframe to open.

[0123] In some embodiments, as Figure 5 As shown, after step S302, the following steps can also be performed:

[0124] Step S201, determining whether the to-be-accessed page is a main application page based on the routing information.

[0125] Here, when it is determined based on the routing information that the to-be-accessed page is a main application page, step S202 is performed; when it is determined based on the routing information that the to-be-accessed page is a sub-application page, step S303 is entered.

[0126] Step 202, determining the sub-application currently mounted by the main application according to the life cycle.

[0127] Step S203, determining the target sub-application to be rendered from the currently mounted sub-application.

[0128] Here, step S203 can be determining at least one target sub-application to be rendered from the currently mounted sub-application according to a preset rule, for example, selecting one or more sub-applications with the most access times from the currently mounted sub-application to determine as the target sub-application.

[0129] Step S204, simulating routing switching based on the exposed loading function and the target sub-application, and obtaining sub-application resources and main application resources of the target sub-application.

[0130] Here, when the to-be-accessed page is a main application page, the main application resources are first obtained according to the routing information. In the present application, since the loading function is exposed, the loading function can be actively called by the main application. When the main application actively calls the exposed loading function, routing switching can be simulated, so as to trigger the sub-application loading module of the micro-frontend system to obtain the sub-application resources of the target sub-application.

[0131] Step S205, loading and running the main application resources and the sub-application resources to render the sub-application in the rendered page of the main application.

[0132] In the implementation of step S205, the main application resources are first loaded and run to render the main application interface, and then the sub-application resources are run to render the sub-application page as well, so that the main application can actively render the sub-application without relying on routing registration.

[0133] In the above embodiment of steps S201 to S205, when the to-be-accessed page is a main application page, the currently mounted sub-application can be determined according to the life cycle of the main application, the target sub-application can be determined based on a preset principle, the loading function exposed by the main application can be called to simulate routing switching, the sub-application resources of the target sub-application can be obtained, and the sub-application page can be displayed in the rendered main application page, so as to realize the active rendering of the sub-application by the main application.

[0134] In the following, an exemplary application of the present application in an actual application scenario will be described.

[0135] Figure 6 A micro-frontend system architecture diagram provided by an embodiment of the present application is shown in FIG. 1. As shown in the figure, the micro-frontend system includes a routing registration service 601, a CLI tool 602 for accessing and generating a sub-application, and a micro-frontend running framework 603 of a main application, wherein: Figure 6

[0136] The routing registration service 601 provides the micro-frontend running framework 603 with routing information, loading mode, and deployment information of the sub-application.

[0137] In implementation, a front-end interface can be provided for sub-application routing registration. Through the page, parameters required for routing registration can be set, including but not limited to: service name, sub-application framework, sub-application local development environment address, sub-application online environment address, sub-application registered sub-routing, sub-application routing mode (hash or history), and sub-application loading mode.

[0138] The routing registration service 601 is an http service server, which is mainly implemented by nodejs. Through the koa framework, a web server for recording routing, deleting routing, querying routing, login authorization, and other functions is implemented. The database can use mysql, and of course other forms of databases can also be used.

[0139] In implementation, the routing registration service can be a node backend service. The node backend service receives registration information of the sub-application. The application loader parses and discovers the sub-application through the node backend service, and determines how to load resources of the sub-application through the information. Multiple node single services are started through pm2. In addition, the routing registration service can also include a load balancing service for providing service disaster recovery, live and expansion capabilities.

[0140] The CLI tool 602 provides functions including new sub-application, sub-application access, service registration, and deployment.

[0141] In implementation, a command line tool is provided through Inquirer.js, which provides functions including new sub-application, sub-application access, service registration, and deployment.

[0142] In implementation, the new sub-application can be that a user first inputs a new sub-application command in the command line, fills in the sub-application resource name, sub-application resource address, sub-application resource type, sub-application resource registration path, and selects a sub-application template. The CLI tool automatically generates a corresponding template and injects routing information, and automatically registers the resource information to the routing registration service.

[0143] ​The access sub-application can be implemented by inputting an access sub-application command by a user in a command line, filling in a sub-application resource name, a sub-application resource address, a sub-application resource type, and a sub-application resource registration path, automatically searching for a sub-application entry file by a CLI tool, and adding a required life cycle function of a parent application, and automatically registering resource information to a route registration service by the CLI tool.

[0144] The service registration function can be implemented by carrying a new sub-application command by a CLI tool, filling in a sub-application resource name, a sub-application resource address, a sub-application resource type, and a sub-application resource registration path, and sending the parameters to a route registration service through an http request.

[0145] The deployment function can be implemented by sending a deployment request to a route registration service through an http request by a CLI tool.

[0146] The micro-frontend running framework 603 is a framework running in a main application, or a parent application, or an app shell. The app shell includes a public resource library, an application loader, a resource loader (an encapsulation of single-spa), and a running environment sandbox. The running environment sandbox includes a js sandbox, a web worker inline sandbox, and a css environment isolation sandbox. The app shell also supports an iframe mode.

[0147] The parent application is an application that accesses the micro-frontend running framework.

[0148] As shown in 603 in Figure 6 The micro-frontend running framework includes a basic function library, a communication module, a data management module, a performance monitoring module, an error handling module, a unified routing module, a sub-application loading module, and a sub-application running module.

[0149] The basic function library provides common polyfills, public methods, and components, and injects them into a sub-application through global variables and functions for use by the sub-application.

[0150] The communication module provides event communication through a custom event, message communication through postmessage, and system data communication through props transmission in a life cycle.

[0151] Figure 7 A schematic diagram of a communication mechanism in a micro-frontend system provided by an embodiment of the present application is shown in Figure 7As shown, the communication mode of the parent application to the child application can include two communication mechanisms of props and custom event, the communication mode of the child application to the parent application can include two communication mechanisms of custom event (component) and custom event (window), and the communication mode between the child applications includes two communication mechanisms of postmessage and BroadcastChannel.

[0152] The data management module can realize the data bidirectional binding function through the data provided by the props, and share the data of the parent application and the child application.

[0153] The performance monitoring module is used to realize the monitoring of the loading time, running time and other data of the child application by the function of the parent application.

[0154] The error handling module is used to monitor and handle the error of the child application by the parent application through the registration

[0155] window.addEventListener('error', errorHandler);

[0156] window.addEventListener('unhandledrejection', errorHandler);

[0157]

[0158] The unified routing module is used to listen to the browser route change by using single-spa, load and activate the child application or the parent application sub-path under the specified framework, and pull the sub-application registration path, resource and other information under the unified routing module from the routing registration service when the parent application is initialized.

[0159] The child application loading module is used to load the child application resource.

[0160] Figure 8 The implementation process schematic diagram of the child application loading module provided by the embodiment of the present application for loading the child application resource is shown as Figure 8 The process includes:

[0161] Step S801, based on the obtained network request, pulling the route and static resource from the routing registration service.

[0162] Here, the URL address is carried in the network request, and in the implementation of step S801, the application identifier corresponding to the URL address can be determined from the routing registration service based on the URL address, and the routing registration service determines the corresponding route information according to the application identifier, and obtains the static resource based on the route information.

[0163] ​Step S802, the resource loader loads the sub-application resource.

[0164] The resource loader can load sub-applications of different frameworks, and can load HTML Entry, JS Entry mode and iframe mode, the HTML mode loads static files through referenced resources in html, the JS mode loads resources dynamically through js, and the traditional iframe mode is also provided to load sub-applications.

[0165] In the embodiments of the present application, considering performance and cross-domain effects, the resource loader can also provide preloading, caching, idle loading and the like.

[0166] Step S803, after the resource loader loads the sub-application resource, resource information registration is performed.

[0167] Here, after the resource loader loads the sub-application resource, the loaded sub-application resource information is registered in the memory.

[0168] The sub-application loading module includes a resource loader and a resource loader, wherein the resource loader is a single-spa-based encapsulation and can provide sub-application running capability under multiple front-end frameworks, the single-spa provides a route listening function, and when the application route is switched, the corresponding sub-application framework code and business code are loaded according to the life cycle, thereby realizing the running capability of different frameworks and multi-level route activation; and by exposing a loading function, the route switching is simulated, and the active calling capability is realized.

[0169] The sub-application running module includes a js sandbox and a css sandbox (not the traditional iframe mode), and the sub-application running module is responsible for loading js resources pulled back by the sub-application loading module.

[0170] The JS sandbox design is as shown in Figure 9 In the embodiments of the present application, Proxy proxy and snapshot proxy mode can be realized, and the snapshot proxy mode is compatible with environments that do not support ES6 Proxy. As shown in Figure 9 Through the actual code 903 of the sub-application parsed by the resource loader of the application loader, the code is put into the proxy sandbox for execution. And for common scope escape means, stack checking and keyword checking are performed to prevent, so as to achieve basic security in the controllable case of the sub-application.

[0171] In the embodiments of the present application, the following three kinds of css sandbox means are provided:

[0172] First, based on the webpack package prefix of the sub-application. The sub-application needs to access the packaging tool uniformly, and assign a separate namespace to the style of each sub-application;

[0173] Second, based on the sub-application runtime prefix.

[0174] Some styles are difficult to support, such as @keyframes, @font-face, @import, and dynamically loaded <link> The style needs special processing, so the sub-application style can be prefixed in the sub-application runtime to avoid style conflicts.

[0175] Third, based on shadow dom. Shadow dom needs to handle shadow boundaries, event loss, access control (shadowRoot), and other issues.

[0176] The micro front-end system provided by the embodiment of the application provides a routing registration service as a node service that can be independently maintained and run, provides good expansion and disaster recovery capabilities, and maintains the registration and loading routes of the sub-application of the micro front-end; and based on single-spa, the sub-application running capability under multiple frameworks is provided, based on the customized loading scheme, the ability of the main application to actively render the sub-application is provided, and it is not necessarily dependent on the route registration; in addition, three communication supports are provided in the communication mechanism, including props transmission, custom event, and postmessage, the props transmission can provide responsive bidirectional data transmission capability, the custom event can be based on component definition event distribution and registration to avoid irrelevant events affecting after too many applications, and the postmessage provides global event sending and receiving for implementing broadcast type message notification, there are responsive implementation schemes in each communication dimension, the means are rich, and the side effects are small; the micro front-end system provides a server-side CORS scheme to support cross-domain of interface resources, a private static resource and a CDN static resource provide a CORS scheme to support cross-domain, a web worker provides an inline builder loader and an inline runtime loader to solve the problem of cross-domain calling of the worker, and further provides a cache, preloading, webworker and other means to accelerate the loading and calling of the sub-application; and a scheme of loading the sub-application in the runtime is provided, the rendering content and interaction logic of the sub-application can be changed in the runtime, and higher freedom is provided.

[0177] The embodiment of the present application provides a computer program product or computer program, the computer program product or computer program includes computer instructions stored in a computer readable storage medium. The processor of the computer equipment reads the computer instructions from the computer readable storage medium, and the processor executes the computer instructions, so that the computer equipment executes the micro-frontend-based sub-application loading method provided in the embodiment of the present application.

[0178] The embodiment of the present application provides a storage medium storing executable instructions, wherein the executable instructions are stored, when the executable instructions are executed by a processor, the processor will execute the method provided by the embodiment of the present application, for example, the method shown in Figure 3 、 Figure 4 and Figure 5 .

[0179] In some embodiments, the storage medium can be a computer readable storage medium, for example, ferroelectric memory (FRAM, Ferromagnetic Random Access Memory), read-only memory (ROM, Read Only Memory), programmable read-only memory (PROM, Programmable Read Only Memory), erasable programmable read-only memory (EPROM, Erasable Programmable Read Only Memory), electrically erasable programmable read-only memory (EEPROM, Electrically Erasable Programmable Read Only Memory), flash memory, magnetic surface memory, optical disc, or compact disc read-only memory (CD-ROM, Compact Disk-Read Only Memory) and the like memory; it can also be various devices including one or any combination of the above memories.

[0180] In some embodiments, the executable instructions can be in the form of programs, software, software modules, scripts or codes, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and can be deployed in any form, including being deployed as independent programs or being deployed as modules, components, subroutines or other units suitable for use in a computing environment.

[0181] As an example, executable instructions may, but do not necessarily, correspond to files in a file system. They may be stored as part of a file that holds other programs or data, for example, in one or more scripts within a Hyper Text Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple co-located files (e.g., files storing one or more modules, subroutines, or code sections). As an example, executable instructions may be deployed to execute on a single computing device, or on multiple computing devices located in one location, or on multiple computing devices distributed across multiple locations and interconnected via a communication network.

[0182] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent substitutions, and improvements made within the spirit and scope of this application are included within the scope of protection of this application.

Claims

1. A micro-front end system, characterized by, The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system.

2. The micro-front end system of claim 1, wherein, The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system.

3. The micro-front end system of claim 1, wherein, The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system.

4. The micro-front end system of claim 2, wherein, The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system.

5. The microfrontend system of claim 1, wherein, The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend system. The application relates to a micro-frontend The sub-application loading module is configured to acquire and load resources corresponding to the sub-application resource address based on the sub-application resource address acquired from the route registration service. The sub-application running module is configured to run the resources corresponding to the sub-application resource address to render a sub-application page.

6. The micro-front end system of claim 5, wherein, The modes of loading the sub-application by the sub-application loading module include at least an HTML entity mode, a JS entity mode and an iframe mode.

7. The micro-front end system of claim 5, wherein, The sub-application loading module is configured to parse the acquired business code of the sub-application and transmit the parsed business code to the sub-application running module. The sub-application running module includes a running environment sandbox, and the parsed business code is executed in the running environment sandbox.

8. The micro-front end system of claim 7, wherein, The running environment sandbox includes a JS sandbox, a CSS sandbox and a web worker sandbox.

9. The micro-frontend system of claim 8, wherein the web worker sandbox is configured to inline run a script file assigned to a web worker to implement cross-domain calling of the web worker.

10. The micro-front end system according to any one of claims 1 to 9, wherein, The micro-frontend system further includes a server supporting cross-domain resource sharing.

11. A micro-frontend-based sub-application loading method, characterized in that, The method is applied to a micro-frontend system and includes: acquiring a network access request, wherein the network access request carries a URL address of a page to be accessed; pulling corresponding route information from a route registration service of the micro-frontend system based on the URL address; when it is determined based on the route information that the page to be accessed is a sub-application page, a sub-application loading module of the micro-frontend system acquires sub-application resources corresponding to the route information from the route registration service based on the route information; when the sub-application resources need to be loaded, the sub-application loading module loads the sub-application resources; a sub-application running module of the micro-frontend system runs the sub-application resources to render a page of the sub-application; The micro-frontend system includes a communication module of a micro-frontend running framework, and the communication module supports a communication mechanism of a parent application to a sub-application, a communication mechanism of a sub-application to a sub-application and a communication mechanism of a sub-application to a parent application. The communication mechanism of the parent application to the sub-application includes attribute transmission and custom event transmission, the communication mechanism of the sub-application to the sub-application includes message transmission, and the communication mechanism of the sub-application to the parent application includes custom event transmission. The attribute transmission is used to provide system data communication, the custom event transmission is used to provide event communication, and the message transmission is used to provide message communication.

12. The method of claim 11, wherein, The method further includes: acquiring sub-application registration information required for sub-application registration and sending the sub-application registration information to a route registration service; the sub-application registration information at least includes a sub-application framework, a sub-application route mode and a sub-application loading mode; the route registration service receives the sub-application registration information and registers the sub-application based on the sub-application registration information.

13. The method of claim 12, wherein, The acquisition of the sub-application registration information required for sub-application registration includes: acquiring an input operation for sub-application registration through a front-end interface corresponding to the route registration service; determining sub-application registration information based on the input operation; or, The new sub-application command is received through a command line tool, and route information, resource information and sub-application template information of the sub-application are obtained.

14. The method according to any one of claims 11 to 13, characterized in that, The method further includes: determining a currently mounted sub-application of the main application according to the life cycle when it is determined based on the route information that the page to be accessed is a main application page; determining a target sub-application to be rendered from the currently mounted sub-application; simulating route switching based on the exposed loading function and the target sub-application, and obtaining sub-application resources and main application resources of the target sub-application; loading and running the sub-application resources and the main application resources to render the sub-application in the rendered page of the main application.

15. A computer-readable storage medium, characterized in that, The computer program product includes computer instructions for causing a processor to implement the method of any one of claims 11 to 14 when executed by the processor.

16. A computer program product, characterised in that, The computer program product includes computer instructions for causing a processor to implement the method of any one of claims 11 to 14 when executed by the processor.

Images