Squad Front

Appearance

Roadmap de Aprendizado Web ​

Este guia foi criado para direcionar seus estudos e evolução técnica dentro da nossa Squad. Ele consolida todo o conhecimento disponível em nossa documentação em uma trilha lógica de aprendizado, do básico ao avançado.

Fase 1: Fundamentos e Ambiente ​

A base sólida é o que separa um desenvolvedor que "copia código" de um engenheiro. O foco aqui é dominar o ecossistema de trabalho e as linguagens base da web. Entender o ambiente não é apenas saber instalar ferramentas, mas configurar uma "estação de batalha" que automatize a qualidade (lint/prettier) e seguir fluxos de trabalho (GitFlow) que permitam a colaboração segura em time. Nos fundamentos, a semântica e o TypeScript são inegociáveis para garantir acessibilidade e previsibilidade de dados.

  1. Configuração de Ambiente de Elite:
    • IDE: Configuração obrigatória do WebStorm (Plugins, Prettier, ESLint e Inspeções).
    • Git Profissional: Fluxo de trabalho, mensagens de commit semânticas e GitFlow.
    • Node/NPM: Entendimento de package-lock.json, npx, gerenciamento de versões e scripts.
  2. HTML5 e Acessibilidade (A11y):
  3. CSS3 Moderno e Layout:
    • Box Model avançado, Flexbox (especificidade de eixos) e CSS Grid.
    • Unidades relativas (em, rem, vh, vw) vs Absolutas.
    • Variáveis CSS e PostCSS.
  4. JavaScript Moderno (ES6+):
    • Destructuring, Spread/Rest, Arrow Functions e Template Literals.
    • Manipulação imutável de arrays (map, filter, reduce, find).
    • Promessas e Async/Await.
  5. TypeScript (O Coração do Projeto):
  6. Padrões de Escrita e Cultura:

Fase 2: React Core e Design System ​

Aprendendo a construir interfaces modulares, consistentes e baseadas em componentes reutilizáveis. Nesta fase, o objetivo é entender a mentalidade de componentes: como quebrar interfaces complexas em peças pequenas, "puras" e altamente testáveis. O uso do Shadcn UI não é apenas para agilidade visual, mas para herdar padrões de acessibilidade e tokens de design que garantem que nossa telemedicina tenha a mesma cara e comportamento em qualquer módulo.

  1. Componentização e Ciclo de Vida:
  2. Hooks e Gerenciamento de Estado Local:
  3. Composição e Reutilização:
  4. Design System (Shadcn UI):
  5. Clean Code e Simplicidade:

Fase 3: Estado de Servidor e Rede ​

Integrando a aplicação com APIs externas de forma resiliente e segura. Aqui, mudamos o foco da interface para o dado. O grande desafio é gerenciar a assincronicidade e a latência da rede, tratando estados de erro e carregamento como " cidadãos de primeira classe" na UI. O TanStack Query entra para resolver o cache e a sincronização, enquanto as práticas de segurança da OWASP garantem que os dados sensíveis dos nossos pacientes não fiquem vulneráveis.

  1. Server State (TanStack Query):
    • Chaves de cache, staleTime e stale-while-revalidate.
    • Estados de UI: Loading, Error, Success e Fetching.
    • TanStack Query
  2. Comunicação API (Axios):
  3. Segurança Inicial (OWASP):
  4. Métricas de Usuário:
    • Entendimento de Core Web Vitals e UX de rede.
    • Web Vitals

Fase 4: Estado Global e Fluxos Assíncronos Complexos ​

Gerenciando a complexidade de grandes aplicações e lógicas de negócio pesadas que transcendem uma única tela. Em sistemas de telemedicina, temos processos que duram muito tempo (como uma chamada de vídeo ou um upload de exame pesado) e exigem orquestração. O Redux Toolkit e o Saga são nossas ferramentas de escolha para lidar com essa concorrência e garantir que o estado da aplicação permaneça consistente mesmo sob condições complexas de rede ou interação.

  1. Estado Global (Redux Toolkit):
  2. Side Effects e Saga:
    • Lógica assíncrona complexa, concorrência e race conditions.
    • Redux Saga
  3. UX de Alta Fidelidade:
    • Skeletons, Optimistic Updates, Toasts e Feedbacks dinâmicos.
  4. Testes de Interface (RTL):
  5. Programação Funcional Aplicada:
    • Funções puras, Imutabilidade e Paradigma Reativo.
    • P. Funcional

Fase 5: Arquitetura, Engenharia e Qualidade ​

Tomando decisões de estrutura que garantem que o código continue escalável por anos. Nesta etapa, o foco deixa de ser " como fazer" e passa a ser "como organizar". Aplicamos padrões como SOLID e arquitetura em camadas para garantir o desacoplamento. O objetivo é que a lógica de negócio (quem o paciente é, que exame ele fez) esteja isolada de como ela aparece na tela (JSX). Isso permite trocar tecnologias sem precisar reescrever as regras do sistema.

  1. Arquitetura por Camadas:
  2. Modularização Profunda:
  3. Engenharia de Software (SOLID):
  4. Desenvolvimento Guiado por Testes (TDD):
  5. Otimização de Backend para Frontend (BFF):
    • Agregação de dados e redução de overfetching.
    • Guia de BFF

Fase 6: Performance Avançada e Resiliência ​

Refinando o sistema para alta escala, dispositivos limitados e redes instáveis. Como atuamos no SUS, nossos usuários nem sempre terão o iPhone de última geração ou 5G estável. Esta fase foca em garantir que a aplicação rode em dispositivos de entrada através de virtualização de listas, processamento em threads separadas (Web Workers) e arquiteturas desacopladas por eventos que não "travam" a interface do usuário.

  1. Performance de Renderização:
  2. Processamento Pesado e Paralelismo:
  3. Arquitetura de Eventos:
  4. Segurança Profunda e Auditoria:

Fase 7: Liderança, Governança e Visão Sistêmica ​

Sendo referência técnica, definindo padrões e influenciando a evolução tecnológica da companhia. No topo da trilha, o engenheiro deve entender os "internals" do framework para otimizações de baixo nível e ser capaz de projetar sistemas Multi-tenant e estratégias de Monorepo. O foco aqui é a governança: criar regras que ajudem o time a trabalhar melhor e garantir que a segurança e a resiliência sejam partes intrínsecas da cultura de engenharia.

  1. Governança e DX (Developer Experience):
    • Regras de Lint, ADRs (Architecture Decision Records) e Code Review consultivo.
  2. Internals do Framework:
  3. Arquitetura Enterprise:
  4. Resiliência Extrema:
    • Offline First, Sincronização Delta e Resolução de Conflitos.
  5. Segurança Organizacional e Compliance:
  6. Algoritmos e Estruturas de Dados:

Como usar este Roadmap? ​

  1. Foque nos Gaps: Não precisa ler tudo de uma vez. Identifique quais tópicos da sua fase atual você ainda não domina e use os links para estudar.
  2. Pratique com Desafios: Cada nível técnico possui um botão Testar meu nível na Grade de Nivelamento com desafios práticos de Telemedicina.
  3. Consulte os Guias: Os links acima levam para a "Fonte da Verdade" técnica da nossa equipe.
  4. Evolua no seu ritmo: O aprendizado é contínuo. Este Roadmap é um organismo vivo e será atualizado conforme novas tecnologias forem adotadas.

Próximo Passo: Grade de Nivelamento