O que é Frontend?

A interface com a qual você interage

Frontend é a camada da aplicação que apresenta conteúdo e permite a interação. Na web, inclui a estrutura das páginas, a aparência e o comportamento de elementos como menus e formulários. Também cuida de como a interface comunica carregamento, sucesso e falha.

Considere uma tela de cadastro. O frontend apresenta os campos, permite preenchê-los e informa o que falta antes do envio. Depois da resposta do servidor, ele pode mostrar uma confirmação ou orientar a correção de um email recusado.

O preenchimento também depende da acessibilidade dos controles. Um campo precisa ter um nome compreensível, receber foco pelo teclado e comunicar erros de forma acessível. Ao testar o cadastro sem o mouse, confira se você consegue alcançar os campos, identificar o erro e voltar ao preenchimento sem perder o que já digitou.

HTML, CSS e JavaScript

HTML descreve a estrutura e o significado dos elementos da página. Um botão, um título e um campo de formulário têm funções diferentes, e a marcação permite que o navegador reconheça essas funções. Escolher o elemento adequado também favorece tecnologias assistivas.

CSS define a apresentação, como cores, espaçamento e adaptação a diferentes larguras de tela. JavaScript pode acrescentar comportamento, como atualizar uma lista sem carregar outra página. Nem toda página precisa de JavaScript para entregar seu conteúdo ou enviar um formulário.

Uma parte do HTML pode ser produzida no servidor e chegar pronta ao navegador. A renderização no servidor não elimina a existência do frontend: a página entregue continua sendo a interface. Dependendo da arquitetura, o navegador acrescenta interatividade depois do carregamento.

Validação na tela e no servidor

Repetir uma verificação de preenchimento nos dois lados pode ser necessário. A validação do frontend orienta a interação, enquanto o servidor precisa validar o que recebe de qualquer cliente. Uma chamada feita por outro programa pode contornar completamente o formulário.

Se o perfil autenticado só pode consultar contatos, uma chamada DELETE /contatos/42 ainda chega ao backend quando outro programa a envia. Confira se a API recusa a requisição e se GET /contatos/42 continua retornando o contato. Ocultar o botão de exclusão altera a interface, mas não substitui essa verificação.

A comunicação com o backend

Quando usa uma API, o frontend segue o contrato para enviar e interpretar mensagens. Uma mudança interna no backend pode preservar a interface se mantiver esse contrato. Já a alteração de um campo obrigatório pode exigir ajustes nos dois lados.

Uma página estática também tem frontend, mesmo sem consultar uma API própria. Ela pode entregar textos e imagens preparados durante o build. A necessidade de comunicação dinâmica depende das funções oferecidas pelo produto.

Como conferir o comportamento da interface

Teste o formulário com campos válidos, campos incompletos e uma resposta de recusa do servidor. Confira se o foco e as mensagens permitem continuar pelo teclado. Simule também uma conexão lenta para observar o estado apresentado durante a espera.

Desabilitar temporariamente o botão pode evitar cliques repetidos, mas não garante que o servidor receberá uma única tentativa. Se a confirmação de um cadastro não chegar à tela, repetir o envio pode encontrar um registro já criado. O backend precisa reconhecer a repetição conforme o contrato da API, e o teste deve conferir a quantidade de registros produzidos, além da mensagem apresentada.

Aplicação na formação

Vibe Coding: Do Zero ao MVP

O frontend apresenta os campos e comunica o andamento e os resultados das ações realizadas no produto.

Conhecer a formação →