Squad Front

Appearance

SoC (Separation of Concerns) ​

A Separação de Preocupações (SoC) é o princípio arquitetural mais importante do nosso projeto. Ele estabelece que o sistema deve ser dividido em seções distintas, onde cada uma aborda uma "preocupação" específica.

1. Por que usamos? ​

Dividir o software em partes com responsabilidades claras permite:

  • Testabilidade: Podemos testar a lógica de negócio sem precisar renderizar a interface.
  • Manutenibilidade: Se a API mudar, alteramos apenas a Camada de Aplicação.
  • Escalabilidade: Diferentes desenvolvedores podem atuar em camadas diferentes simultaneamente.

2. As Camadas na Prática ​

Aplicamos o SoC através de três camadas principais. Imagine o fluxo de exibir uma lista de pacientes:

A. Camada de Aplicação (Infraestrutura) ​

Preocupação: Como obter os dados brutos?

  • O que faz: Executa a chamada HTTP, lida com headers e erros de rede.
  • Exemplo: fetchPatientsAction() que retorna um JSON puro.

B. Camada de Funcionalidade (Lógica/Domínio) ​

Preocupação: O que esses dados significam para o negócio?

  • O que faz: Transforma o JSON em instâncias de Classes de Domínio, filtra dados irrelevantes e gerencia o cache.
  • Exemplo: Um Hook usePatientsList() que usa TanStack Query para gerenciar o estado dos dados.

C. Camada de Tela (Interface) ​

Preocupação: Como mostrar isso para o usuário?

  • O que faz: Lida com Loading, Erro, Layout e interações de clique.
  • Exemplo: Pacientes.screen.tsx que recebe a lista e mapeia para componentes do Design System.

3. Exemplo: Formatação de Preço ​

❌ Sem SoC (Misturado/Acoplado) ​

tsx
function PriceDisplay() {
  const [data, setData] = useState();
  useEffect(() => { 
    axios.get('/api/price').then(res => setData(res.data)) 
  }, []);

  // Lógica de negócio e UI misturadas
  const formatted = data ? `R$ ${data.value.toFixed(2)}` : '...';
  return <div>{formatted}</div>;
}

✅ Com SoC (Desacoplado) ​

  1. Application: getPriceAction apenas busca { value: 10.5 }.
  2. Feature: usePrice fornece o valor numérico puro.
  3. Screen: PriceScreen usa um utilitário formatMoney(value) para renderizar.

4. A Regra de Ouro ​

Uma camada superior pode conhecer a inferior, mas a inferior nunca deve conhecer a superior.

  • A Tela conhece a Feature (consome o hook).
  • A Feature conhece a Aplicação (chama a action).
  • A Aplicação não conhece ninguém (é puro utilitário técnico).

Para um mergulho detalhado em cada camada, consulte a seção de Arquitetura.