What is a micro front end

In simple terms, a micro front end is the ability to deploy different parts of a large application independently of each other, and the ability to deploy independently allows them to build isolated or loosely coupled services. The single-page front-end application is transformed from a single single application to multiple small front-end applications aggregated into one application.

Core design concept of micro front end
  • Technology stack independence

The main framework does not limit the technology stack of access applications, and microapplications have complete autonomy

  • Independent development, independent deployment

The micro application warehouse is independent, the front and back end can be developed independently, and the main framework will be updated automatically after the deployment is completed

  • The incremental upgrade

In the face of a variety of complex scenarios, it is usually difficult for us to do a full technical stack upgrade or reconstruction of an existing system, and the micro front end is a very good means and strategy to implement gradual reconstruction

  • Stand-alone runtime

State is isolated from each microapplication and runtime state is not shared

The core goal of the micro front is to disassemble Megalithic into several standalone sub-applications

Qiankun is a micro-front-end implementation library based on single-SPA

Qiankun Quick start

Qiankun websiteqiankun.umijs.org/zh/Github has some sample code for QiankunGithub.com/zhjing1019/…

The main application

The main application has no technology stack, you just need to provide a container DOM, register the microapplication and start it.

Yarn add qiankun # or NPM I qiankun-sCopy the code
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();Copy the code
Registering a micro app

Once the url of the browser changes, the matching logic of Qiankun will be triggered automatically. All the matching microapps in activeRule will be inserted into the specified Container. The micro application needs to export the bootstrap, mount, and unmount lifecycle hooks from its own entry JS (usually the webpack entry JS that you configure) for the main application to call at appropriate times. Microapps don’t need to install any additional dependencies to access the main application of Qiankun.

/** * Bootstrap will only be called once when the microapplication is initialized. The next time the microapplication is re-entered, the mount hook will be called directly. Bootstrap will not be triggered again. * This is usually a place to initialize global variables, such as application-level caches that are not destroyed during the unmount phase. * /
export async function bootstrap() {
  console.log('react app bootstraped');
}

/** * Every time an application enters, it calls the mount method, where we normally trigger the application's render method */
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

/** * the method is called every time the application is switched out/uninstalled. Usually in this case we will uninstall the application instance of the microapplication */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root')); }/** * Optional lifecycle hooks that only take effect when microapps are loaded using loadMicroApp */
export async function update(props) {
  console.log('update props', props);
}
Copy the code

Resources / 28012AE2-6DD0-419F-9199-fbd369b4b041. PNG) [Img – IIBeKUhj-1618121559620]

Main application and sub-application projects communicate

InitGloabalState (State) defines the global state and returns the communication method. You are advised to use this method for the main application. The micro application uses props to obtain the communication method.

  • MicroAppStateActions
    • onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately? : Boolean) => void, if there is a change in the global state of the current application, fireImmediately = true, the callback is triggered immediately
    • SetGlobalState: (state: Record

      ) => Boolean set the global state according to the level 1 property. Microapplications can only modify the existing level 1 property
      ,>
    • OffGlobalStateChange: () => Boolean: remove the current application status listener, which is called by default when the microapplication is umount

Main application:

import { initGlobalState, MicroAppStateActions } from 'qiankun';

// Initialize the state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) = > {
  // state: indicates the state after the change; Prev Indicates the status before the change
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();
Copy the code

The child application

// Obtain the communication method from the life cycle mount, and use the same method as the master
export function mount(props) {
  props.onGlobalStateChange((state, prev) = > {
    // state: indicates the state after the change; Prev Indicates the status before the change
    console.log(state, prev);
  });

  props.setGlobalState(state);
}
Copy the code
Js variable isolation

Each child application has a corresponding life cycle. Only one instance of the child application takes effect at a time. Js sandbox is encapsulated in the life cycle of Qiankun. When a child application is destroyed, its JS sandbox is destroyed as well. The only downside is that the object of window cannot be isolated, and it is best not to bind the prototype.

CSS pollution

1. Scoped (temporary solution: use special classes or scoped for master application styles) 2. Master application can avoid conflicts by setting prefixCls

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

Qiankun specific parsing the source www.jianshu.com/p/db08174fa…

Welcome to my personal tech blog javascript Art