Use an article to let you know how to learn micro-frontend

Foreword:

In today's Internet era, front-end applications are becoming more and more complex, and development and maintenance costs are also increasing. In order to solve this problem, micro front-end technology came into being. Micro front-end is a technology that splits front-end applications into multiple independent sub-applications, and each sub-application can be developed, tested, deployed and upgraded independently . Through micro-frontends, front-end applications can be made more flexible, maintainable, and scalable, and front-end development efficiency and team collaboration efficiency can be improved.

1. Basic concepts and principles of micro front-end

The core idea of ​​micro front-end is to split the front-end application into multiple independent sub-applications. Each sub-application can be developed, tested, deployed and upgraded independently. Each sub-application can use different frameworks, libraries and technology stacks, and can be flexibly combined as needed to form a complete front-end application. Micro front-end technology can be implemented in a variety of ways, including iframe, , Web Components, ES Modulesetc.

2. Implementation method of micro front-end

There are many ways to implement micro frontends, the following are some of the common ones:

1. Based oniframe : iframe-based micro frontend can embed each sub-application into the iframe of the main application to run independently. The advantage of this approach is that it is simple to implement and can avoid conflicts between applications , but there are cross-domain issues and performance issues .

2. Based onWeb Components : Micro frontend based on Web Components can encapsulate each sub-application into a custom element, which is then dynamically loaded and rendered in the main application. The advantage of this approach is that it is flexible in implementation and can achieve component-level reuse , but there are compatibility issues and performance issues .

3. Routing-based : The routing-based micro frontend can treat each sub-application as an independent route, and then load and unload the sub-application through route switching in the main application. The advantage of this method is that it is simple to implement and can achieve page-level reuse , but there are routing conflicts and performance issues .

4. Based on module loader (ES Modules) : A micro-frontend based on module loader can treat each sub-application as an independent module, and then dynamically load and render it through the module loader in the main application. The advantage of this approach is that it is flexible in implementation and can achieve module-level reuse , but there are compatibility issues and performance issues .

5. Implementing micro-frontend based on micro-front-end framework : Implementing micro-front-end based on micro-front-end framework is a relatively mature way. It can provide a variety of functions, including routing, state management, event bus, etc. Commonly used micro front-end frameworks include single-spa, qiankunetc. The advantage of this approach is that it can provide better communication and collaboration mechanisms , but you need to pay attention to the cost of learning and using the framework .

It is necessary to choose the appropriate method to implement the micro front end according to the actual situation. Different methods have different advantages and disadvantages, and the choice needs to be based on specific needs and scenarios.

3. Advantages of micro front-end

1. Split the application and reduce complexity : Micro front-end can split a large front-end application into multiple small sub-applications. Each sub-application can be developed, tested, deployed and run independently. This can reduce application complexity and improve development efficiency and code quality.

2. Technology stack-independent, flexible combination : Micro front-ends can combine applications from different technology stacks to achieve flexible combinations. This allows teams to choose the technology stack that best suits them, improving development efficiency and code quality.

3. Highly maintainable and easy to upgrade : Micro frontend allows each sub-application to run independently, which can reduce the coupling between applications and improve the maintainability and upgradeability of the application.

4. Independent deployment and rapid iteration : Micro frontend allows each sub-application to be deployed independently, which can speed up application iteration and improve user experience and competitiveness.

4. Practical methods of micro front-end

There are many practical methods for micro front-end, including based on self-developed frameworks, based on third-party frameworks, based on open source frameworks, etc. These practical methods are introduced below.

1. Based on self-developed framework : Micro front-end based on self-developed framework can develop micro front-end framework by itself according to the team's needs and technology stack. The advantage of this method is that it is flexible in implementation and can meet the team's customization needs, but it has the problem of high development costs and high maintenance costs.

2. Based on third-party frameworks : Micro front-ends based on third-party frameworks can use existing micro front-end frameworks, such as qiankun, , single-spa, icestarketc. The advantage of this method is that it is simple to implement and can quickly implement micro-frontends, but there are problems with dependence on the framework and learning costs.

3. Based on open source frameworks : Micro frontends based on open source frameworks can use existing open source frameworks, such as react, , vue, angularetc. The advantage of this method is that it is flexible in implementation and can make full use of existing ecological resources, but there are problems with dependence on the framework and learning costs.

5. Use of micro front-end

The use of micro frontends can be divided into the following steps:

1. Define the boundaries of your application : Determine which parts can be developed, tested, deployed, and run independently, and how to divide subapplications.

2. Choose a micro-front-end framework : Choose a micro-front-end framework that is suitable for your application, such as single-spa, , qiankunor 乾坤 .

3. Integrating applications : Integrating sub-applications into a micro front-end framework, which usually requires some configuration and code modifications to ensure that the application can run correctly and work together.

4. Define inter-application communication : Applications need to communicate with each other, such as sharing data or calling functions of other applications. This can be accomplished using technologies such as event buses, state managers, or Web component standards.

5. Run the application : Start the micro front-end framework and run the sub-application within it. You can use npm, Dockeror other tools to deploy and manage applications.

6. Test and maintain applications : Test and maintain applications to ensure their stability, reliability, and scalability. Tools such as automated testing, log analysis, and performance monitoring can be used to assist testing and maintenance work.

6. Things to note when using micro front-end technology

There are some issues that need to be paid attention to when using micro front-end technology, including communication and collaboration between sub-applications , version management of sub-applications , performance and security of sub-applications , etc. You need to have an in-depth understanding and mastery of micro-front-end technology to be able to use micro-front-end technology to develop high-quality front-end applications.

Specifically, when using micro-front-end technology, you need to pay attention to the following issues:

1. 子应用之间的通信和协作: Communication and collaboration between sub-applications require the use of functions provided by micro-front-end frameworks. Interfaces between sub-applications need to be carefully designed and implemented to enable data transfer and interaction.
2. 子应用的版本管理: Versions of sub-applications need to be carefully managed to enable dynamic loading and upgrades. You need to use version control tools to manage the code and configuration files of sub-applications.
3. 子应用的性能和安全: Performance and security issues of sub-applications need to be carefully considered. Performance testing and security testing of sub-applications need to be performed to ensure the performance and security of the sub-applications.

7. Micro front-end example using single-spa framework :

1. Define the boundaries of your application:

Suppose there are two applications, one is Reactapplication and the other is Vueapplication. They can be developed, tested, deployed and run independently.

2. Select the micro front-end framework: select the single-spa framework.

3. Integrated applications:

Install the and plugins in Reactyour application and make some configuration and code modifications. Corresponding operations are also performed in the application .single-spasingle-spa-reactVue

- React application code:

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from './App';

const reactLifecycles = singleSpaReact({
    
    
  React,
  ReactDOM,
  rootComponent: App,
  domElementGetter,
});

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,
];

function domElementGetter() {
    
    
  let el = document.getElementById('react-app');
  if (!el) {
    
    
    el = document.createElement('div');
    el.id = 'react-app';
    document.body.appendChild(el);
  }
  return el;
}

- Vue application code:

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue';

const vueLifecycles = singleSpaVue({
    
    
  Vue,
  appOptions: {
    
    
    render: h => h(App),
  },
});

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [
  vueLifecycles.unmount,
];

4. Define communication between applications:

Let's say a React application needs to call functionality from a Vue application. This can be 事件总线achieved using:

// 在 React 应用程序中
import {
    
     publishEvent } from 'single-spa';
publishEvent('vue-app', 'doSomething', {
    
     data: 'hello' });

// 在 Vue 应用程序中
import {
    
     addEventListener } from 'single-spa';
addEventListener('vue-app', 'doSomething', ({
     
      detail }) => {
    
    
  console.log(detail); // { data: 'hello' }
});

The above examples are for reference only and need to be modified according to the specific conditions of the application in actual use.

8. Example of micro front-end using qiankun framework :

1. Define the boundaries of your application:

Suppose there are two applications, one is a React application and the other is a Vue application. They can be developed, tested, deployed and run independently.

2. Select micro front-end framework: select qiankun framework.

3. Integrated applications:

Install qiankun and qiankun-react plugins in your React application and make some configuration and code modifications. The corresponding operations are also performed in the Vue application.

- React application code:

import React from 'react';
import ReactDOM from 'react-dom';
import {
    
     registerMicroApps, start } from 'qiankun';
import App from './App';

const apps = [
  {
    
    
    name: 'vue-app',
    entry: '//localhost:8081',
    container: '#vue-app',
    activeRule: '/vue',
  },
];

registerMicroApps(apps);

start();

ReactDOM.render(<App />, document.getElementById('react-app'));

- Vue application code:

import Vue from 'vue';
import App from './App.vue';
import {
    
     registerMicroApps, start } from 'qiankun';

const apps = [
  {
    
    
    name: 'react-app',
    entry: '//localhost:8080',
    container: '#react-app',
    activeRule: '/react',
  },
];

registerMicroApps(apps);

start();

new Vue({
    
    
  render: h => h(App),
}).$mount('#vue-app');

4. Define communication between applications:

Let's say a React application needs to call functionality from a Vue application. This can be achieved using props or custom events:

- in Reactthe app

import {
    
     initGlobalState } from 'qiankun';

const actions = initGlobalState({
    
    
  data: 'hello',
});

actions.onGlobalStateChange((state, prev) => {
    
    
  console.log(state); // { data: 'world' }
});

actions.setGlobalState({
    
    
  data: 'world',
});

- In a Vue application

import {
    
     onGlobalStateChange, setGlobalState } from 'qiankun';

onGlobalStateChange((state, prev) => {
    
    
  console.log(state); // { data: 'world' }
});

setGlobalState({
    
    
  data: 'world',
});

The above examples are for reference only and need to be modified according to the specific conditions of the application in actual use.

9. Examples of e-commerce websites

Suppose there is an e-commerce website that contains multiple sub-applications, such as product lists, shopping carts, orders, etc. Each sub-application can be developed, tested, deployed, and run independently. In order to improve the maintainability, scalability and reusability of the application, micro frontends can be used.

1. Define the boundaries of your application:

First, you need to define the boundaries of your application—which parts can be developed, tested, deployed, and run independently. Assume that 商品列表, 购物车and 订单are three independent sub-applications.

2. Choose a micro front-end framework:

Choose a micro-front-end framework that suits your application, such as single-spa, , qiankunor 乾坤. Assume that the qiankun framework is selected.

3. Integrated application ( qiankun):

Integrate the application into qiankunthe framework, which usually requires some configuration and code modifications.

- Product List Application Code:

import Vue from 'vue';
import App from './App.vue';
import {
    
     registerMicroApps, start } from 'qiankun';

new Vue({
    
    
  render: h =＞ h(App),
}).$mount('#app');

registerMicroApps([
  {
    
    
    name: 'cart',
    entry: '//localhost:8081',
    container: '#container',
    activeRule: '/cart',
  },
  {
    
    
    name: 'order',
    entry: '//localhost:8082',
    container: '#container',
    activeRule: '/order',
  },
]);

start();

- Shopping cart application code:

import Vue from 'vue';
import App from './App.vue';

new Vue({
    
    
  render: h =＞ h(App),
}).$mount('#app');

- Order application code:

import Vue from 'vue';
import App from './App.vue';

new Vue({
    
    
  render: h =＞ h(App),
}).$mount('#app');

4. Define communication between applications:

Applications need to communicate with each other, such as sharing data or calling functions of other applications. This can be achieved using techniques such as 事件总线, 状态管理器or .Web 组件标准

Assume that the shopping cart application needs to call the function of the product list application, which can be achieved using custom events:

• 在商品列表应用程序中

import {
    
     onGlobalStateChange, setGlobalState } from 'qiankun';

onGlobalStateChange((state, prev) =＞ {
    
    
  console.log(state); // { cartCount: 2 }
});

setGlobalState({
    
    
  cartCount: 2,
});

- In the shopping cart app

import {
    
     initGlobalState } from 'qiankun';

const actions = initGlobalState({
    
    
  cartCount: 0,
});

actions.onGlobalStateChange((state, prev) =＞ {
    
    
  console.log(state); // { cartCount: 2 }
});

actions.setGlobalState({
    
    
  cartCount: 2,
});

The above examples are for reference only and need to be modified according to the specific conditions of the application in actual use.

10. Examples of online education platforms

Online education platform, including multiple sub-applications, such as 课程列表, 学习中心, 个人中心etc. Each sub-application can be developed, tested, deployed, and run independently. In order to improve the maintainability, scalability and reusability of the application, micro frontends can be used.

1. Define the boundaries of your application:

First, you need to define the boundaries of your application—which parts can be developed, tested, deployed, and run independently. Assume that the Course List, Learning Center, and Personal Center are three separate sub-applications.

2. Choose a micro front-end framework:

Choose a micro front-end framework suitable for your application, such as single-spa, qiankun, or Qiankun. Assume that the single-spa framework is selected.

3. Integrated application ( single-spa):

Integrate the application into single-spathe framework, which usually requires some configuration and code modifications.

- Course List Application Code:

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from './App';

const reactLifecycles = singleSpaReact({
    
    
  React,
  ReactDOM,
  rootComponent: App,
  domElementGetter: () =＞ document.getElementById('course-list'),
});

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,
];

- Learning Center App Code:

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue';

const vueLifecycles = singleSpaVue({
    
    
  Vue,
  appOptions: {
    
    
    render: h =＞ h(App),
  },
});

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [
  vueLifecycles.unmount,
];

- Personal center application code:

import angular from 'angular';
import singleSpaAngularJS from 'single-spa-angularjs';
import appModule from './app.module';

const angularLifecycles = singleSpaAngularJS({
    
    
  angular,
  appModule,
  domElementGetter: () =＞ document.getElementById('personal-center'),
});

export const bootstrap = [
  angularLifecycles.bootstrap,
];

export const mount = [
  angularLifecycles.mount,
];

export const unmount = [
  angularLifecycles.unmount,
];

4. Define communication between applications:

Applications need to communicate with each other, such as sharing data or calling functions of other applications. This can be accomplished using technologies such as event buses, state managers, or Web component standards.

Assume that the Learning Center application needs to call the functionality of the course list application, which can be 自定义事件achieved using:

- In the Course List app

import {
    
     addGlobalEvent } from 'single-spa';

addGlobalEvent('course:select', (courseId) =＞ {
    
    
  console.log(courseId); // 123
});

- In the Learning Center app

import {
    
     getGlobalEventEmitter } from 'single-spa';

const emitter = getGlobalEventEmitter();

emitter.emit('course:select', 123);

The above examples are for reference only and need to be modified according to the specific conditions of the application in actual use.

Summarize

Micro front-end technology is a technology that splits front-end applications into multiple independent sub-applications, and each sub-application can be developed, tested, deployed and upgraded independently. Through micro-frontends, front-end applications can be made more flexible, maintainable, and scalable, and front-end development efficiency and team collaboration efficiency can be improved. Using micro-front-end technology requires in-depth understanding and mastery to develop high-quality front-end applications. It is necessary to pay attention to issues such as communication and collaboration between sub-applications, version management of sub-applications, performance and security of sub-applications, to ensure the correct use and application effect of micro-front-end technology.