Micro-front-end thinking and summary

The micro front end is a very hot concept in the front end field in the past year, and many related technical products have been derived in the group. This article is the koala operation group in the recent survey of micro front-end some attempts and thinking

background

Project: Operation platform improvement campaign – development of large inventory promotion system

Business: The big promotion system through the big promotion process online, and inventory, construction, delivery, promotion and other systems through, to achieve the big promotion of goods, price threshold constraints and the big promotion of goods, so as to enhance the big promotion of a system.

Our appeal is to make the big promotion system into a big promotion activity operation portal site, provide one-stop big promotion operation solution, business will get through a number of systems at the same level. On this basis, we investigate some technical solutions of micro front end.

Introduction to the micro front End

Micro-frontends.org is a kind of technical means and method strategy for multiple teams to jointly build modern Web applications by independently releasing functions

Micro front-end engineering value

Independent development and deployment;
Frame independent;
Reuse across business domains;
Convenient function expansion and upgrade;
Facilitate multi-person collaborative development;

If there is only engineering value to the micro front end, it is not worth the fanfare

Micro front-end business value

Business atomization output;
Business orchestration and integration;

Application scenarios

Fragmentation of boulder applications – POP Partner system
Business orchestration integration – Build & promote the system

The advantages of the micro front end can effectively make up for some pain points encountered in the current operation:

Technology: After entering the park, Kaola has a lot of projects under the background of netease technology, especially the code implemented by Angular and VUE framework in the Middle Stage group, and even the old Java + Angular projects without separation of front and back ends. These projects have slow development efficiency, poor development experience and no sense of achievement

Operation: Operation colleagues have no unified deployment entrance for various internal systems, and one operation may need to be completed in multiple different systems, resulting in low operation efficiency

single-spa&qiankun

Single-spa is a relatively mature technical scheme in the market, and the Qiankun framework developed by Ant based on single-SPA

Single-spa:yuque.alibaba-inc.com/kaolafed-op…

import * as singleSpa from 'single-spa'; singleSpa.registerApplication('app-1', () => import ('.. /app1/app1.js'), pathPrefix('/app1')); singleSpa.registerApplication('app-2', () => import ('.. /app2/app2.js'), pathPrefix('/app2')); singleSpa.start(); function pathPrefix(prefix) { return function(location) { return location.pathname.startsWith(`${prefix}`); }}Copy the code

We need to register the corresponding application and specify the activation function for the corresponding application. At the same time, application needs to export the corresponding lifecycle functions in the entry file

export async function bootstrap(props) {... } export async function mount(props) {... } export async function unmount(props) {... }Copy the code

To simplify, single-SPA simply executes the loadFunctin, bootstarp, mount, unmount, unload methods we passed in at the right time and throws some events

The startup of Qiankun is very similar to that of Single-SPA, but with some additional features

import-html-entry
Js sandbox
Richer life cycles
prefetch

Qiankun.umijs.org/zh/guide/ge…

Technical difficulties

1. Apply quarantine

Js sandbox implementation

Proxy the window object and listen for the corresponding GET set method

Create snapshots of the global status before the bootstrap and mount life cycles of the application. Then, when the application is cut or uninstalled, roll back the status to the phase before the bootstrap starts to ensure that the application has no contamination to the global status. When the application is remounted, it returns to the state before the mount, ensuring that the application has the same global context when it is remounted as it did when it was first mounted

Object, function hijacking

SetInterval, setTimeout, addEventListener, removeEventListener, appendChild

Single-instance multi-instance scenario

2. Style isolation

Shadow DOM
CSS Module? BEM
Dynamic Stylesheet

3.html-entry

Gets the HTML page content
Parsing into DOM, Script, style, and entry files
Get the style content to fill in the HTML
Execute script code through the sandbox

Application communication

InitGloabalState, props

Reference: zhuanlan.zhihu.com/p/78362028

zhuanlan.zhihu.com/p/107240132

Promote system transformation plan:

Main application transformation:

A new service was created under the big promotion system project, which was solely used to do the main application project of microservices
Provide unified ceiling service
Because each system maintains a separate login system, the main application exposes the login entry
The fetch method is customized
Relative path replacement in the CSS

Sub-application transformation:

Static files, interface requests support cross-domain EGG-CORS
Import file export life cycle
DLL Output configures library LibraryTarget
Kapp/cas loginSuccessUrl removed
Mounted Adds the login component
The interface requested the PublicPath configuration. Procedure
Static file __webpack_public

path_

configuration
Href jump replacement, child applications hop to each other
Independent routing rules
Hide the sidebar and top sidebar
Set the publicPath of the file upload component
Regular nej transformation

www.yuque.com/docs/share/…

Group of other micro front-end solutions

Ali cloud cloud console ConsoleOs www.atatech.org/articles/15…

Rookie the retrofit scheme of micro front-end qiankun www.atatech.org/articles/16…

Flying pigs run the workbench qiankun www.atatech.org/articles/16…

Tao is a small 2 workbench icestark www.atatech.org/articles/15…

Pay treasure to middle business qiankun www.atatech.org/articles/14…

Technical pain points: boulder applications, maintainability

When a certain amount of code is reached, the single build time is very long and the development & release efficiency is extremely low
Relying on upgrades in the code base affects the entire application, and the amount of code is so large that regression costs are extremely high
Become a very bloated monolith application, completely lose flexibility, both multi-person collaboration and business access costs will greatly increase

Business scenario: Application splitting and choreography

The client must be “a system” of mind, from domain name to experience
It can be divided into multiple sub-applications according to their functions, and each sub-application is independently developed and deployed
The child app should have the same development experience as the traditional single-page app, without too much learning cost to the developer
All sub-applications can be managed in a unified manner and cannot be flooded without limit

Microfront-end ecosystems?

microx microx.aliyun-inc.com/doc/hbn26z

Icestark ice.alibaba-inc.com/docs/icesta…

Onex bigfish.antfin-inc.com/doc/onex-ge…

What patterns are best practices?

Subsequent planning

Koala Group internal technology stack unification

Unified configuration and release platform products to provide rapid business integration and series capabilities to help improve business efficiency

Unified convergence for account login

Micro front terminal application access solution

Includes the application component library method and main application access method

Local development tools

Other:

webpack5 module federation

webcomponent

debugging

The login mode is unfriendly

ResizeObserver loop limit exceeded