CN117609113A - Method for caching micro front end across different technical stacks - Google Patents

Abstract

The invention relates to the technical field of front-end data caching, in particular to a method for caching micro front-end data by crossing different technical stacks, which comprises the following steps: constructing a micro front end frame system; switching the micro front end framework system page; according to the method, the technology of caching the micro front end across different technical stacks is realized, on one hand, the micro front end framework supports quick initialization and quick access of sub-applications of different front end frameworks, and on the other hand, the function of switching page cache between different technical stack projects by the micro front end can be realized under the condition that sub-application codes are not modified, sub-application projects are not invaded, and the workload of a developer is not increased, so that the problem of lost cache of page switching page data between sub-applications of the same technical stack and across the technical stacks in the micro front end framework is solved.

Description

Method for caching micro front end across different technical stacks

Technical Field

The invention relates to the technical field of front-end data caching, in particular to a method for caching micro front-end data by crossing different technical stacks.

Background

With the rapid development of the internet industry in recent years, the business requirements of various enterprise-level applications are more and more complex, front-end and back-end separated frameworks are gradually popularized to improve the development efficiency, the front-end is independently operated from the processes of development, construction, deployment, operation and the like, but most of the front-end and back-end separated frameworks are applied to single-page applications, with the rising of front-end engineering, the business volume of the front-end is more and more increased, the single-body framework cannot meet the application of multiple businesses and the collaborative development across groups, and the complex application development and maintenance difficulty is high.

The advent of the micro front end framework meets the above needs, but with the consequent new problems: the codes corresponding to the business are belonged to different sub-applications, complex business operation needs to jump back between different sub-applications, business processes can be processed after entering different pages, and often, the business has data dependency relations on different pages to be checked.

Disclosure of Invention

The invention aims to provide a method for caching micro front-end across different technical stacks, which aims to solve the problem of lost cache of page data in the micro front-end frame system when switching pages between sub-applications of the same technical stack and across the technical stacks.

In order to achieve the above purpose, the present invention provides a method for caching micro front ends across different technology stacks, comprising the following steps:

constructing a micro front end frame system;

switching the micro front end framework system page;

and caching the micro front end framework system page components which are not activated currently.

Wherein, the construction of the micro front end framework system comprises:

constructing a main application;

constructing a plurality of first sub-applications;

constructing a plurality of second sub-applications;

registering a plurality of the first sub-applications and a plurality of the second sub-applications with the main application;

and closing a plurality of first sub-applications and a plurality of second sub-applications in the main application on DOM nodes to obtain a micro front end framework system.

The switching the micro front end framework system page comprises the following steps:

developing a specific service interface in the accessed first sub-application and second sub-application;

maintaining a page menu of the first sub-application and the second sub-application into the main application;

and switching the micro front end framework system pages by clicking the page menu.

The micro front end framework system page component for caching not activated currently comprises:

the configuration file configures the buffer plug-in to start the application level buffer capacity;

opening page buffering capacity through page configuration attributes;

clicking on the page menu to switch the page component instance with the cache not activated.

The information for registering the first sub-application and the second sub-application comprises a name, an activation rule, a title, a resource loading mode, an HTML (hypertext markup language) entry and a mounted DOM node.

The invention discloses a method for caching micro front ends across different technical stacks, which comprises the following steps: constructing a micro front end frame system; switching the micro front end framework system page; according to the method, the technology of caching the micro front end across different technical stacks is realized, on one hand, the micro front end framework supports quick initialization and quick access of sub-applications of different front end frameworks, and on the other hand, the function of switching page cache between different technical stack projects by the micro front end can be realized under the condition that sub-application codes are not modified, sub-application projects are not invaded, and the workload of a developer is not increased, so that the problem of page data loss cache between sub-applications of the same technical stack and across the technical stack in the micro front end framework is solved.

Drawings

In order to more clearly illustrate the embodiments of the invention or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, it being obvious that the drawings in the following description are only some embodiments of the invention, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a schematic diagram of a micro front end framework and cross technology stack sub-application registration and node mounting of the present invention.

FIG. 2 is a schematic diagram of switching sub-application pages of different technology stacks of the present invention.

FIG. 3 is a schematic diagram of an example of a page component of the present invention that is not currently active across a technology stack cache.

Fig. 4 is a flowchart of a method for caching micro front ends across different technology stacks provided by the present invention.

Detailed Description

Embodiments of the present invention are described in detail below, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to like or similar elements or elements having like or similar functions throughout. The embodiments described below by referring to the drawings are illustrative and intended to explain the present invention and should not be construed as limiting the invention.

Referring to fig. 1 to 4, the present invention provides a method for caching micro front-end across different technology stacks, comprising the following steps:

s1, constructing a micro front end framework system;

the information for registering the first sub-application and the second sub-application comprises a name, an activation rule, a title, a resource loading mode, an HTML (hypertext markup language) entry and a mounted DOM (document object model) node

S11, constructing a main application;

specifically, the main application is initialized based on the template item, and the corresponding engineering parameter configuration is modified.

S12, constructing a plurality of first sub-applications;

specifically, the exact sub-application is initialized based on the template item, corresponding engineering parameter configuration is modified, the engineering parameter configuration comprises a sub-application starting port, a style prefix and the like, the micro-front-end framework system comprises a plurality of the exact sub-applications, and in the steps 1-3, the micro-front-end framework system comprises a plurality of Vue sub-applications.

S13, constructing a plurality of second sub-applications;

specifically, the Vue sub-application is initialized based on the template item, and the corresponding engineering parameter configuration is modified, including a sub-application starting port, a style prefix and the like.

S14, registering a plurality of first sub-applications and a plurality of second sub-applications to the main application;

specifically, the main application registers the corresponding number of sub-application information according to the number of sub-applications to be loaded, and specifically includes: the registered sub-application information comprises names (unique identifiers), activation rules, titles, resource loading modes, HTML entries, mounted DOM nodes and the like, and the registration information is filled in according to the registration rules according to the registration method exposed by the main application;

the configuration information of the sub-application registered on the main application is as follows:

registerMicroApps(

...,

{

name:’react1’,

activePath:‘/react1app’,

title: 'child application 1'

loadScriptMode:‘import’,

entry:‘http://localhost:3001’,

container:‘document.getElementById('el-container-react1')as HTMLElement’

},

...

)。

S15, the first sub-applications and the second sub-applications in the main application are related to DOM nodes, and a micro front end framework system is obtained.

Specifically, according to all the registered sub application information sets, the mounting node is dynamically generated. Dynamically controlling the visibility of DOM nodes by using a routing activePath and an instruction v-show, wherein a main application creates DOM nodes mounted by corresponding number of sub-applications according to the number of registered sub-applications, and the sub-applications create a mounting point with unique id on a DOM tree according to the name (unique identifier);

s2, switching the micro front end framework system page;

s21, developing a specific service interface in the first sub-application and the second sub-application which are accessed;

specifically, page 1 is developed in the exact sub-application, and page 2 is developed in the Vue sub-application. The same technology stack comprises accessed sub-applications, is not limited to development languages, and can be exact, vue and the like, and specifically comprises the following steps: the sub-applications accessing the main application are not limited by the development language and support most of the front-end frameworks on the market.

S22, maintaining page menus of the first sub-application and the second sub-application into the main application;

specifically, page 1 and page 2 are mounted on menu 1 and menu 2, respectively, by menu maintenance rules.

S23, switching the micro front end framework system pages by clicking the page menu.

Specifically, the switching of the sub-application pages of different technical stacks is performed by clicking the menu 1 and the menu 2.

And S3, caching the micro front end framework system page components which are not activated currently.

S31, configuring a cache plug-in to start application level cache capacity by a configuration file;

specifically, the configuration file configures the capability of the cache plug-in to open the application level cache, and the cache refers to a currently unactivated page component instance when switching pages of sub-applications across different technology stacks, and specifically includes: when the sub-application codes are not modified, sub-application engineering is not invaded, and pages of sub-applications crossing different technology stacks are switched after the main application is accessed, page component examples are cached, and data on the pages are reserved.

S32, opening page buffering capacity through page configuration attributes;

specifically, the page buffering capability is opened through the page configuration attribute.

S33, opening the page menu to switch the page component instance with the inactive cache.

Specifically, clicking on menu 1 opens page 1, clicking on menu 2 opens page 2, switching between menu 1 and menu 2, buffering the unactivated page component instance, and ending the whole buffering process;

clicking on menu 1 opens page 1, clicking on menu 2 opens page 2, switching between menu 1 and menu 2, the inactive page component instance is cached, and the entire caching process ends so far.

Page caching: examples include two pages, page 1 developed using the exact technique and page 2 developed using the Vue technique. Page 1 state is active and the page has data entered. The page 2 state is inactive, i.e., the page is hidden.

The user switches pages at this time, and the page state after switching: the page 2 state is the active state, the page 1 state is the inactive state, at which time the page 1 cache is in effect, the page data 1 is cached, and the component instance is cached.

The user switches the page again at this time, and the page state after switching is: the state of the page 1 is an active state, and at the moment, the page 1 acquires a component instance from the cache and fills the page data 1; the page 2 state is inactive.

Compared with the prior art, the method for caching the micro front end by crossing different technical stacks has the following beneficial effects:

in the method for caching the micro front end by crossing different technical stacks, the technology of caching the micro front end by crossing different technical stacks is realized;

on one hand, the micro front end framework system supports quick initialization and supports quick access of sub-applications of different front end frameworks;

on the other hand, the micro front end can switch the page cache function between different technical stack projects without modifying the sub application codes, invading the sub application projects and increasing the workload of developers, and the problem of data loss on the page when a user switches between the pages is solved.

The foregoing disclosure is illustrative of a preferred embodiment of a method for implementing a micro front end cache across different technology stacks, but it is not limited thereto, and those skilled in the art will appreciate that all or part of the above-described embodiments may be implemented and equivalents thereof may be modified according to the claims of the present invention.

Claims (5)

1. The method for caching the micro front end across different technical stacks is characterized by comprising the following steps of:

constructing a micro front end frame system;

switching the micro front end framework system page;

and caching the micro front end framework system page components which are not activated currently.

2. A method for micro front-end buffering across different technology stacks as recited in claim 1,

the construction of the micro front end framework system comprises the following steps:

constructing a main application;

constructing a plurality of first sub-applications;

constructing a plurality of second sub-applications;

registering a plurality of the first sub-applications and a plurality of the second sub-applications with the main application;

and closing a plurality of first sub-applications and a plurality of second sub-applications in the main application on DOM nodes to obtain a micro front end framework system.

3. A method for micro front-end buffering across different technology stacks as recited in claim 2, wherein,

the switching of the micro front end framework system page comprises the following steps:

developing a specific service interface in the accessed first sub-application and second sub-application;

maintaining a page menu of the first sub-application and the second sub-application into the main application;

and switching the micro front end framework system pages by clicking the page menu.

4. A method for micro front-end buffering across different technology stacks as claimed in claim 3,

the micro front end framework system page component of the cache which is not activated currently comprises:

the configuration file configures the buffer plug-in to start the application level buffer capacity;

opening page buffering capacity through page configuration attributes;

clicking on the page menu to switch the page component instance with the cache not activated.

5. A method for micro front-end buffering across different technology stacks as recited in claim 4,

the information for registering the first sub-application and the second sub-application comprises a name, an activation rule, a title, a resource loading mode, an HTML (hypertext markup language) entry and a mounted DOM node.