## glossário

O que é Frontend?

Frontend é a parte de um sistema que roda no dispositivo do usuário e com a qual ele interage diretamente: a interface visual, os botões, os formulários, as animações e toda a lógica que responde a cliques e digitação. É o que aparece no navegador ou na tela do celular.

A distinção com o backend é de território. O backend roda no servidor, guarda os dados e aplica as regras de negócio; o frontend roda no cliente e transforma esses dados em algo utilizável. Os dois conversam por meio de uma API.

As três tecnologias de base

HTML — define a estrutura e o significado do conteúdo: o que é título, o que é lista, o que é formulário. É também o que buscadores e leitores de tela interpretam. Veja HTML e estrutura para SEO.
CSS — controla a apresentação: cores, espaçamento, tipografia e como o layout se adapta a cada tamanho de tela. Aprofunde em linguagem de estilos CSS.
JavaScript — adiciona comportamento: reagir a eventos, buscar dados sem recarregar a página, validar entradas. Detalhes no verbete JavaScript.

Além do básico: o ecossistema moderno

Aplicações de porte raramente são escritas só com essas três. Frameworks como React, Vue e Angular organizam a interface em componentes reutilizáveis com estado próprio. TypeScript adiciona tipagem estática ao JavaScript, reduzindo uma classe inteira de erros. E ferramentas de build como Vite e Webpack transformam o código-fonte em arquivos otimizados para produção.

A mesma tarefa, com e sem framework

// JavaScript puro: você manipula o DOM
const btn = document.querySelector('#contador');
let n = 0;
btn.addEventListener('click', () => {
  n++;
  btn.textContent = 'Cliques: ' + n;
});

// React: você descreve o estado, ele atualiza a tela
function Contador() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>Cliques: {n}</button>;
}

Responsabilidades que vão além do visual

Frontend não é só "deixar bonito". A camada carrega decisões técnicas de peso:

Performance — tempo de carregamento e estabilidade visual são medidos pelos Core Web Vitals e afetam diretamente o ranqueamento no Google.
Acessibilidade — garantir que a aplicação funcione com leitor de tela, navegação por teclado e contraste adequado.
Responsividade — a mesma interface precisa funcionar de um celular pequeno a um monitor ultrawide.
Segurança — proteger contra XSS, tratar dados de entrada e nunca confiar em validação feita apenas no cliente.
Estado — manter dados consistentes entre componentes, cache e servidor conforme a aplicação cresce.

Onde renderizar: cliente ou servidor

Uma decisão central do frontend moderno é onde o HTML é gerado. Na renderização no cliente (CSR), o navegador recebe uma página vazia e monta tudo via JavaScript — simples, mas ruim para SEO e para o primeiro carregamento. Na renderização no servidor (SSR) e na geração estática (SSG), o HTML chega pronto, melhorando indexação e tempo de exibição. Frameworks como Next.js permitem escolher a estratégia por página.

## faq

Perguntas frequentes

Qual a diferença entre frontend e backend?

O frontend roda no dispositivo do usuário e cuida da interface e da interação. O backend roda no servidor e cuida de dados, regras de negócio, autenticação e integrações. Eles se comunicam por API, e a divisão permite que equipes diferentes trabalhem em paralelo.

O que é um desenvolvedor full-stack?

É quem trabalha nas duas pontas, frontend e backend. Na prática, quase todo full-stack tem mais profundidade em um dos lados — a expectativa realista é autonomia para entregar uma funcionalidade inteira, não especialização máxima em ambos.

Preciso aprender JavaScript antes de aprender React?

Sim, e a diferença é grande. React é JavaScript — conceitos como funções de alta ordem, desestruturação, promises e escopo aparecem o tempo todo. Quem pula essa base costuma travar em erros que não têm nada a ver com o React em si.