Squad Front

Appearance

Pleno 2 ​

Objetivo do Nível ​

Liderar tecnicamente pequenas iniciativas e subprojetos, sendo referência técnica para o time em padrões de estado e performance. Possui proatividade para sugerir mudanças na arquitetura global e nos guias de estilo.

Objetivo esperado: Refatora um módulo inteiro para melhorar a performance e manutenibilidade, implementando padrões de cache avançados e normalização de estado.

Critérios de Conhecimento ​

Fundamentos ​

  • Algoritmos e Estruturas de Dados: Entendimento de complexidade aplicado ao front-end. Ver guia de Algoritmos e ED.
  • Paradigma Reativo: Domínio de conceitos de programação reativa (Streams, Observables). Ver guia de Programação Reativa.

React Core ​

  • Server Components: Noções da arquitetura de RSC (React Server Components) e seu impacto no futuro do projeto. Ver guia de Arquitetura Avançada.
  • Concurrent Mode: Noções de como o React prioriza renders e uso de hooks como useTransition.

State ​

  • Caching Strategy: Definição de políticas de cache (Stale-while-revalidate) no TanStack Query.
  • Interoperabilidade: Como fazer diferentes estados (Local, Context, Global, Server) coexistirem sem conflitos.

Design Patterns ​

  • Patterns de Micro-frontends: Noções de como isolar aplicações e compartilhar estados entre elas. Ver guia de Micro-frontends.
  • Multi-tenant: Implementação de estratégias de Whitelabeling e configurações dinâmicas por cliente. Ver guia de Multi-tenant.
  • Design System Architecture: Como construir sistemas de design escaláveis e agnósticos.

Arquitetura ​

  • Arquitetura Orientada a Eventos: Uso de Event Bus ou Padrão Pub/Sub para desacoplamento de módulos. Ver guia de Pub/Sub.
  • DDD no Front-end: Aplicação de conceitos de Domain-Driven Design (Bounded Contexts, Entities, Value Objects) reforçando o SoC. Ver guia de DDD.
  • Engenharia: Aplicação exemplar de SOLID, KISS, DRY e Design Patterns (GOF básicos) em sistemas complexos.

Performance/Render ​

Testes ​

  • E2E Testing: Implementação de testes de ponta a ponta (Cypress ou Playwright) para fluxos críticos. Ver Estratégia de Testes e Guia de Testes.
  • Visual Regression: Noções de testes que comparam o visual da interface para evitar bugs estéticos. Ver guia de Testes.

Rede ​

Segurança ​

  • Prototype Pollution: Proteção contra ataques que poluem objetos globais do JavaScript.
  • Supply Chain Security: Auditoria ativa de dependências e análise de riscos em bibliotecas de terceiros.
  • Segurança em Frameworks: Domínio total das proteções nativas do React e quando elas não são suficientes.
  • Autenticação: Entendimento profundo de fluxos OAuth2 / OIDC e armazenamento seguro de tokens.

Entregáveis Esperados ​

  • Propostas de melhoria na infraestrutura de CI/CD para front-end.
  • Implementação de monitoramento de performance real-user (RUM).
  • Mentoria ativa e estruturada para desenvolvedores Júnior e Estagiários.

Como fazer vs Como não fazer ​

Como fazer ​

  • Documentar decisões de arquitetura via ADRs (Architecture Decision Records).
  • Pensar em soluções que escalem para múltiplos produtos (Teleconsulta e Telediagnóstico).
  • Promover a cultura de testes em toda a equipe.

Como não fazer ​

  • Realizar refatorações massivas sem testes de regressão.
  • Criar silos de conhecimento (não documentar o que foi feito).
  • Ignorar o feedback do QA sobre bugs recorrentes em determinados módulos.