Micro frontends you must know in 2022

1. Why do you need a micro frontend?


We explain the micro front-end through 3W (what, why, how)
What? What is a micro frontend?

Micro frontend is to split different functions into multiple sub-applications according to different dimensions. These sub-applications are loaded by the main application.
The core of the micro front end lies in disassembly, and after disassembly, it is closed!
Why? Why use him?

How can different teams develop the same application technology stack differently?
I hope that each team can develop independently. How to break the independent deployment?
How to break the old application code in the project?

Can we divide an application into several sub-applications and package the sub-applications into libs one by one? Load different sub-applications when the path is switched. In this way, each sub-application is independent, and the technology stack does not need to be limited! So as to solve the problem of front-end collaborative development
How? How to land the micro front end?

In 2018, Single-SPA was born. Single-spa is a JavaScript front-end solution for front-end microservices (it does not handle style isolation, js execution isolation), which implements route hijacking and application loading
In 2019, qiankun is based on Single-SPA, providing a more out-of-the-box API (single-spa + sandbox + import-html-entry), which is done, technology stack independent, and easy to access (as simple as iframe)

Summary: Sub-applications can be built independently, loaded dynamically at runtime, the main and sub-applications are completely decoupled, and the technology stack is irrelevant, relying on protocol access (sub-applications must export bootstrap, mount, and unmount methods)

Here's the answer to the question you're sure to ask:
Isn't this an iframe?

If iframe is used, it will be embarrassing for the user to refresh the page when the sub-app in the iframe switches routes.

Application Communication:

Data transfer is based on URL, but the ability to transfer messages is weak
Communication based on CustomEvent
Communication between master and child applications based on props
Communication using global variables, Redux

public dependencies:

CDN - externals
webpack federated modules

2.SingleSpa combat


1. Build a sub-app
vue create spa-vue
npm install single-spa-vue

import singleSpaVue from 'single-spa-vue';
const appOptions = {
el: '#vue',
router,
render: h => h(App)
}
// Mount the app normally in a non-sub-app
if(!window.singleSpaNavigate){
delete appOptions.el;
new Vue(appOptions).$mount('#app');
}
const vueLifeCycle = singleSpaVue({
vue,
appOptions
});
// Sub-applications must export the following lifecycle bootstrap, mount, unmount
export const bootstrap = vueLifeCycle.bootstrap;
export const mount = vueLifeCycle.mount;
export const unmount = vueLifeCycle.unmount;
export default vueLifeCycle;

const router = new VueRouter({
mode: 'history',
base: '/vue',
routes
})


Configure the sub-route base path

2. Configuration library packaging
module.exports = {
configureWebpack: {
output: {
library: 'singleVue',
libraryTarget: 'umd'
},
devServer:{
port:10000
}
}
}


Package submodules into class libraries

3. Main application construction



Mount the sub-app to the id="vue" tag

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
const loadScript = async(url)=> {
await new Promise((resolve,reject)=>{
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script)
});
}
import { registerApplication, start } from 'single-spa';
registerApplication(
'singleVue',
async()=>{
await loadScript('http://localhost:10000/js/chunk-vendors.js');
await loadScript('http://localhost:10000/js/app.js');
return window.singleVue
},
location => location.pathname.startsWith('/vue')
)
start();
new Vue({
router,
render: h => h(App)
}).$mount('#app')

4. Dynamically set the publicPath of the sub-application
if(window.singleSpaNavigate){
__webpack_public_path__ = 'http://localhost:10000

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00