Conceitos técnicos
· Padrão Frontend
This page hasn't been translated to English yet — showing the original Portuguese content.
22 conceitos técnicos de frontend: o que cada um é, quando decide se você precisa dele, e como tratar na prática. Onde o padrão frontend realmente usa um conceito, o exemplo vem de código real do projeto, não de um exemplo genérico.
Índice
| Tópico | Abrange |
|---|---|
| CORS | Same-origin policy; config real do Rack::Cors; por que expose_headers é obrigatório |
| Debounce & Throttle | Diferença entre os dois; debounce de 350ms na busca; como implementar throttle |
| Virtual Scrolling | Quando decide se você precisa: paginação no servidor já resolve boa parte dos casos |
| Hydration | O único suppressHydrationWarning do padrão, e por quê |
| Code Splitting | Split automático por rota do Next.js + next/dynamic pra componente condicional |
| Tree Shaking | Barrel de ícones com exports nomeados como padrão de reexportação |
| SSR | Server Components por padrão; app/layout.tsx assíncrono |
| Atomic Design | Por que o padrão usa taxonomia por papel em vez de átomo/molécula/organismo |
| State Management | Por que o cache do TanStack Query já cobre o caso que pediria Zustand |
| Web Accessibility (a11y) | O que o SweetAlert2 já cobre; a regra do padrão pra <dialog> nativo |
| Critical CSS | Quando importa: página pública com Core Web Vitals; code splitting por rota como primeira linha |
| Lazy Loading | next/dynamic como estratégia de lazy loading; por que os <img> não usam loading="lazy" |
| BFF | Por que o padrão chama a API direto, sem proxy; quando um BFF faria sentido |
| Progressive Enhancement | Quando decide se você precisa: existe visitante anônimo sem JS garantido? |
| Lost Update | Optimistic locking: versão no fetch, versão no save, 409 de conflito tratado na UI |
| Web Concurrency | Como o TanStack Query evita resultado fora de ordem; o padrão cancelado nos hooks fora dele |
| Reverse Proxy | Como tratar X-Forwarded-*; por que nunca montar URL absoluta a partir do host da requisição |
| Idempotência | Proteção de clique duplo na UI; por que isso não é o mesmo que idempotência de rede |
| WebSocket | Polling vs. WebSocket; reconexão, estado de conexão, provider próprio |
| WebRTC | Quando decide se você precisa: produto envolve áudio/vídeo/P2P |
| XHR / fetch | Só fetch() no padrão; por que XHR não é necessário (sem upload com progresso) |
| Fetch x TanStack Query | A divisão exata: fetch() só em services/, TanStack Query só em hooks/ |