CN112988153A - Data processing method and framework based on micro front end - Google Patents
Data processing method and framework based on micro front end Download PDFInfo
- Publication number
- CN112988153A CN112988153A CN202110287271.XA CN202110287271A CN112988153A CN 112988153 A CN112988153 A CN 112988153A CN 202110287271 A CN202110287271 A CN 202110287271A CN 112988153 A CN112988153 A CN 112988153A
- Authority
- CN
- China
- Prior art keywords
- application
- sub
- micro front
- main
- engineering module
- 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.)
- Granted
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 31
- 238000011161 development Methods 0.000 claims abstract description 30
- 238000000034 method Methods 0.000 claims abstract description 28
- 238000012545 processing Methods 0.000 claims abstract description 28
- 238000004891 communication Methods 0.000 claims description 36
- 238000002955 isolation Methods 0.000 claims description 15
- 238000005516 engineering process Methods 0.000 claims description 10
- 230000001419 dependent effect Effects 0.000 claims description 8
- 238000004806 packaging method and process Methods 0.000 claims description 3
- 238000009877 rendering Methods 0.000 claims description 2
- 230000008878 coupling Effects 0.000 abstract description 6
- 238000010168 coupling process Methods 0.000 abstract description 6
- 238000005859 coupling reaction Methods 0.000 abstract description 6
- 238000012360 testing method Methods 0.000 abstract description 6
- 230000006870 function Effects 0.000 description 9
- 238000010586 diagram Methods 0.000 description 7
- 244000035744 Hura crepitans Species 0.000 description 6
- 238000012423 maintenance Methods 0.000 description 6
- 238000004590 computer program Methods 0.000 description 5
- 230000008901 benefit Effects 0.000 description 4
- 235000014510 cooky Nutrition 0.000 description 2
- 230000003203 everyday effect Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000012827 research and development Methods 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 230000002457 bidirectional effect Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 239000000178 monomer Substances 0.000 description 1
- 230000036316 preload Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
Images
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
- 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/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- 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/4482—Procedural
- G06F9/4484—Executing subprograms
-
- 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/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The application discloses a data processing method and a frame based on a micro front end, wherein the method is realized by the data processing frame of the micro front end, and the method comprises the following steps: the application configuration center receives the customization information of each sub-application and sends the customization information of each sub-application to the micro front-end main engineering module; the micro front end main engineering module generates a loading menu and an initialization file of each sub-application according to the customized information of each sub-application; loading the corresponding micro front terminal engineering module according to the loading menu of each sub application; sending each sub-application initialization file to a micro front end terminal engineering module corresponding to each sub-engineering; and the micro front end terminal engineering module issues each sub-application according to the received initialization file so that the micro front end main engineering module standardizes each sub-application and the main application is issued. The method realizes independent development, independent test and independent deployment of each front terminal project on the whole flow of front-end development; the coupling between the main application and the sub-applications is reduced to a great extent.
Description
Technical Field
The application relates to the technical field of data processing, in particular to a data processing method and a framework based on a micro front end.
Background
Modern enterprises are accelerated in digital transformation, the software engineering volume of the enterprises is larger and larger, the front end and the back end are separated in the software development process, and the micro-service of the back end has a more mature solution of the industry; the front-end engineering adopts one of three frameworks of VUE/REACT/AngularJS to construct the single-page application, which is a conventional development mode in the industry; with the development of business, a front-end project contains hundreds or even more business modules, and a front-end single-page application becomes a single-page megastone application. The conventional front-end development technology faces the following technical problems: the front-end engineering of the boulder is huge in size, the compiling and releasing time of operation and maintenance implementation is long, and even if a pattern is changed, the whole engineering needs to be recompiled and released for several hours; each time of release, a single front-end project needs to be compiled and added with release branches, one front-end project contains more than ten projects, the projects are released almost every day, the release branches are redundant, and the release branches do not cause mistaken release and missed release frequently; the code coupling degree is high, each project has dozens of research and development branches through branch management and control, the branch conflict of dozens of projects is solved every day, a large amount of time cost is needed, and the research and development efficiency is lower and lower; hundreds of pages are arranged in a front-end project, page jump routes are managed in a file centralized mode, Identity (ID) numbers of the page routes conflict, naming space conflicts, authority conflicts and the like, and management and control complexity is high; all business logics of single-page front-end engineering are together, logic isolation is adopted, the boundaries of common and private components are not clear, and codes maintained by various teams are redundant and easily pollute the whole situation.
In this case, micro front-end development technology based on micro-service architecture arises, micro-service is a variant of Service Oriented Architecture (SOA), and an application program is designed as a series of loosely-coupled fine-grained services, and is organized by a lightweight communication protocol, specifically, the application is constructed as a set of small services. These services can be deployed independently, expanded independently, each with a robust modular boundary, and managed by different teams, even allowing different services to be written using different programming languages. The same problem is faced by heavier and heavier front-end engineering, which naturally thinks of applying micro-services concepts to front-end development, and then has the concept of micro-front-ends (micro-frontends): micro-front-ends are an architectural style that is integrated from multiple front-end applications delivered independently. In particular, the front-end application is broken down into smaller, simpler pieces that can be developed, tested, deployed independently, yet still appear to the user as a cohesive single product.
The micro front-end solutions commonly used in the industry at present have Iframe (chinese temporarily without uniform name), web component (chinese temporarily without uniform name), route distribution and the like. In the using process of the Iframe, the problems are solved, and new problems are brought, such as that after different micro front ends are isolated, a Cascading Style Sheets (CSS) and JavaScript (Chinese temporarily has no uniform name) cannot be shared, and the Iframe is repeatedly developed in different micro front end projects; different micro front end engineering are different in source, Cookie (Chinese has no unified name temporarily) cannot be shared; the page is segmented by different micro front ends, absolute centering positioning cannot be realized, and the problems of poor white screen experience for a long time and the like can occur due to different isolated system loading states; the web component micro-front-end weak isolation scheme is realized by componentization, but the scheme needs to adopt integral reconstruction on the existing system, can also cause repeated work, and can largely duplicate the existing functions.
Therefore, a new approach is desired to overcome the drawbacks of monomer applications while ameliorating the problems presented by the conventional micro-front-ends listed above.
It should be noted that the statements herein merely provide background information related to the present application and may not necessarily constitute prior art.
Disclosure of Invention
In view of the above, the present application is proposed in order to provide a micro front-end based data processing method and framework that overcomes or at least partially solves the above mentioned problems.
According to an aspect of the present application, a data processing method based on a micro front end is provided, where the method is implemented by a data processing framework of the micro front end, the data processing framework of the micro front end includes an application configuration center, a micro front end main engineering module and at least one micro front end sub-engineering module, the application configuration center is in communication connection with the micro front end main engineering module, and the micro front end main engineering module is in communication connection with the micro front end sub-engineering module; the method comprises the following steps:
the application configuration center receives the customization information of each sub-application and sends the customization information of each sub-application to the micro front-end main engineering module;
the micro front end main engineering module generates a loading menu and an initialization file of each sub-application according to the customized information of each sub-application; loading the micro front terminal engineering module corresponding to each sub-application according to the loading menu of each sub-application; sending each sub-application initialization file to a micro front end terminal engineering module corresponding to each sub-engineering;
the micro front end sub-engineering module issues each sub-application according to the received initialization file, so that the micro front end main engineering module standardizes each sub-application and realizes the issuing of a main application, wherein the main application and each sub-application are homologous.
Optionally, in the data processing method, the customization information includes: application information, menu information, and permission configuration information.
Optionally, in the data processing method, the main application, each of the sub-applications, and each of the sub-applications realize Javascript isolation and cashing Style Sheets isolation by using an Iframe sandbox technology.
Optionally, in the data processing method, the loading the micro front end engineering module corresponding to each sub-application according to the loading menu of each sub-application includes:
determining each sub-application forming a main application according to the postMessage in the loading menu of each sub-application, and determining a micro front terminal engineering module corresponding to each sub-application according to each sub-application forming the main application;
loading the micro front terminal engineering module corresponding to each sub application;
the micro front end main engineering module further comprises:
and loading a main project sharing component, wherein the main project sharing component comprises a common open source dependent component and a common shared dependent component, and the common shared dependent component comprises a rendering component and a development compiling component.
Optionally, in the data processing method, the issuing, by the front micro-terminal engineering module, each sub-application according to the received initialization file includes:
calling a main project sharing component of the micro front end main project module according to the initialization file to complete the development of each sub application;
and after the main engineering shared components in each developed sub-application are removed, packaging each sub-application, and correspondingly transmitting the page loading life cycle of each sub-application to the micro front-end main engineering module.
Optionally, in the data processing method, the standardizing each sub-application by the micro front-end main engineering module, and implementing the release of the main application includes:
calling an engineering standardization module to standardize the language, style and authority of each sub-application, combining the standardized sub-applications together to form a main application, and issuing the main application;
optionally, in the data processing method, the compiling of the main application and each sub-application is implemented based on a node.
According to a second aspect of the present application, there is provided a micro-front end based data processing framework, the framework comprising: the system comprises an application configuration center, a micro front end main engineering module and at least one micro front terminal engineering module, wherein the application configuration center is in communication connection with the micro front end main engineering module, and the micro front end main engineering module is in communication connection with the micro front terminal engineering module;
the application configuration center is used for receiving the customization information of each sub-application and sending the customization information of each sub-application to the micro front-end main engineering module;
the micro front end main engineering module is used for generating a loading menu and an initialization file of each sub-application according to the customized information of each sub-application; loading the micro front terminal engineering module corresponding to each sub-application according to the loading menu of each sub-application; sending each sub-application initialization file to a micro front end terminal engineering module corresponding to each sub-engineering;
the micro front end engineering module is used for issuing each sub-application according to the received initialization file, so that the micro front end main engineering module standardizes each sub-application, and the issuing of the main application is realized.
Optionally, in the data processing framework, the micro front-end main engineering module includes a route distribution unit and a main engineering foundation front-end unit, where the main engineering foundation front-end unit includes an application management and loading unit, a public communication unit, and an engineering standardization unit;
the route distribution unit is respectively in communication connection with the application configuration center and the application management and loading unit and is used for receiving the customization information of each sub-application and sending the customization information of each sub-application to the application management and loading unit;
the application management and loading unit is respectively in communication connection with each micro front terminal engineering module and is used for loading the micro front terminal engineering module corresponding to each sub-application according to the loading menu of each sub-application; sending each sub-application initialization file to a micro front end terminal engineering module corresponding to each sub-engineering;
and the engineering standardization unit is used for standardizing each sub-application so as to realize the release of the main application.
And the public communication unit is used for realizing communication connection among the application configuration center, the micro front end main engineering module and each micro front terminal engineering module.
Optionally, in the data processing framework, Javascript isolation and clipping Style screens isolation are implemented between the micro front end engineering module and each of the micro front end engineering modules by using an Iframe sandbox technology.
According to a third aspect of the present application, there is provided an electronic device, wherein the electronic device comprises: a processor; and a memory arranged to store computer executable instructions that, when executed, cause the processor to perform a method as any one of the above.
According to a fourth aspect of the application, there is provided a computer readable storage medium, wherein the computer readable storage medium stores one or more programs which, when executed by a processor, implement the method as any one of the above.
In summary, the present application provides a micro front-end data processing method based on a subscription-publication idea, which realizes independent development, independent test, and independent deployment of each front-end engineering in the whole flow of front-end development; the coupling between the main application and each sub-application is reduced to a great extent, the time for compiling and releasing operation and maintenance implementation is shortened, and the working efficiency of front-end development is remarkably improved.
The foregoing description is only an overview of the technical solutions of the present application, and the present application can be implemented according to the content of the description in order to make the technical means of the present application more clearly understood, and the following detailed description of the present application is given in order to make the above and other objects, features, and advantages of the present application more clearly understandable.
Drawings
Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the application. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:
FIG. 1 shows a schematic block diagram of a data processing framework of a micro front-end according to one embodiment of the present application;
FIG. 2 shows a flow diagram of a data processing method of a micro front-end according to one embodiment of the present application;
FIG. 3 shows a schematic structural diagram of an electronic device according to an embodiment of the present application;
FIG. 4 shows a schematic structural diagram of a computer-readable storage medium according to an embodiment of the present application.
Detailed Description
Exemplary embodiments of the present application will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present application are shown in the drawings, it should be understood that the present application may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
The idea of the present application is that there are many implementations of micro front-ends on the market today, such as: routing distribution, Web Components, single-spa-based micro front end, widget (webpack-based) and the like, but the applications have some limitations in development cost, maintenance cost, implementation difficulty, feasibility and the like, such as poor browser compatibility, non-centered page popup frames, non-uniform system prompt positions and the like.
Aiming at the current situation of micro front-end development, based on the idea of subscription-release, a micro front-end data processing method is provided, in the method, application customization personnel can split a front-end project or application into a plurality of sub-applications which are homologous with the front-end project or application according to needs, a main project module can decide whether to load each sub-project module according to needs, the application customization personnel can individually customize each sub-application according to needs, and each sub-application is isolated from each other, so that the development of a front-end page is realized, and the method realizes the independent development, independent test and independent deployment of each front-end project; the coupling between the main application and each sub-application is reduced to a great extent, the time for compiling and releasing operation and maintenance implementation is shortened, and the working efficiency of front-end development is remarkably improved.
The method of the present application is implemented by a data processing framework of a micro front end, and fig. 1 shows a schematic structural diagram of the data processing framework of the micro front end according to an embodiment of the present application, and as can be seen from fig. 1, the data processing framework 1 of the micro front end includes an application configuration center 100, a micro front end main engineering module 200, and at least one micro front end terminal engineering module 300, the application configuration center 100 is in communication connection with the micro front end main engineering module 200, and the micro front end main engineering module 200 is in communication connection with the micro front end terminal engineering module 300. In some embodiments of the present application, the micro front end engineering modules 300 are isolated from each other in case of multiple micro front end engineering modules 300. In addition, both the micro front end main engineering module 200 and the micro front end sub-engineering module 300 have API interfaces.
In some embodiments of the present application, the micro front-end main engineering module 200 includes a route distribution unit 210 and a main engineering foundation front-end unit 220, wherein the main engineering foundation front-end unit 220 includes an application management and loading unit 222, a public communication unit 223, an engineering standardization unit 221; the route distribution unit 210 is communicatively connected to the application management and loading unit 222, the application management and loading unit 222 is communicatively connected to each micro front end engineering module 300, the application management and loading unit 222 includes a controller (Roter, not shown in the figure), and the application management and loading unit 222 is responsible for loading of the micro front end engineering module 300 and message processing of the micro front end engineering module 300.
The public communication unit 223 mainly carries communication tasks between modules of the whole micro front-end data processing framework, including but not limited to communication tasks between the application configuration center 100 and the micro front-end main engineering module 200 and between the micro front-end main engineering module 200 and the micro front-end terminal engineering module 300, and the unit specifically realizes $ message (system prompt information), $ notify (system notification information), $ redirect to (inter-subsystem jump), $ openDia (open service bullet frame), and the like, and provides various communication functions for the whole framework. If receiving the message of the micro front end main engineering module 200: the message type is processed by a processing function handleMessage, such as: closeDia (close dialog), paging (relative adjustment of pages css), and so on. The related basic functions of the micro front-end system can be quickly realized through the related functions provided by the public communication unit 223, such as: service function box ejection, system message style unification, inter-subsystem skip, unified login processing and the like.
Fig. 2 is a schematic flowchart illustrating a data processing method of a micro front end according to an embodiment of the present application, where the data processing method based on the micro front end provided by the present application is implemented based on any one of the data processing frameworks of the micro front end, and the data processing method of the micro front end at least includes the following steps S210 to S230:
step S210: the application configuration center 100 receives the customization information of each sub-application, and sends the customization information of each sub-application to the micro front-end main engineering module.
The method is based on a micro front end development method, in the method, one main application is composed of a plurality of sub-applications, the main application and each sub-application composing the main application are homologous, and the homology means that the main application and each sub-application share Cookie information and share a Nginx server.
In addition, because the concept of the application is based on a subscription-publishing mode, the application can be realized based on a VUE (currently, no unified Chinese name) framework, wherein the VUE is a set of framework for constructing a user interface, and is used for bidirectional data binding, so that unnecessary dom (currently, no unified Chinese name) operation is reduced; through the instruction provided by the framework, the front end only needs to pay attention to the business logic, and does not care how to render the dom.
The customization information of each sub-application may be registered and written in the application configuration center 100 by an application customization person, specifically, a front-end development engineer in the field, and in some embodiments of the present application, the customization information of each sub-application includes, but is not limited to, application information, menu information, authority configuration information, and the like.
The application configuration center 100 receives the customization information of each sub-application, and sends the customization information of each sub-application to the micro front-end main engineering module 200.
After receiving the customized information of the sub-application, the application configuration center 100 configures the application authority of the relevant user, and then configures the relevant function menu of the sub-application, thereby completing the basic work of the main application plus the sub-application.
In some embodiments of the present application, the application configuration center 100 sends the information to the route distribution unit 210 of the micro front-end master engineering module 200, and the route distribution unit 210 sends the information to other units of the micro front-end master engineering module 200.
Step S220: the micro front-end main engineering module 200 generates a loading menu and an initialization file which form each sub-application according to the customized information of each sub-application; loading the micro front terminal engineering module corresponding to each sub-application according to the loading menu of each sub-application; and sending each sub-application initialization file to the micro front end engineering module corresponding to each sub-engineering.
After receiving the customization information of each sub-application, the micro front-end main engineering module 200 generates a loading menu and an initialization file (Package) of each sub-application according to the customization information, taking one sub-application as an example, according to the loading menu of the sub-application, the micro front-end main engineering module 200 determines whether to load the micro front-end sub-engineering module 300 corresponding to the sub-application, and if so, pulls the micro front-end sub-engineering module 300 corresponding to the sub-application through the controller of the application management and loading unit 222.
After each micro front end engineering module 300 is loaded, the micro front end main engineering module 200 sends each sub-application initialization file to the micro front end engineering module 300 corresponding to each sub-application. In some embodiments of the present application, the data may be sent to each micro front end sub-engineering module 300 by the application management and loading unit 222 of the micro front end main engineering module 200.
Step S230: the micro front end sub-engineering module 300 publishes each sub-application according to the received initialization file, so that the micro front end main engineering module 200 standardizes each sub-application to realize the publishing of the main application, wherein the main application and each sub-application are homologous.
The micro front end sub-engineering module 300 performs building (build), testing (test), publishing (pipeline) and other operations on the sub-applications according to the received respective initialization files, and after all the sub-applications are published to the corresponding server directory, the engineering standardization unit 221 of the micro front end main engineering module 200 performs standardization processing on all the sub-applications, wherein the standardization processing includes but is not limited to uniform storage and acquisition of system theme colors, multiple languages and user credentials, so that the sub-applications form a uniform-style main application. Certainly, the main application also contains user login authentication information, menu authority, multiple languages, common components and other general information. In some embodiments of the present application, the compiling of the main application and each sub-application may be implemented based on, but not limited to, node.
The method shown in fig. 2 shows that a micro front-end method is established on the basis of the existing implementation modes through research and practice, has the characteristics of low development cost, low implementation difficulty, high browser compatibility and good expansibility, and can be quickly established, flexibly and efficiently integrated and released in low coupling in actual project development.
In some embodiments of the present application, in the data processing method, the Iframe technology may be used to realize mutual nesting of sub-applications, and also may realize that multiple sub-applications are simultaneously parallel in the front-end main project; and Javascript (JS, no unified Chinese name at present) isolation and Cascadeng Style Sheets (CCS, no unified Chinese name at present) isolation are realized among the main application, the sub-applications and the sub-applications through an Iframe sandbox (sandbox) technology.
The Iframe is a mature technology at the front end, and the combined technical scheme has the advantages of low development and maintenance cost, high realizability, good compatibility, capability of conveniently realizing the mutual application, parallel application and the like of a plurality of sub-applications. And the Iframe naturally and perfectly supports JS sandbox and CSS isolation, and the situations of JS conflict and CSS conflict among subsystems or sub-applications can not occur.
In some embodiments of the present application, in the above data processing method, the loading, according to the loading menu of each sub-application, the micro front end engineering module corresponding to each sub-application includes: determining each sub-application forming a main application according to the postMessage in the loading menu of each sub-application, and determining a micro front terminal engineering module corresponding to each sub-application according to each sub-application forming the main application; and loading the micro front terminal engineering module corresponding to each sub application.
The main execution body of this step is the micro front end main engineering module 200, which can determine whether the sub-application is needed according to the postMessage in the loading menu of the sub-application, and if so, pull the micro front end sub-engineering module 300 corresponding to the sub-application and load the micro front end sub-engineering module 300. In some embodiments of the present application, the main application and the sub-application may adopt a cross-document communication mode, a specific sub-reference may communicate with the main application through a postMessage, and the main project implements message listening to the sub-application through addEventListener.
The micro front-end main engineering module 200 needs to load the required micro front-end sub-engineering module 300, and also needs to preload some basic components, such as a main engineering shared component, in some embodiments of the present application, the main engineering shared component may be an NPM shared plug-in (no unified Chinese name at present), in some embodiments of the present application, the NPM shared plug-in includes two parts, one part is a common open source dependent component, and the other part is a common shared dependent component. When the sub-applications are released, the main engineering sharing component can be directly called to reduce redundant plug-ins, and the problem of plug-in redundancy of each sub-application is greatly relieved by setting the main engineering sharing component on the micro front-end main engineering module 200.
Optionally, in the data processing method, the issuing, by the front micro-terminal engineering module, each sub-application according to the received initialization file includes: calling a main project sharing component of the micro front end main project module according to the initialization file to complete the development of each sub application; and after the main engineering shared components in each developed sub-application are removed, packaging each sub-application, and correspondingly transmitting the page loading life cycle of each sub-application to the micro front-end main engineering module.
The main execution body of this step is each micro front end engineering module 300, that is, each micro front end engineering module 300 can call the above-mentioned main engineering shared component to complete the development work of the sub-application, then the main engineering shared component is removed, and then is packaged and issued to the corresponding server directory, and further, the main engineering shared component and the page loading life cycle of each sub-application can be sent to the micro front end main engineering module 200 together.
In some embodiments of the present application, in the data processing method, the micro front-end main engineering module 200 standardizes each sub-application, and implementing the release of the main application includes: and calling an engineering standardization unit 221 to standardize the language, style and authority of each sub-application, combining the standardized sub-applications together to form a main application, and issuing the main application.
The engineering standardization unit 221 provided by the micro front-end main engineering module 200 can enable the whole application to run coordinately and uniformly.
Referring again to fig. 1, the present application further provides a micro front-end based data processing framework 1, including: the system comprises an application configuration center 100, a micro front end main engineering module 200 and at least one micro front end terminal engineering module 300, wherein the application configuration center 100 is in communication connection with the micro front end main engineering module 200, and the micro front end main engineering module 200 is in communication connection with the micro front end terminal engineering module 300;
the application configuration center 100 is configured to receive customization information of each sub-application, and send the customization information of each sub-application to the micro front-end main engineering module 200;
the micro front-end main engineering module 200 is configured to generate a loading menu and an initialization file forming each sub-application according to the customization information of each sub-application; loading the micro front end engineering module 300 corresponding to each sub-application according to the loading menu of each sub-application; and sends each sub-application initialization file to the micro front end engineering module 300 corresponding to each sub-project;
the micro front end sub-engineering module 300 is configured to publish each sub-application according to the received initialization file, so that the micro front end main engineering module 200 standardizes each sub-application, so as to publish the main application.
As can be seen from fig. 1, the micro-front-end-based data processing framework provided by the present application has a high integration level, and the micro-front-end main engineering module 200 provides a standard communication protocol and a standardized module for each subsystem, so that the whole application runs in a coordinated and unified manner, and each sub-application realizes its own service function as required, and is independently developed and deployed, thereby greatly reducing the difficulty in development and management of large-scale engineering, and making the service split of the system more clear.
In some embodiments of the present application, in the data processing framework described above, the micro front-end main engineering module 200 includes a route distribution unit 210 and a main engineering base front-end unit 220, wherein the main engineering base front-end unit 220 includes an application management and loading unit 222, a public communication unit 223, an engineering standardization unit 221; the route distribution unit 210 is respectively in communication connection with the application configuration center 100 and the application management and loading unit 222, and is configured to receive the customization information of each sub-application, and send the customization information of each sub-application to the application management and loading unit 222; the application management and loading unit 222 is respectively in communication connection with each micro front end engineering module 300, and is configured to load the micro front end engineering module 300 corresponding to each sub-application according to the loading menu of each sub-application; and sends each sub-application initialization file to the micro front end engineering module 300 corresponding to each sub-project; the engineering standardization unit 221 is configured to standardize the sub-applications to implement the release of the main application. A public communication unit 223, configured to implement communication connection among the application configuration center 110, the micro front-end main engineering module 200, and each micro front-end engineering module 300.
In some embodiments of the present application, in the data processing framework, the Javascript isolation and the caching Style Sheets isolation are implemented between the micro front end main engineering module 200 and each of the micro front end sub-engineering modules 300 through Iframe sandbox technology.
It should be noted that, the data processing framework based on the micro front end of the present application can implement the data processing method based on the micro front end one by one, and details are not repeated.
In summary, the present application provides a micro front-end data processing method based on a subscription-publication idea, which realizes independent development, independent test, and independent deployment of each front-end engineering in the whole flow of front-end development; the coupling between the main application and each sub-application is reduced to a great extent, the time for compiling and releasing operation and maintenance implementation is shortened, and the working efficiency of front-end development is remarkably improved.
It should be noted that:
the algorithms and displays presented herein are not inherently related to any particular computer, virtual machine, or other apparatus. Various general purpose devices may be used with the teachings herein. The required structure for constructing such a device will be apparent from the description above. In addition, this application is not directed to any particular programming language. It will be appreciated that a variety of programming languages may be used to implement the teachings of the present application as described herein, and any descriptions of specific languages are provided above to disclose the best modes of the present application.
In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the application may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.
Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the application, various features of the application are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the application and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be interpreted as reflecting an intention that: this application is intended to cover such departures from the present disclosure as come within known or customary practice in the art to which this invention pertains. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into this detailed description, with each claim standing on its own as a separate embodiment of this application.
Furthermore, those skilled in the art will appreciate that while some embodiments described herein include some features included in other embodiments, rather than other features, combinations of features of different embodiments are meant to be within the scope of the application and form different embodiments. For example, in the following claims, any of the claimed embodiments may be used in any combination.
The various component embodiments of the present application may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It will be appreciated by those skilled in the art that a microprocessor or Digital Signal Processor (DSP) may be used in practice to implement some or all of the functions of some or all of the components within the framework of the present application. The present application may also be embodied as apparatus or device programs (e.g., computer programs and computer program products) for performing a portion or all of the methods described herein. Such programs implementing the present application may be stored on a computer readable medium or may be in the form of one or more signals. Such a signal may be downloaded from an internet website or provided on a carrier signal or in any other form.
For example, fig. 3 shows a schematic structural diagram of an electronic device according to an embodiment of the present application. The electronic device 300 comprises a processor 310 and a memory 320 arranged to store computer executable instructions (computer readable program code). The memory 320 may be an electronic memory such as a flash memory, an EEPROM (electrically erasable programmable read only memory), an EPROM, a hard disk, or a ROM. The memory 320 has a storage space 330 storing computer readable program code 331 for performing any of the method steps described above. For example, the storage space 330 for storing the computer readable program code may comprise respective computer readable program codes 331 for respectively implementing various steps in the above method. The computer readable program code 331 may be read from or written to one or more computer program products. These computer program products comprise a program code carrier such as a hard disk, a Compact Disc (CD), a memory card or a floppy disk. Such a computer program product is typically a computer readable storage medium such as that shown in fig. 4. FIG. 4 shows a schematic structural diagram of a computer-readable storage medium according to an embodiment of the present application. The computer readable storage medium 400 has stored thereon a computer readable program code 331 for performing the steps of the method according to the application, readable by a processor 310 of an electronic device 300, which computer readable program code 331, when executed by the electronic device 300, causes the electronic device 300 to perform the steps of the method described above, in particular the computer readable program code 331 stored on the computer readable storage medium may perform the method shown in any of the embodiments described above. The computer readable program code 331 may be compressed in a suitable form.
It should be noted that the above-mentioned embodiments illustrate rather than limit the application, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The application may be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means may be embodied by one and the same item of hardware. The usage of the words first, second and third, etcetera do not indicate any ordering. These words may be interpreted as names.
Claims (10)
1. A data processing method based on a micro front end is characterized in that the method is realized through a data processing framework of the micro front end, the data processing framework of the micro front end comprises an application configuration center, a micro front end main engineering module and at least one micro front end terminal engineering module, the application configuration center is in communication connection with the micro front end main engineering module, and the micro front end main engineering module is in communication connection with the micro front end terminal engineering module; the method comprises the following steps:
the application configuration center receives the customization information of each sub-application and sends the customization information of each sub-application to the micro front-end main engineering module;
the micro front end main engineering module generates a loading menu and an initialization file of each sub-application according to the customized information of each sub-application; loading the micro front terminal engineering module corresponding to each sub-application according to the loading menu of each sub-application; sending each sub-application initialization file to a micro front end terminal engineering module corresponding to each sub-engineering;
the micro front end sub-engineering module issues each sub-application according to the received initialization file, so that the micro front end main engineering module standardizes each sub-application and realizes the issuing of a main application, wherein the main application and each sub-application are homologous.
2. The data processing method of claim 1, wherein the customization information comprises: application information, menu information, and permission configuration information.
3. The data processing method according to claim 1, wherein Javascript isolation and caching Style Sheets isolation are implemented between the main application and each of the sub-applications and between the sub-applications through Iframe sandboxing technology.
4. The data processing method according to claim 1, wherein the loading of the micro front end engineering module corresponding to each sub-application according to the loading menu of each sub-application comprises:
determining each sub-application forming a main application according to the postMessage in the loading menu of each sub-application, and determining a micro front terminal engineering module corresponding to each sub-application according to each sub-application forming the main application;
loading the micro front terminal engineering module corresponding to each sub application;
the micro front end main engineering module further comprises:
and loading a main project sharing component, wherein the main project sharing component comprises a common open source dependent component and a common shared dependent component, and the common shared dependent component comprises a rendering component and a development compiling component.
5. The data processing method of claim 1, wherein the publishing of each sub-application by the micro front end sub-engineering module according to the received initialization file comprises:
calling a main project sharing component of the micro front end main project module according to the initialization file to complete the development of each sub application;
and after the main engineering shared components in each developed sub-application are removed, packaging each sub-application, and correspondingly transmitting the page loading life cycle of each sub-application to the micro front-end main engineering module.
6. The data processing method according to claim 1, wherein the micro front-end main engineering module standardizes the sub-applications, and the implementation of the release of the main application comprises:
and calling an engineering standardization module to standardize the language, style and authority of each sub-application, combining the standardized sub-applications together to form a main application, and issuing the main application.
7. A data processing method according to any one of claims 1 to 6, wherein the compilation of said main application and said sub-applications is based on node.
8. A micro-front end based data processing framework, comprising: the system comprises an application configuration center, a micro front end main engineering module and at least one micro front terminal engineering module, wherein the application configuration center is in communication connection with the micro front end main engineering module, and the micro front end main engineering module is in communication connection with the micro front terminal engineering module;
the application configuration center is used for receiving the customization information of each sub-application and sending the customization information of each sub-application to the micro front-end main engineering module;
the micro front end main engineering module is used for generating a loading menu and an initialization file of each sub-application according to the customized information of each sub-application; loading the micro front terminal engineering module corresponding to each sub-application according to the loading menu of each sub-application; sending each sub-application initialization file to a micro front end terminal engineering module corresponding to each sub-engineering;
the micro front end engineering module is used for issuing each sub-application according to the received initialization file, so that the micro front end main engineering module standardizes each sub-application, and the issuing of the main application is realized.
9. The data processing framework of claim 8, wherein the micro-front-end main engineering module comprises a route distribution unit and a main engineering base front-end unit, wherein the main engineering base front-end unit comprises an application management and loading unit, a public communication unit, an engineering standardization unit;
the route distribution unit is respectively in communication connection with the application configuration center and the application management and loading unit and is used for receiving the customization information of each sub-application and sending the customization information of each sub-application to the application management and loading unit;
the application management and loading unit is respectively in communication connection with each micro front terminal engineering module and is used for loading the micro front terminal engineering module corresponding to each sub-application according to the loading menu of each sub-application; sending each sub-application initialization file to a micro front end terminal engineering module corresponding to each sub-engineering;
the engineering standardization unit is used for standardizing each sub-application to realize the release of the main application;
and the public communication unit is used for realizing communication connection among the application configuration center, the micro front end main engineering module and each micro front terminal engineering module.
10. The data processing framework of claim 9, wherein Javascript isolation and cashing Style Sheets isolation is implemented between the micro front end front engineering modules and each of the micro front end sub-engineering modules through Iframe sandboxing technology.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110287271.XA CN112988153B (en) | 2021-03-17 | 2021-03-17 | Data processing method and frame based on micro front end |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110287271.XA CN112988153B (en) | 2021-03-17 | 2021-03-17 | Data processing method and frame based on micro front end |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112988153A true CN112988153A (en) | 2021-06-18 |
| CN112988153B CN112988153B (en) | 2023-12-29 |
Family
ID=76332829
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110287271.XA Active CN112988153B (en) | 2021-03-17 | 2021-03-17 | Data processing method and frame based on micro front end |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112988153B (en) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113568652A (en) * | 2021-06-29 | 2021-10-29 | 深圳云之家网络有限公司 | Application system processing method and device, computer equipment and storage medium |
| CN113626124A (en) * | 2021-08-16 | 2021-11-09 | 南京赛宁信息技术有限公司 | Component state sharing method and device for iFrame micro front-end architecture |
| CN113688343A (en) * | 2021-07-23 | 2021-11-23 | 济南浪潮数据技术有限公司 | Page permission control method, device, equipment and readable storage medium |
| CN113821194A (en) * | 2021-09-10 | 2021-12-21 | 上海云轴信息科技有限公司 | Micro front-end system |
| CN114070618A (en) * | 2021-11-16 | 2022-02-18 | 南京中孚信息技术有限公司 | Data processing method and system based on micro front end |
| CN114327688A (en) * | 2022-03-15 | 2022-04-12 | Tcl通讯科技（成都）有限公司 | Data processing method, frame, storage medium and terminal equipment based on micro front end |
| CN114416169A (en) * | 2022-01-18 | 2022-04-29 | 网易（杭州）网络有限公司 | Data processing method, medium, device and computing equipment based on micro front end |
| CN114721633A (en) * | 2022-05-17 | 2022-07-08 | 广东精工智能系统有限公司 | Multi-application integration method and system for digital factory |
| WO2023016019A1 (en) * | 2021-08-10 | 2023-02-16 | 中兴通讯股份有限公司 | Resource sharing methods and micro-front-end system, application, and computer-readable storage medium |
| CN116301870A (en) * | 2023-05-17 | 2023-06-23 | 北京天信瑞安信息技术有限公司 | Micro front end frame, construction method thereof and related equipment |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111078204A (en) * | 2019-12-25 | 2020-04-28 | 江苏共融科技有限公司 | Business middling front-end system based on micro front-end architecture |
| US10678600B1 (en) * | 2019-03-01 | 2020-06-09 | Capital One Services, Llc | Systems and methods for developing a web application using micro frontends |
| US10795860B1 (en) * | 2017-04-13 | 2020-10-06 | EMC IP Holding Company LLC | WAN optimized micro-service based deduplication |
-
2021
- 2021-03-17 CN CN202110287271.XA patent/CN112988153B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10795860B1 (en) * | 2017-04-13 | 2020-10-06 | EMC IP Holding Company LLC | WAN optimized micro-service based deduplication |
| US10678600B1 (en) * | 2019-03-01 | 2020-06-09 | Capital One Services, Llc | Systems and methods for developing a web application using micro frontends |
| CN111078204A (en) * | 2019-12-25 | 2020-04-28 | 江苏共融科技有限公司 | Business middling front-end system based on micro front-end architecture |
Non-Patent Citations (3)
| Title |
|---|
| CD2001CJM: "微前端", pages 1 - 7, Retrieved from the Internet <URL:《https://www.jianshu.com/p/e9942fbf55f5》> * |
| 刘一田 等: "微前端化微应用管理控制台", 计算机系统应用, vol. 29, no. 09, pages 126 * |
| 单茹楠: "基于微服务化前端架构的研究与实现", 《中国优秀硕士学位论文全文数据库 (信息科技辑)》, no. 6, pages 139 - 51 * |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113568652A (en) * | 2021-06-29 | 2021-10-29 | 深圳云之家网络有限公司 | Application system processing method and device, computer equipment and storage medium |
| CN113688343A (en) * | 2021-07-23 | 2021-11-23 | 济南浪潮数据技术有限公司 | Page permission control method, device, equipment and readable storage medium |
| CN113688343B (en) * | 2021-07-23 | 2023-11-03 | 济南浪潮数据技术有限公司 | Page authority control method, device, equipment and readable storage medium |
| WO2023016019A1 (en) * | 2021-08-10 | 2023-02-16 | 中兴通讯股份有限公司 | Resource sharing methods and micro-front-end system, application, and computer-readable storage medium |
| CN113626124A (en) * | 2021-08-16 | 2021-11-09 | 南京赛宁信息技术有限公司 | Component state sharing method and device for iFrame micro front-end architecture |
| CN113626124B (en) * | 2021-08-16 | 2024-03-08 | 南京赛宁信息技术有限公司 | Component state sharing method and device for iFrame micro front end architecture |
| CN113821194A (en) * | 2021-09-10 | 2021-12-21 | 上海云轴信息科技有限公司 | Micro front-end system |
| CN114070618B (en) * | 2021-11-16 | 2024-02-09 | 南京中孚信息技术有限公司 | Data processing method and system based on micro front end |
| CN114070618A (en) * | 2021-11-16 | 2022-02-18 | 南京中孚信息技术有限公司 | Data processing method and system based on micro front end |
| CN114416169A (en) * | 2022-01-18 | 2022-04-29 | 网易（杭州）网络有限公司 | Data processing method, medium, device and computing equipment based on micro front end |
| CN114327688B (en) * | 2022-03-15 | 2022-07-08 | Tcl通讯科技（成都）有限公司 | Data processing method, frame, storage medium and terminal equipment based on micro front end |
| CN114327688A (en) * | 2022-03-15 | 2022-04-12 | Tcl通讯科技（成都）有限公司 | Data processing method, frame, storage medium and terminal equipment based on micro front end |
| CN114721633A (en) * | 2022-05-17 | 2022-07-08 | 广东精工智能系统有限公司 | Multi-application integration method and system for digital factory |
| CN116301870A (en) * | 2023-05-17 | 2023-06-23 | 北京天信瑞安信息技术有限公司 | Micro front end frame, construction method thereof and related equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112988153B (en) | 2023-12-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112988153A (en) | Data processing method and framework based on micro front end | |
| CN100543701C (en) | A kind of method and system that realize embedded software unconventionality testing | |
| CN106569794A (en) | Application developing device | |
| CN105022630B (en) | A kind of assembly management system and assembly management method | |
| CN110543328B (en) | Cross-platform component management method, system, terminal and storage medium based on Ambari | |
| CN106775744B (en) | Method and device for generating static library | |
| CN105760180B (en) | A kind of workflow engine expands and develops method | |
| CN110096424B (en) | Test processing method and device, electronic equipment and storage medium | |
| CN101482817B (en) | Large-particle Java component assembly method based on black box | |
| CN110888657B (en) | Method for deploying microservice based on Groovy template engine | |
| CN112148278A (en) | Visual block chain intelligent contract framework and intelligent contract development and deployment method | |
| CN111736884A (en) | Componentization method and system | |
| CN112363704A (en) | Service system based on micro-service architecture | |
| CN114115838A (en) | Data interaction method and system based on distributed components and cloud platform | |
| Dennert et al. | Advanced concepts for flexible data integration in heterogeneous production environments | |
| CN110968339B (en) | Method and device for front-end building tool and electronic equipment | |
| CN111459510A (en) | Cross-network operating system installation method and device, electronic equipment and medium | |
| CN111488151A (en) | Method and device for page interaction among Android modules | |
| KR102397494B1 (en) | Low code web development and operating system, and service method using of it | |
| US20220300262A1 (en) | Method for constructing, running and implementing cross-platform application, terminal, server and system | |
| CN108694048A (en) | A kind of implementation method of batch issuing service | |
| CN104461557A (en) | Puppet configuration data processing method and device | |
| CN112418796B (en) | Sub-process task node activation method and device, electronic equipment and storage medium | |
| CN114237634A (en) | Application release risk identification method, device, equipment, medium and program product | |
| CN113485692A (en) | Big data componentization development method and device based on component store |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |