Criando a interface do usuário composta baseada em microsserviçosCreating composite UI based on microservices

A arquitetura de microserviços geralmente começa com a lógica e os dados de manipulação do lado do servidor, mas, em muitos casos, a interface do usuário ainda é tratada como uma monolítica.Microservices architecture often starts with the server-side handling data and logic, but, in many cases, the UI is still handled as a monolith. No entanto, uma abordagem mais avançada, chamada de micro front-ends, é criar a interface do usuário do aplicativo com base em microserviços também.However, a more advanced approach, called micro frontends, is to design your application UI based on microservices as well. Isso significa ter uma interface do usuário de composição produzida pelos microsserviços, em vez de ter microsserviços no servidor e apenas um aplicativo cliente monolítico consumindo os microsserviços.That means having a composite UI produced by the microservices, instead of having microservices on the server and just a monolithic client app consuming the microservices. Com essa abordagem, os microsserviços que você criar poderão estar completos com lógica e representação visual.With this approach, the microservices you build can be complete with both logic and visual representation.

A Figura 4-20 mostra a abordagem mais simples de apenas consumir microsserviços de um aplicativo cliente monolítico.Figure 4-20 shows the simpler approach of just consuming microservices from a monolithic client application. Obviamente, é possível ter um serviço MVC ASP.NET no meio termo produzindo o HTML e o JavaScript.Of course, you could have an ASP.NET MVC service in between producing the HTML and JavaScript. A figura é uma simplificação que destaca que você tem uma única interface do usuário do cliente (monolítica) consumindo microsserviços, que se concentram apenas em lógica e nos dados, e não na forma da interface do usuário (HTML e JavaScript).The figure is a simplification that highlights that you have a single (monolithic) client UI consuming the microservices, which just focus on logic and data and not on the UI shape (HTML and JavaScript).

Diagrama de um aplicativo de interface do usuário monolítico conectando-se aos microservices.

Figura 4-20.Figure 4-20. Um aplicativo de interface do usuário monolítico consumindo microsserviços de back-endA monolithic UI application consuming back-end microservices

Em contraste, uma interface do usuário de composição é gerada precisamente e composta pelos próprios microsserviços.In contrast, a composite UI is precisely generated and composed by the microservices themselves. Alguns do microsserviços promovem a forma visual de áreas específicas da interface do usuário.Some of the microservices drive the visual shape of specific areas of the UI. A principal diferença é que você tem componentes de interface do usuário do cliente (classes TypeScript, por exemplo) com base em modelos, sendo que o ViewModel da interface do usuário de modelagem de dados para esses modelos é obtido de cada microsserviço.The key difference is that you have client UI components (TypeScript classes, for example) based on templates, and the data-shaping-UI ViewModel for those templates comes from each microservice.

Em tempo de inicialização do aplicativo cliente, cada um dos componentes de interface do usuário do cliente (classes TypeScript, por exemplo) se registra com um microsserviço de infraestrutura capaz de fornecer ViewModels para um determinado cenário.At client application start-up time, each of the client UI components (TypeScript classes, for example) registers itself with an infrastructure microservice capable of providing ViewModels for a given scenario. Se o microsserviço alterar a forma, a interface do usuário também será alterada.If the microservice changes the shape, the UI changes also.

A Figura 4-21 mostra uma versão dessa abordagem de interface do usuário de composição.Figure 4-21 shows a version of this composite UI approach. Isso é simplificado porque você pode ter outros microsserviços que estão agregando partes granulares com base em diferentes técnicas.This is simplified because you might have other microservices that are aggregating granular parts that are based on different techniques. Isso depende se você está criando uma abordagem tradicional da Web (ASP.NET MVC) ou um SPA (Aplicativo de Página Única).It depends on whether you're building a traditional web approach (ASP.NET MVC) or an SPA (Single Page Application).

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

Figura 4-21.Figure 4-21. Exemplo de um aplicativo de interface do usuário de composição formatado por microsserviços de back-endExample of a composite UI application shaped by back-end microservices

Cada um desses microsserviços de composição de interface do usuário seria semelhante a um Gateway de API pequeno.Each of those UI composition microservices would be similar to a small API Gateway. Mas, nesse caso, cada uma é responsável por uma pequena área da interface do usuário.But in this case, each one is responsible for a small UI area.

Uma abordagem de interface do usuário composta que é controlada por microsserviços pode ser mais desafiadora ou menos, dependendo de quais tecnologias de interface do usuário estão sendo usadas.A composite UI approach that's driven by microservices can be more challenging or less so, depending on what UI technologies you're using. 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 o aplicativo móvel nativo (como acontece durante o desenvolvimento de aplicativos Xamarin, que podem ser mais desafiadores para essa abordagem).For instance, you won't use the same techniques for building a traditional web application that you use for building an SPA or for native mobile app (as when developing Xamarin apps, which can be more challenging for this approach).

O aplicativo de exemplo eShopOnContainers usa a abordagem de interface do usuário monolítica por vários motivos.The eShopOnContainers sample application uses the monolithic UI approach for multiple reasons. Primeiro, é uma introdução a microsserviços e contêineres.First, it's an introduction to microservices and containers. Uma interface do usuário de composição é mais avançada, mas também requer mais complexidade ao criar e desenvolver a interface do usuário.A composite UI is more advanced but also requires further complexity when designing and developing the UI. Em segundo lugar, o eShopOnContainers também oferece um aplicativo móvel nativo baseado no Xamarin, que tornaria isso mais complexo no lado C# do cliente.Second, eShopOnContainers also provides a native mobile app based on Xamarin, which would make it more complex on the client C# side.

No entanto, recomendamos que você use as seguintes referências para saber mais sobre a interface do usuário de composição com base em microsserviços.However, we encourage you to use the following references to learn more about composite UI based on microservices.

Recursos adicionaisAdditional resources