javascript - w3schools - Angular y Micro-Frontends

object text javascript

Question

Estoy investigando cómo dividir un enorme monolito de una sola página en una arquitectura de micro frontend.

La idea:

• la página consta de varios componentes que se ejecutarían de forma autónoma
• cada componente es administrado por un equipo de desarrollo
• cada equipo puede cambiar, actualizar e implementar sus componentes sin romper los componentes de otros equipos
• cada equipo elige su propio conjunto de herramientas

La razón

Para desarrollar aplicaciones grandes de manera eficiente, necesita que muchas personas trabajen en ellas. Sin embargo, el número de desarrolladores por aplicación / equipo no escala bien. Sin embargo, el desarrollo paralelo de múltiples aplicaciones independientes por equipos independientes se puede escalar arbitrariamente

Con esto en mente, es imperativo que los equipos puedan elegir su propio conjunto de herramientas y especialmente realizar actualizaciones de versiones independientes de bibliotecas de terceros (como angular, react, jquery). Si este no fuera el caso, una actualización del marco debería ser compatible con cada componente antes de poder implementarlo en producción.

¿Funciona esto con Angular?

Si bien las actualizaciones de versiones independientes son necesarias, sería razonable restringir los equipos a unos pocos marcos compatibles (Angular, React, Vue, Polymer ...) y por ahora trato de construir una demostración que consista exclusivamente en Angular-Apps.

Sin embargo, aunque Angular 5 es supuestamente un marco de plataforma que admite enormes aplicaciones de múltiples módulos, parece ser casi imposible tener varias aplicaciones angulares independientes ejecutándose en la misma ventana del navegador.

Logré arrancar varias aplicaciones angulares (diferentes versiones, cada una alojada en su propio servidor) en una sola aplicación web utilizando HTML-Imports. Sin embargo, hay varias dependencias global que deben compartirse entre las aplicaciones.

• zone.js solo se puede iniciar una vez
• el enrutamiento requiere cambios de URL
• Cosas del navegador como cookies, almacenamiento de sesiones, etc.

Hay varios artículos en la red sobre cómo arrancar múltiples módulos angulares, pero todos se refieren a múltiples módulos en la misma aplicación central, lo que a su vez significa que todos se ejecutan en la misma versión de marco y una actualización significa que debe reconstruir y desplegar todo el monolito.

¿Existe alguna solución que no sea " iframes " para obtener múltiples aplicaciones angulares (5) ejecutándose en la misma página?

Answer 1

Aparte de Iframe, hay una opción más disponible actualmente es el marco SPA, puede obtener el código de muestra desde aquí

https://github.com/PlaceMe-SAS/single-spa-angular-cli-examples https://github.com/joeldenning/simple-single-spa-webpack-example

Answer 2

Eche un vistazo a Elementos angulares (Elementos personalizados). https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/

La nueva versión de Ionic (4) está totalmente basada en ella para poder usarse en todas las versiones de Angular y en todos los frameworks JS.

Para eso, crearon https://stenciljs.com/ que lo ayudarán a crear elementos personalizados.

Pero si todos los equipos están usando Angular, cada uno de ellos puede crear una biblioteca usando ngm por ejemplo.

Answer 3

En lugar de sugerir abiertamente CONTRA esta idea, principalmente debido a requisitos de pila separados, expondré las compensaciones y proporcionaré algunas restricciones que lo harán posible.

la página consta de varios componentes que se ejecutarían de forma autónoma

Todos sabemos que esto se ofrece listo para usar en componentes angulares con una clara demarcación de entradas y salidas.

Pequeño CAVEAT: cuando / si pasa objetos para @Input y emite objetos de evento con @Output() los componentes que interactúan deben estar de acuerdo en una interfaz definida por adelantado.

Solución alternativa: cree otro proyecto TypeScript que solo defina estos artefactos. Todos los demás "proyectos componentes" dependerían de una versión específica de esto.

cada componente es administrado por un equipo de desarrollo

Los equipos de desarrollo pueden distribuir los componentes al igual que lo hacen otros proyectos angulares en el código abierto. Pueden publicar sus artefactos en algún repositorio npm. Para desarrollar componentes atribuibles, le recomiendo que consulte Angular Material2, que puede ser abrumador o puede usar algo como ngx-library-builder (basado en Filipesilva / angular-quickstart-lib de Angular Team Member ) que utiliza cada equipo de componentes.

PRUEBA: Hasta esta fecha, el equipo angular no tiene una configuración rápida de proyecto para compartir bibliotecas de componentes como es evidente en Angular CLI. Pero numerosos desarrolladores han creado algún tipo de creadores de bibliotecas para llenar el vacío en Angular CLI.

cada equipo puede cambiar, actualizar e implementar sus componentes sin romper los componentes de otros equipos

Haga que su proyecto principal extraiga todos los componentes y realice una compilación / implementación activada por cambios periódicos en algún servidor de CI. Básicamente, esto está produciendo compilaciones de producción AOT con las últimas versiones de componentes. Como una ventaja adicional, puede tener algunas pruebas abstractas de e2e creadas para hacer algunas pruebas de integración automatizadas para garantizar que los efectos secundarios de un componente no rompan otros componentes.

PRUEBA: Será difícil determinar cómo cada equipo desarrolla los componentes, es decir, están haciendo un uso y disposición óptimos de la memoria, la CPU y otros recursos. por ejemplo, ¿qué pasa si un equipo comienza a crear suscripciones y no las elimina? El uso de un análisis de código estático puede ser útil, pero no tendrá este código fuente disponible en este momento, a menos que también publiquen su código fuente.

cada equipo elige su propio conjunto de herramientas

Esto es un factor decisivo completo, a menos que se refiera a "conjunto de herramientas" como en herramientas de desarrollador como IDE y algunas de las "dependencias de desarrollo". Aunque ciertas partes de "devDependencies" de cada equipo deben tener las mismas versiones exactas de kits de desarrollo angular, como compiladores, etc.

Al menos cada equipo debe usar el mismo Angular, RxJS, etc.

Lo más importante es tener cuidado de que cada equipo no arranque ningún componente; solo los proyectos principales tendrán un módulo de arranque y eso arrancará el componente raíz. Esto ayudará a responder su problema de zone.js

¿Funciona esto con Angular?

Si reconoce las limitaciones y proporciona gobernanza, le sugiero que lo haga.

Answer 4

La única forma de integrar diferentes aplicaciones angulares aparte de IFrames y la comunicación a través de postMessage es "vincularlas en profundidad" e intercambiar información utilizando el parámetro URL. Todas las aplicaciones angulares se ubican en su propia pestaña del navegador. Pero para los servicios y componentes comunes es posible que desee implementar un "núcleo compartido" utilizado por todas sus aplicaciones angulares, por lo tanto, está atascado en un cierto rango de versiones angulares. Cuando desee este núcleo compartido, el enfoque de NGModule es el camino recomendado. Puede mezclar versiones Angular 2 y Angular 5 en una aplicación porque son compatibles con versiones anteriores. No hay una necesidad urgente de que los equipos se atasquen en la misma versión, hasta que el Equipo Angular introduzca cambios importantes. A pesar de eso, sus deudas técnicas crecen cuando no está actualizando. La frecuencia de las actualizaciones técnicas es definitivamente mayor en el área Angular / Javascript.

Answer 5

Nos hicimos la misma pregunta. Lamentablemente, parece que la respuesta a la pregunta

¿Existe alguna solución que no sea "iframes" para obtener múltiples aplicaciones angulares (5) ejecutándose en la misma página (editar: donde cada aplicación angular puede usar una versión angular diferente)?

actualmente es

No, desafortunadamente no, siempre que desee usar la detección de cambios de Angular (que usa zone.js).

Debido a zone.js, Angular contamina el alcance global. Aún peor, zone.js parchea una gran cantidad de API de navegador ( https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md ) para detectar cuándo se completa una zona.

Solo es posible usar diferentes versiones de un marco en una página sin efectos secundarios si el marco no toca el alcance global (esto parece ser cierto para React und Vue). Luego puede agrupar diferentes versiones de framework con cada aplicación a través de Webpack (con un alcance separado y la desventaja de que aumenta el tamaño de cada paquete de aplicaciones).

Por lo tanto, si desea crear una página web con Angular donde se deben integrar diferentes aplicaciones / módulos en una página, la única solución factible actualmente es crear un monolito de implementación (por ejemplo, agrupar diferentes módulos de diferentes equipos en una aplicación Angular por un CI / Sistema de CD como bhantol explicó en su respuesta).

Parece que el equipo de Angular también es consciente del problema y que podrían abordarlo con las siguientes versiones principales. Consulte la respuesta de robwormwald sobre el siguiente problema de Github con respecto a la hoja de ruta de Angular Elements: https://github.com/angular/angular/issues/20891

Esperemos que haya más información del equipo de Angular sobre ese tema cuando se lance la próxima versión principal de Angular 6 a fines de marzo.

Answer 6

Parece que ha habido una solución para sus necesidades desde hace un tiempo. Echa un vistazo al proyecto Single-SPA HERE .

Es un proyecto de envoltura SPA para sus proyectos de micro SPA.

Answer 7

Sí tu puedes.

Sin embargo , realmente no desea quedarse atascado en un marco cuando está escribiendo componentes web, porque todo el punto de un componente web debe reutilizarse posiblemente en cualquier lugar.

Comparto su visión, definitivamente es mejor que la calidad del software y la productividad de los desarrolladores trabajen en funciones enfocadas en lugar de aplicaciones grandes en lo que respecta a la implementación.

Finalmente , lo que estás buscando ahora no es Angular, sino https://stenciljs.com/ . Stencil es un compilador de componentes web que también genera un DOM virtual dentro de su componente para mejorar el rendimiento de la interfaz de usuario. Echale un vistazo ;-)