Anteriormente, la empresa desarrolló un sistema que constaba de varios proyectos pequeños con diferentes funciones en un sistema relativamente grande. En ese momento, se consideró desarrollar una aplicación directamente, pero se descubrió que los proyectos pequeños se pueden utilizar en otros sistemas. por lo que se pensó en utilizar micro front-ends para el desarrollo de proyectos, desarrollar pequeños proyectos con diferentes funciones de forma independiente y luego fusionar los sistemas a través del portal, de esta manera, cuando otros proyectos necesiten utilizar los sistemas de estos pequeños proyectos más adelante, Puede usarlos directamente, por lo que en ese momento se usó Single-Spa para el desarrollo. El artículo anterior también habló sobre el uso de Single-Spa , así que ahora hablaré sobre el micro front-end (consulte el resumen de muchos grandes).
¿Qué es la microfrontend?
1. Apareció por primera vez en 2016, extendiendo el concepto de microservicios back-end al mundo front-end.
2. Microservicios: Los microservicios son una variante de la arquitectura orientada a servicios (SOA), que diseña aplicaciones como una serie de detalles débilmente acoplados. Servicios granulares y organizados específicamente a través de protocolos de comunicación livianos, integrando aplicaciones en un conjunto de pequeños servicios. Estos servicios se pueden implementar y expandir de forma independiente. Cada servicio tiene un límite de módulo sólido, lo que incluso permite que diferentes servicios se escriban en diferentes lenguajes de programación y sean administrados por diferentes equipos.
3. Un estilo arquitectónico que consta de múltiples aplicaciones de front-end entregadas geográficamente. Específicamente, la aplicación front-end se descompone en partes más pequeñas y simples que se pueden desarrollar, probar e implementar de forma independiente, sin dejar de aparecer como un producto único y cohesivo para los usuarios.
¿Qué se puede esperar del uso de microfrontends?
En el campo front-end actual, el modelo de desarrollo de aplicaciones de una sola página (spa) basado en vue, reaccionar y angular se ha convertido en la corriente principal de la industria. Con el paso del tiempo y las ricas funciones de la aplicación, la aplicación comenzó a volverse enorme e inflada, y gradualmente se convirtió en una aplicación monolítica. No solo era difícil de mantener, sino que también tomaba mucho tiempo construir el proyecto cada vez. Se desarrollaron y lanzaron nuevos requisitos y fue posible. Cambiar un área afecta a todo el sistema, lo que tiene un impacto negativo en la eficiencia del desarrollo y la experiencia de los desarrolladores. Por lo tanto, es imperativo dividir una aplicación monolítica en múltiples subaplicaciones.
1. Dividir y perfeccionar: dividir aplicaciones según el negocio. Cada aplicación tiene su propio almacén, con desarrollo independiente, implementación independiente, acceso independiente y mantenimiento independiente . También puedes elegir la pila de tecnología que más te convenga según las características del equipo, lo que mejora enormemente la eficiencia y experiencia de los desarrolladores, incluso al lado No importa que el equipo haya lanzado por error una característica a medio terminar o problemática. Si un microfrontend está listo para su lanzamiento, debería estarlo en cualquier momento y solo lo determinará el equipo que lo desarrolla y mantiene.
2. Integrar sistemas históricos: en muchas empresas existen proyectos más o menos históricos, que están involucrados en las operaciones diarias, estos sistemas deben integrarse en el nuevo marco para su uso y no se pueden abandonar, no hay razón para que desperdiciemos tiempo para esto y energía para reescribir la vieja lógica. El micro front-end puede integrar estos sistemas y ser compatible con los sistemas nuevos y antiguos para ejecutarse en paralelo sin modificar básicamente la lógica.
3. Independiente de la pila de tecnología: a través de la aplicación base, puede integrar subproyectos desarrollados por vue, reaccionar, angla o js.
¿De qué módulos consta el micro front-end?
En la actualidad, los micro front-end adoptan principalmente una solución de enrutamiento de aplicaciones combinadas. El núcleo de esta solución es la idea "maestro-esclavo", que incluye una aplicación base (MainApp) y varias aplicaciones micro (MicroApp). son proyectos front-end SPA que son principalmente responsables del registro de aplicaciones, mapeo de enrutamiento, entrega de mensajes, etc. Las micro aplicaciones son proyectos front-end independientes. Estos proyectos no se limitan al desarrollo utilizando React, Vue, Angular o JQuery. Cada micro aplicación está registrado en la aplicación base y es La base se administra, pero se puede acceder a ella por separado si está separada de la base. El proceso básico es como se muestra en la siguiente figura:
Como aplicación base micro-front-end, es la entrada a toda la aplicación y es responsable de albergar la visualización de la microaplicación actual y otras microaplicaciones de enrutamiento. Para el reenvío, la visualización de la microaplicación actual generalmente consta de los siguientes pasos: 1. Como base
SPA aplicación, es un proyecto puramente front-end. Para mostrar la página de la microaplicación, además de usar iframe, es necesario Para poder extraer el contenido de la página de la microaplicación primero, esto requiere una extracción remota mecanismo.
2. El mecanismo de extracción remota generalmente usa la API de recuperación para obtener primero el contenido HTML de la microaplicación, luego extrae el JavaScript y CSS de la microaplicación mediante análisis, usa el método eval para ejecutar JavaScript y agrega el CSS. y contenido HTML a El área de visualización reservada para microaplicaciones en la aplicación base se descarga sincrónicamente cuando se cambia la microaplicación, lo que constituye el proceso de visualización de la aplicación actual.
Para la distribución de rutas, tome como ejemplo la aplicación SPA básica desarrollada con vue-router. El proceso principal es el siguiente: 1.
Cuando cambia la ruta del navegador, vue-router escuchará el evento hashchange o popstate para obtener la ruta. momento.
2. El enrutador de la base es el primero en recibir este cambio. Al consultar la información de registro, se puede reenviar la microaplicación. Después de un procesamiento lógico, la información de la ruta se envía a la microaplicación modificando el método hash. o el método pushState. , la microaplicación puede monitorear manualmente la recepción del evento hashchange o popstate, o usar React-router o vue-router para hacerse cargo del enrutamiento, y la lógica posterior es controlada por la propia microaplicación.
Soluciones técnicas de uso común para microfrontends
1. iframe
Como tecnología muy antigua, iframe también se puede utilizar para implementar micro front-end. A través del iframe, podemos incrustar fácilmente una aplicación en otra aplicación, y el CSS y JavaScript entre las dos aplicaciones están aislados entre sí y no interferirán entre sí.
Ventajas :
implementación simple;
css y js están naturalmente aislados y no interfieren entre sí;
completamente independientes de la pila de tecnología;
pueden coexistir múltiples subaplicaciones;
no es necesario modificar las aplicaciones existentes;
desventajas :
mala experiencia de usuario, cada vez que cambia aplicaciones, el navegador La página debe recargarse;
la interfaz de usuario no está sincronizada y la estructura DOM no se comparte;
el contexto global está completamente aislado, las variables de memoria no se comparten y el proceso de comunicación y sincronización de datos entre subaplicaciones es complicado,
no compatible con SEO,
es posible que tengas que iniciar sesión nuevamente al cambiar de subaplicación. Mala experiencia;
2. single-spa: el primer marco de micro front-end, compatible con múltiples pilas de tecnología de front-end.
Aunque el modo iframe puede implementar micro front-end, la experiencia no es buena. Cada vez que volvemos a una subaplicación que hemos visitado, necesitamos recargar la subaplicación, lo que tiene un gran impacto en el rendimiento.
Sabemos que el modelo principal actual de desarrollo de aplicaciones front-end es el modelo de desarrollo de aplicaciones de una sola página basado en vue/react/angular. En este modo, necesitamos mantener un registro de enrutamiento, cada ruta correspondiente a la URL del componente de página respectivo. Al cambiar de ruta, si es una página nueva, debe obtener dinámicamente el script js correspondiente a la ruta, luego ejecutar el script y representar la página correspondiente; si es una página que ha sido visitada, entonces obtenga directamente la página en caché método del caché, ejecute y renderice la página correspondiente.
Entonces, ¿existe una solución de implementación similar para que las microfrontends obtengan la misma experiencia de usuario que las aplicaciones de una sola página?
La respuesta es sí. single-spa proporciona una nueva solución técnica que puede ayudarnos a lograr una experiencia similar a una aplicación de una sola página.
En la solución de spa único, las aplicaciones se dividen en dos categorías: aplicaciones básicas y subaplicaciones. Entre ellas, la subaplicación es la subaplicación que debe agregarse como se describe en el artículo anterior, y la aplicación base es otra aplicación independiente que se utiliza para agregar subaplicaciones.
De manera similar al principio de implementación de las aplicaciones de una sola página, single-spa mantendrá un registro de enrutamiento en la aplicación base y cada ruta corresponde a una subaplicación. Después de iniciar la aplicación base, cuando cambiamos de ruta, si se trata de una nueva subaplicación, el script js de la subaplicación se obtendrá dinámicamente y luego se ejecutará el script y se representará la página correspondiente; si es una subaplicación que ya ha sido visitada, luego La subaplicación almacenada en caché se obtendrá del caché, la subaplicación se activará y se representará la página correspondiente.
Ventajas :
Al cambiar de aplicación, el navegador no necesita recargar la página, lo que proporciona la misma experiencia de usuario que una aplicación de una sola página;
completamente independiente de la pila de tecnología;
pueden coexistir múltiples subaplicaciones;
ecosistema rico;
Desventajas :
La aplicación original debe modificarse y la aplicación debe ser compatible con sing-spa y usarse de forma independiente;
existe un costo de aprendizaje adicional; es
complejo de usar y problemas como la carga de subaplicaciones, el aislamiento de aplicaciones y sub -La comunicación de la aplicación requiere la implementación de los propios usuarios del marco;
los mismos recursos se cargan repetidamente entre subaplicaciones;
al iniciar la aplicación, la aplicación base debe iniciarse primero;
3. qiankun: basado en Single-Spa, el marco de micro front-end de código abierto de Alibaba
. Al igual que single-spa, qiankun también puede brindarnos una experiencia de usuario similar a una aplicación de una sola página. qiankun es un desarrollo secundario basado en single-spa. A nivel de framework, resuelve el problema de que cuando se usa single-spa, los desarrolladores necesitan escribir su propia lógica, como carga de subaplicaciones, comunicación, aislamiento, etc. herramienta más poderosa que un solo spa Excelente solución micro front-end.
Ventajas :
Al cambiar de aplicación, el navegador no necesita recargar la página, lo que proporciona la misma experiencia de usuario que una aplicación de una sola página;
en comparación con un solo spa, resuelve los problemas de carga de subaplicaciones, aislamiento de aplicaciones y subaplicaciones. comunicación, etc., y es relativamente simple de usar;
No tiene nada que ver con la pila de tecnología;
pueden coexistir múltiples subaplicaciones;
Desventajas :
la aplicación original debe modificarse y la aplicación debe ser compatible con qiankun y usarse de forma independiente;
hay un costo de aprendizaje adicional;
los mismos recursos se cargan repetidamente;
al iniciar la aplicación, se debe iniciar la aplicación base en primer lugar;
4. Webpack5: federación de módulos
El webpack5 recientemente lanzado proporciona una nueva característica: federación de módulos. Con base en esta característica, podemos cargar y ejecutar dinámicamente el código de otra aplicación JavaScript en una aplicación JavaScript y realizar el intercambio de dependencias entre aplicaciones.
A través de la federación de módulos, podemos representar dinámicamente la página de otra aplicación en una aplicación, logrando así la agregación de múltiples subaplicaciones.
5. Componente web
Basado en la capacidad Shadow Dom del componente web, también podemos implementar micro front-end para agregar múltiples subaplicaciones.
const shadow = document.querySelector('#hostElement').attachShadow({mode: 'open'}); // la URL es la dirección de la aplicación. Según la recuperación, podemos obtener la plantilla html de la aplicación y agregarla al nodo especificado en fetch (url).then(res => {shadow.innerHTML = res });
Ventajas :
implementación simple;
css y js están naturalmente aislados y no interfieren entre sí;
completamente independientes de la pila de tecnología;
pueden coexistir múltiples subaplicaciones,
no es necesario modificar las aplicaciones existentes Transformación,
Desventajas :
principalmente problemas de compatibilidad del navegador,
mayores costos de desarrollo;
No todos los proyectos son adecuados para el uso de microfrontends y los desarrolladores deben hacer sus propios juicios. Generalmente, el uso de microfrontends requiere capacidades de implementación independientes para aplicaciones base y subaplicaciones. Si se descubre que el uso de microfrontends en realidad reduce la eficiencia del desarrollo, entonces no es adecuado Utilice micro interfaces
Uso de spa individual: https://blog.csdn.net/qq_32881447/article/details/108978277?spm=1001.2014.3001.5501
Referencia: https://juejin.cn/post/6955341801381167112#heading-3