Definição
Frontend é a camada visível da aplicação, a que você enxerga e aciona na tela. Ela organiza telas, componentes, estados, validações de formulário e chamadas para serviços externos. O trabalho dessa camada começa quando o navegador abre a aplicação e termina quando a interface representa o resultado de cada operação. Enquanto o backend decide o que fazer com o conteúdo, o frontend decide como apresentar esse conteúdo e como reagir às respostas.
O que fica no frontend
Uma boa interface cuida do fluxo de interação, da leitura em diferentes telas e da navegação pelo teclado. Ela também apresenta estados de carregamento, sucesso e falha, para que você saiba o que aconteceu em cada operação. Quando um desses cuidados falha, a experiência confunde: um botão sem sinal de carregamento pode ser clicado duas vezes e enviar duas requisições iguais, por isso o estado visual precisa acompanhar cada etapa do fluxo.
Frontend
Apresenta a interface, coleta os campos e reage ao retorno das operações.
Backend
Processa a lógica, integra serviços e acessa os registros para atender a interface.
Frontend e API
O frontend não precisa conhecer a implementação interna do servidor. Ele precisa conhecer o contrato da API: endereço, método, formato dos campos e as respostas possíveis. Com esse contrato em mãos, você ajusta a interface sem alterar o backend, porque a troca de conteúdo passa sempre pelas operações publicadas. Uma mudança de campo na API exige ajuste na tela, e é no frontend que esse ajuste aparece para você.
Falha comum e como verificar
A falha mais comum é o frontend decidir pelo servidor o que é válido, repetindo a validação de negócio na tela e ignorando o retorno da API. Quando isso acontece, um campo aceito na tela pode ser recusado no backend e o erro chega tarde, depois do envio. Para verificar, abra o painel do navegador e observe a requisição e a resposta de cada operação: o frontend deve tratar o status devolvido em vez de confiar somente no estado local da tela. Quando a interface mostra sucesso sem conferir a resposta, a camada visual está escondendo a falha do servidor.
Continue pela definição de backendDúvidas frequentes
Perguntas frequentes sobre Frontend
- Frontend é apenas HTML e CSS?
- Não. HTML e CSS fazem parte da camada, mas o frontend também pode usar JavaScript, componentes, estado, acessibilidade e chamadas para APIs.
- O frontend acessa o banco de dados diretamente?
- Em uma arquitetura comum, o frontend conversa com uma API. O backend controla o acesso aos registros e devolve somente o que a interface precisa.
- Frontend roda apenas no navegador?
- Não. O navegador é o ambiente mais conhecido, mas tecnologias de frontend também podem produzir aplicativos para outros ambientes.
Para continuar
Recursos relacionados
Artigo
MDN: frontend
Define o papel da camada de interface em uma aplicação.
Abrir recursoDocumentação
MDN: JavaScript
Referência para a linguagem usada em muitas interfaces web.
Abrir recursoAplicação na formação
Vibe Coding: Do Zero ao MVP
Na Formação Vibe Coding, o frontend transforma os fluxos do produto em telas que capturam campos e mostram resultados.
Conhecer a formação
Fontes consultadas
Referências deste verbete
Este verbete ajudou você?
Obrigado pela resposta. Ela fica salva apenas neste navegador.