What is a micro front end

In plain English , Micro front end can deploy different parts of a large application independently , The parts are independent of each other , The ability to deploy independently allows them to build isolated or loosely coupled services . That is, the single page front-end application is transformed from a single single single application into a multi small front-end application .

The core design concept of micro front end

• Technology stack independent The main framework does not limit access to the application technology stack , Micro applications have full autonomy
• Independent development 、 Independent deployment The micro application warehouse is independent , The front and rear end can be developed independently , After the deployment, the main framework automatically completes the synchronization update
• Incremental upgrade In the face of all kinds of complex scenes , It is usually difficult for us to upgrade or refactor an existing system , And micro front end is a very good means and strategy to implement gradual reconfiguration
• When running independently State isolation between each micro application , Runtime state not shared

The core goal of the micro front end is to split the giant application into several independent sub applications

qiankun It's based on single-spa Micro front end implementation library of

qiankun Quick start

qiankun Official website https://qiankun.umijs.org/zh/ Specific code examples github There are some qiankun Example code for https://github.com/zhjing1019/QianKunDemo

Main application

The main application is not limited to technology stack , Just provide a container DOM, Then register the micro app and start that will do .

yarn add qiankun # perhaps npm i qiankun -S

import { registerMicroApps, start } from 'qiankun'; /** * Register the micro application in the main application */ registerMicroApps([ { name: 'vue sub-app1', entry: '//localhost:7100/sub.html', container: '#yourContainer', activeRule: '/yourActiveRule', }, { name: 'vue sub-app2', entry: '//localhost:7101', container: '#yourContainer', activeRule: '/yourActiveRule', }, ], { beforeLoad: [ app => { console.log('before load', app); }, ], beforeMount: [ app => { console.log('before mount', app); }, ], afterMount: [ app => { console.log('after mount', app); }, ], afterUnmount: [ app => { console.log('after unload', app); app.render({appContent: '', loading: false}); }, ], } ); start();

Sign up for micro apps

When the micro application information is registered , Once the browser url change , Will automatically trigger qiankun The matching logic of , all activeRule The micro application on the rule matching will be inserted into the specified container in , At the same time, call the life cycle hook exposed by micro application in turn Micro applications need to be in their own portal js ( It's usually what you configure webpack Of entry js) export bootstrap、mount、unmount Three life cycle hooks , For the main application to call at the right time . Micro applications can be accessed without additional installation of any other dependencies qiankun Main application .

/** * bootstrap It will only be called once when the micro application is initialized , The next time the micro application re enters, it will directly call mount hook , No more triggers bootstrap. * Usually we can do some initialization of global variables here , For example, not in unmount Phase is destroyed by the application level cache and so on . */ export async function bootstrap() { console.log('react app bootstraped'); } /** * Every time the application enters, it calls mount Method , Usually we trigger the applied rendering method here */ export async function mount(props) { ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root')); } /** * Apply every time Cut out / uninstall Method to be called , Usually here we will unload the application instance of micro application */ export async function unmount(props) { ReactDOM.unmountComponentAtNode( props.container ? props.container.querySelector('#root') : document.getElementById('root'), ); } /** * Optional lifecycle hooks , Use only loadMicroApp It will take effect when the micro application is loaded in this mode */ export async function update(props) { console.log('update props', props); }

The main application communicates with the sub application project

initGloabalState(state) Define the global state , And return the communication method , The official suggestion is to use it in the main application , Micro application through props Get the communication method . MicroAppStateActions onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void, Monitor the global state in the current application , There is a change trigger callback,fireImmediately = true Immediately triggered callback setGlobalState: (state: Record) => boolean, Set global state by one level property , In micro application, you can only modify the existing first level attributes offGlobalStateChange: () => boolean, Remove the status monitor of the current application , Microapplication umount Call by default

Main application ：

import { initGlobalState, MicroAppStateActions } from 'qiankun'; // initialization state const actions: MicroAppStateActions = initGlobalState(state); actions.onGlobalStateChange((state, prev) => { // state: The changed state ; prev The state before the change console.log(state, prev); }); actions.setGlobalState(state); actions.offGlobalStateChange();

Subapplication

// From life cycle mount Get the communication method in , Usage and master Agreement export function mount(props) { props.onGlobalStateChange((state, prev) => { // state: The changed state ; prev The state before the change console.log(state, prev); }); props.setGlobalState(state); }

js Variable isolation

Every subapplication has its own life cycle , At the same time , Only one instance of the child application will take effect .js Sandbox encased in qiankun In the life cycle of . When a child application is destroyed , Its js The sandbox is destroyed . The only deficiency is ,window The object of , Unable to isolate , It's better not to bind prototypes .

css Pollution

1、scoped（ Temporary solutions ： The style of the main application uses special class perhaps scoped） 2、 The main application can be set by prefixCls To avoid conflict in a different way 3、 To configure webpack modify less Variable

{ loader: 'less-loader', + options: { + modifyVars: { + '@ant-prefix': 'yourPrefix', + }, + javascriptEnabled: true, + }, }

qiankun Detailed analysis of the source code https://www.jianshu.com/p/db08174fa4fc?utm_campaign=shakespeare