Usted ha trabajado en muchas bibliotecas y frameworks utilizando un sistema de diseño monolítico. Pero en 2023, puedes utilizar los últimos sistemas de diseño en tus aplicaciones que proporcionan escalabilidad, mantenimiento a través de las aplicaciones.
Has oído hablar del concepto Microfrontend en aplicaciones frontend. Al igual que se utiliza el sistema de diseño de microservicios en Backend, en el mismo concepto se puede utilizar microfrontend.
En monorepo, una vez que tu aplicación se vuelve compleja o más grande en el volumen de código, es muy dificil de gestionar. Cuando se trabaja con un equipo grande, la gestión del código y el cambio de los proyectos monorepo es una tarea difícil.
Microfrontend entra en escena, donde se divide la aplicación en sub-aplicaciones basadas en características. Como usted tiene usuario, pago, orden, diseño, puede crear aplicaciones separadas microfrontend y desplegar de forma independiente.
Vamos a hablar en detalle sobre el concepto de microfrontend.
Supongamos que tu aplicación tiene múltiples submódulos como pago, usuario, pedidos. Tu tienes que crear aplicaciones separadas para cada módulo y gestionar las dependencias de forma independiente. Tu microfrontend tendrá toda la misma estructura que monorepo hace. Como package.json, src y otros archivos de configuración.
Así que, básicamente, los sub-módulos se pueden llamar aplicaciones remotas y tienes que exponer a una aplicación host que va a utilizar con la ayuda de algunas herramientas y configuraciones.
Que los nombres de las herramientas están aquí. Puedes utilizar Webpack Module Federation plugin y Single Spa .
¿Qué es el plugin Module Federation?
Introducido en Webpack 5, el plugin Module Federation ofrece a los desarrolladores una forma de crear múltiples compilaciones separadas que forman una única aplicación. Cualquier aplicación JavaScript que esté empaquetada con Webpack 5.0 o superior puede cargar dinámicamente o compartir código y dependencias con cualquier otra en tiempo de ejecución.
Configuración de aplicaciones expuestas
import {Configuration, container} from 'webpack';
export const webpackConfig: Configuration = {
plugins: [
new container.ModuleFederationPlugin({
name: '',
filename: 'shell/remote.js'
shared: []
})
]
};
export default webpackConfig;name : el nombre será útil para identificar la aplicación expuesta al contenedor anfitrión.
Filename : filename se utilizará para importar en la aplicación del contenedor host para cargar la aplicación expuesta.
shared : shared será útil para exponer las dependencias compartidas de la aplicación expuesta.
Configuración de aplicaciones en contenedores
plugins: [
new VueLoaderPlugin(),
new ModuleFederationPlugin({
name: "hostcontainer",
filename: "remote.js",
remotes: {
Company: "OrgName@http://localhost:8080/remote.js"
},
exposes: {},
shared: require("./package.json").dependencies,
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
}),
],remotes : en remotes básicamente importas tu aplicación remota junto con el nombre de la organización.
Single Spa para Microfrontend
single-spa es un framework para reunir múltiples microfrontends JavaScript en una aplicación frontend. La arquitectura de su frontend utilizando single-spa permite muchos beneficios, tales como:
- Usar múltiples frameworks en la misma página sin refrescar la página (React, AngularJS, Angular, Ember, o lo que estés usando).
- Despliega tus microfrontends de forma independiente
- Escribir código utilizando un nuevo framework, sin reescribir su aplicación existente
- Carga perezosa de código para mejorar el tiempo de carga inicial.
Arquitectura
single-spa se inspira en los modernos ciclos de vida de los componentes de framework abstrayendo los ciclos de vida de aplicaciones completas.
Nacido del deseo de Canopy de utilizar React + react-router en lugar de estar siempre atascado con nuestra aplicación AngularJS + ui-router, single-spa es ahora una biblioteca madura que permite la arquitectura de microservicios frontend también conocida como "microfrontends". Los microfrontends permiten muchos beneficios como despliegues independientes, migración y experimentación, y aplicaciones resilientes.
Las aplicaciones single-spa constan de lo siguiente:
- Un config raíz single-spa, que renderiza la página HTML y el JavaScript que registra las aplicaciones. Cada aplicación se registra con tres cosas
- Un nombre
- Una función para cargar el código de la aplicación
- Una función que determina cuándo la aplicación está activa/inactiva
2. Aplicaciones que pueden considerarse como aplicaciones de una sola página empaquetadas en módulos. Cada aplicación debe saber cómo arrancar, montarse y desmontarse del DOM. La principal diferencia entre una SPA tradicional y las aplicaciones de una sola página es que deben ser capaces de coexistir con otras aplicaciones, ya que no tienen cada una su propia página HTML.
Por ejemplo, sus SPA React o Angular son aplicaciones. Cuando están activas, pueden escuchar eventos de enrutamiento de url y poner contenido en el DOM. Cuando están inactivas, no escuchan eventos de enrutamiento de url y están totalmente eliminadas del DOM.
Registro de aplicaciones
Debe registrar las aplicaciones con single-spa para que sepa cómo y cuándo iniciar, cargar, montar y desmontar cada aplicación. Lo más habitual es que el registro se realice dentro de la configuración de single-spa, pero no es necesario. Ten en cuenta que si una aplicación se registra desde dentro de otra aplicación, no se mantendrá ninguna jerarquía entre las aplicaciones. En su lugar, las aplicaciones serán hermanas y se montarán y desmontarán según sus propias funciones de actividad.
Para registrar una aplicación, llame a la función registerApplication. Ejemplo:
// single-spa-config.js
import { registerApplication, start } from 'single-spa';// Simple usage
registerApplication(
'app2',
() => import('src/app2/main.js'),
(location) => location.pathname.startsWith('/app2'),
{ some: 'value' }
);
// Config with more expressive API
registerApplication({
name: 'app1',
app: () => import('src/app1/main.js'),
activeWhen: '/app1',
customProps: {
some: 'value',
}
});
start();Utilización del objeto de configuración
singleSpa.registerApplication({
name: 'myApp',
app: () => import('src/myApp/main.js'),
activeWhen: ['/myApp', (location) => location.pathname.startsWith('/some/other/path')],
customProps: {
some: 'value',
},
});singleSpa.registerApplication({
name: 'myApp',
app: () => import('src/myApp/main.js'),
activeWhen: ['/myApp', (location) => location.pathname.startsWith('/some/other/path')],
customProps: (name, location) => ({
some: 'value',
}),
});config.name
Debe ser un nombre de cadena
config.app
La definición de tu app, que puede ser un objeto con métodos de ciclo de vida de una sola spa, o una función de carga, igual que el segundo argumento de la API de argumentos
config.activeWhen
Puede ser una función de actividad, como la API de argumentos, un prefijo de ruta o un array con ambos. Dado que el caso de uso más común es mirar el window.location y hacer coincidir la URL con un prefijo, ¡decidimos hacer esto por ti!
Para más información puedes visitar el sitio web de Single spa para la configuración.
En conclusión, por lo que básicamente el uso de herramientas anteriores y proporcionar escalabilidad a su aplicación y la carga exigente aplicación sólo.
Usted puede utilizar gran combinación de Webpack Módulo Federación plugin con la configuración de spa único. puede ser una gran combinación.
Gracias por leer el artículo. Espero que te vaya bien.
