Compartir a través de

Creación de una interfaz de usuario compuesta basada en microservicios

Sugerencia

Este contenido es un extracto del libro electrónico, ".NET Microservices Architecture for Containerized .NET Applications" (Arquitectura de microservicios de .NET para aplicaciones de .NET contenedorizadas), disponible en Documentación de .NET o como un PDF descargable y gratuito que se puede leer sin conexión.

Descargar PDF

Miniatura de la portada del libro electrónico 'Arquitectura de microservicios de .NET para aplicaciones .NET contenedorizadas'.

La arquitectura de microservicios a menudo comienza con el control de datos y la lógica del lado servidor, pero, en muchos casos, la interfaz de usuario todavía se controla como un monolito. Sin embargo, un enfoque más avanzado, denominado micro front-end, es diseñar también la interfaz de usuario de la aplicación en función de los microservicios. Esto significa tener una interfaz de usuario compuesta producida por los microservicios, en lugar de tener microservicios en el servidor y simplemente una aplicación cliente monolítica que consume los microservicios. Con este enfoque, los microservicios que construyes pueden estar completos tanto con la lógica como con la representación visual.

En la figura 4-20 se muestra el enfoque más sencillo de consumir solo microservicios de una aplicación cliente monolítica. Por supuesto, podría tener un servicio ASP.NET MVC entre la producción de HTML y JavaScript. La ilustración es una simplificación que resalta que tiene una sola interfaz de usuario cliente (monolítica) que consume los microservicios, que solo se centran en la lógica y los datos y no en la forma de la interfaz de usuario (HTML y JavaScript).

Diagrama de una aplicación de interfaz de usuario monolítica que se conecta a microservicios.

Figura 4-20. Una aplicación monolítica de interfaz de usuario que consume microservicios de fondo

Por el contrario, la interfaz de usuario compuesta se genera y se compone precisamente por los microservicios. Algunos de los microservicios impulsan la forma visual de áreas específicas de la interfaz de usuario. La diferencia clave es que tiene componentes de la interfaz de usuario del cliente (clases TypeScript, por ejemplo) basados en plantillas, y el modelo de vista que da forma a los datos para esas plantillas es proporcionado por cada microservicio.

En el momento de inicio de la aplicación cliente, cada uno de los componentes de la interfaz de usuario de cliente (clases TypeScript, por ejemplo) se registra con un microservicio de infraestructura capaz de proporcionar ViewModels para un escenario determinado. Si el microservicio cambia la forma, la interfaz de usuario también cambia.

En la figura 4-21 se muestra una versión de este enfoque de interfaz de usuario compuesta. Este enfoque se simplifica porque es posible que tenga otros microservicios que agregan partes pormenorizadas basadas en distintas técnicas. Depende de si va a crear un enfoque web tradicional (ASP.NET MVC) o un SPA (aplicación de página única).

Diagrama de una interfaz de usuario compuesta formada por muchos modelos de vista.

Figura 4-21. Ejemplo de una aplicación compuesta de UI modelada por microservicios de back-end

Cada uno de esos microservicios de composición de la interfaz de usuario sería similar a una puerta de enlace de API pequeña. Pero en este caso, cada uno es responsable de un área de interfaz de usuario pequeña.

Un enfoque de interfaz de usuario compuesto controlado por microservicios puede ser más difícil o menos, en función de las tecnologías de interfaz de usuario que use. Por ejemplo, no usará las mismas técnicas para crear una aplicación web tradicional que usará para desarrollar una SPA o para una aplicación móvil nativa, lo cual puede ser más desafiante con este enfoque.

La aplicación de ejemplo eShopOnContainers usa el enfoque de interfaz de usuario monolítica por varias razones. En primer lugar, es una introducción a los microservicios y contenedores. Una interfaz de usuario compuesta es más avanzada, pero también requiere una mayor complejidad al diseñar y desarrollar la interfaz de usuario. En segundo lugar, eShopOnContainers también proporciona una aplicación móvil nativa basada en Xamarin (no compatible a partir de mayo de 2024), lo que lo haría más complejo en el lado cliente de C#.

Sin embargo, le recomendamos que use las siguientes referencias para obtener más información sobre la interfaz de usuario compuesta basada en microservicios.

Recursos adicionales

Siguiente anterior