Shulou(Shulou.com)05/31 Report--

This article will explain in detail how to access the micro-front end in detail, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

A preface

The concept of micro-front end has been on the hot topics more than once in China, and the problems it has solved are also obvious, and the pain points mentioned by these micro-front ends are also very prominent in the projects maintained by our team.

But I always think that the hottest thing to discuss about a new technology and wave must be the outstanding thinking behind it.

"the micro front end is... xx framework, xx technology."

This kind of remark limits this kind of outstanding thinking a little bit. I can only think that he is a layman to rub against the popularity of the word.

In the projects and teams I am responsible for, there are already very large stock technology stacks and pages that are already running online, and any iterative upgrade must be careful and foolproof.

It can be said that, to a certain extent, these benefits brought by the micro-front end are in terms of user experience and technical maintenance, and the value of the business can not be quantified. Landing this technology holds both necessary and necessary guidelines.

We must maintain awe, isolation, and controllable scope of influence on the stock technology stack, and then consider implementing the micro-front-end scheme on the ground.

Therefore, under this basic element and guidelines, in order to implement this new technology, we must fully understand the technical scheme and proportion of the current transformation site, as well as the capability differences provided by the current mature micro front-end framework. Do not copy mechanically.

Second background

The projects maintained by my team are all PC Workstation, and these workstations will have problems in different countries, different time zones, different partners, and so on.

If you need to develop a new page requirement, it is likely that the developers involved come from different teams. at this time, while completing the existing requirements, we also need to ensure that the style and design specifications of multiple management pages are unified. It is very difficult to unify the components and the interaction behavior.

When the business needs to migrate to another workbench, although the logic needs to be consistent, the navigation bar, topics, and so on are different.

The current stock solutions are to use Java to directly Template render HTML, after the previous generations of iterations, there have been several different technology stack output pages in different systems.

Although they are all implemented by React, their predecessors are very able to deal with them, and none of them are developed in the form of regular React components.

For example:

Most of the pages are generated by consumer components through a JSON configuration.

Some of the pages are generated through the JSON configuration consumer component defined by another team, which is completely different from the JSON above.

Some of the pages are loaded through the JS Bundle provided by a set of page publishing platform.

In the face of such a technical background, in addition to smiling and shouting MMP, tearfully saying words that you do not understand (existence is reasonable, it is not difficult for you to do? ), and have to come up with such a landing plan in an approachable manner.

Three schemes & flow chart

First of all, you need to clearly analyze the common features that all the pages of the site need to load:

The above are some common features after simplification, which are briefly introduced here:

Layout Loader: navigation for loading different workbench

DADA Loader: page used to load the JSON configuration

Source Code Loader: used to load JS Bundle

Micro Loader: used to handle micro-front end loading

Log Report: used for log burying point

Time Zone: used to switch time zon

I18n: for switching multiple languages

Guider: for unified control and user guidance

In addition, there may be the following page extensibility:

Safety monitoring and control

Flow control

Pop-up window control

questionnaire investigation

Question answering robot

Roughly unified classification later, the general loading process of the page should be like this:

4 detailed rules for realization

Based on the above loading idea, the first thing we need to do is to close the page loading path, and we need to ensure that the loading entry of all pages is under a unified Loader, and then we can systematically deal with the loading life cycle of all pages.

At the same time of convergence, we also need to keep open, plug-in and open to the core loading path, support different expansion capabilities at any time, and access the rendering technology stack.

1 plug-in mechanism

So, on the main path, it is processed by Loader loading the configuration, which provides the context in the main path and then leaves it to the plug-in for consumption, as shown in the figure:

For example, a child of a separate JS Bundle type should be used to say:

SchemaResolver.render ({micro: true, host: "dev.address", hfType: "layout1", externals: ["/ / {HOST} / theme1/index.css"], / / host is cdn prefix, the resource maybe in different env & country resource: {js: "/ index.js", css: "/ index.css",},} {container: document.querySelector ("# root")})

Through the introduction of the above Plugin, different configurations can be enabled and consumed.

Layout Plugin is introduced here, and the plug-in consumes the hfType field and then loads the Container for the Layout resource to the next step.

According to the configuration, the micro-front end is enabled on the current page, so Micro Loader will consume the provided Container, then set up a sandbox (here based on qiankun), and then provide Container.

Finally, it is handed over to SourceCode Plugin for Bundle loading, running and rendering. If this is another rendering protocol or technology stack, you can have different plug-ins consume Container according to different configurations.

In this process, the plug-ins of each link are independent and pluggable.

For example:

If the Layout Plugin is not loaded, the hfType field will not be consumed, and the Layout plug-in logic will not be injected into the getContainer method, then the outermost Container will be directly rendered, and there will be no menu-related exposure.

If the Micro Plugin is not loaded, there will be no logical injection of the micro-front end, and the sandbox will not be established, then the page rendering process will continue to run in the normal mode.

2 secure migration

For the project that my team is responsible for, there must be no one-size-fits-all solution, so for the existing stock page, you need to fully analyze the current stock technology stack:

For the above stock pages, the page-level control online deployment needs to be carried out in batches from left to right, and even some project modifications need to be made for some pages on the left before they can be deployed and connected online.

This kind of migration testing needs to deal with a set of automated e2e testing process, and sort out the micro-front-end registry through batch migration.

With these two process guarantees and scope control, the online content of the current program is completely controllable, and most of the remaining tasks are more repetitive manual work, and coverage can also be quantified.

3 shape of micro-front end

If you migrate according to the above scheme, the expected micro-front-end shape will be:

Every page that opens the micro-front end can become the main application.

The micro-front-end is optional for the plug-in, and can be turned off at any time if the business exception caused by the micro-front-end.

The local refresh form can be realized by switching between the page routes of the same micro-front-end, while the pages that jump to the non-micro-front-end registry will jump directly. With the increase of micro-front-end page coverage, the coverage of local refresh will gradually increase.

Through different extensions, the stock pages of different technology stack types can be loaded and converted into corresponding sub-applications.

The registration and call paths in SchemaResolver are as follows:

Looking at the essence through technology, the outstanding thinking represented by the micro front end is the key to solving specific problems, and only by solving specific business problems can this technology have value transformation.

Do not do micro-front end for micro-front end, do not do Mini Program for Mini Program.

Currently, through SchemaResolver, you can provide different open capabilities for different roles:

For platform administrators, provide plug-in capabilities to open global scalability.

For page developers, provide standardized access solution path, provide a variety of technology stack access capabilities, and no perception to provide micro-front-end, multilingual, embedded points, menus, theme loading and other capabilities. Decoupling the common capabilities of different systems, at the same time, this approach allows page developers to quickly migrate specific business logic to other platforms.

For third-party access, do not need to understand the system menu, theme access mode, provide a unified access caliber, through the micro-front-end isolation technology stack, ion isolation application style. Finally, through the unified page system control, it is easy to check in the corresponding platform, and the page situation of the site can be seen globally at the same time.

On how to easily access the micro-front-end to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.