Five-minute technical talk | A brief talk on micro front-ends

Part 01    What are micro frontends  

Micro frontends are a technical means and method strategy for multiple teams to jointly build modern web applications by independently releasing functions.

Micro frontends draw on the architectural concept of microservices, splitting a large frontend application into multiple independent and flexible small applications. Each application can be independently developed, independently run, and independently deployed, and then these small applications are combined into a complete application. Micro frontends can not only integrate multiple projects into one, but also reduce the coupling between projects and improve project scalability. Compared with a whole frontend warehouse, the frontend warehouse under the micro frontend architecture tends to be smaller and more flexible. The architecture of micro frontends is as follows:

Part 02    characteristic  

- Technology stack agnostic

The main framework does not restrict the technology stack of the connected application, and the sub-application can choose the technology stack independently.

- Independent development/deployment

The warehouses of each team are independent and deployed separately without relying on each other.

- Incremental upgrade

When an application becomes large, technical upgrades or reconstructions are quite troublesome, but micro-applications have the characteristics of gradual upgrades.

- Standalone runtime

Micro-applications do not depend on each other during runtime and have independent state management.

- Improve efficiency

The larger the application, the more difficult it is to maintain and the lower the collaboration efficiency. Micro applications can be easily split to improve efficiency.

Part 03    Currently available micro frontend solutions  

There are currently several types of micro front-end solutions:

• Completely isolated solution based on iframe

As a front-end developer, we are already very familiar with iframe, which can run another application independently in one application. It has significant advantages:

1. Very simple, no modification required;

2. Perfect isolation, JS and CSS are independent operating environments;

3. Unrestricted use, multiple iframes can be placed on the page to combine services.

Of course, the disadvantages are also very prominent:

1. The routing status cannot be maintained and is lost after refreshing;

2. Complete isolation makes interaction with sub-applications extremely difficult, and only the postMessage method can be used;

3. Pop-ups in iframe cannot break through itself;

4. The entire application loads all resources, and the loading is too slow;

These significant shortcomings have also given rise to other solutions.

• Based on single-spa routing hijacking solution

Single-spa is a mainstream solution recognized by the community, and secondary development can be done based on it.

Switching between sub-applications can be done by hijacking the routing, but the access method needs to integrate its own routing, which has certain limitations.

• Aliqiankun

Qiankun has encapsulated single-spa. It mainly solves some pain points and shortcomings of single-spa. It uses the import-html-entry package to parse HTML to obtain the resource path, and then parses and loads the resource.

Qiankun can be used in any js framework, and micro-application access is as simple as embedding an iframe system. [email protected] will jump out of the route-based micro-frontend scenario.

- advantage

1. Developed and maintained by the Alibaba team, with many documents.

2. Based on the single-spa package, it provides a more out-of-the-box API.

3. HTML Entry access method allows you to access micro applications as easily as using iframe.

4. Style isolation ensures that the styles of micro-applications do not interfere with each other.

5.JS sandbox to ensure that global variables/events do not conflict between micro-applications.

6. Resource preloading: preload unopened micro-application resources during the browser's idle time to speed up the opening of micro-applications.

7. Umi plug-in, @umijs/plugin-qiankun is provided for umi application to switch to micro front-end architecture system with one click.

8. Compatible with IE11.

- shortcoming

1. There are few online deployment documents.

2. Qiankun can only solve the problem of mutual contamination between sub-projects, but cannot solve the problem of sub-projects' styles contaminating the main project's style.

• JD micro-app solution

JD micro-app did not follow the idea of ​​single-spa, but borrowed the idea of ​​WebComponent. Through CustomElement combined with customized ShadowDom, the micro front-end was encapsulated into a webComponents component, thereby realizing componentized rendering of the micro front-end.

Part 04, Micro front-end practice    

Take qiankun as an example to build a micro frontend.

👉 Main application (vue)

1. Install Qiankun

2. Modify main.js

3. Router page configuration loading micro application

Modify the main application router.js

Add to About.vue file

4. If you use qiankun in the vue-admin template, please note that: <div id="container"></div> cannot be written in the page, but can only be written in Appmain.vue, and the route needs to be configured for redirection.

Decide whether to change the route.

AppMain.vue, needs to determine which micro-application is displayed and change its id display.

Micro Application (Vue)

1. Add public-path.js to the src directory:

2. Modify main.js.

3. Package configuration modification (vue.config.js):