The background,

In the field of e-commerce, commodities are an important part, and the corresponding commodity management system is responsible for the creation, editing, copying and other functions of commodities. With the maturity and stability of the commodity management system and the expansion of business needs, catalyzed the birth of the commodity center. It can reuse existing product functions in many businesses (business within the company, business outside the company, etc.) with maximum efficiency. Not limited to the business use of the current team.

In the design of the front end system of the commodity center, we use the micro front end and visualization technology, which can achieve the following effects:

  • Visualization technology allows the operation of each business side and other relevant personnel to intuitively see the display effect of their configured data on the page;

  • The micro front end can help the commodity medium platform to adapt to the project of each business side more quickly and better.

At this point, the background of this article is introduced, and the following will explain how to do micro front-end and visualization in the commodity mid – platform front-end system.

Second, visualization technology

The current page of the product center is as follows:

The content on the left is product visualization, and its core capabilities are as follows:

  • All 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, commodity parameters and other functions.

  • The visualization area on the left of the figure is a standard H5 page, which can be viewed as a child page that is completely UI isolated from the outer parent page while sharing data.

Below I will make a complete exposition of the principle of visualization technology, please continue to read.

3. Principle of visualization technology

The overall technical schematic diagram of visualization is as follows:

The following information can be obtained from the figure above:

  • The child window is displayed with iframe;

  • Vuex is used for state management of sub-windows.

  • The child window communicates with the parent window by sharing state (Vue Store).

Seeing this, friends may have the following questions:

The data communication between iframe and parent window is done through postMessage. Why not use postMessage here?

How is iframe data communication implemented using VUEX?

Answer the first question: Why not use postMessage

The postMessage data communication architecture is basically as shown in the figure below:

Combined with the above figure, postMessage has the following disadvantages:

  • The parent window has a lot of logic: the parent window needs to process vuEX data and then transmit it via postMessage;

  • Data communication is not pure: VuEX and postMessage are combined to convert each other, making data communication more complicated and difficult to control.

  • Vue. Set and Vue. Delete are not supported.

  • PostMessage can only synchronize strings, not fn.

In summary, postMessage is not used in data communication, but vuex is used to replace postMessage to complete IFrame communication.

Answer the second question: How is it possible to communicate iframe data using VUex?

The answer to that question is uni-render. It allows the parent window to share the store while the child window is displayed via iframe. What is this uni-render? Read on and give specific answers to the second question below.

3.1 uni – render

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

  • Treat iframe as a DOM node;

  • Parent window renders child window (iframe) exposed component;

  • Parent and child Windows share vue Store;

Uni-render’s technical schematic is as follows:

Here, I combine the commodity configuration visualization area to make a popular explanation:

  • First of all, we set the VUE project as a multi-page application. The pages are commodity preview page and commodity management page respectively.

  • Second, adjust the VUE entry, one for each page;

  • Write iframe components and sandbox vue;

  • Mount sandbox vue and Store to the Global object at the entry of the Merchandise Management page.

  • In the product preview entry, hang the sandbox vue and Store under global.parent under window and Global respectively.

  • Finally, the rest of the content can be written in the normal vUE multi-page format.

By following the 6 steps above, you can share the store with the product preview page that uses iframe as the display container and the product management page.

Here, you might wonder, why sandbox Vue?

This is because of the singleton mechanism of VUE, the child window (commodity management page) is rendered by the parent window (commodity management page) New Vue, so using use, filter, mixin, global instructions, global components, etc. in the child window will overwrite the parent window Vue object. So you need to isolate a clean vUE that is identical to the VUE, and then use the isolated sandbox VUE to render the content of the child window (product preview page). In this way the parent and child Windows can be reached without each other.

Specific implementations such as iframe components, sandbox Vue, and entry design are described below. The implementation of the IFrame component is very simple, as shown below:

This is not explained anymore.

The implementation of sandbox Vue is very clever, as shown below:

Vue.$$clone() = vue.$$clone(); Mount the various properties of the vue to SandboxVue. Also return to SandboxVue. You get a clean sandbox vUE.

Note: Vue here refers to vue2. Currently vue3 is not a singleton mechanism and there is no need for sandbox VUE in VUe3. Vue multi-page entry design, as shown below:

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

At this point, the UNI-Render technical scheme is described. It is well known that most h5 and PC data communication schemes do not bypass postMessage. By uni-render, the parent window and iframe child window do not need postMessage for data communication, and only use VUex in vue ecology for data communication. This has brought many benefits, including the following:

  • Unified data communication scheme;

  • Store data is more pure with watch, computed, and more powerful in data communication.

  • Simplify code and say goodbye to postMessage forever;

  • Support synchronization function, the road ahead is the star sea.

3.2 Visual Summary

To sum up, after the visual introduction of product middle stage, we use uni-Render technology solution to enable data communication between iframe and product management page only through VUEX. Make the real-time update of visualization more smooth and visual interaction more powerful.

After the introduction of visualization, I will continue to introduce the practice of the micro front end in the commodity center, please continue to read.

Fourth, the commodity in Taiwan micro front end

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

At this point, you might ask, what’s a micro front end?

4.1 What is a micro front end

The concept is as follows: Multiple small applications are aggregated into one application for users. Each small application can be independently developed, run, and deployed, independent of the technology stack. You can think of the main app as the mall, and the sub-app as the merchant, and that makes sense.

Note: Commodity Platform is not the main application, it is a child application embedded with external business and does not have external business embedding itself.

What’s the difference between a micro front end and a normal front end? The differences are summarized in the following figure:

Combined with the concept of the micro front end, you can feel the advantages and values brought by the micro front end by reading the figure above.

4.2 Why to do a micro front end

As a whole, it has the following two purposes:

  • Embed the products in each business side project more quickly and better;

  • Prepare for the design of the main application later.

Therefore, we design the product in Taiwan project into a micro front-end architecture, it can be a good solution to the front-end in Taiwan facing all kinds of problems. Knowing the purpose, how do we design the microfront end?

5. Design of the micro front end of the product

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

  • Single-spa technical solution;

  • Iframe technical solution;

Based on these two technology solutions, the industry has produced some mature frameworks, such as Qiankun and Qingtian (developed by Vivo). The design architecture is shown in the diagram below:

The technical implementation of the micro front-end architecture designed by QIANkun framework will be introduced below.

5.1 Design architecture of Qiankun Scheme

The core reason for using Qiankun is that it is the most used micro front-end framework in China. The overall effect is also good, so we need to design the technology architecture of Qiankun to adapt to those businesses based on Qiankun.

Before talking about the design architecture, I would like to introduce the technical principle of Qiankun, as shown below:

As you can see, the core of Qiankun is to create microapplication containers. Now that you understand the technical core, let’s move on to the design architecture. The design architecture is shown in the figure below:

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

5.1.1 Code access

Register microapplications within the main application

{
  name: 'goods',
  entry: initEntry('goods'),
  container: '#root-view',
  render,
  // activeRule as a key to distinguish between microapplications
  activeRule: genActiveRule('/main/goods'),
  props: msg
}
Copy the code

Microapplication entry

Microapplication packaging

5.1.2 Cross-domain Interfaces

Cross-domain interfaces can be resolved in the following two ways:

  • Active application forwarding: The host of the interface is the same as that of the active application, and the active application forwards the interface based on the path keyword cmmdy.

  • Microapplication configuration: Microapplication server configuration allows cross-domain

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

5.1.3 Route Adaptation

Note here that the micro-application router needs to add baseUrl and be consistent with the main application keyword activeRule. The following code (shorthand) looks like this:

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

The KEY variable is the keyword.

5.1.4 Multi-page Settings

The current multi-page setup code is shown below:

Each page is introduced as a separate microapplication, and the filename setting is consistent with the activeRule value of the main application.

5.1.5 Data communication

Consider the question, how do master applications communicate with microapplications? For communication, there are two main schemes:

  • InitGlobalState: also run-time 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 data, and both parties can listen to the change of data.

Disadvantages: When the microapplication is loaded, the initial data is obtained too late to be used as the initialization of the microapplication data.

The advantages and disadvantages of window scheme are as follows:

Advantages: The microapplication code can obtain data throughout the whole cycle, which is a good way to avoid the problem of obtaining data too late in the official scheme.

Disadvantages: Need to handle the monitoring of data changes yourself.

The data communication scheme adopted by zhongtai is a combination of the above two schemes, learning from each other and having been used.

5.1.6 Environment Differentiation

There are two main scenarios:

  • Distinguish between the qiankun and non-Qiankun technology stacks: use window.__POWERED_BY_QIANKUN__.

  • Different main applications were also distinguished using Qiankun: the agreed parameters between the main application and micro-application were passed through the Window object or props object in the life cycle function.

5.1.7 Local joint investigation

Consider a question, there is no local service of the main application, how to achieve rapid intermodulation between the main application and micro application? Solutions are as follows:

When the master application registers the micro-application, set entry to be obtained from the localstorage. In the localstorage, manually change the value of entry to the local address of the micro-service to achieve local interworking. 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}` }Copy the code

Through the above code, the entry address can be dynamically adapted in the main application to achieve the purpose of flexible joint tuning. This can also be made into a configuration center so that you don’t have to manually change the entry address in localStorage.

5.1.8 Permission Management

This part belongs to the business strongly related content, just do the top level decoupling, this paper will not elaborate.

5.1.9 Summary of Design architecture

By now, the core content of qiankun’s design architecture has been explained. Some problems have been encountered in the process of using Qiankun. However, the advantage of using this popular framework is that when encountering problems, you can refer to relevant documents and blogs and find relevant solutions. The design architecture based on Qiankun showed good results, and also enabled Commodity Zhongtai to embed signle-SPA technology into other business projects.

5.2 Sharing experience of trampling pits

Encountered in the process of pit more, this article selected a few trample pit experience to share.

5.2.1 Uni-Render encounter Qiankun cross-domain problems

Symptom: The project is connected to the main application, the preview page of uni-Render control is blank, and the console reports a cross-domain error.

Cause: The iframe preview page is the domain name of the product in China, but the sub-application is connected to the domain name of the main application.

Solution: Document. domain is set in the header of the HTML entry file of the master application and the child application to keep the domain consistent.

5.2.3 Uni-Render, Qiankun, UEditor “Chemical Reaction”

Problem a:

Symptom: The function of rich text component UEditor in qiankun sub-application is abnormal.

Qiankun hijacked the UEditor, causing some variables in the UEditor to be unavailable.

Solution: In the main application, use excludeAssetFilter to prevent static uEditor resources from being hijacked by Qiankun.

Problem two:

Symptom: The request URL of the uEditor in the child application is incorrect.

Cause: The uEditor request URL is not prefixed with the main application request.

Solution: Prefix the uEditor request URL with ue.getActionUrl in the child application environment.

Question 3:

Symptom: The uEditor diagram in the sub-application fails to be uploaded.

Cause: The subapplication has set the domain. The uEditor uploads a single image through iframe, but the iframe does not set the domain, so the upload fails.

Solution: Rewrite the uEditor’s single diagram upload and change iframe to XHR upload.

So far, the experience of stepping pits is shared, and there are some stepping pits, which will not be described here. In the process of integrating several technologies together, there will always be some unexpected problems, just as the so-called enemy will block, we use the right mentality to face and solve these problems.

Six, summarized

To sum up, we have made an overall description of the visualization and micro front end of the commodity medium platform, including the following contents:

  • The problem of data communication between iframe and parent page is solved by uni-Render technology.

  • Through Qiankun, it solved the external business of commodity in-platform embedding based on single-SPA technology solution.

  • Uni-render combined with the experience of Stepping pits in Qiankun.

When solving a scenario or problem, it is not the implementation details of the technology that are most important; it is the Principles that separate the technology.

Principles are higher than techniques. Principles produce techniques in an instant.

Author: Yang Kun, Vivo Internet Front End Team