O Mapa Completo do Dev Web Moderno: a versão que eu deveria ter publicado desde o início

Há algumas semanas publiquei aqui no TabNews um artigo chamado "O Mapa Completo do Dev Web Moderno". Recebi feedback direto nos comentários sobre imprecisões técnicas, principalmente na explicação do event loop e na distinção entre JavaScript como linguagem e os runtimes que introduzem concorrência (Node/libuv, Bun/Zig, Deno/Tokio).

O feedback estava correto. O artigo original era raso: listava ferramentas sem critério de escolha, misturava conceitos de linguagem com runtime, e não entregava o que o título prometia. Era um catálogo, não um mapa.

Reescrevi tudo do zero. O artigo novo tem 5.754 palavras, 15+ blocos de código funcionais, 6 tabelas comparativas com dados reais, 5 anti-patterns com código errado vs correto, e um sistema de decisão em 5 passos que uso na Agência Poti para consultoria de arquitetura.

Este post é um resumo das seções mais relevantes. O artigo completo está em vivodecodigo.com.br.

O que mudou (e por que a versão anterior falhava)

O problema do artigo original era o mesmo de todo "mapa de stack": virava catálogo. Lista 47 tecnologias, coloca um check ao lado de cada uma, e o leitor fecha a aba sem saber responder a pergunta que importa: qual stack eu monto para o meu cenário?

Dev sênior não precisa de lista. Precisa de critério de decisão.

A versão nova substitui catálogo por sistema. Cada seção tem valor independente e entrega algo acionável.

Framework de decisão: como escolher qualquer stack em 5 passos

Eu uso esses 5 passos em toda consultoria de arquitetura:

1. Defina o constraint primário: tempo, escala de time, performance, custo, ou contratação. Em 2023, um cliente de fintech me pediu para escolher entre Svelte e React. O constraint era contratação: 8 devs em SP em 60 dias. Svelte tem 3.3M downloads/semana. React tem 96M. A resposta se deu sozinha.

2. Elimine por deal-breakers: não compare 5 opções. Elimine as que não passam no filtro mínimo (suporte TS, downloads > 1M/semana, último major release < 18 meses, vagas no Brasil).

3. Pese ecossistema sobre features: feature individual é irrelevante se o ecossistema não sustenta. Em 2021, escolhi Solid.js para um projeto pessoal. Performance absurda. Mas quando precisei de uma lib de formulários com validação server-side, gastei 3 dias adaptando algo que no React levaria 20 minutos.

4. Prototipe em 4 horas, não em 4 semanas: monte o fluxo mais crítico do app nas 2-3 opções finalistas. Meça tempo de setup, clareza do código, e se a documentação respondeu suas dúvidas sem Stack Overflow.

5. Valide com o cenário de 18 meses: "Se eu precisar dobrar o time em 18 meses, consigo contratar? Se o framework lançar breaking changes, a migração é viável? Se o maintainer principal sair, o projeto sobrevive?"

Frameworks em 2026: dados, não opinião

O State of JS 2025 trouxe um dado que deveria encerrar a conversa sobre "framework fatigue": a média de frameworks que um dev usa na carreira inteira é 2.6. Não por ano. Por carreira.

Métrica	React	Vue	Svelte
Downloads/semana (npm)	96M	9M	3.3M
Bundle min+gzip	44.5 KB	33 KB	1.8 KB*
Satisfação (State of JS 2025)	69%	72%	88%
Vagas BR (Q1 2026)	~4.200	~680	~120
Meta-framework	Next.js	Nuxt	SvelteKit

O asterisco no Svelte é crucial: o bundle de 1.8 KB é o runtime base. Cada componente Svelte adiciona código compilado. Em apps com 19+ componentes TodoMVC-sized, o bundle total ultrapassa o do React. Svelte é mais leve para landing pages. Para dashboards com 50+ componentes, a vantagem desaparece.

O moat do Angular em bancos BR

Angular tem um fenômeno único no Brasil. Itaú, Bradesco, TOTVS e Banco do Brasil operam frontends críticos em Angular. O motivo não é performance. É que Angular impõe conventions: módulos, injeção de dependência, estrutura de pastas padronizada. Com times de 40+ devs, isso reduz o caos. Se você mira enterprise financeiro no Brasil, Angular não é opção. É pré-requisito.

O shift arquitetural: server state vs client state

A maior mudança dos últimos 3 anos não foi um framework novo. Foi a separação entre server state (dados de APIs) e client state (UI state: modais, filtros, tema).

Redux misturava tudo. Em 2026, isso é anti-pattern. A combinação TanStack Query + Zustand resolve 95% dos casos:

TanStack Query (12M downloads/semana): cuida de cache, refetch, stale-while-revalidate
Zustand (11M downloads/semana, +30% YoY): estado local sem boilerplate, sem providers

State Manager	Re-render 1000 subscribers	Bundle	Boilerplate
Zustand	~12ms	1.1 KB	Mínimo
Jotai	~14ms	2.4 KB	Mínimo (atômico)
Redux Toolkit	~18ms	11 KB	Moderado

Num dashboard de telecom que construí em 2024, migrei de Redux para Zustand + TanStack Query. Bundle do módulo de estado caiu de 34 KB para 8.2 KB. Tempo de re-render em telas com 200+ elementos caiu de 45ms para 16ms. Migração: 4 dias, 2 devs.

Anti-patterns que custam semanas

O artigo completo tem 5 anti-patterns detalhados com código. Os dois mais comuns:

useEffect com dependências erradas

// ERRADO: re-render infinito
useEffect(() => {
  const options = { includeAvatar: true }; // objeto novo a cada render
  fetchUser(userId, options).then(setUser);
}, [userId, { includeAvatar: true }]); // objeto literal na dependencia = loop

// CORRETO: dependencias estaveis + cleanup
useEffect(() => {
  const controller = new AbortController();
  fetchUser(userId, { includeAvatar: true, signal: controller.signal })
    .then(setUser)
    .catch((err) => {
      if (err.name !== 'AbortError') console.error(err);
    });
  return () => controller.abort();
}, [userId]); // primitivo estavel

// MELHOR: TanStack Query elimina o useEffect
const { data: user } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId, { includeAvatar: true }),
});

Redux para server state em 2026

200+ linhas de slice com loading/fulfilled/rejected para um CRUD que TanStack Query resolve em 15 linhas com cache automático. Se você está começando projeto novo com Redux, reconsidere.

Cenários reais: qual stack para qual situação

Cenário	Stack	Motivo
Freelancer/solo	Next.js + Zustand + TanStack Query + Tailwind	Maior mercado, mais recursos, deploy fácil
Startup MVP	Vite + React + Zustand + shadcn/ui + Supabase	Velocidade máxima, custo zero no início
Enterprise/banco	Angular + RxJS + NgRx	Conventions fortes, compliance, time grande
Content-first	Astro + React islands	Zero JS default, LCP < 1s
Aprendizado	SvelteKit + Tailwind	88% satisfação, sintaxe limpa

Roadmap progressivo

Nível 1 (0-6m): HTML, CSS, JS vanilla. Sem framework. Entenda o DOM antes de abstraí-lo.
Nível 2 (6-12m): TypeScript, Git avançado, terminal, npm/pnpm.
Nível 3 (12-24m): UM framework + meta-framework + TanStack Query + Zustand + Vitest + Playwright.
Nível 4 (24-48m): APIs, PostgreSQL, ORM, auth, rate limiting, arquitetura hexagonal.
Nível 5 (48m+): Docker, CI/CD, observabilidade, feature flags, testes de carga.

Build tools: Vite venceu

Os números são categóricos e eu confirmei em projetos reais:

Cold start: 3s (Vite) vs 45s (Webpack)
HMR: 45ms (Vite) vs 2.1s (Webpack)
Production build: 8.2s (Vite) vs 34s (Webpack)

Para projeto novo, não existe justificativa para Webpack. O único cenário válido: projeto legado com Module Federation complexa onde o custo de migração excede 2 sprints.

Testes: Vitest + Playwright

Vitest é 5.6x mais rápido que Jest no cold start. Migrei 340 testes de Jest para Vitest em um projeto Next.js em 6 horas. CI caiu de 4min12s para 1min48s.

Playwright atingiu 8M downloads/semana e 92% de satisfação. Cypress está em declínio. Os motivos: paralelo por default, multi-browser nativo, e não injeta código no browser.

O que vem a seguir

O artigo completo tem 5.754 palavras com todos os code blocks, tabelas, decision trees, e anti-patterns detalhados: O Mapa Completo do Dev Web Moderno

Obrigado a quem comentou na versão anterior apontando os problemas. O feedback da comunidade TabNews é o que torna possível iterar até chegar num conteúdo que realmente ajuda. Críticas construtivas são bem-vindas de novo.