What is a micro front end?
An architectural style that combines independent front-end applications into a larger whole.
Suppose you want to build a progressive web application, but it is difficult for you to implement new features in the existing overall application. For example, you want to start using the new JS syntax (or TypeScript), but you cannot use the corresponding build tool in the existing build process. Or, you just want to expand your development team so that multiple teams can work on a product at the same time, but the coupling and complexity in the existing applications restrict each developer to each other. These are real problems, which greatly reduce the development efficiency of large teams.
Recently, we have seen more and more front-ends begin to focus on the architecture of complex front-end applications. In particular, how to decompose the front-end as a whole, so that each piece can be independently developed, tested and deployed, while still being a whole for users. This technology is the micro front end,
Why use micro frontend
In order to separate and decouple huge front-end projects. For example: 1. If each functional module corresponds to a git repository, when we need to use several of these functions to do a new project, we only need to introduce the corresponding git repository. 2. We need to iteratively upgrade a certain function. At the same time, we want to introduce ts to replace the original es6 syntax without conflicting other functional modules. The micro front end can also be completed.
Monolithic application vs. front-end microservices:
Ordinary front-end single application
Micro front end architecture
advantage:
1. Application autonomy. Only need to follow a unified interface specification or framework to facilitate the integration of the system, there is no dependency between each other.
2. Single responsibility. Each front-end application can only focus on the functions it needs to complete.
3. The technology stack is irrelevant. While you can use Angular, you can also use React and Vue.
Disadvantages:
1. The split foundation of applications depends on the construction of infrastructure. Once a large number of applications depend on the same infrastructure, maintenance becomes a challenge.
2. The smaller the granularity of the split, it means that the architecture becomes more complicated and the maintenance cost becomes higher.
3. Once the technology stack is diversified, it means the technology stack is chaotic
Use micro front end to avoid risk
1. Prescribe a unified code style
2. Develop a unified technology stack
3. Carefully plan the split of the code warehouse, taking into account subsequent iterations and maintenance
4. Unify the UI component library to make the UI style consistent in a system
Technical approach
In terms of technical practice, the micro front-end architecture can be implemented in the following ways:
1. Route distribution type. Through the reverse proxy function of the HTTP server, the request is routed to the corresponding application.
Front-end microservices. Design communication and loading mechanisms on different frameworks to load corresponding applications in one page.
2. Micro applications. Through software engineering, in the deployment and construction environment, multiple independent applications are combined into a single application.
3. Widgetization. Develop a new build system to build part of the business functions into an independent chunk code, which only needs to be loaded remotely during use.
4. Front-end containerization. Use iFrame as a container to accommodate other front-end applications.
5. Application componentization. With the help of Web Components technology, to build cross-frame front-end applications.
Technical realization
Now it is mainly based on single-spa, and js frameworks such as vue, react, and angular can be used according to the technology stack
Simple usage of Single-SPA (take react as an example)
1. Create an HTML file
<html>
<body>
<div id="root"></div>
<script src="single-spa-config.js"></script>
</body>
</html>
2. Create a single-spa-config.js file
// single-spa-config.js
import * as singleSpa from 'single-spa';
// 加载react 项目的入口js文件 (模块加载)
const loadingFunction = () => import('./react/app.js');
// 当url前缀为 /react的时候.返回 true (底层路由)
const activityFunction = location => location.pathname.startsWith('/react');
// 注册应用
singleSpa.registerApplication('react', loadingFunction, activityFunction);
//singleSpa 启动
singleSpa.start();
3. Encapsulate the rendering export file of the React project
We modify the entry file for rendering react to this, and then it can be connected to single-spa
import React from 'react'
import ReactDOM from 'react-dom'
import singleSpaReact from 'single-spa-react'
import RootComponent from './root.component'
if (process.env.NODE_ENV === 'development') {
// 开发环境直接渲染
ReactDOM.render(<RootComponent />, document.getElementById('root'))
}
//创建生命周期实例
const reactLifecycles = singleSpaReact({
React,
ReactDOM,
rootComponent: RootComponent
domElementGetter: () => document.getElementById('root')
})
// 项目启动的钩子
export const bootstrap = [
reactLifecycles.bootstrap,
]
// 项目启动后的钩子
export const mount = [
reactLifecycles.mount,
]
// 项目卸载的钩子
export const unmount = [
reactLifecycles.unmount,
]
When the prefix of our browser URL is /react, the program can render the application normally.So
, all the routing prefixes of our react application must have /react
to sum up
Over the years, as the front-end continues to become more complex, we have seen a growing demand for more scalable architectures. We should be able to develop software through independent autonomous teams.
Although micro-frontends are not the only way, we have seen many actual cases of micro-frontends achieving these goals, and over time, we have been able to gradually apply this technology to old websites. Regardless of whether the micro-front-end is the right approach for you and your team, the micro-front-end is a trend. Under this trend, front-end engineering and front-end architecture will become more and more important.