Boulder application, often old technology, logic coupling, poor performance, poor experience, coupled with the early system positioning is not clear, over the years, the burden is becoming heavier and heavier, a small change may be linked to the whole body, people are afraid. Recent development tasks have been to add requirements to Stonehenge, and then to the treasure trove: the fes.js micro front.

What is a micro front end? Why use a micro front end? There are a lot of articles on these issues, but I won’t go into them here. In this article, we will focus on the fes.js micro front end. Js is a front-end application solution, based on Vue 3.0 and routing, covering the compile time, run time life cycle of complete plug-in system, support a variety of functional extension and business requirements; Fes.js extends the micro front end with the @fesjs/ plugin-Qiankun plugin, providing advanced features such as complex scene loading, style isolation, and optimal communication in addition to the regular micro front end features.

The Fes. Js micro front end has recently been used to implement several new requirements for Stonehenge applications. Here is a summary of the process and recommended solutions to play this way.

1. How to plan micro-application and master application

Usually, when we get new requirements and do requirements separation, we will consider whether it can be used and need to use micro front end implementation according to the independence of requirements, reusability, use scenarios and current technology stack of the project. For projects using micro front-end implementations, the general planning is as follows:

Code base and structure

Separate code bases for master and micro applications. In general, the microapplication codebase is recommended to be named after the main application codebase, Micro.

• Simple microapplications: Inside the microapplication code basesrc/pages/Below each file is a separate microapplication.
• Complex/generic microapplications: If a microapplication needs to be referenced by more than one master application, and there are significant differences in data processing between master applications, a better approach is to usesrc/pages/Create different micro-application routing entries according to the main application, and smooth the data differences in the routing entries, and finally unify insrc/components/Generic components handle the same logic.

Technology stack

The core of the micro front end is technology stack independence, where the micro and main applications are developed independently using their own technology stack.

• Micro applications: Fes. Js, Vue3, UI component library optional (Fes UI please wait ~)
• Main application: no need to change the original technology stack for old projects, and fes.js is recommended for new projects.

The microapplication is connected to the main application

• Microapplication access is a protocol access because of technology stack independence. The microapplication does not need to install any additional dependencies. It only needs to export the three lifecycle hooks bootstrap, mount, and unmount from its own portal JS, so that the main application can call them at appropriate times.

The main application loads the micro application

• The main application based on fes. js: Follow @fesjs/ plugin-Qiankun to configure and load the micro application.
• Other technology stack master applications: Install the Qiankun plug-in in the master application and load microapps through the loadMicroApp() API.

Package, deploy, update

• Packaging: Master application and micro application are packaged separately and completely decoupled.
• Deployment: Master application and micro application are deployed independently and do not affect each other, which is more conducive to independent iteration.
• Updates: Main app and micro app are updated independently. For updates that involve only microapplications, synchronous updates are automatically completed by the master application (all that reference it) after the microapplication is deployed.

2. Microapplication related

How to develop a micro application based on fes.js is very clear from the official documentation and the above 🔗 article. Here we focus on the style isolation of micro applications, which we have some shortcomings in our internal projects, and also discuss best practices. Here is a complete summary.

Best practices for microapplication style isolation

1. qiankun Shadow DOM:

Qiankun wraps a shadow DOM node around each micro-application container to ensure that micro-application styles don’t affect the global environment. In most cases, the Shadow DOM requires the main application to do some adaptation before it can run properly in the Shadow DOM. The points that need to be adapted are related to the project, which is very unknown and costs a lot!

2. qiankun experimentalStyleIsolation: true

When set to true, experimentalStyleIsolation compiled to the outermost layers of the micro application container to add a special selector, and add the special selector to the all style rules, to define the application style. Cannot resolve style contamination in the case of master and microapplication having the same selector.

3. BEM

A more effective solution is to avoid conflicts by using conventions such as uniform microapplication prefixes. Strong reliance on conventions.

4. Scoped CSS

The idea behind scoped is to generate a data attribute selector in the form of data-v-[hash] as a unique identifier, and to privatize styles by adding a “data attribute selector “for the current element at the end of each compiled CSS selector. This local style avoids style conflicts to a great extent, but it doesn’t solve solution 2.

5. CSS Module

The CSS Module generates a unique identifier based on the file name, class name, and hash, and then simply replaces the original class name, which is more thorough than scoped. As long as you don’t change the style directly through the tag selector, you can avoid conflicts completely. The current CSS module is a very mature approach, which can be achieved by adding some CSS preprocessor to the build tool. If the application is based on fes.js, you don’t need to worry about any additional configuration. You can just use it in the code, and everything else will be done for you

3. Main application related

The main application related to how to load, how to communicate two aspects.

How does the master app load microapps?

Load microapplications in the main application, encapsulate a microCommon component in the main application to handle the loading, communication, and unmount logic of microapplications, and then introduce microCommon into the main application as needed. Take a vuE2 based main application as an example, through the above [main application loading micro application] type 2 access micro application.

1. Implement the Microcommon. vue component

<template>
    <div></div>
</template>
Copy the code

import { loadMicroApp } from 'qiankun';
export default {
    props: {
        microName: String.microContainer: String.microEntry: String.microPropsUrl: String
    },
    data() {
        return {
            microApp: null
        };
    },
    mounted() {
        this.microApp = loadMicroApp({
            name: this.microName,
            container: ` #The ${this.microContainer}`.entry: `The ${this.microEntry}`.props: {
                url: this.microPropsUrl
            }
        });
    },
    async beforeDestroy() {
        if (this.microApp) {
            const status = this.microApp.getStatus();
            if (status === 'MOUNTED') await this.microApp.unmount();
        }
        return Promise.resolve(); }};Copy the code

2. The main application references microCommon components:

<template>
    <div id="materialManage_materialEditing">
        <micro-common
            :microName="'materialManageEditing'"
            :microContainer="'materialManage_materialEditing'"
            :microEntry="'/s/web-mas-micro/'"
            :microPropsUrl="'/materialManage/materialEditing'"
        ></micro-common>
    </div>
</template>
Copy the code

import MicroCommon from '@/components/microCommon';
export default {
    components: {
        MicroCommon
    }
};
Copy the code

How does the master app communicate with the micro app?

1. Based on props communication

The Qiankuan loadMicroApp API has a detailed example of props passing, combined with the initGlobalState API for updating and managing the passing data. In addition to parameters, methods can also be used by passing props to a microapplication.

2. Fes.js Best practices: based on the useModel newsletter

Based on this communication method, the child application uses the same method to obtain props. The child application automatically generates a model with the global name qiankunStateFromMain. The child application can obtain props from any component. The main application uses different methods for delivering props:

• The main application based on fes.js: Follow the instructions in the @fesjs/ plugin-Qiankun documentation to differentiate between different micro application introduction methods.
• Main application of other technology stacks: props passed via loadMicroApp API.