Squad Front

Appearance

Júnior 3 ​

Objetivo do Nível ​

Demonstrar domínio completo do fluxo de dados da aplicação, utilizando middlewares de estado global e padrões avançados de UX para entregar funcionalidades de alta qualidade, auxiliando na integração de novos membros.

Objetivo esperado: Implementa um fluxo complexo (ex: agendamento com múltiplas regras) utilizando Redux Saga para side-effects e garantindo feedback visual refinado (Skeletons/Toasts).

Critérios de Conhecimento ​

Fundamentos ​

  • Functional Programming: Conceitos de pureza, imutabilidade e funções de alta ordem. Ver guia de Programação Funcional.
  • TS Avançado: Utility Types (Pick, Omit, Partial), Generics básicos e Type Guards.

React Core ​

  • Context Pattern: Criação de provedores de contexto robustos com tratamento de performance (evitando re-renders globais).
  • Imperative Handle: Uso de useImperativeHandle quando estritamente necessário para expor métodos de componentes.

State ​

  • Redux Saga: Domínio de Effects (call, put, takeLatest, select). Ver guia de Redux Saga.
  • TanStack Query Avançado: Uso de useMutation, invalidação de queries e atualizações otimistas (Optimistic Updates). Ver guia de TanStack Query.
  • Normalização: Entender o conceito de normalizar o estado global para evitar redundância.

Design Patterns ​

  • Compound Components: Implementação de padrões como <Select><Select.Option/></Select>. Ver guia de Composição.
  • Render Props: Saber quando usar em vez de hooks (casos raros de componentes de layout).

Arquitetura ​

  • Fragmentos de Tela: Divisão de telas complexas em Fragment Components independentes e "burros".
  • Princípios SOLID: Aplicação consciente do SOLID em componentes e hooks.
  • Conceitos: Domínio do YAGNI, KISS e Web Vitals (conceitos básicos) em tarefas de média complexidade.
  • Comunicação entre Camadas: Respeitar rigorosamente o fluxo Screen -> Feature Hook -> Application Action seguindo o SoC.

Performance/Render ​

  • Virtualização: Uso de bibliotecas de virtualização para listas com milhares de itens. Ver guia de Performance.
  • Bundle Analysis: Noções de como analisar o tamanho do bundle e realizar otimizações.

Testes ​

  • Testes de Integração: Testar o fluxo completo entre o hook de tela e a lógica de funcionalidade. Ver Estratégia de Testes.
  • Coverage: Entender métricas de cobertura de código e focar em caminhos críticos.

Rede ​

  • Interceptor: Noções de interceptores do Axios para tratamento global de erros ou injeção de tokens.
  • Socket.io: Compreensão básica de eventos em tempo real (mapeamento de sockets).

Segurança ​

  • RBAC (Role-Based Access Control): Implementação de controle de acesso baseado em cargos (roles) na interface e ocultação de elementos sensíveis.
  • Clickjacking: Noção teórica e como headers de proteção (X-Frame-Options) ajudam a mitigar o risco.
  • Open Redirect: Cuidado ao manipular redirecionamentos baseados em parâmetros de URL.
  • SVG Security: Riscos ao lidar com uploads ou exibição de SVGs fornecidos por usuários.

Entregáveis Esperados ​

  • Fluxos assíncronos complexos com múltiplos side-effects via Saga.
  • Implementação de layouts responsivos complexos (Mobile-first).
  • Refatoração de componentes legados para os novos padrões técnicos.

Como fazer vs Como não fazer ​

Como fazer ​

  • Utilizar Skeleton Screens para carregamentos conforme o guia de UX.
  • Garantir a Acessibilidade (A11y) básica em todos os novos componentes.
  • Propor melhorias no Code Style baseado em dores do dia a dia.

Como não fazer ​

  • Misturar lógica de busca de dados (API) com lógica de transformação de dados na Screen.
  • Deixar chaves de tradução (i18n) fixas no código (se o projeto usar).
  • Ignorar o tratamento de erros em operações críticas (ex: salvamento de dados).