Arquitetura selecionada
BFF
Backend for Frontend organiza o frontend em torno de endpoints pensados para uma interface específica. No código do cliente, costuma haver uma camada clara de data access que conversa com o BFF.
Estrutura de pastas
Navegue pelos arquivos para ver como a arquitetura aparece no código.
@Component({ templateUrl: './dashboard.page.html' })
export class DashboardPage {
data = inject(DashboardBff).summary();
}Prós
- Reduz montagem complexa de dados no browser.
- Entrega contratos mais próximos da tela.
- Ajuda quando múltiplos canais precisam de APIs diferentes.
Contras
- Adiciona uma camada backend para manter.
- Pode esconder problemas de domínio se virar apenas agregador improvisado.
- Exige alinhamento forte entre frontend e time do BFF.
Quando usar
- Experiências que agregam dados de vários serviços.
- Produtos com web, mobile e parceiros consumindo formatos diferentes.
- Telas que precisam de contratos estáveis e orientados à UI.
Exemplo real
Um dashboard executivo que combina métricas de faturamento, tickets, usuários e alertas em um único payload.
Cenário prático
A tela inicial chama `/bff/dashboard`, que já retorna cards, gráficos e alertas prontos para renderização, sem o browser agregar cinco APIs.
Como implementar
- Desenhe endpoints orientados à experiência da tela.
- Mantenha no frontend uma camada de data access específica para o BFF.
- Versione contratos entre frontend e BFF quando a tela evoluir.
Cuidado comum
Transformar o BFF em um backend genérico compartilhado por todos os canais enfraquece o propósito da abordagem.