¿Qué es un micro front end?
Un estilo arquitectónico que combina aplicaciones de front-end independientes en un todo más grande.
Suponga que desea crear una aplicación web progresiva, pero le resulta difícil implementar nuevas funciones en la aplicación general existente. Por ejemplo, desea comenzar a usar la nueva sintaxis JS (o TypeScript), pero no puede usar la herramienta de compilación correspondiente en el proceso de compilación existente. O simplemente desea expandir su equipo de desarrollo para que varios equipos puedan trabajar en un producto al mismo tiempo, pero el acoplamiento y la complejidad de las aplicaciones existentes restringen a cada desarrollador entre sí. Estos son problemas reales, que reducen en gran medida la eficiencia de desarrollo de grandes equipos.
Recientemente, hemos visto que más y más front-end comienzan a centrarse en la arquitectura de aplicaciones de front-end complejas. En particular, cómo descomponer el front-end como un todo, de modo que cada pieza pueda desarrollarse, probarse e implementarse de forma independiente, sin dejar de ser un todo para los usuarios. Esta tecnología es el micro front-end,
Por que usar micro frontend
Para separar y desacoplar grandes proyectos front-end. Por ejemplo: 1. Si cada módulo funcional corresponde a un repositorio git, cuando necesitemos usar varias de estas funciones para hacer un nuevo proyecto, solo necesitamos introducir el repositorio git correspondiente. 2. Necesitamos actualizar iterativamente una determinada función. Al mismo tiempo, queremos introducir ts para reemplazar la sintaxis original de es6 sin entrar en conflicto con otros módulos de función. El micro front end también se puede completar.
Aplicación monolítica frente a microservicios de front-end:
Aplicación única de front-end ordinaria
Arquitectura de micro front-end
ventaja:
1. Autonomía de la aplicación. Solo es necesario seguir una especificación o marco de interfaz unificado para facilitar la integración del sistema, no hay dependencia entre ellos.
2. Responsabilidad única. Cada aplicación de front-end solo puede enfocarse en las funciones que necesita completar.
3. La pila de tecnología es irrelevante. Si bien puede usar Angular, también puede usar React y Vue.
Desventajas:
1. La base dividida de las aplicaciones depende de la construcción de la infraestructura. Una vez que un gran número de aplicaciones dependen de la misma infraestructura, el mantenimiento se convierte en un desafío.
2. Cuanto menor sea la granularidad de la división, significa que la arquitectura se vuelve más complicada y el costo de mantenimiento aumenta.
3. Una vez que la pila de tecnología se diversifica, significa que la pila de tecnología es caótica
Utilice micro front end para evitar riesgos
1. Prescribir un estilo de código unificado
2. Desarrollar una pila de tecnología unificada
3. Planificar cuidadosamente la división del almacén de código, teniendo en cuenta las iteraciones y el mantenimiento posteriores
4. Unificar la biblioteca de componentes de la interfaz de usuario para que el estilo de la interfaz de usuario sea coherente en un sistema
Enfoque técnico
En términos de práctica técnica, la arquitectura de micro front-end se puede implementar de las siguientes maneras:
1. Tipo de distribución de ruta. A través de la función de proxy inverso del servidor HTTP, la solicitud se enruta a la aplicación correspondiente.
Microservicios de front-end. Diseñe mecanismos de comunicación y carga en diferentes marcos para cargar las aplicaciones correspondientes en una página.
2. Micro aplicaciones. A través de la ingeniería de software, en el entorno de implementación y construcción, se combinan múltiples aplicaciones independientes en una sola aplicación.
3. Widgetización. Desarrolle un nuevo sistema de compilación para construir parte de las funciones comerciales en un código fragmentado independiente, que solo necesita cargarse de forma remota cuando se usa.
4. Containerización de front-end. Utilice iFrame como contenedor para acomodar otras aplicaciones de front-end.
5. Componente de aplicaciones. Con la ayuda de la tecnología Web Components, para crear aplicaciones frontales de marcos cruzados.
Realización técnica
Ahora se basa principalmente en un spa único, y los marcos js como vue, react y angular se pueden usar de acuerdo con la pila de tecnología
Uso simple de Single-SPA (tome reaccionar como ejemplo)
1. Crea un archivo HTML
<html>
<body>
<div id="root"></div>
<script src="single-spa-config.js"></script>
</body>
</html>
2. Cree un archivo single-spa-config.js
// 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. Encapsule el archivo de exportación de renderizado del proyecto React
Modificamos el archivo de entrada para que el renderizado reaccione a esto, y luego se puede conectar a 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,
]
Cuando el prefijo de la URL de nuestro navegador tiene / react, el programa puede renderizar la aplicación normalmente
, por lo que todos los prefijos de enrutamiento de nuestra aplicación react deben tener / react
para resumir
A lo largo de los años, a medida que el front-end se vuelve más complejo, hemos visto una creciente demanda de arquitecturas más escalables. Deberíamos poder desarrollar software a través de equipos autónomos independientes.
Aunque las micro-frontends no son la única forma, hemos visto muchos casos reales de micro-frontends que logran estos objetivos y, con el tiempo, hemos podido aplicar gradualmente esta tecnología a sitios web antiguos. Independientemente de si el micro front-end es el enfoque adecuado para usted y su equipo, el micro front-end es una tendencia. Bajo esta tendencia, la ingeniería del front-end y la arquitectura del front-end serán cada vez más importantes.