What is a micro front end?
To answer this question, we need to tell it from three aspects: why, how and what
why:
As a company’s business expands, so does the number of systems that handle it, and operators need to move back and forth between them to handle a single business. In order for operations to be able to do everything in one system, the technician must provide a solution.
how:
Iframe has always been a great tool for integrating systems before the concept of “microfront-end” was coined. However, it has some disadvantages. Front-end development must find an alternative solution to solve these problems gracefully.
what:
In order to make up for the deficiency of IFrame solution and make front-end development more convenient to integrate multiple business systems together, micro front-end was proposed and implemented. Currently, the solutions used in the industry are basically based on Ant Financial Qiankun, which has the flavor of a unified world.
Preparation before practice
Concept: Parent application, child application
When using iframe to integrate systems, suppose we have system A. When we want to introduce system B to system A, we only need to provide A URL for system A to reference. Here, we call system A the parent application and system B the child application. Similarly, the concept continues with the microfront end, which is almost as smooth to use as iframe.
Architecture diagram of universe
As shown in the figure, the integration is mainly based on the system implemented by the current mainstream front-end frameworks vue, React and Agular. Jquery application support is relatively weak (mainly because most of them are multi-page applications).
Integration of heaven and earth
For convenience, we directly use the Demo provided by Qiankun, please clone the code library qiankun Demo Github
The projects involved
Father qiankun - base three child application qiankun - react qiankun - vue qiankun - jqCopy the code1. Configure the Parent application of qiankun-Base
1.1 Introduce the universe in main.js, configure the list of subapplications to be introduced, and start the universe
// qiankun-base/src/main.js
// Omit irrelevant code
import {registerMicroApps, start } from 'qiankun';
// Define a list of microapplications to integrate
const apps = [
{
name: 'vueApp'.// The application name
entry: 'http://localhost:10000/'.// The HTML is loaded by default, and the js inside is parsed to execute dynamically (the child application must support cross-domain, internal use is fetch).
container: '#vue'.// The container id to render to
activeRule: '/vue' // Which path to activate
},
{
name: 'reactApp'.entry: 'http://localhost:20000/'.container: '#react'.activeRule: '/react'
},
{
name: 'jqApp'.entry: 'http://localhost:5501/qiankun/qiankun-jq/'.container: '#jq'.activeRule: '/jq'.props: { a: 1 } // The parent application passes parameters to the child application}];// Register the application
registerMicroApps(apps);
// Start the application
start();
// Mount vue properly
new Vue({
router,
render: h= > h(App)
}).$mount('#app')
Copy the code1.2 Reserve DOM nodes in app. vue and wait for child apps to be loaded and inserted
<! -- qiankun-base/src/App.vue -->
<template>
<div>
<el-menu :router="true" mode="horizontal">
<! -- The main application can also put its own route -->
<el-menu-item index="/">Home page</el-menu-item>
<! -- Reference other child applications -->
<el-menu-item index="/vue">Vue applications</el-menu-item>
<el-menu-item index="/react">The react application</el-menu-item>
</el-menu>
<router-view v-show="$route.name"></router-view>
<div id="vue"></div>
<div id="react"></div>
</div>
</template>
Copy the code2. Processed in the three sub-applications to be referenced by the parent application of Qiankun-Base
According to the Qiankun protocol, three reference lifecycle hook functions, bootstrap/mount/unmount, are exported to be executed when the parent application loads its child application. In addition, the parent application will add the POWERED_BY_QIANKUN property on the window to distinguish whether the child application is currently loaded by the parent application or loaded separately. All child applications are configured around hook functions and properties, which are handled in the same way across technology stacks
2.1 Configuring vUE subapplications
// qiankun-vue/src/main.js
// Omit irrelevant code
let instance = null;
function render(props) {
// props component communication
instance = new Vue({
router,
render: h= > h(App)
}).$mount('#app') // This is mounted to its OWN HTML, and the base will take the mounted HTML and insert it
}
if (!window.__POWERED_BY_QIANKUN__) { // Call render manually if it is run independently
render();
}
if(window.__POWERED_BY_QIANKUN__){ // If the qiankun is used, the path will be dynamically injected
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// Export bootstrap/mount/unmount according to the qiankun protocol
export async function bootstrap(props) {};export async function mount(props) {
render(props);
};
export async function unmount(props) { // Destroy the application during uninstallation
instance.$destroy();
};
Copy the code// Configure package vue.config.js
module.exports = {
devServer: {
port: 10000.headers: {'Access-Control-Allow-Origin': The '*' // Allow cross-domain}},configureWebpack: {
output: {
library: 'vueApp'.libraryTarget: 'umd'}}};Copy the code2.2 Configuring the React Sub-application
// qiankun-react/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
function render(){
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>.document.getElementById('root')); }if(!window.__POWERED_BY_QIANKUN__){
render();
}
export async function bootstrap(){}export async function mount() {
render()
}
export async function unmount(){
ReactDOM.unmountComponentAtNode( document.getElementById('root'));
}
Copy the code// Enable config-overrides
module.exports = {
webpack:(config) = >{
config.output.library = 'reactApp';
config.output.libraryTarget = 'umd';
config.output.publicPath = 'http://localhost:20000/';
return config;
},
devServer:(configFunction) = >{
return function (proxy,allowedHost){
const config = configFunction(proxy,allowedHost);
config.headers = {
"Access-Control-Allow-Origin":The '*'
}
return config
}
}
}
Copy the code2.3 Description of webpack config file
Note: There are two major changes to the config file, the same as the Vue and React subapplications
1: “access-Control-allow-origin “:’*’ Effect: Since the child application is loaded by the parent application fetch, cross-domain needs to be allowed
2: the output. LibraryTarget: ‘umd’; What it does: Use UMD to make files packaged by WebPack more compatible when loading
2.4 Configuring the jquery child Application
Note that the general integration stack is based on single-page applications such as Vue/React/Angular, whereas jquery applications are typically multi-page applications. Direct introduction with iframe is appropriate
// qiankun-jq/js/example.js
const render = ($) = >{$('#example').html("Hello, render with jQuery");
return Promise.resolve();
}
(global= > {
global['purehtml'] = {
bootstrap: () = > {
console.log('purehtml bootstrap');
return Promise.resolve();
},
mount: (prop) = > {
console.log('purehtml mount', prop);
return render($);
},
unmount: () = > {
console.log('purehtml unmount');
return Promise.resolve(); }}; }) (window);
if (!window.__POWERED_BY_QIANKUN__) { // Call render manually if it is run independently
render($);
}
Copy the code3. Start
Enter the qiankun-base, Qiankun-Vue and Qiankun-React application respectively, and check it in the parent application
Note that the jquery child application needs to be thrown into the Nginx service if it wants to start
Reference:
Qiankun website
Qiankun