Arquitetura Limpa no Frontend

O Problema: O Componente "Faz-Tudo"

Você já sentiu que mudar um simples campo no JSON da API quebra metade dos seus componentes React ou Vue? Isso acontece porque a maioria dos projetos frontend sofre de acoplamento extremo. Tratamos a UI como o centro do universo, misturando regras de negócio, formatação de dados e chamadas HTTP dentro de um mesmo useEffect ou service gigante.

A Arquitetura Limpa (Clean Architecture) no frontend não é sobre complicar o simples, mas sobre proteger o que realmente importa: a Lógica de Negócio.

As Camadas: Separando as Preocupações

Imagine seu app como uma cebola. Se você trocar a camada externa, o núcleo permanece intacto.

1. Domínio (Entities): O coração. Modelos de dados e regras puras. Se você tem um e-commerce, o cálculo de desconto do carrinho vive aqui. Não importa se os dados vêm do Firebase ou de um JSON local.
2. Aplicação (Use Cases): Onde a mágica acontece. É o orquestrador que diz: "Busque o usuário, valide o saldo e finalize a compra". Ele não sabe como a API funciona, apenas o que deve ser feito.
3. Adaptadores (Gateways/Presenters): O tradutor. Aqui transformamos o JSON sujo da API em Entidades limpas para o nosso Domínio. É aqui que o Axios ou o Fetch são configurados.
4. Frameworks & Drivers (UI): A camada mais externa e descartável. React, Vue, Svelte ou Angular. Eles apenas exibem dados e capturam eventos.

A Regra de Ouro: A Dependência Única

A regra é simples: As camadas internas nunca sabem nada sobre as externas.

Seu código de domínio não deve importar nada do React. Se você decidir trocar o Axios pelo Fetch, ou o Redux pelo Zustand, apenas a camada de Adaptadores muda. O resto do sistema nem percebe a diferença.

Na Prática: Desacoplando o Domínio

Veja como isolar uma regra de negócio simples em TypeScript:

// domain/entities/Cart.ts
export interface Product {
  id: string;
  price: number;
}

export const calculateTotal = (products: Product[]): number => {
  return products.reduce((acc, curr) => acc + curr.price, 0);
};

No seu componente React, você apenas consome essa lógica. Se amanhã a regra de cálculo de total mudar para incluir impostos, você altera em um único lugar no domínio, e não em dez telas diferentes.

Por que se dar ao trabalho?

• Testabilidade: Você testa sua lógica de negócio com Vitest/Jest sem precisar renderizar componentes ou simular o DOM.
• Flexibilidade: Trocar de biblioteca de estado ou de UI torna-se uma tarefa de refatoração, não um rebuild total.
• Resiliência: Mudanças no backend param de causar efeitos cascata desastrosos no seu frontend.

Conclusão Acionável

Não tente refatorar seu projeto inteiro hoje. Comece pequeno:

1. Identifique uma Regra de Negócio: Tire um cálculo ou uma validação de dentro de um componente.
2. Crie uma pasta domain: Coloque essa lógica lá como uma função pura.
3. Crie um Adaptador: Transforme a resposta da sua API em um formato que faça sentido para o seu app antes que ela chegue ao componente.

Arquitetura Limpa é sobre liberdade. A liberdade de decidir que o framework é apenas um detalhe de implementação, não o dono do seu código.