Onboarding Front-End
Bem-vindo ao time de Front-End! Este roteiro ajudará você a configurar suas ferramentas e entender nossos padrões técnicos.
1. Carta para Você (Obrigatório)
Antes de qualquer coisa, leia a nossa Carta para Você. Ela define o nosso propósito e a importância do trabalho que realizamos aqui.
2. Permissões e Acessos
Antes de iniciar, verifique se você possui acesso às seguintes ferramentas:
- Git: Acesso ao repositório no Github/Gitlab.
- Figma: Acesso aos projetos e ao Design System.
- ClickUp: Acesso às tasks e documentação de produto.
- Plataforma Teleconsulta: Acesso ao ambiente de Dev/Staging.
- Plataforma Telediagnóstico: Acesso ao ambiente de Dev/Staging.
- Plataforma Treinamento: Acesso a Rocketseat.
3. Configuração do Ambiente
- IDE: Instale o WebStorm (obrigatório). Configure o Prettier para rodar ao salvar.
- Node.js: Use a versão LTS (atualmente v20+). Recomendamos o uso de nvm.
- Configuração e GitFlow:
- Git: Configure seu usuário e e-mail globalmente.
4. Arquitetura do Sistema
Nosso projeto é dividido em camadas para garantir escalabilidade:
- Camada de Aplicação: Actions, API, Configurações.
- Camada de Funcionalidade: Lógica de negócio, Business Rules.
- Camada de Tela: Componentes visuais e hooks de tela.
5. Fundamentos Teóricos
Antes de mergulhar no código, é essencial dominar os pilares de engenharia que sustentam nossa qualidade:
- SOLID: Princípios para código robusto.
- POO: Aplicação idiomática no TypeScript.
- BFF: Nossa estratégia de consumo de dados.
- Clean Code: Escrevendo código para humanos.
- DRY, KISS e YAGNI.
- SoC: A base da nossa arquitetura.
- Multi-tenant: Como servimos múltiplos clientes.
- Design Patterns: Soluções comuns em TS/React.
- Acessibilidade e Web Vitals.
- Interface vs Type: Quando usar cada um.
6. Segurança
A segurança não é um diferencial, é um requisito básico de conformidade em nossas plataformas de saúde:
- Segurança Web: Ataques, Headers e Boas Práticas.
- Ferramentas de Análise: SAST, DAST e Horusec.
- Cadeia de Suprimentos: Gestão segura de dependências.
7. Padrões de Desenvolvimento
- CodeStyle (obrigatório): Leia e siga o nosso Guia de Estilo de Código. Em especial, confira Nomenclatura e Declaração de Funções.
- React Fragment e Fragment Component.
- Estado: Use TanStack Query para dados do servidor e Redux Toolkit/Saga para estado global complexo.
- Erros: Use classes de erro customizadas que estendem
Error. Veja mais.
8. Design System
Consumimos o @ptm/design-system. Antes de criar um componente novo, verifique se ele já não existe ou se pode ser composto usando slots. Entender o design é parte do trabalho do Front-End:
- Guia de UX e Design System
- Design Foundations
- Conceitos de UX
- Tratamento de Erros (UX)
- Estados de Loading (UX)
- Design Tokens
- Slots e Composição
- Design Handoff (Visão do desenvolvedor)
9. Primeiros Passos
- Faça o clone do repositório principal.
- Rode
npm install. - Crie uma branch seguindo o Padrão de Nomenclatura.
- Realize uma pequena alteração (ex: ajustar um label) e abra um Pull Request para entender o fluxo de review.
10. Treinamento e Aprendizado (Rocketseat)
11. Finalização e Feedback
- Crie um relatório de duas páginas de forma geral sobre o seu progresso.
- Feedback (Obrigatório): Realize o seu feedback sobre o processo de onboarding seguindo as orientações em * *Feedback de Onboarding**.
- Consulte a Grade de Nivelamento Web para entender as expectativas do seu nível e planejar sua evolução.
Recursos Úteis: