Trilha progressiva · 123 aulas

System Design de Front-end: de Junior a Principal Front-end Engineer.

Decisões de arquitetura do lado do cliente — arquitetura de app, estado, performance, build, rede, dados, renderização, IA em streaming, escalabilidade, resiliência, PWA, segurança, design systems, Web Components, micro-frontends, observabilidade, experimentação, acessibilidade, i18n e testes — com evidência, não modismo.

Partida
Junior
Destino
Principal Front-end
Prática
23 estudos de caso

Comece aqui

Aulas

  2. Aula 02 · 70–90 minutos

    Como estruturar uma aplicação front-end grande

    Por que aplicações front-end grandes desorganizam com o tempo, os princípios que revertem isso — coesão, acoplamento, colocação e uma estrutura que grita o domínio — e o mapa do que vem a seguir neste macrotema.

    Abrir aula

Mapa curricular

23 macrotemas · 123 aulas

Aulas publicadas são clicáveis. Aulas planejadas mostram a sequência sem simular conteúdo inexistente. Macrotemas 01–20 cobrem front-end system design de ponta a ponta (incluindo o checklist de entrevista original mais 5 macrotemas de expansão: build tooling, streaming de IA, PWA, Web Components e experimentação); 21–22 cobrem a progressão até Principal e a prática de entrevista.

01 · Arquitetura de aplicações front-end

Estruturar sem acoplar

Separação UI/domínio/estado/infra, feature-based vs. layer-based, monorepo, boundaries.

  1. Separação entre UI, domínio, estado e infraestruturaEm breve
  2. Feature-based vs. layer-based architectureEm breve
  3. Monorepo vs. multirepo: trade-offs organizacionaisEm breve
  4. Acoplamento, boundaries e dependências entre módulosEm breve
  5. Estudo de caso: front-end de um SaaS desenvolvido por 10 timesEm breve

02 · Gerenciamento de estado

Não confundir estado de servidor com estado local

Local vs. global, server vs. client state, cache, normalização, otimismo, URL, persistência.

  1. Local state vs. global stateEm breve
  2. Server state vs. client state: por que são categorias diferentesEm breve
  3. Cache, normalização de dados e invalidaçãoEm breve
  4. Optimistic updates e sincronização entre componentesEm breve
  5. URL como fonte de estado e persistência de estadoEm breve
  6. Zustand, Redux, Context e afins: quando usar cada abordagemEm breve
  7. Estudo de caso: e-commerce — onde armazenar carrinho, usuário, filtros e produtosEm breve

03 · Performance

Investigar antes de listar técnicas

Rendering pipeline, reflow/repaint, code splitting, bundle, Core Web Vitals.

  1. Rendering pipeline: JavaScript → Style → Layout → Paint → CompositeEm breve
  2. Reflow, repaint, main thread e long tasksEm breve
  3. Code splitting, lazy loading e tree shakingEm breve
  4. Bundle size, dynamic imports, prefetch vs. preloadEm breve
  5. Otimização de imagens e virtualização de listasEm breve
  6. Memoization, Web Workers, CDN e cache HTTPEm breve
  7. Core Web Vitals na práticaEm breve
  8. Estudo de caso: investigando uma aplicação lentaEm breve

04 · Build tooling como decisão de arquitetura

Bundler e dev server são trade-off, não gosto

Resolução de módulos, Vite/webpack/esbuild, HMR em escala.

  1. Bundlers e dev servers: o que cada peça resolveEm breve
  2. Vite, webpack e esbuild/Rollup: trade-offs arquiteturaisEm breve
  3. Hot Module Replacement e experiência de desenvolvimento em escalaEm breve
  4. Estudo de caso: escolher a stack de build para um monorepo com múltiplos timesEm breve

05 · Networking e navegador

O caminho entre o clique e a resposta

DNS/TCP/TLS, HTTP/1.1–3, storage, CORS, REST vs. GraphQL, tempo real.

  1. DNS, TCP e TLS: o caminho até o servidorEm breve
  2. HTTP/1.1, HTTP/2 e HTTP/3Em breve
  3. Cookies, LocalStorage, SessionStorage e IndexedDBEm breve
  4. CORS e Same-Origin PolicyEm breve
  5. CDN, compressão e request waterfallEm breve
  6. REST vs. GraphQLEm breve
  7. WebSockets, SSE e polling — estudo de caso: chat em tempo realEm breve

06 · Data fetching e cache

Buscar dados sem perder a ordem

Client vs. server fetching, SWR, paginação, retry, race conditions.

  1. Fetching no cliente vs. no servidorEm breve
  2. Stale-while-revalidate, paginação e cursor paginationEm breve
  3. Retry, backoff, deduplicação e race conditionsEm breve
  4. AbortController e cancelamento de requisições obsoletasEm breve
  5. Sincronização offline/onlineEm breve
  6. Estudo de caso: feed infinito com milhões de usuáriosEm breve

07 · Estratégias de renderização

Escolher onde a UI nasce

CSR, SSR, SSG, ISR, streaming, hydration, Server Components, edge.

  1. CSR, SSR, SSG e ISR: trade-offsEm breve
  2. Streaming SSR e hydrationEm breve
  3. Partial hydration e Server ComponentsEm breve
  4. Edge renderingEm breve
  5. Escolhendo a estratégia certa a partir de requisitosEm breve
  6. Estudo de caso: página de produto de e-commerceEm breve

08 · UI de streaming e interfaces de IA (chat/LLM)

Renderizar antes da resposta terminar

ReadableStream, tokens parciais, UI otimista e falha parcial em respostas de IA.

  1. Streams no navegador: ReadableStream e renderização incrementalEm breve
  2. Streaming de respostas de IA: tokens parciais, UI otimista e cancelamentoEm breve
  3. Erros e falhas parciais em uma resposta de IA em streamingEm breve
  4. Estudo de caso: interface de chat com streaming de LLMEm breve

09 · Escalabilidade

Pensar além de componentes React

CDN, edge, BFF, rate limiting, multi-region, graceful degradation.

  1. CDN, edge e load balancingEm breve
  2. API gateways e BFF (Backend for Frontend)Em breve
  3. Rate limiting e feature flagsEm breve
  4. Multi-region, graceful degradation e resiliênciaEm breve
  5. Estudo de caso: home page de uma plataforma com 50 milhões de usuáriosEm breve

10 · Resiliência e UX em condições ruins

Não assumir que rede e backend sempre funcionam

Offline, retry, skeleton screens, error boundaries, idempotência.

  1. Rede offline, 3G/4G lenta e timeoutEm breve
  2. Retry com exponential backoff e partial failureEm breve
  3. Skeleton screens e error boundariesEm breve
  4. Offline-first e optimistic UIEm breve
  5. Idempotência do ponto de vista do front-endEm breve
  6. Estudo de caso: checkout resiliente a falha parcialEm breve

11 · PWA e Service Worker

Instalável, offline e confiável

Ciclo de vida do Service Worker, estratégias de cache, background sync, push.

  1. Ciclo de vida do Service Worker e o que ele interceptaEm breve
  2. Estratégias de cache: cache-first, network-first, stale-while-revalidate no Service WorkerEm breve
  3. Background sync e sincronização adiadaEm breve
  4. Web Push e notificaçõesEm breve
  5. Estudo de caso: PWA instalável e utilizável offlineEm breve

12 · Segurança

Ameaças e trade-offs, não só nomes

XSS, CSRF, CSP, clickjacking, cookies, OAuth 2.0, OIDC, JWT.

  1. XSS, CSRF, CORS e CSPEm breve
  2. Clickjacking e defesas de frameEm breve
  3. Cookies HttpOnly, Secure, SameSite e token storageEm breve
  4. OAuth 2.0, OIDC e JWT: trade-offsEm breve
  5. Estudo de caso: onde armazenar o access token e por quêEm breve

13 · Design systems e componentização

Consistência em escala

Atomic design, tokens, component API, theming, Storybook.

  1. Atomic design vs. componentes orientados a featureEm breve
  2. Design tokens e acessibilidadeEm breve
  3. Component API design: composição vs. herançaEm breve
  4. Theming, versionamento e backward compatibilityEm breve
  5. Storybook e distribuição de componentesEm breve
  6. Estudo de caso: design system usado por 20 aplicaçõesEm breve

14 · Web Components e Shadow DOM

Componentes que sobrevivem à troca de framework

Custom Elements, Shadow DOM, interoperabilidade com frameworks.

  1. Custom Elements: definindo comportamento fora de um frameworkEm breve
  2. Shadow DOM: encapsulamento de estilo e DOMEm breve
  3. Interoperabilidade entre Web Components e frameworksEm breve
  4. Estudo de caso: distribuir um componente de design system como Web ComponentEm breve

15 · Micro-frontends

Saber argumentar, não só implementar

Quando usar, Module Federation, deploys independentes, comunicação.

  1. Por que (e quando não) usar micro-frontendsEm breve
  2. Module federation: integração em build-time vs. runtimeEm breve
  3. Deploys independentes e dependências compartilhadasEm breve
  4. Design system compartilhado e comunicação entre micro-frontendsEm breve
  5. Routing, performance e versionamento entre micro-frontendsEm breve
  6. Estudo de caso: argumentando a favor ou contra micro-frontendsEm breve

16 · Observabilidade

Saber que algo piorou antes do usuário reclamar

Logs, tracing, error tracking, RUM, alerting, rollback.

  1. Logs, métricas e tracing no front-endEm breve
  2. Error tracking e Real User Monitoring (RUM)Em breve
  3. Web Vitals monitorados em produção e correlation IDsEm breve
  4. Alerting, feature flags e rollbackEm breve
  5. Estudo de caso: como saber que uma mudança piorou a experiênciaEm breve

17 · Experimentação e A/B testing

Decidir com dados, sem se enganar

Atribuição de variante, Sample Ratio Mismatch, flicker, performance.

  1. Atribuição de variante, consistência e por que isso é um problema de front-endEm breve
  2. Sample Ratio Mismatch e outras armadilhas de confiança do experimentoEm breve
  3. Prevenção de flicker e impacto de performance da experimentaçãoEm breve
  4. Estudo de caso: rollout de um experimento sem degradar Core Web VitalsEm breve

18 · Acessibilidade

Requisito de sistema, não checklist visual

WCAG, semântica, teclado, ARIA, foco, formulários.

  1. WCAG e HTML semânticoEm breve
  2. Navegação por teclado, leitores de tela e ARIAEm breve
  3. Focus management, contraste e reduced motionEm breve
  4. Formulários acessíveisEm breve
  5. Estudo de caso: projetando um modal acessívelEm breve

19 · Internacionalização e localização

Sistemas globais, não só tradução

i18n, pluralização, RTL, timezones, formatação, lazy loading de traduções.

  1. i18n, traduções e pluralizaçãoEm breve
  2. RTL, timezones e formatação de datas, moedas e númerosEm breve
  3. Lazy loading de traduçõesEm breve
  4. Estudo de caso: preparando um componente para múltiplos idiomasEm breve

20 · Testing e qualidade

Testar na camada certa

Test pyramid, contract testing, visual regression, CI/CD, canary, rollback.

  1. Test pyramid: unit, integration e E2E no front-endEm breve
  2. Contract testing e visual regressionEm breve
  3. CI/CD, canary releases e feature flagsEm breve
  4. Rollback como parte do designEm breve
  5. Estudo de caso: o que testar no front-end e em qual camadaEm breve

21 · Senior, Tech Lead e Principal Front-end

Multiplicar boas decisões além de um componente

Escopo, arquitetura sociotécnica, guardrails, estratégia, influência.

  1. Escopo de decisão: de componente a produto a plataformaEm breve
  2. Arquitetura sociotécnica: fronteiras de time no front-endEm breve
  3. Guardrails, princípios e governança leve de front-endEm breve
  4. Estratégia técnica e redução de risco em migrações de front-endEm breve
  5. Custo, performance de time e decisões de plataformaEm breve
  6. Influência sem autoridade formal como Principal Front-endEm breve

22 · Entrevistas de front-end system design

Cinco casos reais, resolvidos com o método RADIO

Feed, editor colaborativo, checkout, dashboard e chat, além de perguntas técnicas.

  1. Como conduzir uma entrevista de front-end system design (RADIO)Em breve
  2. Caso, aprofundado: feed de notíciasEm breve
  3. Caso, aprofundado: editor colaborativoEm breve
  4. Caso, aprofundado: checkout de e-commerceEm breve
  5. Caso, aprofundado: dashboard em tempo realEm breve
  6. Caso, aprofundado: chat em tempo realEm breve
  7. Perguntas técnicas de entrevista: respostas e armadilhasEm breve
  8. Simulação e crítica de uma solução de front-end system designEm breve

Para consultar

Referências rápidas

123 aulas planejadas · 2 publicadas.