Frontend

Frontend profissional: performance, testes e qualidade

Trilha focada em levar projetos frontend para um nível profissional, com arquitetura, performance, testes e boas práticas.

Avançado 5 passos sugeridos

Sequência sugerida de estudos

Cada módulo é um passo no seu aprendizado. Siga de cima para baixo, adaptando o ritmo à sua realidade.

  1. Etapa 1

    Arquitetura de projetos frontend

    Organizar pastas, componentes e camadas de forma escalável.

    Tópicos

    • Organização de pastas por domínio ou tipo
    • Separação entre components, pages, hooks e services
    • Componentes reutilizáveis e desacoplados
    • Padronização de naming e imports
    • Uso consciente de estado global
  2. Etapa 2

    Performance e otimização

    Melhorar tempo de carregamento e experiência percebida pelo usuário.

    Tópicos

    • Bundle size, tree shaking e code splitting
    • Lazy loading de rotas e componentes
    • Otimização de imagens e fontes
    • Uso de cache HTTP e estratégias básicas
    • Medir performance com Lighthouse e Web Vitals

    Recursos sugeridos

  3. Etapa 3

    Testes em frontend

    Garantir que componentes e fluxos principais funcionem como esperado.

    Tópicos

    • Diferença entre testes unitários, de integração e E2E
    • Configurar Jest ou Vitest em um projeto SPA
    • Testar componentes com Testing Library
    • Testes E2E com Cypress ou Playwright (visão geral)
    • Escolher o que é crítico para testar no projeto
  4. Etapa 4

    TypeScript no frontend

    Adicionar tipagem estática para ganhar segurança e clareza no código.

    Tópicos

    • Tipos básicos, interfaces e tipos opcionais
    • Tipagem de props e estado em componentes
    • Tipos para hooks e services de API
    • Refatorar partes críticas de JS para TS
    • Evitar any desnecessário e melhorar DX
  5. Etapa 5

    Integração com backend e autenticação

    Conectar o frontend a APIs reais com autenticação e tratamento de erros.

    Tópicos

    • Conceitos básicos de REST e status HTTP
    • Fluxos de login, logout e sessão
    • Armazenar tokens com segurança relativa no frontend
    • Estados de loading, erro e empty state
    • Camada de serviços de API reutilizável no projeto

Como usar esta trilha

Esta página não é um curso completo. Ela só organiza, em ordem, temas que fazem sentido estudar se você quer se aprofundar nesse assunto.