Compartilhar via

Criando a interface do usuário composta com base em microsserviços

Dica

Esse conteúdo é um trecho do eBook, arquitetura de microsserviços do .NET para aplicativos .NET em contêineres, disponível em do .NET Docs ou como um PDF para download gratuito que pode ser lido offline.

Baixar PDF

Capa de miniatura do eBook Arquitetura de Microsserviços .NET para Aplicações .NET em Contêineres.

A arquitetura de microsserviços geralmente começa com a lógica e os dados do lado do servidor, mas, em muitos casos, a interface do usuário ainda é tratada como um monólito. No entanto, uma abordagem mais avançada, chamada micro front-ends, é projetar a interface do usuário do aplicativo com base em microsserviços também. Isso significa ter uma interface do usuário composta produzida pelos microsserviços, em vez de ter microsserviços no servidor e apenas um aplicativo cliente monolítico consumindo os microsserviços. Com essa abordagem, os microsserviços que você cria podem ser concluídos com representação lógica e visual.

A Figura 4-20 mostra a abordagem mais simples de apenas consumir microsserviços de um aplicativo cliente monolítico. É claro que você pode ter um serviço MVC ASP.NET entre a produção do HTML e do JavaScript. A figura é uma simplificação que destaca que você tem uma única interface do usuário do cliente (monolítico) consumindo os microsserviços, que se concentram apenas na lógica e nos dados e não na forma da interface do usuário (HTML e JavaScript).

Diagrama de um aplicativo de interface do usuário monolítico conectando-se a microsserviços.

Figura 4-20. Um aplicativo de interface do usuário monolítico que consome microsserviços de back-end

Em contraste, uma interface do usuário de composição é gerada precisamente e composta pelos próprios microsserviços. Alguns dos microsserviços conduzem a forma visual de áreas específicas da interface do usuário. A principal diferença é que você tem componentes de interface do usuário do cliente (classes TypeScript, por exemplo) com base em modelos, e o ViewModel da interface do usuário de modelagem de dados para esses modelos vem de cada microsserviço.

No momento da inicialização do aplicativo cliente, cada um dos componentes de interface do usuário do cliente (classes TypeScript, por exemplo) registra-se com um microsserviço de infraestrutura capaz de fornecer ViewModels para um determinado cenário. Se o microsserviço alterar a forma, a interface do usuário também será alterada.

A Figura 4-21 mostra uma versão dessa abordagem de interface do usuário composta. Essa abordagem é simplificada porque você pode ter outros microsserviços que estão agregando partes granulares baseadas em técnicas diferentes. Depende se você está criando uma abordagem da Web tradicional (ASP.NET MVC) ou um SPA (aplicativo de página única).

Diagrama de uma interface do usuário composta composta por muitos modelos de exibição.

Figura 4-21. Exemplo de um aplicativo de interface do usuário composto moldado por microsserviços de back-end

Cada um desses microsserviços de composição da interface do usuário seria semelhante a um gateway de API pequeno. Mas, nesse caso, cada um é responsável por uma pequena área de interface do usuário.

Uma abordagem de interface do usuário composta orientada por microsserviços pode ser mais desafiadora ou menor, dependendo das tecnologias de interface do usuário que você está usando. Por exemplo, você não usará as mesmas técnicas para criar um aplicativo Web tradicional que você usa para criar um SPA ou para um aplicativo móvel nativo (o que pode ser mais desafiador para essa abordagem).

O aplicativo de exemplo eShopOnContainers usa a abordagem de interface do usuário monolítica por vários motivos. Primeiro, é uma introdução a microsserviços e contêineres. Uma interface do usuário composta é mais avançada, mas também requer mais complexidade ao projetar e desenvolver a interface do usuário. Em segundo lugar, o eShopOnContainers também fornece um aplicativo móvel nativo baseado no Xamarin (sem suporte a partir de maio de 2024), o que o tornaria mais complexo no lado C# do cliente.

No entanto, recomendamos que você use as referências a seguir para saber mais sobre a interface do usuário composta com base em microsserviços.

Recursos adicionais

AnteriorPróximo