Squad Front

Appearance

BFF (Backend For Frontend) ​

O padrão BFF consiste na criação de servidores intermediários que atendem especificamente às necessidades de uma interface de usuário (Front-end). Ele atua como uma camada de tradução e agregação.

1. O Problema: Overfetching e Múltiplas Chamadas ​

Em arquiteturas de microserviços, é comum que uma tela de "Detalhes do Paciente" precise de:

  1. Dados Cadastrais (API de Usuários)
  2. Histórico de Consultas (API de Agendamento)
  3. Laudos Recentes (API de Telediagnóstico)

❌ Sem BFF (O Front sofre) ​

O Front-end faz 3 chamadas HTTP. Se uma falhar, a tela fica inconsistente. O Front precisa fazer o "merge" desses objetos, tratando datas em formatos diferentes e IDs redundantes.

typescript
// No Front-end (complexo e lento)
const user = await fetchUser(id);
const appointments = await fetchAppointments(user.id);
const reports = await fetchReports(user.patientId);

const screenData = {
  name: user.fullName,
  lastAppointment: appointments[0].date,
  hasPendingReport: reports.some(r => r.status === 'PENDING')
};

2. A Solução: BFF (O Front recebe tudo pronto) ​

O BFF faz as chamadas pesadas no servidor (rede interna rápida), agrupa tudo e entrega um único JSON otimizado para a tela.

✅ Com BFF (O Front apenas renderiza) ​

typescript
// No Front-end (Simples e performático)
const screenData = await fetchPatientDashboard(id);

// O JSON já vem assim:
// {
//   "name": "João Silva",
//   "lastAppointment": "2023-10-25",
//   "hasPendingReport": true
// }

3. Benefícios Práticos ​

A. Transformação de Dados ​

O BFF pode formatar valores (ex: moedas, datas) e traduzir Enums do Backend para labels amigáveis, evitando que o Front-end tenha dicionários de tradução gigantes.

B. Segurança e Abstração ​

Podemos esconder campos sensíveis ou IDs de banco de dados internos, enviando para o Front apenas o necessário.

C. Redução de Payload ​

Se o Backend retorna um objeto com 50 campos, mas a tela usa apenas 5, o BFF filtra esses campos, economizando banda do usuário (especialmente importante em conexões 3G/4G).

4. Como identificar a necessidade de um BFF? ​

Considere solicitar um endpoint no BFF quando:

  1. Uma tela precisa de dados de múltiplas fontes/APIs.
  2. O JSON retornado pela API é muito grande e 80% dos campos não são usados.
  3. Você está escrevendo muita lógica de transformação de dados (filtros, agrupamentos) na camada de Feature ou Application.

Exemplo de Fluxo ​

Usuário -> Front-end -> BFF -> [Microserviço A, Microserviço B, Microserviço C]

Ao adotar o BFF, nossas Actions na camada de Aplicação tornam-se meros passadores de dados, focando apenas na execução técnica e tratamento de erros globais.