Squad Front

Appearance

Grade de Nivelamento Web ​

Este documento define as expectativas técnicas e comportamentais para cada nível da carreira de desenvolvedor Web na Squad Front-end & Design. A progressão de nível é baseada na complexidade dos problemas resolvidos, autonomia e impacto no time.

1. Visão Geral dos Níveis ​

Para guiar seu aprendizado, criamos um Roadmap de Aprendizado Web que consolida todos os conhecimentos técnicos da nossa Squad em uma trilha lógica.

NívelFoco PrincipalImpacto
EstagiárioAprendizado e assistênciaTarefas acompanhadas e isoladas
Júnior (1, 2, 3)Execução e FundamentosEntregas de funcionalidades e bugs menores
Pleno (1, 2, 3)Autonomia e ArquiteturaDono de features e melhorias de processos
Sênior (1, 2, 3)Liderança e EstratégiaArquitetura sistêmica e mentoria

2. Critérios de Avaliação ​

Para que a avaliação seja justa e transparente, utilizamos critérios que abrangem desde o conhecimento básico até a visão estratégica de engenharia. Cada critério possui uma explicação do que é esperado (visão geral) e o porquê de ser fundamental para o nosso ecossistema técnico (visão técnica).

A. Fundamentos ​

  • Geral: É a base de tudo. Envolve o domínio das linguagens fundamentais da web: HTML, CSS e JavaScript.
  • Técnico: Sem uma base sólida em Box Model, Flexbox, Grid e ES6+, o desenvolvedor terá dificuldades em debugar problemas complexos de layout ou entender como o React funciona "por baixo dos panos". Isso garante que o código seja performático e siga os padrões da web.

B. React Core ​

  • Geral: Entender como a biblioteca principal que utilizamos funciona no dia a dia.
  • Técnico: O domínio de hooks, ciclo de vida e o processo de reconciliation do React é o que separa um desenvolvedor que apenas "copia código" de um que constrói interfaces eficientes. Evita gargalos de performance e bugs de sincronização de estado.

C. State (Estado) ​

  • Geral: Como o sistema armazena e compartilha informações entre as telas.
  • Técnico: No nosso projeto, lidamos com três tipos de estado: local (useState), global (Redux Toolkit/Saga) e de servidor (TanStack Query). Saber quando usar cada um é vital para a escalabilidade e para evitar que a aplicação se torne lenta ou inconsistente.

D. Design Patterns ​

  • Geral: Formas inteligentes e reutilizáveis de organizar o código e os componentes.
  • Técnico: Utilizamos padrões como Composition, Slots e Compound Components. Isso permite que nosso Design System seja flexível e que não precisemos "reinventar a roda" a cada nova feature, mantendo o código limpo (Clean Code) e fácil de manter.

E. Arquitetura ​

  • Geral: A organização das pastas e como as peças do sistema se conectam.
  • Técnico: Nossa arquitetura é baseada em camadas (Application, Feature, Screen). Seguir esse padrão é o que permite que múltiplos desenvolvedores trabalhem no mesmo projeto sem gerar conflitos e garante que a lógica de negócio esteja separada da interface visual.

F. Performance/Render ​

  • Geral: Garantir que o sistema seja rápido e não trave para o usuário.
  • Técnico: Avaliamos a capacidade de otimizar bundles, usar memoização (useMemo, useCallback) corretamente e identificar re-renderizações desnecessárias. Focamos em estratégias de renderização no lado do cliente (CSR) para garantir a melhor experiência em nossas plataformas. Em plataformas de saúde, a velocidade pode impactar diretamente a agilidade do atendimento médico.

G. Testes ​

  • Geral: Garantir que o que foi desenvolvido realmente funciona e não vai quebrar no futuro.
  • Técnico: Não focamos apenas em cobertura de código, mas em testes unitários e de integração que façam sentido para o negócio. Isso dá confiança para realizar refatorações e garante que bugs antigos não voltem a aparecer.

H. Rede (Networking) ​

  • Geral: Como o nosso site conversa com os servidores e bancos de dados.
  • Técnico: É essencial entender o protocolo HTTP, REST, gestão de Cookies, Headers e como tratar erros de conexão. Um desenvolvedor que entende de rede consegue diagnosticar se um problema está no front-end ou na API com muito mais rapidez.

I. Segurança ​

  • Geral: Proteger os dados da empresa e dos nossos pacientes.
  • Técnico: Boas práticas contra XSS, CSRF, gestão correta de tokens (JWT) e sanitização de dados são obrigatórias. Utilizamos ferramentas como o Horusec para análise estática de segurança. Como lidamos com dados sensíveis de saúde, a segurança não é um diferencial, é um requisito básico de conformidade.

3. Matriz de Nivelamento Detalhada ​

Clique em cada nível para ver os detalhes, objetivos e conhecimentos específicos esperados.

Início da Carreira ​

  • Estagiário: Foco em aprendizado e assistência guiada.

Nível Júnior ​

  • Júnior 1: Compreensão da estrutura e entregas simples.
  • Júnior 2: Consolidação de hooks e integração com APIs.
  • Júnior 3: Autonomia em fluxos de dados e padrões de UX.

Nível Pleno ​

  • Pleno 1: Autonomia técnica e decisões de arquitetura local.
  • Pleno 2: Liderança técnica de iniciativas e foco em performance.
  • Pleno 3: Referência absoluta e ponte entre produto e engenharia.

Nível Sênior ​

  • Sênior 1: Excelência técnica, visão sistêmica e mentoria.
  • Sênior 2: Liderança estratégica e padrões globais de engenharia.
  • Sênior 3: Visão de longo prazo e estratégia tecnológica da empresa.

4. Conceitos Teóricos Fundamentais ​

Esta seção serve como uma base de consulta para os princípios de engenharia e padrões de arquitetura adotados no nosso ecossistema. O objetivo é garantir que todos falem a mesma língua e compreendam o "porquê" por trás das nossas decisões técnicas.

Clique em cada conceito para ver o guia detalhado e exemplos:

5. Segurança Web ​

Como lidamos com dados sensíveis de saúde, a segurança é um requisito básico de conformidade. Clique em cada tópico para ver o guia detalhado:

6. Materiais de Apoio ​

Para evoluir nos critérios técnicos, utilize as seguintes referências:

7. Como usar esta grade? ​

Esta grade deve ser usada em conversas de 1:1 entre o colaborador e o líder técnico. O objetivo não é apenas dar uma nota, mas identificar os pontos de melhoria para o próximo passo na carreira.

Consulte o Roadmap Frontend como material de apoio externo para estudos.