Pular para o conteúdo
thiagoetipadrões

Contatos

apps/architecture/micro-frontends

035 · Arquiteturas de Alto Nível (Macro-Architecture) · ≈ 6 min de estudo

Micro-Frontends

Cada time entrega uma fatia vertical do produto — o fragmento de tela e o backend dele — com deploy próprio. Um shell compõe a página a partir dos fragmentos, e uma fatia fora do ar vira um aviso no lugar dela, sem derrubar o resto. Use quando vários times precisam evoluir partes da mesma tela sem coordenar releases.

passos
6
arquivos
5
testes
0
tecnologias
5
Infraestrutura realTypeScriptBunElysiaNATSDocker
CenárioRelaçõesComparar
Baixar cartão

Cenário

Banco digital com a tela da conta montada por três times: extrato (time de contas), PIX (time de pagamentos) e investimentos (time de wealth). O PIX enviado aparece no extrato sem que o time de contas chame o backend do PIX. Quando o serviço de investimentos cai, o cliente continua vendo saldo e fazendo PIX.

Planta

Sequência
11/11
par[fragmentos em paralelo, cada um com timeout]GET /accounts/CC-11GET /fragment2GET /fragment3GET /fragment4fora do ar ou lento5pagina com fallback no lugar de investimentos6POST /pix7publish mfe.pix.sent8evento consumido9GET /accounts/CC-110extrato ja mostra o PIX11ClienteShellMFE Extrato (time contas)MFE PIX (time pagamentos)MFE Investimentos (time wealth)NATS JetStream
11

11 passos — reproduza para seguir o fluxo

Como funciona

6 passos

Cada time entrega sua fatia da UI.

Esconde cada passo: lembre antes de tocar para revelar.

Vocabulário compartilhado

AbortSignal.timeout+4
msgID+2
  1. 01

    Cada micro-frontend é um servidor Elysia próprio que devolve um fragmento <section data-mfe="nome" data-version="x"> — o contrato de marcação com o shell

  2. 02

    O shell busca os fragmentos em paralelo, cada um com AbortSignal.timeout; erro, 5xx, timeout ou conexão recusada viram fallback e entram no cabeçalho x-mfe-unavailable

  3. 03

    O custo da página é o do fragmento mais lento limitado pelo timeout, nunca a soma

  4. 04

    O backend do PIX valida o limite e publica mfe.pix.sent no JetStream (msgID = id do PIX barra reenvio duplicado)

  5. 05

    O backend do extrato reconstrói o extrato relendo o stream desde o início a cada boot — instância nova ou reiniciada vê também o PIX enviado enquanto estava fora

  6. 06

    Evento fora do contrato (schemaPixSent) é ignorado; o extrato só mostra o que consegue validar

Trade-offs

O que se ganha, o que se paga

4 vantagenscada ganho tem um preço4 custos

Vantagens

  • Deploy independente por time e por fatia da tela

  • Falha de uma fatia degrada só aquele trecho da página

  • Comunicação entre times por evento versionado, sem chamada direta

  • Tecnologia escolhida por time

Custos

  • Mais servidores, pipelines e versões a operar

  • Consistência visual exige design system compartilhado

  • Extrato fica eventualmente consistente com o PIX

  • Payload e latência maiores que uma aplicação única

apps/architecture/micro-frontends

5 arquivos

src/

  • shell.tsplataforma
  • mfe_statement.tstime de contas
  • mfe_pix.tstime de pagamentos
  • mfe_investments.tstime de wealth
  • contract_mfe.tscompartilhado

Executar · com Docker

  1. ./docker.sh up# sobe NATS
  2. cp .env.example .env# variáveis de ambiente
  3. bun install# dependências
  4. bun run demo# roda o cenário
  5. bun run test# integração contra o serviço real
Requisitos
BunDocker
Sobe junto
NATS

Relações

Onde ele se encaixa

Mapa
  1. Micro-frontends
  • Combina com4

Por que se relacionam

Combina com

Teste rápido

Qual destes combina com Micro-frontends?

Próximo projeto · Arquiteturas de Alto Nível (Macro-Architecture)SOA (Arquitetura Orientada a Serviços)
Esc

↑ ↓ navegarEnter abrir191 resultados