La arquitectura de microservicios generalmente adopta el método de diseño de separación de front-end y back-end. Como plataforma intermedia de nivel empresarial, después de completar la división de aplicaciones individuales y la construcción de microservicios, el equipo del proyecto front-end se enfrentará a varios equipos de proyectos de microservicios intermedios al mismo tiempo. Son como electricistas de mantenimiento.
Ante tantos servicios API expuestos por microservicios, ¿cómo realizar la conexión y el montaje correctos para garantizar que no haya errores? Evidentemente, esta no es una tarea fácil. Y cuando hay un cambio en el servicio, cómo notificar a todos los equipos del proyecto afectados, se cree que el costo de comunicación no es pequeño.
En consecuencia, para resolver los problemas anteriores hasta cierto punto, ¿podemos considerar primero reducir efectivamente la complejidad de la integración front-end? Primero realice la agregación front-end y el desacoplamiento back-end ; este es un tema muy interesante. Hoy hablaremos juntos sobre la idea de diseño de Micro Frontend y discutiremos los métodos de diseño e integración de front-end y back-end después de los microservicios en el medio y Taiwán.
El dilema monolítico del front-end
Una vez que las empresas tradicionales completan la transformación de la oficina intermedia, aunque el negocio de back-end ha completado la actualización de la arquitectura de microservicios, el front-end sigue siendo un modelo único y una aplicación de front-end es creada y mantenida por un equipo. Con el paso del tiempo y el desarrollo empresarial, la interfaz se volverá cada vez más inflada y difícil de mantener. Con la aplicación de las tecnologías 5G y de Internet móvil, las actividades comerciales de las empresas serán aún más móviles y en línea. En el pasado, muchas empresas desarrollaban aplicaciones independientes para diferentes negocios. ¡Pero obviamente los usuarios no quieren instalar tantas aplicaciones!
Para mejorar la experiencia del usuario y lograr operaciones unificadas, muchas empresas han comenzado a reducir e integrar aplicaciones y concentrar todas las capacidades comerciales de la empresa en una sola aplicación tanto como sea posible. Imagínese si todavía usa el patrón de diseño de interfaz única. El equipo del proyecto front-end se enfrentará a múltiples equipos de microservicios en etapa intermedia y necesitará integrar miles de servicios API, lo que requiere costos de comunicación y requisitos técnicos bastante altos. Esto va a ser absolutamente un desastre.
En comparación con las empresas de Internet, las empresas tradicionales tienen aplicaciones de canales más diversificadas, incluidas aplicaciones de tienda para personal interno, plataformas de comercio electrónico de Internet o aplicaciones móviles para clientes externos e integración API para terceros. Debido a las diferencias de canales, la interfaz será más diversa y compleja. Entonces, ¿cómo reducir eficazmente la complejidad de la integración front-end?
Del frontend monolítico al micro frontend
Para resolver el problema del front-end único, podemos aprender de la idea de diseño del microservicio e introducir el concepto de micro-front-end. Amplíe el concepto de microservicios al front-end y resuelva el problema de la lógica compleja y el front-end inflado debido al hecho de que el front-end sigue siendo un solo cuerpo después del microservicio de la plataforma intermedia.
Al diseñar el front-end, debemos seguir el principio de responsabilidad única y reutilización, y dividir las páginas del front-end de acuerdo con el modelo de dominio y los límites del microservicio. Al mismo tiempo, múltiples combinaciones de páginas que se pueden implementar de forma independiente, totalmente autónoma y débilmente acoplada , cada una de las cuales solo es responsable de los elementos de la interfaz de usuario y las funciones de una unidad de negocios específica, se denominan microfrontends.
Los microfrontends, al igual que los microservicios, esperan dividir una sola aplicación de acuerdo con las reglas y reorganizarla en múltiples microfrontends o microservicios débilmente acoplados que puedan desarrollarse, probarse, implementarse y mantenerse de forma independiente. Adaptarse a los requisitos de los rápidos cambios comerciales y el desarrollo paralelo distribuido de varios equipos.
La micropágina de front-end solo incluye los elementos de página necesarios para la operación de front-end de la unidad de negocios, es solo una pieza del rompecabezas comercial en el proceso comercial completo a nivel empresarial y no incluye navegación de páginas ni otro contenido. Además del desacoplamiento de las páginas de front-end, el micro-frontend también puede realizar la reutilización de páginas, lo que también está en línea con el concepto de servicio compartido en el medio.
Composición de unidades de negocio
Podemos referirnos al modelo de dominio y el límite del microservicio, establecer una interfaz de operación front-end correspondiente al microservicio, formar una unidad de negocios con el microservicio y proporcionar servicios externos en forma de componentes comerciales. Las unidades de negocios incluyen microfrontends y microservicios, que pueden desarrollarse, probarse, implementarse y mantenerse de forma independiente, y pueden completar algunas o todas las funciones comerciales en el modelo de dominio de manera autónoma.
Echemos un vistazo a la imagen de abajo. Un marco virtual es una unidad de negocios. Las microfrontends y microservicios se implementan de forma independiente. Se ha completado la integración de frontend y backend de microfrontends y microservicios en una unidad de negocios. Puede entender esta unidad de negocio como un componente de un dominio empresarial específico. Las unidades de negocio se pueden combinar de varias maneras para lograr diferentes objetivos comerciales.
1. Unidad de negocio única
Un micro frontend y un microservicio forman una única unidad de negocio. Los microfrontends y los microservicios implementan respectivamente las funciones del mismo modelo de dominio desde el front-end hasta el back-end.
2. Combinar unidades de negocio
Una micro interfaz y múltiples microservicios forman una unidad de negocio compuesta. El microfrontend tiene las funciones de frontend de múltiples microservicios para completar páginas y operaciones más complejas. Múltiples microservicios implementan las funciones de sus respectivos modelos de dominio y brindan servicios componibles a los microfrontends. Recuerde una cosa: el micro front-end no debe combinarse con demasiados microservicios, de lo contrario se convertirá fácilmente en un único front-end.
3. Unidad General de Negocios Compartidos
Una microfrontend y uno o más microservicios comunes de gama media se combinan en una unidad de negocio compartida común. La microfrontend compartida común coopera con otras páginas de microfrontend en forma de páginas compartidas para completar los procesos comerciales. Se comparten las microfrontends de muchos microservicios de gama media comunes, como las interfaces de microfrontend de pedidos y pagos correspondientes a microservicios como pedidos y pagos.
Las funciones de todas las unidades de negocio deben ser independientes y los límites entre las unidades de negocio deben ser claros. Las unidades de negocios deben evitar el acoplamiento entre cruces funcionales. Una vez que esto ocurra, afectará los límites de responsabilidad del equipo del proyecto y luego afectará el desarrollo, las pruebas, la implementación y la operación y mantenimiento independientes de las unidades de negocios.
Integración de microfrontends
Echemos un vistazo a la siguiente imagen: el micro-frontend está ubicado entre la página principal del front-end y el microservicio, y debe integrarse con ambos.
1. Integración del micro frontend y la página principal del frontend
La página principal de front-end es la página de inicio de nivel empresarial y la micro front-end es la página de inicio de la unidad de negocios. El micro-frontend carga dinámicamente la página de micro-frontend de una unidad de negocio específica en la página principal del front-end a través del cargador de micro-frontend de la página principal, utilizando tecnologías como el enrutamiento de páginas y la carga dinámica, para lograr el " Integración jigsaw" de la página principal del front-end y la página del micro-frontend.
Una vez completado el desarrollo, la integración y la implementación del microfrontend, el registro del microfrontend y la configuración del enrutamiento de la página se pueden completar en la página principal del frontend, y la página del microfrontend se puede cargar dinámicamente.
2. Integración de microfrontends y microservicios
Las microfrontends y los microservicios se desarrollan e implementan de forma independiente. Antes de registrar el microfrontend en la página de inicio del frontend, el microfrontend debe integrarse con el microservicio. Su método de integración no es diferente del de la separación tradicional de front-end y back-end. El microservicio publica el servicio en la puerta de enlace API y el micro frontend invoca el servicio publicado en la puerta de enlace API, es decir, completa la integración de front-end y back-end en la unidad de negocio.
Límite de responsabilidad del equipo
Cuando se adopta el método de desarrollo de unidades de negocios, las responsabilidades del equipo de proyecto de front-end y back-end y los límites de las aplicaciones serán más claros, lo que puede reducir la complejidad de la integración de front-end y back-end. Echemos un vistazo a la división de responsabilidades de los equipos de front y middle office.
El equipo del proyecto front-end se centra en la integración de la página principal de integración front-end y el micro front-end, y completa la página y la disposición del proceso del proceso principal a nivel empresarial de la página principal front-end y la carga dinámica. de la página micro-front-end para garantizar que la lógica empresarial y el proceso del proceso principal sean correctos. El proyecto front-end no solo es responsable del diseño general del estilo de página en la empresa, el flujo y control de los procesos comerciales, sino también de la realización de tecnologías front-end como la carga dinámica de páginas micro-frontend, registro de microfrontends, enrutamiento de páginas e intercambio de datos de páginas.
El equipo de proyecto de la oficina intermedia completa el desarrollo, las pruebas y la integración de los componentes de la unidad de negocios, garantiza que la lógica de negocios, las páginas y los procesos dentro de la unidad de negocios sean correctos y proporciona componentes externos de la unidad de negocios que contienen lógica de páginas y lógica de negocios.
De esta manera, el equipo del proyecto front-end solo necesita completar la integración de la página principal front-end a nivel empresarial y la unidad de negocios, y el front-end solo se enfoca en la integración entre la página principal front-end y la unidad de negocios. micropágina de inicio. De esta manera, se puede reducir la sensibilidad técnica del equipo de front-end, el costo de comunicación y la complejidad de la integración del equipo, y se puede mejorar la eficiencia de la entrega y la experiencia del usuario.
El equipo del proyecto de nivel medio se centra en la integridad y la autocontención de las funciones de la unidad de negocios, completa el desarrollo, la integración y la implementación de microservicios y microfrontends dentro de la unidad de negocios y proporciona componentes de la unidad de negocios.
De esta manera, un equipo de middle office completará la integración de microfrontends y microservicios de unidades de negocios. Las personas conocidas pueden hacer cosas familiares, lo que puede reducir los costos técnicos y de comunicación durante el proceso de integración y acelerar la eficiencia del desarrollo. .
Un estudio de caso sobre el diseño de microfrontend de seguros
Las compañías de seguros tienen muchos productos de seguros para diferentes escenarios. Debido a los diferentes escenarios comerciales, sus modelos de dominio central serán diferentes y las interfaces de front-end también serán diferentes en términos de elementos de página, reglas comerciales y procesos. Para evitar la influencia mutua y la interferencia entre productos con modelos de dominio muy diferentes, podemos agregar productos de seguros con modelos de dominio similares para completar el diseño central de gama media.
Para unificar la operación, algunos grupos aseguradores realizarán la venta de todo tipo de seguros como seguros de vida y seguros de propiedad. De esta manera, el equipo del proyecto front-end necesita utilizar una aplicación front-end para integrar los microservicios centrales de gama media de muchos productos diferentes, y la integración entre la aplicación front-end y los microservicios de gama media será más complicada. .
Si aún adopta el modelo tradicional de interfaz única, enfrentará dificultades relativamente grandes.
- La primera es la complejidad del desarrollo y diseño de la página de inicio. Tomando como ejemplo el front-end de facturación, si se utiliza una página de inicio para adaptarse a todo tipo de seguros, debido a los diferentes elementos de la página de inicio de diferentes productos, es necesario comprometerse y ser compatible. con las diferencias de todas las interfaces de productos, lo que aumentará la complejidad del desarrollo front-end y afectará la experiencia del usuario. Sin embargo, si se desarrollan diferentes interfaces para cada tipo de producto, el equipo del proyecto de front-end necesita invertir una gran cantidad de trabajo en el desarrollo y diseño de la página.
- El segundo es la complejidad de la integración de microservicios y front-end. Al integrar el front-end con los microservicios, el equipo del proyecto front-end necesita conocer los detalles de la API de todos los productos, completar la integración del front-end y los microservicios y realizar el enrutamiento del servicio API de diferentes productos de acuerdo con la página principal. proceso. Una gran cantidad de integración de servicios API y enrutamiento de servicios aumentará la complejidad de la integración del sistema y la probabilidad de errores.
- El tercero es el lanzamiento coordinado de versiones de software de front-end y back-end. Después de que hay muchas aplicaciones asociadas, una vez que se produce un ajuste importante en el servicio API de un determinado microservicio en etapa intermedia, es necesario coordinar todas las aplicaciones afectadas para completar el lanzamiento de la versión al mismo tiempo, y los lanzamientos frecuentes de versiones afectan el funcionamiento normal. de diferentes productos.
Entonces, ¿cómo utilizar una aplicación front-end para realizar las ventas de todos los productos de seguros? ¿Cómo diseñar para reducir la complejidad de la integración, realizar la integración de la interfaz front-end y desacoplar el back-end y el middle-end?
Echemos un vistazo a la imagen de abajo. Hemos aprendido del modelo de pedidos del comercio electrónico para realizar ventas basadas en pedidos de todo tipo de productos de seguros. Todos los procesos y operaciones comerciales se pueden conectar sin problemas en una página principal de inicio. Aunque el backend tiene muchas unidades de negocio (incluidos microservicios y microfrontends), los usuarios siempre sienten que están operando en una aplicación frontend.
Para realizar las ventas de todo tipo de seguros en una aplicación front-end, es necesario completar el diseño del siguiente contenido.
1. Microservicios
Los microservicios se dividen en dos categorías, uno son los microservicios centrales de etapa intermedia, que incluyen: microservicios asegurados, que implementan la lógica comercial de pedidos básicos; el otro son microservicios de propósito general de etapa intermedia, que incluyen artículos , pedidos, carritos de compras y pagos y otros microservicios para implementar una lógica comercial compartida común.
2. Micro interfaces
Cada microservicio tiene su propia página de inicio de microservicio para implementar las operaciones de la página de inicio de microservicio del modelo de dominio. El microservicio central de seguros de gama media tiene un microinterfaz de pedidos. Los microservicios de Pedidos, Artículos y Pagos tienen sus propias páginas de microfrontend.
3. Microservicios de unidades de negocio
Combinado con el micro frontend como unidad de negocio. Un equipo de middle office completa el desarrollo, la integración, las pruebas y la implementación de la unidad de negocios para garantizar que las operaciones de la página y la lógica comercial dentro de la unidad de negocios sean correctas. Por ejemplo, el microservicio de aplicación de seguros y el micro-frontal de emisión de pedidos se combinan en una unidad de negocio de aplicación de seguros, que completa de forma independiente el negocio de aplicación de seguros de productos de seguros desde el front-end hasta el back-end.
4. Página principal de inicio
La página principal de front-end es similar a un portal, e incluye navegación de página y algunas páginas compartidas comunes que residen en la página principal, como un carrito de compras. La página principal del front-end y todos los micro front-end deben tener un estilo de interfaz unificado y ajustarse a la especificación de integración del front-end unificado. De acuerdo con la lógica y las reglas comerciales correctas, cargue dinámicamente las micropáginas frontales de diferentes unidades de negocios. En conjunto, la página principal coordina las páginas micro-frontal de las unidades de negocios centrales y generales, completa las operaciones comerciales y los procesos comerciales y proporciona una interfaz de contacto de ventas para todos los tipos de seguros, incluido el catálogo de productos básicos y la lista de registros. , carrito de compras, pedido, pago y otras operaciones.
5. Descripción del proceso de negocio
Permítanme explicar brevemente el proceso comercial principal de la solicitud de seguro del usuario en la página principal del front-end.
- Paso 1: En la página principal de inicio, el usuario selecciona productos de seguro de la micropágina de inicio del catálogo de productos básicos.
- Paso 2: La página principal de front-end obtiene la dirección de enrutamiento de micro-front-end del pedido del producto a partir de los datos de configuración de la página principal de acuerdo con el producto seleccionado. Cargue la página de inicio del micro único, complete el registro y aplique el microservicio de seguros para implementar la lógica comercial de seguros y generar la aplicación de seguro en la unidad de negocios.
- Paso 3: Cargue la microinterfaz del carrito de compras para agregar el formulario de solicitud al carrito de compras.
- Paso 4: repita los pasos 1 a 3 para generar múltiples propuestas de seguro.
- Paso 5: seleccione varias aplicaciones de seguros desde la microinterfaz del carrito de compras, cargue la microinterfaz del pedido y genere el pedido.
- Paso 6: Cargue el microfrontend de pago y complete el pago.
- Paso 7: en el microservicio de solicitud de seguro, genere una póliza de seguro a partir del formulario de solicitud de seguro del pedido.
Aunque hay muchas unidades de negocio en el backend, todas las operaciones y transferencias de la página de usuario se realizan en una página principal del front-end. Al realizar ventas basadas en pedidos de todo tipo de seguros, los usuarios siempre sienten que están operando un sistema. Este método de diseño refleja bien la integración de la parte frontal y el desacoplamiento de la plataforma intermedia.
Resumir
Hoy discutimos principalmente el método de diseño de micro-frontend. Aunque los microfrontends y los microservicios también adoptan el método de diseño de separar el front-end y el back-end, dentro de la unidad de negocios, implementan la lógica empresarial del front-end y back-end respectivamente bajo el mismo modelo de dominio y proporcionan componentes. servicios externamente.
El patrón de diseño de micro-frontend y unificación empresarial puede reducir la complejidad del desarrollo e integración de aplicaciones de nivel medio, front-end y back-end a nivel empresarial, y realmente lograr la integración front-end y el desacoplamiento del extremo medio. Su principal valor y significado son los siguientes:
1. Integración front-end simple: los proyectos front-end solo necesitan centrarse en la integración de la página principal de integración front-end y el micro front-end para lograr una integración modular y un desarrollo estilo rompecabezas, reduciendo la complejidad y el costo del front-end. -finalizar la integración.
2. Responsabilidades específicas del proyecto: el proyecto de gama media completa el desarrollo de funciones lógicas de dominio de un extremo a otro desde la base de datos, microservicios de gama media hasta interfaces de micro-frontal y proporciona servicios en su conjunto en la forma de componentes empresariales. En la unidad de negocios, la integración front-end y back-end la realiza el propio equipo, lo que puede reducir el costo de comunicación y la complejidad de la integración de los equipos de desarrollo e integración.
3. Aislamiento y dependencia: las unidades de negocio están aisladas en los límites físicos, lógicos y de código, lo que reduce las dependencias entre aplicaciones. Cuando ocurre un problema, se puede localizar y reparar rápidamente, y el problema se puede controlar dentro de una unidad de negocios. Las unidades de negocio no se afectan entre sí.
4. Reducir los costos de comunicación y prueba: el equipo de nivel medio se da cuenta de la lógica de la unidad de negocios desde la página de micro front-end hasta el micro servicio de nivel medio, se da cuenta de todo el proceso y la gestión del ciclo de vida del desarrollo, las pruebas y la integración. e implementación de unidades de negocios, y reduce los costos de comunicaciones y pruebas de integración de front-end y back-end.
5. Publicación más ágil: las unidades de negocio están bien aisladas y tienen poca dependencia, y los cambios en las unidades de negocio se pueden controlar dentro de la unidad de negocio. Los equipos de proyecto pueden desarrollarse de forma independiente e iterativa a su propio ritmo, lo que permite ciclos de lanzamiento más rápidos. El lanzamiento de la versión no afectará el funcionamiento normal de otras unidades de negocio.
6. Reducir la sensibilidad técnica: el proyecto front-end se centra en la integración de la página principal del front-end y el micro front-end. Reduce la sensibilidad del equipo del proyecto inicial a la tecnología de microservicios en el medio y Taiwán. El equipo del proyecto en la etapa intermedia puede probar nuevas tecnologías y arquitecturas de manera más independiente para darse cuenta de la evolución de la arquitectura.
7. Alta reutilización: tanto los microservicios de microfrontend como los de middleend son altamente reutilizables. La microfrontend se puede cargar rápidamente en múltiples aplicaciones, y una microfrontend también se puede publicar directamente como una aplicación o un subprograma de WeChat para lograr una combinación, reutilización y liberación rápida de la interfaz de usuario flexible.