Explore three kinds of technical schemes of micro front end

What is a micro front end

First of all, what are microservices

Microservices are a variant of service-oriented architecture (SOA) that designs applications as a series of loosely coupled fine-grained services organized by lightweight communication protocols, specifically building applications as a set of small services. Each of these services can be deployed and extended independently, with solid modular boundaries that allow different services to be written in different programming languages and managed by different teams.

Taking microservices as an analogy, the micro-front end can also adopt this architecture idea. A front-end application can be disassembled into multiple micro-applications, which can be independently developed, tested and deployed. What is presented to users is a product, and the internal principle is actually integration or cohesion of multiple applications.

Micro front end core idea

Each team can develop according to its own technology stack, and each team does not interfere with each other, saving the cost of technical communication between teams
Even if teams use the same technology stack, they should not share variables and state with each other
Use prefixes to distinguish between items that conflict with CSS, Browser APIS, Web events, Cookies, or Local Storage
Instead of building a global PubSub system, use browser events to communicate. If you really need to build a cross-team API, keep it simple
Even if the JavaScript fails or is not executed, the functionality of the Web application should still work. General rendering and progressive enhancement can be used to improve user perception

What are the benefits of a micro front end

Flexibility: Technology stack independent, each microapplication can be a different technology stack
Incremental: Incremental upgrades to facilitate project expansion and refactoring
Independence: State is isolated between each microapplication, and run time state is not shared
Agility: independent development, independent deployment, deployment after the main framework automatically complete synchronization update

Three realization schemes of micro front end

iframe
multi-page
qiankun

A, iframe

 <iframe width="100%" height="200" src="https://www.google.com.hk/webhp?hl=zh-CN&sourceid=cnhp&gws_rd=ssl"></iframe>
Copy the code

Directly insert the url of the business page to be rendered using iframe. The SRC path can be the current project or another project. This works reasonably well on PC, but not well on mobile. The advantage of iframe is that it is easy to use and there is no learning cost. The disadvantages of IFrame are also obvious, such as SEO is not friendly, adaptive space has limitations, and multiple requests may cause performance problems.

Second, the multi – page

Taking vue-CLI as an example, to build the application in multi-Page mode, each page should have a corresponding JavaScript entry file. We treat each loosely coupled project as a sub-project, i.e. create a new page. And add a corresponding entry file page.main.js, in the vue.config.js file do the following configuration:

Pages: {// configure multiple pages entry index: {// enter one entry: 'SRC /main.js', template: 'public/index.html'}, demo: {// enter two entries: 'src/demo/demo.main.js', template: 'public/demo.html' } }Copy the code

As shown in the code above, the vue project is configured with two page, index and demo, corresponding to two main.js entry files, of course, there are also two corresponding HTML files in public, as shown in the figure:

usemulti-pageThe way to achieve a micro front end is the idea that will be avueProjects are divided into several different subprojects, each applied as a single page
There is no learning cost, you just create different ones according to the actual situation, rightpage
In real development, the overall architectural aspects are fixed, and teams differpageUnder the independent development of different modules, do not affect each other, the only intersection between teams may be in the modificationvue.config.jsFile configuration generated

The demo address

There are two pages, home and Demo. Jump from home to Demo, or jump from Demo to home. Depending on your scenario, you can use window.location.href or window.location.replace to jump between child applications.

Third, qiankun

Qiankun is a micro-front-end framework developed by Ant Financial’s technical team based on single-SPA, which is relatively convenient on the whole and provides base applications. As long as each micro-application is registered on the base, the micro-front-end architecture can be realized. The operation of the base application does not affect the micro-applications and can be independently developed and deployed.

The main application

import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'reactApp', entry: '//localhost:3000', container: '#container', activeRule: '/app-react', }, { name: 'vueApp', entry: '//localhost:8080', container: '#container', activeRule: '/app-vue', }, { name: 'angularApp', entry: '//localhost:4200', container: '#container', activeRule: '/app-angular', }, ]); // Start qiankun start();Copy the code

Micro application

The microapplication does not need to install any additional dependencies to access the Qiankun main application, but does two things in the microapplication:

1. Export the appropriate lifecycle hooks

Microapplications need to export the bootstrap, mount, and unmount lifecycle hooks in their own entry js (such as main.js) (usually the entry JS of your webpack configuration) for the main application to call when appropriate

/** * Bootstrap will only be called once during the micro-application initialization. The next time the micro-application re-enters, the mount hook will be called directly. Bootstrap will not be triggered again. * This is usually where we can initialize global variables, such as application-level caches that will not be destroyed during the unmount phase. */ export async function bootstrap() { console.log('react app bootstraped'); } /** * the application calls the mount method every time it enters, */ export async function mount(props) {reactdom.render (<App />, props. Container? props.container.querySelector('#root') : document.getElementById('root')); } /** * apply the method that will be called each time you cut/unload, Usually we will unload the application of micro application examples here * / export async function unmount to (props) {ReactDOM. UnmountComponentAtNode (props. The container? props.container.querySelector('#root') : document.getElementById('root'), ); } /** * Optional lifecycle hooks, */ export async function update(props) {console.log('update props', props); }Copy the code

2. Configure the micro-application packaging tool

const packageName = require('./package.json').name;


module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
};
Copy the code