Glossário de system design de frontend

Termos para conectar interface, estado, dados, acessibilidade e desempenho.

  • RADIO: framework de entrevista de front-end system design: Requirements exploration, Architecture, Data model, Interface e Optimizations. Estrutura a decisão, mas não substitui o raciocínio sobre requisitos reais. Fonte: GreatFrontEnd Playbook.
  • Caminho crítico de renderização: sequência DOM → CSSOM → render tree → layout → paint que o navegador percorre para transformar HTML, CSS e JavaScript em pixels. CSS bloqueia renderização; script síncrono no head bloqueia o parsing do HTML. Fonte: MDN.
  • CSR — Client-Side Rendering: o servidor entrega HTML mínimo e um bundle JavaScript; a aplicação monta a UI no navegador. A primeira pintura útil depende de baixar e executar JavaScript.
  • SSR — Server-Side Rendering: o servidor gera o HTML completo a cada requisição. Reduz o tempo até conteúdo visível e ajuda SEO, ao custo de processamento por requisição.
  • SSG — Static Site Generation: páginas são pré-renderizadas no build e servidas como arquivos estáticos. É rápido e barato de servir; o conteúdo fica desatualizado até o próximo build.
  • ISR — Incremental Static Regeneration: combina SSG com regeneração em segundo plano após um TTL, sem exigir rebuild completo do site. Sacrifica frescor imediato por menor custo de servidor comparado a SSR.
  • Hidratação: processo de anexar comportamento interativo — listeners e estado — a HTML já renderizado por SSR ou SSG, reaproveitando o markup em vez de recriá-lo no cliente.
  • Core Web Vitals: métricas de campo definidas pelo Google: LCP (carregamento), CLS (estabilidade) e INP (responsividade, sucessora do FID). Medidas preferencialmente via Chrome UX Report. Fonte: web.dev.
  • LCP — Largest Contentful Paint: tempo até o maior elemento de conteúdo visível ser renderizado na viewport.
  • CLS — Cumulative Layout Shift: soma de deslocamentos inesperados de layout durante a vida da página.
  • INP — Interaction to Next Paint: latência entre uma interação e a próxima pintura que reflete seu resultado.
  • Module Federation: recurso do Webpack 5+ que permite a builds independentes expor e consumir código entre si em tempo de execução; é uma base técnica comum para micro-frontends. Fonte: webpack.js.org.
  • Micro-frontend: padrão em que partes independentes de uma aplicação são desenvolvidas, testadas e implantadas por equipes diferentes, compondo-se em uma experiência única no build ou em execução.
  • Estado de servidor vs. estado local: estado de servidor é uma cópia em cache de dados cuja fonte de verdade vive em outro lugar e exige invalidação ou revalidação; estado local pertence à sessão de UI corrente.
  • Cache HTTP: contrato normativo — Cache-Control, validadores e revalidação condicional — que rege quando navegador ou CDN pode reutilizar uma resposta sem ir à origem. Fonte: RFC 9111.
  • CSP — Content Security Policy: cabeçalho HTTP que declara de onde um documento pode carregar ou executar recursos, servindo como defesa em profundidade contra XSS. Fonte: W3C CSP Level 3.
  • XSS — Cross-Site Scripting: injeção de script não autorizado que é executado no contexto de uma origem confiável. A prevenção primária é escapar ou sanitizar a saída de acordo com o contexto.
  • WCAG: recomendação normativa do W3C com critérios de sucesso verificáveis de acessibilidade, organizada pelos princípios perceptível, operável, compreensível e robusto. Fonte: W3C WCAG 2.2.
  • RUM — Real User Monitoring: coleta de métricas de performance e erros a partir de pessoas usuárias reais em produção, em contraste com testes de laboratório.
  • Coesão: o quanto o conteúdo de um módulo existe para resolver o mesmo problema de negócio. Alta coesão é desejável. Fonte: Wikipédia — Coupling (computer programming).
  • Acoplamento: o quanto um módulo depende de outros módulos (ou é dependido por eles). Baixo acoplamento é desejável, pois permite mudar um módulo sem efeitos colaterais nos demais.
  • Screaming architecture: princípio segundo o qual a estrutura de mais alto nível de um projeto deve comunicar o domínio de negócio (ex.: checkout, catálogo), não o framework usado. Fonte: Robert C. Martin, "Screaming Architecture".
  • Colocation: manter fisicamente próximos os arquivos que costumam mudar juntos (por feature ou rota), em vez de agrupá-los por tipo técnico. Fonte: React — FAQ de estrutura de arquivos.
  • Feature-Sliced Design (FSD): metodologia que padroniza a organização de front-end em fatias de funcionalidade de negócio, com convenções e ferramentas próprias para evitar violação de camada. Fonte: feature-sliced.design.