Composição de páginas e visualizações com microfront-ends

Você pode compor visualizações de um aplicativo com composição do lado do cliente, composição do lado da borda e composição do lado do servidor. Os padrões de composição têm características diferentes em termos de habilidades de equipe necessárias, tolerância a falhas, desempenho e comportamento do cache.

O diagrama a seguir mostra como a composição acontece nas camadas do lado do cliente, do lado da borda e do lado do servidor de uma arquitetura de microfrontend.

As camadas do lado do cliente, do lado da borda e do lado do servidor são discutidas nas seções a seguir.

Composição do cliente

Carregue e anexe dinamicamente microfrontends como fragmentos do Document Object Model (DOM) no cliente (navegador ou visualização da web móvel). Os artefatos de microfront-end, como JavaScript arquivos CSS, podem ser carregados de redes de entrega de conteúdo (CDNs) para reduzir a latência. A composição do lado do cliente requer o seguinte:

• Uma equipe para possuir e manter um aplicativo shell ou uma estrutura de microfront-end para permitir a descoberta, o carregamento e a renderização de componentes de microfront-end em tempo de execução no navegador

• Altos níveis de habilidade em tecnologias de front-end, como HTML, CSS e JavaScript compreensão aprofundada dos ambientes de navegador

• Otimização da quantidade de JavaScript carga em uma página e disciplina para evitar conflitos de namespaces globais

O diagrama a seguir mostra um exemplo de AWS arquitetura para composição do lado do cliente sem servidor.

A composição do lado do cliente acontece no ambiente do navegador por meio de um aplicativo shell. O diagrama mostra os seguintes detalhes:

1. Depois que o aplicativo shell é carregado, ele faz uma solicitação inicial à Amazon CloudFront para descobrir os microfront-ends a serem carregados por meio de um endpoint de manifesto.

2. Os manifestos contêm informações sobre cada microfrontend (por exemplo, nome, URL, versão e comportamento alternativo). Os manifestos são atendidos pelo serviço de descoberta de microfront-ends. No diagrama, esse serviço de descoberta é representado pelo Amazon API Gateway, uma AWS Lambda função e pelo Amazon DynamoDB. O aplicativo shell usa as informações do manifesto para solicitar microfront-ends individuais para compor a página em um determinado layout.

3. Cada pacote de microfront-end é composto por arquivos estáticos (como JavaScript CSS e HTML). Os arquivos são hospedados em um bucket do Amazon Simple Storage Service (Amazon S3) e servidos por meio dele. CloudFront

4. As equipes podem implantar novas versões de seus microfront-ends e atualizar as informações do manifesto usando pipelines de implantação de sua propriedade.

Composição lateral

Use técnicas de transclusão, como Edge Side Includes (ESI) ou Server Side Includes (SSI) suportadas por algumas CDNs e proxies na frente dos servidores de origem para compor uma página antes de enviá-la pela rede aos clientes. O ESI exige o seguinte:

• Uma CDN com capacidade ESI ou uma implantação de proxy na frente dos microfront-ends do lado do servidor. Implementações de proxy como HAProxy, Varnish e NGINX oferecem suporte a SSI.

• Uma compreensão do uso e das limitações das implementações de ESI e SSI.

As equipes que iniciam novos aplicativos normalmente não escolhem a composição lateral para seu padrão de composição. No entanto, esse padrão pode fornecer um caminho para aplicativos legados que dependem da transclusão.

Composição do servidor

Use servidores de origem para compor páginas antes que elas sejam armazenadas em cache na borda. Isso pode ser feito com tecnologias tradicionais, como PHP, Jakarta Server Pages (JSP) ou bibliotecas de modelos, para compor as páginas incluindo fragmentos de microfrontends. Você também pode usar JavaScript estruturas, como Next.js, em execução no servidor para compor páginas no servidor com renderização do lado do servidor (SSR).

Depois que as páginas são renderizadas no servidor, elas podem ser armazenadas em cache em CDNs para reduzir a latência. Quando novas versões de microfront-ends são implantadas, as páginas devem ser renderizadas novamente e o cache deve ser atualizado para fornecer as versões mais recentes aos clientes.

A composição do lado do servidor requer uma compreensão profunda do ambiente do servidor para estabelecer padrões de implantação, descoberta de microfront-ends do lado do servidor e gerenciamento de cache.

O diagrama a seguir mostra a composição do lado do servidor.

O diagrama inclui os seguintes componentes e processos:

1. A Amazon CloudFront fornece um ponto de entrada exclusivo para o aplicativo. A distribuição tem duas origens: a primeira para arquivos estáticos e a segunda para o compositor de interface do usuário.

2. Os arquivos estáticos são hospedados em um bucket do Amazon S3. Eles são consumidos pelo navegador e pelo compositor de interface do usuário para modelos HTML.

3. O compositor de interface do usuário é executado em um cluster de contêineres em AWS Fargate. Com uma solução em contêineres, você pode usar recursos de streaming e renderização multiencadeada, se necessário.

4. O Parameter Store, um recurso do AWS Systems Manager, é usado como um sistema básico de descoberta de microfront-ends. Esse recurso fornece um armazenamento de valores-chave usado pelo compositor de interface do usuário para recuperar os endpoints de microfront-end a serem consumidos.

5. O microfrontend de notificações armazena o JavaScript pacote otimizado no bucket do S3. Isso é renderizado no cliente porque ele deve reagir às interações do usuário.

6. O microfrontend de avaliações é composto por uma função Lambda, e as avaliações dos usuários são armazenadas no DynamoDB. O microfrontend de avaliações é totalmente renderizado no lado do servidor e gera um fragmento HTML.

7. O microfrontend de detalhes do produto é um micro-frontend de baixo código que usa. AWS Step Functions O Express Workflow pode ser chamado de forma síncrona e contém a lógica para renderizar o fragmento HTML e uma camada de cache.

Para obter mais informações sobre a composição do lado do servidor, consulte a postagem do blog Microfrontends de renderização do lado do servidor — a arquitetura.