Squad Front

Appearance

Arquitetura Avançada no Front-End ​

Este guia explora padrões arquiteturais avançados utilizados para lidar com a complexidade em grandes aplicações front-end.

1. Domain-Driven Design (DDD) no Front-End ​

Embora o DDD tenha nascido no backend, seus conceitos de Bounded Contexts e Ubiquitous Language são extremamente valiosos no front-end para evitar que a lógica de negócio se espalhe desordenadamente.

  • Bounded Contexts: No nosso projeto, isso se reflete na pasta features/. Cada funcionalidade (ex: Teleconsulta, Prontuário) deve ser um contexto isolado.
  • Entities & Value Objects: Use o TypeScript para garantir que modelos de dados sejam consistentes entre as camadas de Application e Screen.
  • Domain Services: Lógicas de negócio complexas que não pertencem a um componente visual devem ser isoladas em hooks ou classes puras na camada de Feature.

2. Micro-frontends ​

Arquitetura que divide a aplicação em pequenas partes independentes, que podem ser desenvolvidas, testadas e implantadas por times diferentes.

  • Orquestrador: A aplicação principal que carrega os micro-frontends.
  • Isolamento: Uso de Module Federation ou Iframes para garantir que um erro em um módulo não derrube toda a plataforma.
  • Compartilhamento de Estado: Deve ser evitado ao máximo. Quando necessário, use eventos customizados do navegador ou o padrão Pub/Sub.

3. Arquitetura Orientada a Eventos (Pub/Sub) ​

Padrão onde componentes se comunicam através de eventos, sem que um conheça a existência do outro (desacoplamento total).

  • Event Bus: Um canal central onde eventos são publicados e escutados.
  • Quando usar: Notificações globais, sincronização entre micro-frontends ou telemetria.
  • Vantagem: Facilita a escalabilidade e a manutenção, pois você pode adicionar novos "escutadores" sem alterar quem dispara o evento.

4. Server Components (RSC) ​

Padrão que permite que o React renderize componentes no servidor, enviando apenas o HTML (e um payload leve) para o cliente.

  • Vantagem: Redução drástica do tamanho do bundle e carregamento quase instantâneo de dados pesados.
  • Impacto: Altera a forma como pensamos em "busca de dados", movendo o useQuery para o servidor em muitos casos.

5. Referências ​