Trilha de estudo
Trilha Engenheiro Frontend: tudo o que estudar, tópico por tópico
Avaliação abrangente de Engenheiro Frontend cobrindo fundamentos web, arquitetura de componentes, otimização de desempenho, estratégias de testes, ferramentas modernas e capacidades avançadas do navegador. Avalia todo o espectro desde fundamentos de HTML/CSS/JS até micro-frontends e aspectos internos do navegador.
Resposta curta
Para aprender Engenheiro Frontend, percorra 7 módulos e 34 tópicos na ordem em que um apoia o próximo. Comece por Fundamentos Web e siga para Arquitetura de Componentes e Desempenho e UX. Use o mapa como checklist, ou meça seu nível e estude só o que falta.
O que você vai estudar
Os tópicos estão agrupados por módulo. Abra um para ver os objetivos e os conceitos-chave.
1 · Fundamentos Web5 tópicos
Semântica HTML e Acessibilidade
Elementos semânticos HTML5, roles e atributos ARIA, regiões de referência, formulários acessíveis, comportamento de leitores de tela e estrutura do documento
Objetivos
- Selecionar elementos HTML semânticos apropriados para a estrutura do conteúdo
- Aplicar atributos ARIA para aprimorar a acessibilidade
Conceitos-chave
- elementos semânticos
- roles ARIA
- atributos ARIA
- regiões de referência
- formulários acessíveis
- estrutura do documento
- navegação por leitor de tela
- texto alternativo
Layout CSS e Design Responsivo
Flexbox, CSS Grid, design responsivo com media queries, container queries, tipografia fluida, abordagem mobile-first e boas práticas de layout
Objetivos
- Construir layouts responsivos utilizando Flexbox e Grid
- Aplicar princípios de design responsivo mobile-first
Conceitos-chave
- flexbox
- CSS Grid
- media queries
- container queries
- tipografia fluida
- mobile-first
- box model
- propriedades de posicionamento
JavaScript DOM e Eventos
Manipulação do DOM, delegação de eventos, propagação de eventos (bubbling/capturing), eventos customizados, MutationObserver e considerações de desempenho para operações no DOM
Objetivos
- Manipular o DOM de forma eficiente com JavaScript puro
- Implementar delegação de eventos para conteúdo dinâmico
Conceitos-chave
- travessia do DOM
- delegação de eventos
- event bubbling
- event capturing
- eventos customizados
- MutationObserver
- desempenho do DOM
- requestAnimationFrame
APIs do Navegador e Armazenamento
localStorage, sessionStorage, IndexedDB, Fetch API, AbortController, Geolocation, Intersection Observer, Resize Observer e Clipboard API
Objetivos
- Escolher o mecanismo de armazenamento apropriado para diferentes casos de uso
- Utilizar APIs modernas do navegador para experiências de usuário aprimoradas
Conceitos-chave
- localStorage
- sessionStorage
- IndexedDB
- Fetch API
- AbortController
- Intersection Observer
- Resize Observer
- Clipboard API
Segurança Web (CORS/CSP/XSS)
Cross-Origin Resource Sharing, Content Security Policy, prevenção de XSS, proteção contra CSRF, sanitização de entrada, segurança de cookies e Subresource Integrity
Objetivos
- Configurar cabeçalhos CORS para requisições cross-origin seguras
- Implementar CSP para prevenir ataques XSS
Conceitos-chave
- cabeçalhos CORS
- requisições preflight
- Content Security Policy
- vetores de XSS
- tokens CSRF
- sanitização de entrada
- cookies HttpOnly
- Subresource Integrity
2 · Arquitetura de Componentes5 tópicos
Padrões de Design de Componentes
Componentes presentacionais vs container, componentes compostos, render props, higher-order components, extração de hooks e composição sobre herança
Objetivos
- Escolher o padrão de componente adequado para um dado caso de uso
- Refatorar componentes para melhorar a reutilização e a separação de responsabilidades
Conceitos-chave
- componentes presentacionais
- componentes container
- componentes compostos
- render props
- HOCs
- hooks customizados
- composição
- responsabilidade única
Estratégias de Gerenciamento de Estado
Estado local, estado elevado, Context API, Redux/Zustand/Jotai, estado do servidor (React Query/SWR), estado na URL e escolha da solução de estado adequada
Objetivos
- Selecionar a abordagem de gerenciamento de estado apropriada para diferentes tipos de dados
- Evitar estado global desnecessário colocalizando o estado próximo aos seus consumidores
Conceitos-chave
- estado local
- estado global
- estado do servidor
- estado na URL
- Redux
- Zustand
- React Query
- colocalização de estado
Props vs State vs Context
Padrões de fluxo de dados, soluções para prop drilling, armadilhas de desempenho do Context, derivação de estado, componentes controlados vs não controlados e normalização de dados
Objetivos
- Identificar quando usar props, state ou context para gerenciamento de dados
- Prevenir re-renderizações desnecessárias causadas por mudanças no context
Conceitos-chave
- prop drilling
- divisão de context
- estado derivado
- componentes controlados
- componentes não controlados
- normalização de dados
- padrões de seletor
- desempenho do context
Implementação de Design System
Design tokens, arquitetura de biblioteca de componentes, sistemas de temas, APIs de variantes, documentação com Storybook e consistência multiplataforma
Objetivos
- Arquitetar um design system escalável com tokens e variantes
- Documentar componentes de forma eficaz para consumo pela equipe
Conceitos-chave
- design tokens
- variantes de componentes
- temas
- Storybook
- encapsulamento de estilos
- CSS-in-JS
- CSS Modules
- design de API de componentes
Arquitetura Micro-Frontend
Module federation, single-spa, dependências compartilhadas, integração de rotas, limites de propriedade por equipe, independência de implantação e padrões de comunicação
Objetivos
- Projetar arquitetura micro-frontend com limites claros entre equipes
- Avaliar trade-offs entre estratégias de integração
Conceitos-chave
- module federation
- single-spa
- dependências compartilhadas
- integração em tempo de execução
- integração em tempo de build
- limites de equipe
- implantação independente
- comunicação entre aplicações
3 · Desempenho e UX5 tópicos
Core Web Vitals (LCP/CLS/INP)
Otimização do Largest Contentful Paint, prevenção de Cumulative Layout Shift, medição de Interaction to Next Paint e análise de dados de campo vs dados de laboratório
Objetivos
- Diagnosticar e corrigir regressões de Core Web Vitals
- Distinguir entre métricas de desempenho de campo e de laboratório
Conceitos-chave
- LCP
- CLS
- INP
- TTFB
- dados de campo
- dados de laboratório
- Lighthouse
- CrUX
- orçamentos de desempenho
Otimização de Bundle e Code Splitting
Tree shaking, code splitting com imports dinâmicos, lazy loading de rotas, estratégias de chunks, análise de bundle e otimização de dependências
Objetivos
- Implementar estratégias de code splitting para reduzir o tamanho inicial do bundle
- Analisar e otimizar a composição do bundle
Conceitos-chave
- tree shaking
- code splitting
- import() dinâmico
- React.lazy
- splitting baseado em rotas
- analisador de bundle
- nomeação de chunks
- preloading
Otimização de Imagens e Assets
Formatos modernos de imagem (WebP, AVIF), imagens responsivas, lazy loading, estratégias de CDN, otimização de carregamento de fontes e resource hints
Objetivos
- Servir imagens otimizadas com formatos modernos e dimensionamento responsivo
- Implementar resource hints para carregamento de assets críticos
Conceitos-chave
- WebP
- AVIF
- srcset
- atributo sizes
- loading=lazy
- font-display
- preload
- preconnect
- cache de CDN
Estratégias de Renderização (SSR/SSG/ISR)
Renderização no servidor, geração de site estático, regeneração estática incremental, streaming SSR, React Server Components e estratégias de hidratação
Objetivos
- Escolher a estratégia de renderização adequada com base nos requisitos de conteúdo e desempenho
- Implementar streaming SSR para melhorar o TTFB e o FCP
Conceitos-chave
- SSR
- SSG
- ISR
- streaming SSR
- hidratação
- hidratação seletiva
- React Server Components
- renderização na edge
Profiling de Desempenho em Tempo de Execução
Aba Performance do Chrome DevTools, React Profiler, flame charts, vazamentos de memória, detecção de jank, long tasks e otimização de desempenho de renderização
Objetivos
- Realizar profiling e diagnosticar gargalos de desempenho em tempo de execução
- Otimizar o desempenho de renderização para eliminar jank
Conceitos-chave
- aba Performance
- flame charts
- React Profiler
- vazamentos de memória
- long tasks
- requestIdleCallback
- virtualização
- debounce/throttle
4 · Testes e Qualidade5 tópicos
Testes Unitários (Jest/Vitest)
Test runners, asserções, mocking, spying, testes de snapshot, relatórios de cobertura, organização de testes e testes de funções puras e utilitários
Objetivos
- Escrever testes unitários eficazes com mocking e asserções adequados
- Organizar suítes de teste para manutenibilidade
Conceitos-chave
- test runners
- asserções
- mocking
- spying
- testes de snapshot
- cobertura
- isolamento de testes
- testes parametrizados
Testes de Componentes (Testing Library)
Filosofia do React Testing Library, consultas por role/label, simulação de user-event, testes assíncronos, testes de hooks e como evitar detalhes de implementação
Objetivos
- Testar componentes da perspectiva do usuário usando Testing Library
- Evitar testes frágeis que dependem de detalhes de implementação
Conceitos-chave
- getByRole
- getByLabelText
- user-event
- waitFor
- consultas findBy
- testes de hooks
- testes com foco em acessibilidade
- avisos de act()
Testes E2E (Playwright/Cypress)
Arquitetura de testes end-to-end, page object model, test fixtures, mocking de rede, execução paralela, integração com CI e prevenção de testes instáveis
Objetivos
- Projetar suítes de testes E2E manuteníveis com page objects e fixtures
- Integrar testes E2E em pipelines de CI com estratégias de estabilidade
Conceitos-chave
- page object model
- test fixtures
- interceptação de rede
- execução paralela
- estratégias de retry
- integração com CI
- snapshots visuais
- testes cross-browser
Testes de Regressão Visual
Comparação de screenshots, testes visuais em nível de componente, integração com Chromatic/Percy, configuração de thresholds, consistência visual cross-browser e testes de interação com Storybook
Objetivos
- Implementar testes de regressão visual para detectar mudanças não intencionais na interface
- Configurar thresholds e fluxos de trabalho para revisão visual
Conceitos-chave
- comparação de screenshots
- diferenciação de pixels
- Chromatic
- Percy
- Storybook
- ajuste de thresholds
- snapshots responsivos
- testes de interação
Auditoria de Acessibilidade (WCAG 2.2)
Níveis de conformidade WCAG 2.2, integração com axe-core, testes automatizados de acessibilidade, procedimentos de testes manuais, testes com leitores de tela e estratégias de remediação
Objetivos
- Integrar testes automatizados de acessibilidade no fluxo de trabalho de desenvolvimento
- Realizar auditorias manuais de acessibilidade e priorizar a remediação
Conceitos-chave
- níveis WCAG 2.2
- axe-core
- jest-axe
- acessibilidade no Lighthouse
- testes com leitor de tela
- navegação por teclado
- contraste de cores
- gerenciamento de foco
5 · Ferramentas Modernas4 tópicos
Ferramentas de Build (Vite/Webpack)
Servidor de desenvolvimento e pipeline de build do Vite, configuração do Webpack, loaders e plugins, HMR, variáveis de ambiente e estratégias de otimização de build
Objetivos
- Configurar Vite ou Webpack para uma aplicação frontend em produção
- Solucionar problemas de build e otimizar o desempenho de build
Conceitos-chave
- Vite
- Webpack
- esbuild
- HMR
- loaders
- plugins
- servidor de desenvolvimento
- build de produção
- variáveis de ambiente
TypeScript no Frontend
Tipagem de props de componentes, componentes genéricos, discriminated unions para estado, event handlers type-safe, tipagem de respostas de API e configuração de strict mode
Objetivos
- Tipar componentes e hooks React com TypeScript de forma eficaz
- Usar discriminated unions e generics para gerenciamento de estado type-safe
Conceitos-chave
- tipagem de props de componentes
- componentes genéricos
- discriminated unions
- eventos type-safe
- tipos de resposta de API
- strict mode
- tipos utilitários
- arquivos de declaração
Monorepo e Gerenciamento de Pacotes
Ferramentas de monorepo (Nx, Turborepo), configuração de workspace, limites de pacotes, bibliotecas compartilhadas, estratégias de versionamento e gerenciamento de dependências
Objetivos
- Configurar e gerenciar um monorepo frontend com limites de pacotes adequados
- Utilizar cache de tarefas e grafos de dependências para builds eficientes
Conceitos-chave
- Nx
- Turborepo
- configuração de workspace
- limites de pacotes
- bibliotecas compartilhadas
- changesets
- cache de tarefas
- grafo de dependências
CI/CD para Frontend
GitHub Actions/GitLab CI para frontend, deployments de preview, cache de build, estratégias de implantação (blue-green, canary), feature flags e procedimentos de rollback
Objetivos
- Projetar pipelines de CI/CD otimizados para build e implantação de frontend
- Implementar estratégias seguras de implantação com capacidade de rollback
Conceitos-chave
- GitHub Actions
- deployments de preview
- cache de build
- invalidação de CDN
- implantação blue-green
- releases canary
- feature flags
- rollback
6 · Frontend Avançado5 tópicos
Animação e Motion Design
Transições e animações CSS, Web Animations API, Framer Motion, GSAP, animações seguras para desempenho (transform/opacity) e preferências de movimento reduzido
Objetivos
- Implementar animações performáticas que utilizam propriedades exclusivas do compositor
- Respeitar as preferências de movimento do usuário com prefers-reduced-motion
Conceitos-chave
- transições CSS
- animações CSS
- Web Animations API
- Framer Motion
- GSAP
- transform/opacity
- will-change
- prefers-reduced-motion
Offline-First e PWA
Service Workers, Cache API, estratégias offline (cache-first, network-first), Web App Manifest, notificações push, sincronização em segundo plano e instalabilidade
Objetivos
- Implementar estratégias offline-first usando Service Workers e Cache API
- Configurar um Progressive Web App para instalabilidade e notificações push
Conceitos-chave
- Service Workers
- Cache API
- cache-first
- network-first
- stale-while-revalidate
- Web App Manifest
- notificações push
- sincronização em segundo plano
WebSockets e Tempo Real
WebSocket API, Socket.IO, Server-Sent Events, sincronização de estado em tempo real, estratégias de reconexão, indicadores de presença e atualizações otimistas
Objetivos
- Implementar funcionalidades em tempo real usando WebSockets com tratamento adequado de erros
- Escolher entre WebSockets e SSE com base nos requisitos de comunicação
Conceitos-chave
- WebSocket API
- Socket.IO
- Server-Sent Events
- reconexão
- heartbeat
- presença
- atualizações otimistas
- enfileiramento de mensagens
Web Workers e Threading
Dedicated Workers, Shared Workers, clonagem estruturada, objetos Transferable, Comlink, OffscreenCanvas e paralelização de operações intensivas de CPU
Objetivos
- Descarregar tarefas intensivas de CPU para Web Workers para manter a thread principal responsiva
- Usar objetos Transferable e Comlink para comunicação eficiente com workers
Conceitos-chave
- Dedicated Workers
- Shared Workers
- clonagem estruturada
- objetos Transferable
- Comlink
- OffscreenCanvas
- postMessage
- pools de workers
Aspectos Internos do Navegador e Pipeline de Renderização
Caminho crítico de renderização, construção do DOM/CSSOM, fases de layout/paint/composite, aceleração por GPU, promoção de camadas, reflow vs repaint e dicas de otimização do V8
Objetivos
- Explicar o pipeline de renderização do navegador desde o parsing do HTML até os pixels na tela
- Otimizar código para minimizar layout thrashing e reflows forçados
Conceitos-chave
- caminho crítico de renderização
- construção do DOM
- CSSOM
- layout
- paint
- composite
- camadas GPU
- reflow vs repaint
- hidden classes do V8
7 · Frontend Especialista5 tópicos
Engenharia de Desempenho Web
Medição e otimização sistemática de Core Web Vitals, long tasks e desempenho de renderização para aplicações web em produção
Objetivos
- Construir uma estratégia sistemática de medição de desempenho usando dados de campo e dados de laboratório
- Diagnosticar e corrigir regressões de LCP, CLS e INP em aplicações em produção
Conceitos-chave
- Core Web Vitals
- otimização de LCP
- redução de CLS
- INP
- long tasks
- agendamento da thread principal
- PerformanceObserver
- Monitoramento de Usuário Real
Segurança Frontend em Profundidade
Implementação de segurança frontend abrangente: políticas CORS, Subresource Integrity, CSP estrita, defesa contra clickjacking e segurança da cadeia de suprimentos
Objetivos
- Projetar uma postura de segurança frontend em profundidade combinando CSP, SRI e trusted types
- Identificar e mitigar riscos na cadeia de suprimentos em árvores de dependências frontend
Conceitos-chave
- configuração incorreta de CORS
- Subresource Integrity
- CSP strict-dynamic
- clickjacking
- X-Frame-Options
- trusted types
- riscos na cadeia de suprimentos
Padrões de Arquitetura Micro-Frontend
Projetar arquiteturas micro-frontend em produção: shells de roteamento, estado compartilhado, isolamento de estilos e independência entre equipes
Objetivos
- Projetar uma arquitetura micro-frontend que possibilite implantações independentes por equipe
- Avaliar trade-offs entre Module Federation, integração em tempo de build e isolamento via iframe para um dado contexto
Conceitos-chave
- shell de roteamento
- Module Federation
- isolamento com Web Components
- barramento de estado compartilhado
- CSS shadow DOM
- independência de implantação
- contratos de versão
Observabilidade Frontend e RUM
Implementação de observabilidade frontend: Monitoramento de Usuário Real, rastreamento de erros, tracing distribuído até o backend e dashboards de desempenho
Objetivos
- Projetar uma stack de observabilidade frontend cobrindo erros, desempenho e tracing distribuído
- Correlacionar dados de RUM do navegador com traces do backend para diagnosticar problemas full-stack
Conceitos-chave
- Monitoramento de Usuário Real
- rastreamento de erros
- replay de sessão
- tracing distribuído no frontend
- OpenTelemetry para navegador
- dashboards de desempenho
- dados de campo vs dados de laboratório
Acessibilidade em Escala
Construção de programas de acessibilidade escaláveis: sistemas automatizados de auditoria, padrões de acessibilidade em bibliotecas de componentes e governança de design inclusivo
Objetivos
- Estabelecer um pipeline automatizado de testes de acessibilidade que previna regressões
- Incorporar padrões de acessibilidade em uma biblioteca de componentes para garantir conformidade com WCAG 2.2 em escala
Conceitos-chave
- WCAG 2.2 AAA
- automação com axe-core
- padrões de design ARIA
- testes com leitor de tela
- navegação por teclado
- padrões de acessibilidade em bibliotecas de componentes
- testes de regressão de acessibilidade
Níveis: Júnior, Pleno, Sênior e Especialista
Explique com suas palavras
Corrigido por IA · sem cadastro · 1 perguntaSem alternativas para chutar: você escreve, a IA corrige com a rubrica do tópico e diz em que nível sua resposta está.
Já estuda Engenheiro Frontend?
A avaliação mede tópico por tópico, e o plano pula o que você já sabe.
Aberto para ler. A conta só é necessária para ser medido.
Perguntas frequentes
Por onde começar a estudar Engenheiro Frontend?
Comece por Fundamentos Web: Semântica HTML e Acessibilidade, Layout CSS e Design Responsivo e JavaScript DOM e Eventos. O mapa ordena os tópicos pelo que depende de quê, então cada um prepara o seguinte.
Quanto tempo leva uma avaliação completa de Engenheiro Frontend?
Uma avaliação completa desta trilha leva cerca de 55 minutos. O tempo de estudo depende de onde você começa; o diagnóstico mostra quais tópicos você pode pular.
Preciso de conta para usar esta página?
Não. O mapa, os objetivos e os conceitos-chave são abertos. A conta só é necessária para ser medido, ver seu gap por tópico e receber um plano.