Visible micro-front-end practice in vivo commodity middle-end

1. Background

In the field of e-commerce, commodities are an important part, and the corresponding commodity management system is responsible for functions such as new creation, editing, and copying of commodities. With the maturity and stability of the commodity management system and the expansion needs of the business, the birth of the commodity middle platform has been catalyzed. It can reuse existing commodity functions in many businesses (intra-company business, out-of-company business, etc.) with maximum efficiency. Rather than being limited to business use by the current team.

When designing the front-end system of the commodity middle platform, we used micro-front-end and visualization technology, which can achieve the following effects:

• Visualization technology allows the operation and other relevant personnel of each business party to intuitively see the display effect of their configured data on the page;
• The micro-frontend can help the commodity middle-end to adapt to the projects of various business parties faster and better.

So far, the background of this article has been introduced, and the following will explain how to do micro-front-end and visualization in the front-end system of commodity middle-end.

2. Visualization Technology

The current page of the product center is as follows:

The content on the left side of the figure is commodity visualization, and its core capabilities are as follows:

• All the changes on the right side of the picture can be updated and displayed in real time on the left side, such as the main picture, sku combination, price, graphic details, product parameters and other functions.
• The visual area on the left side of the figure is a standard h5 page, which can be regarded as a sub-page, which is completely isolated from the outer parent page on the ui, and shared in data at the same time.

Below I will give a complete description of the principles of visualization technology, please continue to read.

Third, the principle of visualization technology

The overall technical schematic diagram of visualization is as follows:

The following information can be obtained from the above figure:

• The child window is displayed with an iframe;
• The child window uses vuex for state management;
• The child window and the parent window complete the data communication by sharing the state ( vue store ).

Seeing this, you may have the following questions:

The data communication between the iframe and the parent window is done through postMessage, why not use postMessage here?

How to use vuex to complete iframe data communication?

To answer the first question: why not use postMessage

Those who have practiced should have a deep understanding. If postMessage is used, the data communication architecture is basically as shown in the following figure:

Combining the above figure, it can be analyzed that postMessage has the following disadvantages:

• The parent window contains a lot of logic: the parent window needs to process the vuex data, and then transmit it through postMessage;
• The data communication method is not pure: vuex and postMessage are combined and converted to each other, making data communication more complex and difficult to control;
• Does not support Vue.set, Vue.delete, etc.;
• postMessage can only sync strings, not fn.

Combining the above shortcomings, in terms of data communication, postMessage is not used, but vuex is used to replace postMessage to complete iframe communication.

Answer the second question: How is iframe data communication accomplished using vuex?

The answer to this question is uni-render. Through it, the parent and child windows share the store while the child window is displayed through the iframe. Then what is this uni-render, you can continue reading, and the specific answer to the second question will be given below.

3.1 uni-render

Uni-render is a technical solution that allows parent and child windows to share vue store without postMessage. It contains the following key elements:

• Treat the iframe as a dom node;
• The parent window renders the components exposed by the child window ( iframe );
• Parent and child windows share vue store;

The technical schematic diagram of uni-render is as follows:

Here, I will give a simple explanation in combination with the visualization area of the commodity middle platform configuration:

• First, we set the vue project as a multi-page application, and the pages are the product preview page and the product management page;
• Second, adjust the vue entry, each page corresponds to an entry;
• Write iframe components and sandbox vue;
• Mount the sandbox vue and store to the global object at the entry of the product management page;
• In the product preview entry, the sandbox vue and store under global.parent are linked to window and global respectively;
• Finally, other content can be written normally according to the vue multi-page writing method.

Through the above 6 steps, the product preview page and the product management page that use iframe as the display container can share the store.

Here, friends may have questions, why use sandbox vue?

This is because of the singleton mechanism of vue, the child window (product management page) is rendered by the parent window (product management page) new Vue, so using use, filter, mixin, global directives, global components, etc. in the child window will override The parent window vue object. So you need to isolate a clean vue like vue, and then use the isolated sandbox vue to render the content of the child window (product preview page). In this way, the vue of the parent and child windows can be achieved without affecting each other.

The following will introduce some specific implementations, such as iframe components, sandbox vue, and entry design. The implementation of the iframe component is very simple, as shown in the following figure:

This is no longer explained.

The implementation of sandbox vue is very clever, as shown in the following figure:

Hang a $$clone function on the Function, so that there will be a $$clone function under vue. By executing Vue.$$clone(), various properties of vue are mounted on SandboxVue. Also return SandboxVue. You can get a clean sandbox vue.

Note: vue here refers to vue2, currently vue3 is not a singleton mechanism, and sandbox vue is not required in vue3. Vue multi-page entry design, as shown below:

Corresponding to the popular explanation of steps 4 and 5 above.

So far, the uni-render technical solution has been explained. As we all know, most h5 and pc data communication solutions cannot bypass postMessage. And we use uni-render to make the data communication between the parent window and the iframe child window no longer require postMessage, and only use vuex in the vue ecosystem for data communication. This brings a lot of benefits, the benefits are as follows:

• Unified data communication scheme;
• The watch, computed, and purer of store data, and the data communication function are more powerful;
• Simplify the code and say goodbye to postMessage forever;
• Support synchronization function, the road ahead is the sea of stars.

3.2 Visual summary

To sum up, the visualization of the commodity middle platform has been introduced. Through the uni-render technical solution, the data communication between the commodity preview page (iframe) and the commodity management page can be completed only through vuex. Make the real-time update of the visualization smoother and the visualization interaction more powerful.

After introducing visualization, I will continue to introduce the practice of commodity middle platform on micro-frontend, please continue to read.

4. Micro front-end in the middle and Taiwan of commodities

Here we design the commodity middle platform into a micro-front-end architecture, so that it can fully adapt to complex external business.

At this point, you may be asking, what is a micro-frontend?

4.1 What is a micro frontend

The concept is as follows : multiple small applications are aggregated into one application for users to use. Each small application can be independently developed, run and deployed independently, regardless of the technology stack. You can think of the main application as a shopping mall, and the sub-application as a merchant , which is easy to understand.

Note : The commodity middle platform is not the main application, it is a sub-application embedded with external services, and does not have external services embedded in itself.

What is the difference between a micro frontend and a normal frontend? The difference is summarized in the following figure:

Combined with the concept of micro-frontend, and then read the above figure, you can feel the advantages and value brought by micro-frontend.

4.2 Why do micro frontends

In general, there are two main purposes:

• Embed the commodity middle platform into each business side project faster and better;
• Prepare for the design of the main application later.

Therefore, we designed the commodity middle-end project into a micro-front-end architecture, which can well solve various problems faced by the front-end middle-end. Knowing the purpose, how do we design micro-frontends?

5. Micro-front-end design of commodity middle and Taiwan

At present, the most mainstream technical solutions in the micro-frontend field are as follows:

• single-spa technical solution;
• iframe technical solution;

Based on these two technical solutions, the industry has produced some mature frameworks, such as qiankun and qingtian (self-developed by vivo). The design architecture is shown in the following diagram:

The following will introduce the technical implementation of the micro-front-end architecture designed by the qiankun framework in the commodity middle platform.

5.1 qiankun scheme design architecture

The core reason why qiankun is used is: in China, the most used micro-front-end framework is qiankun. The overall effect is also good, so our middle office needs to design the qiankun technical architecture to adapt to those qiankun-based businesses.

Before talking about the design architecture, let me introduce the technical principle of qiankun, as shown in the following figure:

As can be seen from the figure, the core of qiankun is to create a micro-application container. After understanding the core of the technology, let's start to introduce the design architecture. The design architecture is shown in the following figure:

As can be seen from the figure, there are mainly 8 pieces of content, and these 8 pieces of content will be introduced in turn.

5.1.1 Code access

Registering microapps within the main app

 {
  name: 'goods',
  entry: initEntry('goods'),
  container: '#root-view',
  render,
  // activeRule 作为区分不同微应用的关键字
  activeRule: genActiveRule('/main/goods'),
  props: msg
}

Micro application entry

Microapp Packaging

5.1.2 Interface cross domain

There are two main ways to solve interface cross-domain:

• Main application forwarding: The host of the interface is the same as that of the main application, and the main application forwards it according to the path keyword cmmdy.
• Micro application configuration: Micro application server configuration allows cross-domain

Here we choose the first method, which is the main application forwarding.

5.1.3 Route adaptation

It should be noted here: the micro-application router needs to add baseUrl, and it should be consistent with the main application keyword activeRule. The following code (shorthand) looks like:

 const KEY = 'product'
router = new VueRouter({
  mode: 'history',
  base: IN_CMS ? `/main/goods/${KEY}` : `/${KEY}`,
  routes
})

The KEY variable is the keyword.

5.1.4 Multi-page setting

The code for the current multi-page setting is shown in the following figure:

Each page is introduced as an independent micro application, and the filename setting is consistent with the activeRule value of the main application.

5.1.5 Data communication

Think about a question, how to communicate between the main application and the micro application? There are two main options for communication:

• initGlobalState: also runtime communication (official scheme);
• window: Mount to window.

The advantages and disadvantages of the initGlobalState scheme are as follows:

Advantages : The api provides the change event of the data, and both parties can monitor the data change.

Disadvantages : When the micro-application is loaded, the timing of obtaining the initial data is too late, and it is not suitable for initializing the micro-application data.

The advantages and disadvantages of the window scheme are as follows:

Advantages : The data can be obtained in the whole cycle of the micro-application code, which is a good way to avoid the problem of obtaining data too late in the official solution.

Disadvantages : You need to handle the monitoring of data changes yourself.

The data communication scheme adopted by the commodity middle station is a combination of the above two schemes, which complement each other and are used.

5.1.6 Environmental distinction

There are two main scenarios:

• Distinguish qiankun and non-qiankun technology stacks: use window.\_\_POWERED\_BY\_QIANKUN\_\_ to judge.
• Distinguish different main applications that also use qiankun: the parameters agreed between the main application and the micro application are passed through the window object or the props object in the life cycle function to judge.

5.1.7 Local joint debugging

Think about a question, how to realize the rapid joint debugging between the main application and the micro application without the local service of the main application? The solution is as follows:

When the main application registers the micro-application, set the entry to be obtained from the localstorage, and manually modify the value of the entry entry in the localstorage to the local address of the micro-service to implement local joint debugging. The core code is as follows:

 const timestamp = new Date().getTime()
const initEntry = (subSys) => {
  const LS_KEY_ENTRY = `__entry__${subSys}`
  const customEntry = localStorage.getItem(LS_KEY_ENTRY)
  if (customEntry) {
    return `${customEntry}`
  }
  if (subSys === 'goods') {
    return `//vshop-commodity.vivo.com.cn/goods/?t=${timestamp}`
  }
  return `${location.origin}/${subSys}/?t=${timestamp}`
}

Through the above code, the entry address can be dynamically adapted in the main application to achieve the purpose of flexible joint debugging. This block can also be made into the form of a configuration center, so that there is no need to manually modify the entry address in localstorage.

5.1.8 Rights Management

This part is strongly related to the business, and it is enough to do the top-level decoupling. This article will not elaborate.

5.1.9 qiankun Design Architecture Summary

At this point, the core content of the qiankun design architecture of the commodity middle platform has been explained. In the process of using qiankun, there are also some problems, but the advantage of using this popular framework is that when you encounter problems, you can consult relevant documents and blogs , you can basically find relevant solutions. Based on qiankun's design architecture, it has shown good results, and it also allows commodity middle-end platforms to be embedded in other business projects with the technical solution of signle-spa.

5.2 Sharing the experience of stepping on the pit

There are many pits encountered in the process. This article selects a few pits to share.

5.2.1 uni-render meets qiankun cross-domain problem

Phenomenon: The project is connected to the main application, the preview page controlled by uni-render is blank, and the console reports a cross-domain error.

Reason: The iframe preview page is the product middle-end domain name, and the sub-application is connected to the main application domain name of the main application, resulting in cross-domain.

Solution: Set document.domain in the header of the html entry file of the main application and sub-application to keep the two domains consistent.

5.2.3 uni-render, qiankun, ueditor "chemical reaction"

Question one:

Phenomenon: The rich text component ueditor in the qiankun sub-application does not function properly.

Reason: qiankun hijacks the ueditor, so some variables of the ueditor cannot be obtained.

Solution: In the main application, use excludeAssetFilter to prevent the static resources of the ueditor from being hijacked by qiankun.

Question two:

Phenomenon: The request url of the ueditor in the sub-application reports an error.

Reason: The request url of the ueditor is not prefixed with the request of the main application.

Solution: In the sub-application environment, add a prefix to the ueditor's request url through ue.getActionUrl.

Question three:

Phenomenon: The ueditor single image upload fails in the sub-application.

Reason: The sub-application sets the domain, and the single-image upload of the ueditor is realized through the iframe, but the iframe does not set the domain, which causes the upload to fail.

Solution: Rewrite ueditor's single image upload, change iframe to xhr upload.

So far, the experience of stepping on the pit has been shared, and there are still some stepping on the pit, which will not be described here. In the process of integrating several technologies, there will always be some unexpected problems. As the saying goes, soldiers will block and water will cover. We can face and solve these problems with the correct mentality.

6. Summary

In summary, we have made an overall elaboration on the visualization and micro-front end of the commodity middle platform, including the following:

• The data communication problem between the iframe of the visual page and the parent page is solved through the uni-render technical solution.
• Through qiankun, the external business of commodity middle platform embedded based on single-spa technology solution was solved.
• uni-render combines qiankun's stepping experience.

When solving a scenario or problem, the implementation details of the technology are not the most important, the most important thing is the Principles that are separated from the technology.

Finally, end with a sentence: Principles are higher than techniques. Principles produce techniques in an instant.

Author: vivo Internet front-end team - Yang Kun