CN117348875A - Method, device, micro front end architecture and medium for unified scheduling of cross-frame micro components - Google Patents

Method, device, micro front end architecture and medium for unified scheduling of cross-frame micro components Download PDF

Info

Publication number
CN117348875A
CN117348875A CN202311428552.8A CN202311428552A CN117348875A CN 117348875 A CN117348875 A CN 117348875A CN 202311428552 A CN202311428552 A CN 202311428552A CN 117348875 A CN117348875 A CN 117348875A
Authority
CN
China
Prior art keywords
library
component
application
target
rendering
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202311428552.8A
Other languages
Chinese (zh)
Inventor
汪宏斌
刘国强
刘抗
张丹丽
孙文君
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Zhonghui Yida Financial Information Technology Co ltd
Original Assignee
Shanghai Zhonghui Yida Financial Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Zhonghui Yida Financial Information Technology Co ltd filed Critical Shanghai Zhonghui Yida Financial Information Technology Co ltd
Priority to CN202311428552.8A priority Critical patent/CN117348875A/en
Publication of CN117348875A publication Critical patent/CN117348875A/en
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4488—Object-oriented

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

The invention discloses a method and a device for uniformly scheduling cross-frame micro-components, a micro front-end architecture and a medium, and relates to the technical field of front-end development and application. The method comprises the following steps: constructing a corresponding bridging library corresponding to the front end frames of each project so as to be in butt joint with the core library; the request bridging library receives display component requests aiming at other projects, which are sent by a main application, and sends rendering requests to a core library after determining target components; the core library sends a rendering request to the target bridging library according to the rendering request information of the target component, the target bridging library carries out component registration and rendering operation based on the target sub-application, and then the component rendering completion information is sent to the core library; and after receiving the component rendering completion information, the core library forwards the component rendering completion information to the request bridging library, and the main application in the corresponding item of the request bridging library displays the target component to complete the cross-frame component scheduling. The invention supports the simultaneous operation of multiple applications of the cross-frame, realizes the integrated display of the cross-frame project, and has low project transformation cost and short development period.

Description

Method, device, micro front end architecture and medium for unified scheduling of cross-frame micro components
Technical Field
The invention relates to the technical field of front-end development and application, in particular to a method and a device for uniformly scheduling cross-frame micro-components, a micro front-end architecture and a medium.
Background
With the rapid development of the internet, the architecture of the system is more and more complex, and for the system meeting the high concurrent large data volume demand, a Micro service architecture (Micro services) has been developed. Micro services are a variant of Service Oriented Architecture (SOA) that designs applications into a series of loosely coupled fine-grained services (sub-applications) and are organized by lightweight communication protocols. The micro-service splits an application into multiple sub-applications, each of which can be independently developed, tested, deployed, etc., each having a robust module boundary, even allowing different sub-applications to be written using different programming languages, and also managed by different teams. The application of the micro-service architecture in the back-end field is mature.
In recent years, front-end engineering has been rising, the front-end application volume is also increasing, and technicians apply the micro-service concept to the front-end, and micro-front-ends (micro-front) technology has been proposed. Front-end ecological updating is frequent, the existing projects often need gradual upgrading, and with the increase of service requirements and service complexity, the projects can also be evolved from a certain single application into a 'boulder application', and the micro front-end architecture aims to deconstruct the 'boulder application' into a single-function and independent sub-application, namely, the large-scale application is converted into a plurality of smaller and simpler small-scale applications which can be independently developed, tested and deployed, and then the sub-applications are assembled as required, and still appear to be a cohesive single product to a user.
Micro-front-end is considered as an effective means for multiple teams to jointly build modern web applications by means of independent publishing functions, whereby many excellent micro-front-end frameworks are emerging, which aim to help developers build micro-front-end applications (or micro-applications) with independent deployment, independent development and runtime integration capabilities, mainstream micro-front-end frameworks such as singleSPA, qiankun, etc., which are usually at granularity of applications, need to be loaded synchronously with the main application framework, and sub-applications can be run independently or integrated into the main application in an embedded manner. Taking the micro front end framework Qiankun as an example, the implementation of loading the micro applications through Qiankun is as follows: 1) Registering the micro-application and its related configuration in the main application; 2) When the unified resource positioning system URL (uniform resource locator) of the browser is monitored to change after the micro-application information is registered, matching logic of the micro-front end frame Qiankun is automatically triggered to match the micro-applications, and the matched micro-applications are inserted into a designated container (the container is used for bearing and managing the running environment of the micro-applications); the micro-application container provides an isolated execution environment, so that each micro-application can run in the container without interference, and the life cycle functions exposed by the micro-application are called at one time; 3) The micro-application exports the lifecycle function in its own Entry JS file (i.e., entry JS file, which is the main JavaScript file in an application program that is loaded and executed when the application is started, and this file typically contains the initialization logic, configuration settings, and interaction logic with other modules of the application) for the host application to call in the corresponding lifecycle.
In the micro front end framework scheme with the application as granularity, the minimum running unit in the main application is one application, and the whole application needs to be integrated into the main application for display when the micro front end framework scheme is realized. However, with the rapid development of front-end technology, the updating iteration of service functions, the scheme of integrating the whole application page into the main application is shown, although the implementation requirement on engineering capability is not high, the requirement on a front-end framework in running is high, and because each sub-application has its own technical stack (sub-application is independently developed, tested and deployed), the difference of the technical stacks of each sub-application and the limitation of a routing framework make it difficult for the system to support the simultaneous operation of multiple applications; meanwhile, as each sub-application is independently deployed in the system, when the plurality of sub-applications comprise the same components, the same components still need to be deployed in each sub-application respectively, the repeated labor is more, the code multiplexing rate is low, and the system development efficiency is reduced.
Accordingly, the prior art provides application componentization, which is a componentization scheme that implements miniature front-end applications with the help of browser standards. As an example, chinese patent ZL202111615456.5, for example, discloses a micro front end architecture scheme based on qiankun and Web Component, which constructs a micro service architecture based on qiankun and a general Component library based on Web Component; the micro-service architecture comprises a main application and a plurality of sub-applications, wherein each sub-application is registered in the main application, and the main application is configured to serve as an entry to realize access to each sub-application; the general Component library is configured as a Web Component library, provides reusable components for upper-layer applications, is not limited to a technical stack, supports at least components of a reaction frame, a Vue frame and an Angular frame, and realizes cross-frame calling of the components. However, since Components need to be written by Web Components technology for each application, writing a Web Component by Web Components is more complicated than the front-end framework of the main stream, and the problem of complicated communication also emerges due to the higher transformation cost when the old project is involved.
Disclosure of Invention
The invention aims at: the method, the device, the micro front end architecture and the medium for uniformly scheduling cross-frame micro components are provided to overcome the defects of the prior art. According to the scheme for uniformly scheduling the cross-frame micro-component, the core library and the bridge library are set by taking the component as granularity, the corresponding bridge library is set for front-end frames of different projects, the corresponding bridge library is installed in main applications and sub-applications of the different projects, and the front-end frames of the different projects are connected with the core library through the bridge library to realize uniform scheduling of the cross-frame micro-component.
In order to achieve the above object, the present invention provides the following technical solutions:
a method for uniformly scheduling cross-frame micro-components, corresponding to each project front end frame, constructing a corresponding bridge library, wherein the bridge library is used for interfacing with a core library; the core library is used for constructing a user interface and processing application logic; the bridge library is used for providing project type declaration, performing component rendering based on an API interface of a project front end framework, configuring life cycle information, component attribute information tips and event processing information of a component, and providing a method for registering the component;
receiving display component requests aiming at other projects, which are sent by a main application in a corresponding project front-end framework, through a bridge library, wherein the bridge library is a request bridge library, and the request bridge library sends rendering requests aiming at target components to a core library after determining the target components; the core library finds a corresponding target bridging library according to the rendering request information of the target component and sends the rendering request to the target bridging library, and the target bridging library performs component registration and rendering operation based on a target sub-application to which the target component belongs; after the rendering of the target component is completed, sending component rendering completion information to a core library through the target bridging library; and the core library receives the component rendering completion information of the target component and then forwards the component rendering completion information to the request bridging library, and the main application in the corresponding item of the request bridging library displays the target component to complete cross-frame scheduling of the target component.
Further, for the bridge library of any project front end framework, when the bridge library is the requesting bridge library, it is configured to: when a display component request sent by a main application in a corresponding project is received, creating a document object model dom object according to the display component request, and sending a rendering request for a target component to a core library after acquiring a component ID of the target component requested in the display component request, wherein the rendering request comprises the document object model dom object, an application ID and component ID information; and receiving component rendering completion information of the target component sent by the core library, and configuring the main application to display the target component.
Further, for a bridge library of any project front end framework, when the bridge library is the target bridge library, it is configured to: receiving application loading information sent by a core library, creating a document object model dom object according to the application loading information, mounting the document object model dom object on a document body, creating vue instances based on a vue front end framework according to the document object model dom object, and then requesting to execute a boot function bootstrap from a requested target sub-application to finish registration of a target component through the target sub-application; receiving component registration information sent by the target sub-application, and sending the component registration information to the core library; receiving a rendering component request fed back by a core library, after finding a target component to be rendered, mounting the target component to vue examples, and mounting the target component on a document object model dom object through a controller of a component rendering position so as to complete the rendering operation of the target component;
the target sub-application can register the component in the boot function bootstrap according to the received request for executing the boot function bootstrap, and send the component registration information to the bridge library.
Further, the controller of the component rendering location employs a teleport function.
Further, the core library is configured to: receiving document object model dom, application ID and component ID information sent by a request bridging library, finding a target sub-application according to the application ID, loading the target sub-application, and sending application loading information to a target bridging library corresponding to an item to which the target sub-application belongs; after receiving the component registration information sent by the target bridge library, sending a rendering component request to the target bridge library; and after receiving the completion information of the component mounted on the document object model dom object sent by the target bridge library, sending the component rendering completion information of the target component to the request bridge library.
Further, the main application is used for displaying basic page components of menus, tab pages and navigation, and scheduling components of display sub-applications; the sub-application registers the component in the main application, and the component of the sub-application is handed to the main application for scheduling display; the front end framework of the project provides a display assembly;
for any item, the step of constructing a corresponding bridge library corresponding to the current end frame of the item comprises the following steps:
defining a bridge library of the project front-end framework;
installing the bridge library in the main application and the sub application of the project, and introducing an application initialization method in the library to initialize the micro application;
registering components provided for the main application in the sub-application, and delivering the registered components to the main application for scheduling and displaying, namely scheduling the components in the sub-application through the main application;
the main application configures application addresses and related attribute values of sub-applications to be used in project configuration, and introduces root components mounted by the sub-applications into projects;
introducing common components provided in a bridge library, and adding the common components into proper positions of pages according to requirements:
and simultaneously running the main application and the sub-application, matching the front end framework of the project to the corresponding project address according to the application ID and loading the component.
Further, a sub-application can register a plurality of components and give the components to the main application for scheduling display; the method comprises the steps of,
displaying sub-applications from different projects in a main application, multiple components of different sub-applications being capable of component-nested display in the project front-end framework.
The invention also provides a device for uniformly scheduling cross-frame micro-components, which comprises the following structures:
the library construction unit is used for constructing a core library and a bridge library corresponding to the front end frame of each item; the bridge library is used for interfacing with a core library; the core library is used for constructing a user interface and processing application logic; the bridge library is used for providing project type declaration, performing component rendering based on an API interface of a project front end framework, configuring life cycle information, component attribute information tips and event processing information of a component, and providing a method for registering the component;
the micro component scheduling unit is used for configuring a request bridging library and a target bridging library, and performing unified scheduling of the micro components based on the core library, the request bridging library and the target bridging library;
when one bridging library receives a display component request aiming at other projects, which is sent by a main application in a corresponding project front end frame, the bridging library is configured as a request bridging library;
the request bridging library can send a rendering request for a target component to the core library after determining the target component; configuring a main application in the corresponding item to display the target component, and completing cross-frame scheduling of the target component;
the core library can find a corresponding target bridging library according to the rendering request information of the target component and send the rendering request to the target bridging library; the component rendering completion information of the target component is received and then forwarded to the request bridging library;
the target bridging library performs component registration and rendering operations based on the target sub-application to which the target component belongs; and after the rendering of the target component is completed, sending the component rendering completion information to a core library.
In another embodiment of the present invention, a micro front-end architecture for uniformly scheduling cross-frame micro components is provided, including a main application and a sub-application, where the micro front-end architecture is constructed according to the method of any one of the foregoing claims.
In another embodiment of the present invention, there is also provided a computer readable storage medium having stored thereon a micro front end page application, which when executed by a processor, implements a method as set forth in any one of the preceding claims.
Compared with the prior art, the invention has the following advantages and positive effects due to the adoption of the technical scheme: the scheme of unified scheduling cross-frame micro-components is characterized in that a core library and a bridge library are arranged by taking components as granularity, corresponding bridge libraries are arranged for front-end frames of different projects, corresponding bridge libraries are installed in main applications and sub-applications of the different projects, and the front-end frames of the different projects are connected with the core libraries through the bridge libraries to realize unified scheduling of the cross-frame micro-components.
Drawings
Fig. 1 is a schematic diagram of connection for docking a core library with a bridging library of different items according to an embodiment of the present invention.
FIG. 2 is an exemplary diagram of an interface for managing micro-components in micro-applications of other frameworks uniformly by a host application of a micro-front-end framework according to an embodiment of the present invention.
Fig. 3 is a flowchart illustrating a method for constructing a bridge library of a current end frame of an item according to an embodiment of the present invention.
Fig. 4 is a timing diagram of component rendering by a core library and a bridge library according to an embodiment of the present invention.
Reference numerals illustrate:
the main application 100, the first sub-application 200, and the second sub-application 300.
Detailed Description
The method, apparatus, micro front end architecture and medium for unified scheduling cross-frame micro components disclosed in the present invention are further described in detail below with reference to the accompanying drawings and specific embodiments. It is noted that techniques (including methods and apparatus) known to those of ordinary skill in the relevant art may not be discussed in detail, but are considered to be part of the specification where appropriate. Meanwhile, other examples of the exemplary embodiment may have different values. The structures, proportions, sizes, etc. shown in the drawings are shown only in connection with the present disclosure for purposes of understanding and reading by those skilled in the art and are not intended to limit the scope of the invention.
In the description of the embodiment of the present application, "/" means "and/or" is used to describe the association relationship of the association object, which means that three relationships may exist, for example, "a and/or b" means: there are three cases of A and B separately. In the description of the embodiments of the present application, "plurality" means two or more.
Term interpretation:
1. the components are building blocks of the application program, which can be configured and customized by attributes. One component may contain HTML, CSS, and JavaScript code defining a portion of the interface elements and corresponding behavior. A component may have its own state and properties (tips) and be able to accept input, process events, and generate output. In the present invention, a component may be simple, such as a button, text entry box, or image, or more complex, such as a navigation menu, form, or entire page. By combining the components together, a complete application can be constructed, so that the code is more modularized and has stronger maintainability.
An api, application programming interface, generic name Application Programming Interface, is a set of rules and protocols that define interactions between software components. Which allows communication and data exchange between different software systems. The API interface of the front-end framework may be an interface provided by a software library or framework designed for a specific programming language, platform, or domain. These APIs define functions, classes, methods, and properties that can be called by developers to use the functions and resources provided by the library or framework in an application.
An id or id, full name Identity document, an identification number representing an object (e.g., application, component) for identifying the object to distinguish from other objects, may be a unique identification number or unique code, and may be represented by a character, a number, or a combination of characters and numbers.
Hereinafter, the technical concept and the scheme of the present invention will be described according to an exemplary application scenario.
Examples
A method for uniformly scheduling cross-frame micro-components is provided, wherein a corresponding bridge library is constructed corresponding to each project front-end frame.
The bridge library is used for interfacing with a core library.
The core library is used for constructing a user interface and processing application logic. In the present invention, the core library is preferably constructed using a front end framework Vue, and the core library provides basic functions for creating components, processing states, routing navigation, and the like.
The bridge library is used for providing project type declaration, performing component rendering based on an API interface of a project front-end framework, configuring life cycle information, component attribute information tips and event processing information of a component, and providing a method for registering the component.
The embodiment is based on unified scheduling of micro components by a core library, a request bridge library and a target bridge library. Referring to fig. 1, in the implementation, a display component request for other items sent by a corresponding front end framework of an item, such as a main application in front end framework a in fig. 1, is received through a bridge library, where the bridge library is a request bridge library, such as front end framework a bridge library in fig. 1, and the request bridge library determines a target component and then sends a rendering request for the target component to a core library. The core library finds a corresponding target bridging library, such as a front end framework B bridging library corresponding to the front end framework B in fig. 1, according to the rendering request information of the target component, and sends the rendering request to the target bridging library. The target bridging library performs component registration and rendering operations based on the target sub-application to which the target component belongs; and after the rendering of the target component is completed, sending the component rendering completion information to a core library through the target bridge library. And the core library receives the component rendering completion information of the target component and then forwards the component rendering completion information to the request bridging library, and the main application in the corresponding item of the request bridging library displays the target component to complete cross-frame scheduling of the target component.
In this embodiment, for a bridge library of any project front end framework, when the bridge library is the requesting bridge library, it is configured to: when a display component request sent by a main application in a corresponding project is received, creating a document object model dom object according to the display component request, and sending a rendering request for a target component to a core library after acquiring a component ID of the target component requested in the display component request, wherein the rendering request comprises the document object model dom object, an application ID and component ID information; and receiving component rendering completion information of the target component sent by the core library, and configuring the main application to display the target component.
For a bridge library of any project front end framework, when the bridge library is the target bridge library, it is configured to: receiving application loading information sent by a core library, creating a document object model dom object according to the application loading information, mounting the document object model dom object on a document body, creating vue instances based on a vue front end framework according to the document object model dom object, and then requesting to execute a boot function bootstrap from a requested target sub-application to finish registration of a target component through the target sub-application; receiving component registration information sent by the target sub-application, and sending the component registration information to the core library; and receiving a rendering component request fed back by the core library, after finding a target component to be rendered, mounting the target component to vue examples, and mounting the target component on a document object model dom object through a controller of a component rendering position so as to complete the rendering operation of the target component.
The target sub-application can register the component in the boot function bootstrap according to the received request for executing the boot function bootstrap, and send the component registration information to the bridge library.
At this point, the core library is configured to: receiving document object model dom, application ID and component ID information sent by a request bridging library, finding a target sub-application according to the application ID, loading the target sub-application, and sending application loading information to a target bridging library corresponding to an item to which the target sub-application belongs; after receiving the component registration information sent by the target bridge library, sending a rendering component request to the target bridge library; and after receiving the completion information of the component mounted on the document object model dom object sent by the target bridge library, sending the component rendering completion information of the target component to the request bridge library.
In this embodiment, the controller of the component rendering location preferably uses a teleport function, or a teleport instruction, or a transfer gate instruction. The teleport function is a component rendering mode in the Vue3 framework, can transfer the content of the component to other positions on the page, and can easily control the component to be rendered to any position on the page.
The technical scheme provided by the embodiment is to support simultaneous operation of multiple applications by taking the components as granularity. The main application is mainly used for displaying basic page components such as menus, label pages, navigation and the like, and scheduling components of the display sub-application; the sub-application registers the component in the main application, and the component of the sub-application is handed to the main application for scheduling display; the project front end frame provides a means of displaying the components.
A sub-application can register a plurality of components and give the components to the main application for scheduling display. Displaying sub-applications from different projects in a main application, multiple components of different sub-applications being capable of component-nested display in the project front-end framework. By way of example and not limitation, such as that shown with reference to fig. 2, an example is where a plurality of components in a first sub-application 200 and a second sub-application 300 are scheduled for display by a master application 100 of a project current end-frame, respectively, the first sub-application 200 and the second sub-application 300 being from different projects. In fig. 2, a case is specifically illustrated in which the first sub-application 200 registers 4 components in the main application (4 components of the first sub-application that can be scheduled for display by the main application 100), and the second sub-application 300 registers 4 components in the main application (4 components of the second sub-application that can be scheduled for display by the main application 100). The host application 100 may have a nested display of multiple components. Of course, one skilled in the art can configure more components in the sub-application across project frameworks to display as desired.
Referring to fig. 3, specific steps for constructing a corresponding bridge library corresponding to the current end frame for any item are illustrated as follows.
S100, defining a bridge library of the project front-end framework.
The bridge library is used for: providing an item type declaration; carrying out component rendering based on an API interface of the project front-end framework, and configuring life cycle information, component attribute information tips and event processing information of the component; a method of registering components is provided.
S200, installing the bridge library in the main application and the sub application of the project, and introducing an application initialization method in the library to initialize the micro application.
And S300, registering the components provided for the main application in the sub-application, and delivering the registered components to the main application for scheduling and displaying, namely scheduling the components in the sub-application through the main application.
By way of example and not limitation, code such as registering a component in a child application child app may be as follows:
childApp.regComponent(
"HelloWorld"
()=>import("./components/HelloWorld.vue")
);。
s400, the main application configures application addresses and related attribute values of the sub-applications required in project configuration, and introduces root components (rootcompnents) mounted by the sub-applications into projects.
The root component of the sub-application is a component which is an entry point of the sub-application in the micro front-end architecture. This root component is responsible for rendering and managing other components inside the sub-application and provides an interface to external connections. The specific root component implementation may vary depending on the micro-front-end framework or library used, and is not described in detail herein.
S500, introducing public components provided in a bridge library, and adding the public components into proper positions of pages according to requirements.
In this embodiment, the bridge library is provided with some common components, and the components can be shared and reused. These common components may be used to implement a consistent user interface, functionality, or interactive experience. By way of example and not limitation, such common components may be the following:
button) for triggering operations or submitting forms.
Input box for receiving Input data of a user.
Modal, a popup window, for displaying dialog boxes, prompts, or other Modal windows.
Navigation, which is used to navigate or switch between different views.
List items for showing a set of data.
The public components provided by the bridge library can be customized and expanded according to specific requirements, such as card components, drop-down menu components and the like, so as to meet the requirements of application programs.
By way of example and not limitation, code that joins a common component may be as follows:
< VinentComponent appid= "vue3" componentid= "FormExample"> </ VinentComponent > 。
s600, simultaneously running a main application and a sub application, matching the front end framework of the project to the corresponding project address according to the application ID (i.e. app ID) and loading the components.
In the front-end framework, the corresponding project address can be matched according to the application ID, and the corresponding component can be loaded. Specifically, a mapping table is defined, for example, in a configuration file or other suitable location of the front-end framework, and the application ID is associated with the corresponding item address through the mapping table. And (3) where the components need to be loaded, acquiring corresponding project addresses by inquiring the mapping table through the application ID, and then loading the corresponding components by using a loading mechanism provided by the project framework.
The process of scheduling displays across frame micro-components is described in detail below in connection with fig. 4, taking the two items as an example, vue front-end frame and vue front-end frame, respectively. vue2 front end frameworks correspond to vue2 main applications and vue sub-applications, vue front end frameworks correspond to vue3 main applications and vue sub-applications,
first, vue in the vue front end framework the main application issues display component request information including the micro component ID requesting display.
Then, vue the bridge library, upon receiving the aforementioned display component request information, creates a document object model dom and transmits the document object model dom, the application ID, and the component ID to the core library.
After receiving the document object model dom, the application ID and the component ID information, the core library finds and loads the application according to the application ID, and sends the loading information to the corresponding vue bridge library.
The Vue3 bridging library also creates a document object model dom, mounts the dom to the document body and creates a root instance of the Vue front end framework accordingly; and requesting execution of the bootstrap function from the corresponding vue sub-application (i.e., target sub-application).
Subsequently, the vue sub-application registers the component in bootstrap and sends the registered component information to the core library through vue bridge library. After receiving the registered component information sent by the vue bridge library, the core library sends a rendering component request to the vue bridge library.
vue3 the bridge library finds the target component to be rendered, mounts the target component to the root instance of the vue front end framework, mounts the target component on the document object model dom of the target component through a teleport function, and completes the rendering of the target component. In Vue3, the teleport function provides a way to output component renderings to different locations in dom.
After receiving the component rendering completion information sent by the vue bridge library, the core library sends the component rendering completion information of the target component to the requesting bridge library, namely, vue bridge library.
Finally, the vue bridge library receives the component rendering completion information of the target component sent by the core library, configures vue the main application to display the target component (component in the sub-application vue) and completes the scheduling of the cross-frame component.
The scheme provided by the invention has the advantages that the micro-assembly scheduling of the cross-project framework is realized, the simultaneous operation of multiple applications is supported, and the 'giant stone application' can be combined and laid out in different projects in a more flexible mode after being split into multiple independent micro-applications, so that the method is suitable for more application scenes. By utilizing the scheme, a plurality of project teams can flexibly and freely cooperate, the project transformation cost is low, and the project development period is effectively reduced.
The invention also provides a device for uniformly scheduling cross-frame micro-components.
The apparatus includes a library construction unit and a micro component scheduling unit.
The library construction unit is used for constructing a core library and a bridge library corresponding to the front end frame of each item; the bridge library is used for interfacing with a core library; the core library is used for constructing a user interface and processing application logic; the bridge library is used for providing project type declaration, performing component rendering based on an API interface of a project front-end framework, configuring life cycle information, component attribute information tips and event processing information of a component, and providing a method for registering the component.
The micro-assembly scheduling unit is used for configuring a request bridging library and a target bridging library and performing unified scheduling of micro-assemblies based on the core library, the request bridging library and the target bridging library.
When one bridging library receives a display component request for other projects sent by a main application in a corresponding project front end framework, the bridging library is configured as a request bridging library.
The request bridging library can send a rendering request for a target component to the core library after determining the target component; and configuring a main application in the corresponding item to display the target component, and completing cross-frame scheduling of the target component.
The core library can find a corresponding target bridging library according to the rendering request information of the target component and send the rendering request to the target bridging library; and forwarding the component rendering completion information of the target component to the request bridging library after receiving the component rendering completion information of the target component.
The target bridging library performs component registration and rendering operations based on the target sub-application to which the target component belongs; and after the rendering of the target component is completed, sending the component rendering completion information to a core library.
Other technical features are described in the previous embodiments and are not described in detail here.
In another embodiment of the present invention, a micro front-end architecture for uniformly scheduling cross-frame micro components is provided, including a main application and a sub-application, where the micro front-end architecture is constructed according to the method in the foregoing embodiment.
Other technical features are described in the previous embodiments and are not described in detail here.
In another embodiment of the present invention, there is also provided a computer readable storage medium having stored thereon a micro front end page application, which when executed by a processor, implements a method as set forth in any one of the preceding claims.
The storage medium may include a U-disk, a removable hard disk, a Read Only Memory (ROM), a random access memory (random access memory, RAM), a magnetic disk, or an optical disk, etc. various media capable of storing program codes.
Other technical features are described in the previous embodiments and are not described in detail here.
In the above description, the disclosure of the present invention is not intended to limit itself to these aspects. Rather, the components may be selectively and operatively combined in any number within the scope of the present disclosure. In addition, terms like "comprising," "including," and "having" should be construed by default as inclusive or open-ended, rather than exclusive or closed-ended, unless expressly defined to the contrary. All technical, scientific, or other terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention belongs. Common terms found in dictionaries should not be too idealized or too unrealistically interpreted in the context of the relevant technical document unless the present disclosure explicitly defines them as such. Any alterations and modifications of the present invention, which are made by those of ordinary skill in the art based on the above disclosure, are intended to be within the scope of the appended claims.

Claims (10)

1. A method for unified scheduling of cross-frame micro-components, characterized by: constructing a bridge library corresponding to each project front end frame, wherein the bridge library is used for interfacing with a core library; the core library is used for constructing a user interface and processing application logic; the bridge library is used for providing project type declaration, performing component rendering based on an API interface of a project front end framework, configuring life cycle information, component attribute information tips and event processing information of a component, and providing a method for registering the component;
receiving display component requests aiming at other projects, which are sent by a main application in a corresponding project front-end framework, through a bridge library, wherein the bridge library is a request bridge library, and the request bridge library sends rendering requests aiming at target components to a core library after determining the target components; the core library finds a corresponding target bridging library according to the rendering request information of the target component and sends the rendering request to the target bridging library, and the target bridging library performs component registration and rendering operation based on a target sub-application to which the target component belongs; after the rendering of the target component is completed, sending component rendering completion information to a core library through the target bridging library; and the core library receives the component rendering completion information of the target component and then forwards the component rendering completion information to the request bridging library, and the main application in the corresponding item of the request bridging library displays the target component to complete cross-frame scheduling of the target component.
2. The method of claim 1, wherein for a bridging library of any project front end framework, when the bridging library is the requesting bridging library, it is configured to:
when a display component request sent by a main application in a corresponding project is received, creating a document object model dom object according to the display component request, and sending a rendering request for a target component to a core library after acquiring a component ID of the target component requested in the display component request, wherein the rendering request comprises the document object model dom object, an application ID and component ID information; and receiving component rendering completion information of the target component sent by the core library, and configuring the main application to display the target component.
3. The method of claim 1, wherein for a bridge library of any project front end framework, when the bridge library is a target bridge library, it is configured to:
receiving application loading information sent by a core library, creating a document object model dom object according to the application loading information, mounting the document object model dom object on a document body, creating vue instances based on a vue front end framework according to the document object model dom object, and then requesting to execute a boot function bootstrap from a requested target sub-application to finish registration of a target component through the target sub-application; receiving component registration information sent by the target sub-application, and sending the component registration information to the core library; receiving a rendering component request fed back by a core library, after finding a target component to be rendered, mounting the target component to vue examples, and mounting the target component on a document object model dom object through a controller of a component rendering position so as to complete the rendering operation of the target component;
the target sub-application can register the component in the boot function bootstrap according to the received request for executing the boot function bootstrap, and send the component registration information to the bridge library.
4. A method according to claim 3, wherein the controller of the component rendering location employs a teleport function.
5. The method of claim 1, wherein the core library is configured to:
receiving document object model dom, application ID and component ID information sent by a request bridging library, finding a target sub-application according to the application ID, loading the target sub-application, and sending application loading information to a target bridging library corresponding to an item to which the target sub-application belongs; after receiving the component registration information sent by the target bridge library, sending a rendering component request to the target bridge library; and after receiving the completion information of the component mounted on the document object model dom object sent by the target bridge library, sending the component rendering completion information of the target component to the request bridge library.
6. The method according to claim 1, characterized in that: the main application is used for displaying a menu, a label page and a navigation basic page component and scheduling a component for displaying sub-applications; the sub-application registers the component in the main application, and the component of the sub-application is handed to the main application for scheduling display; the front end framework of the project provides a display assembly;
for any item, the step of constructing a corresponding bridge library corresponding to the current end frame of the item comprises the following steps:
defining a bridge library of the project front-end framework;
installing the bridge library in the main application and the sub application of the project, and introducing an application initialization method in the library to initialize the micro application;
registering components provided for the main application in the sub-application, and delivering the registered components to the main application for scheduling and displaying, namely scheduling the components in the sub-application through the main application;
the main application configures application addresses and related attribute values of sub-applications to be used in project configuration, and introduces root components mounted by the sub-applications into projects;
introducing common components provided in a bridge library, and adding the common components into proper positions of pages according to requirements:
and simultaneously running the main application and the sub-application, matching the front end framework of the project to the corresponding project address according to the application ID and loading the component.
7. The method according to claim 1, characterized in that: one sub application can register a plurality of components and give the components to the main application for scheduling display; the method comprises the steps of,
displaying sub-applications from different projects in a main application, multiple components of different sub-applications being capable of component-nested display in the project front-end framework.
8. An apparatus for unified scheduling of cross-frame microcomponents, comprising:
the library construction unit is used for constructing a core library and a bridge library corresponding to the front end frame of each item; the bridge library is used for interfacing with a core library; the core library is used for constructing a user interface and processing application logic; the bridge library is used for providing project type declaration, performing component rendering based on an API interface of a project front end framework, configuring life cycle information, component attribute information tips and event processing information of a component, and providing a method for registering the component;
the micro component scheduling unit is used for configuring a request bridging library and a target bridging library, and performing unified scheduling of the micro components based on the core library, the request bridging library and the target bridging library;
when one bridging library receives a display component request aiming at other projects, which is sent by a main application in a corresponding project front end frame, the bridging library is configured as a request bridging library;
the request bridging library can send a rendering request for a target component to the core library after determining the target component; configuring a main application in the corresponding item to display the target component, and completing cross-frame scheduling of the target component;
the core library can find a corresponding target bridging library according to the rendering request information of the target component and send the rendering request to the target bridging library; the component rendering completion information of the target component is received and then forwarded to the request bridging library;
the target bridging library performs component registration and rendering operations based on the target sub-application to which the target component belongs; and after the rendering of the target component is completed, sending the component rendering completion information to a core library.
9. The utility model provides a micro front end architecture of unified scheduling cross-frame micro-assembly, includes main application and sub-application, its characterized in that: the micro front end architecture is constructed according to the method of any one of claims 1-7.
10. A computer readable storage medium having stored thereon a micro front end page application, which when executed by a processor, implements the method of any of claims 1 to 7.
CN202311428552.8A 2023-10-31 2023-10-31 Method, device, micro front end architecture and medium for unified scheduling of cross-frame micro components Pending CN117348875A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311428552.8A CN117348875A (en) 2023-10-31 2023-10-31 Method, device, micro front end architecture and medium for unified scheduling of cross-frame micro components

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311428552.8A CN117348875A (en) 2023-10-31 2023-10-31 Method, device, micro front end architecture and medium for unified scheduling of cross-frame micro components

Publications (1)

Publication Number Publication Date
CN117348875A true CN117348875A (en) 2024-01-05

Family

ID=89362950

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311428552.8A Pending CN117348875A (en) 2023-10-31 2023-10-31 Method, device, micro front end architecture and medium for unified scheduling of cross-frame micro components

Country Status (1)

Country Link
CN (1) CN117348875A (en)

Similar Documents

Publication Publication Date Title
US8661407B2 (en) Framework for programming embedded system applications
US8352577B2 (en) Method and apparatus for updating information on an embedded system
CN105814541B (en) The method of computer equipment and computer equipment internal storage starting
CN101421711B (en) Virtual execution system for resource-constrained devices
CN101256482A (en) Development system and method for built-in application program
US20100138808A1 (en) Embedded system design device and a method thereof using a target independent model
US7730492B1 (en) Method and system for running multiple virtual machines in a single process
JP2023139043A (en) Just-in-time container
CN112149169A (en) Application access method and device and computer readable storage medium
US7974829B2 (en) System for simulating mobile phone and method thereof
Ernsting et al. Refining a reference architecture for model-driven business apps
CN103473034A (en) Method and device for dynamically publishing Web service
CN116263657A (en) Processing unit, software module, method and program code
CN102129385B (en) Management method capable of dynamically expanding management function of virtual machine
US20110161930A1 (en) Melding of mediation flow service component architecture (sca) components
CN103003033A (en) Robot system control method and a device therefor
CN117348875A (en) Method, device, micro front end architecture and medium for unified scheduling of cross-frame micro components
CN115221083A (en) PCIe interrupt processing method, device, equipment and medium
CN110727423A (en) Method and system for developing mobile application program across platforms
CN115390846A (en) Compiling construction method and device, electronic equipment and storage medium
CN114816475A (en) Method, device, equipment and medium for updating embedded operating system
CN116685946A (en) Reloading of updated shared libraries without stopping execution of an application
CN101876898A (en) Registration method of COM assembly and device thereof
US10545729B2 (en) Computer program interface
EP3832457A1 (en) Support device and support program

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination