Desenvolvimento SPA moderno baseia-se num ecossistema em camadas. Aqui está a paisagem atual organizada por categoria:
1. Frameworks UI Principais (Escolha Um)
- React — Baseado em componentes, DOM virtual, maior ecossistema. Apoiado pela Meta. Padrão de facto.
- Vue 3 — Progressivo, Composition API, excelente DX, bundle menor. Crescimento rápido.
- Angular — Framework MVC completo, TypeScript nativo, opinativo. Favorito empresarial.
- Svelte / SvelteKit — Baseado em compilador, sem DOM virtual, runtime mínimo. Líder de performance.
- SolidJS — Reatividade granular, JSX tipo React, sem VDOM. Campeão de velocidade.
2. Ferramentas de Build e Bundlers
- Vite — Servidor dev instantâneo, builds Rollup em produção. Padrão para novos projetos.
- Webpack — Maduro, configs complexas, Module Federation. Legado/empresarial.
- esbuild / swc / Turbopack — Baseados em Go/Rust, velocidade extrema.
3. Gestão de Estado
- Redux Toolkit / RTK Query — Opinativo, escalável, DevTools.
- Zustand / Jotai / Valtio — Leves, atómicos, boilerplate mínimo.
- TanStack Query (React Query) — Estado do servidor, caching, deduping. Essencial para data fetching.
- Pinia — Store oficial do Vue.
4. Routing
- React Router v6, TanStack Router (type-safe)
- Vue Router 4
- Angular Router (built-in)
- Baseado em ficheiros: Next.js, Nuxt, SvelteKit, Astro
5. Testes
- Vitest (unit/integração), Playwright / Cypress (E2E), Testing Library (componente)
6. DX e Qualidade
- ESLint + Prettier, TypeScript, Storybook, Husky + lint-staged, Chromatic
Heurística de Seleção
Familiaridade da equipa > hype. React/Vite/TypeScript/TanStack Query é a stack padrão mais segura 2024. Vue/Vite/Pinia para opiniões mais leves. Next.js/Remix/Astro se SSR/SSG necessário.
