Frontend
A camada onde vive a interface do usuário, a interação com o cliente e o consumo inicial do sistema.
O que é esta camada?
O frontend é o ponto de contato direto com o usuário. Aqui são construídos:
- telas
- componentes visuais
- formulários
- navegação
- gerenciamento de estado
- feedback visual
- integração com APIs
Seu propósito não é conter a lógica central do negócio, mas oferecer uma experiência clara e utilizável sobre a funcionalidade do sistema.
Responsabilidades principais
Renderizar a interface
Mostrar informações e permitir que o usuário interaja com o sistema.
Gerenciar estado de UI
Gerenciar filtros, formulários, seleções, loading, erros e outros estados da experiência.
Validação básica do lado do cliente
Ajudar o usuário com validações antecipadas, sem substituir as validações reais do backend.
Consumir APIs
Enviar requests ao sistema por meio do API Gateway ou do BFF.
Gerenciar a experiência
Mensagens, loaders, notificações, etapas de processos e resposta visual diante de erros.
O que o frontend não deveria fazer
Não deveria conter regras críticas do negócio
Pode ajudar com validações de experiência, mas a verdade do negócio deve permanecer no backend.
Não deveria conhecer detalhes internos demais
Se o frontend precisar conhecer todos os microsserviços, a arquitetura se torna frágil e difícil de manter.
Não deveria orquestrar processos complexos
Para isso existem camadas como o BFF ou os serviços de domínio.
Relação com outras camadas
Normalmente, o frontend não deveria falar diretamente com todos os microsserviços. Sua relação ideal é:
- frontend → API Gateway
- gateway → BFF
- BFF → microsserviços
Isso permite manter uma experiência mais estável, mesmo que internamente a arquitetura mude.
Estado local e global
Em aplicações modernas, o frontend costuma gerenciar dois tipos de estado.
Estado local
Pertence a um componente ou view específica. Por exemplo:
- se um modal está aberto
- o valor atual de um input
- um toggle visual
Estado global
É compartilhado entre várias partes da aplicação. Por exemplo:
- usuário autenticado
- tema visual
- carrinho
- filtros persistentes
- dados de sessão
Entender essa diferença ajuda a não superdimensionar o gerenciamento de estado.
Por que não colocar lógica demais aqui?
Porque o frontend:
- muda rápido
- se adapta às necessidades de tela
- está mais exposto a refactors de UX
- não deve se tornar o lugar onde se decide a verdade do sistema
A lógica de negócio importante deve ficar protegida no backend ou nos serviços de domínio.
Tecnologias comuns
Dependendo do stack, esta camada pode incluir:
- React, Vue ou Angular
- TypeScript
- state management como Redux, Zustand ou Pinia
- bibliotecas de formulários
- clientes HTTP ou GraphQL
- ferramentas de build como Vite
Exemplo prático
Imagine a tela de um catálogo.
O frontend:
- renderiza filtros
- exibe produtos
- permite paginar
- mostra estados de carregamento
- envia a requisição ao backend
Mas não decide:
- se um produto é realmente válido
- se o estoque pode ser reservado
- se um pedido pode ser confirmado
Isso pertence ao domínio.
Resumo
O frontend é responsável pela experiência do usuário, pela apresentação e pela interação. Deve ser uma camada clara e eficiente, mas não o lugar onde se concentram as regras principais do negócio.