front-end escalando uma aplicação · 2019-05-17 · focado em react.js desde 2017 atualmente...
TRANSCRIPT
Escalando uma aplicação front-end
Arquitetura, qualidade, processos e pessoas
Cientista da computação pela USP São Carlos
Desenvolvedor front-end desde 2014
Focado em React.js desde 2017
Atualmente trabalho no iFood
Guitarrista desde 1996
Aspirante a viajante
Fernando Maia
Revolucionar o universo da
alimentação por uma vida mais
prática e prazerosa.
iFood
15 milhões
pedidos/mês
Spotify Squad framework
● Tribos
● Squads
● Chapters
● Guilds
Organização
Portal do parceiro
Aplicação usada pelos restaurantes
para gerenciar a loja e acompanhar
resultados.
Portal do parceiro
Substituir o backoffice legado
Mantida pela tribo de restaurantes
Front, BFF e micro-serviços
Kickoff
3 front-enders
0 pull requests
0 usuários
0 pageviews/dia
Hoje
35 front-enders
2.000 pull requests
50.000 usuários
765.000 pageviews/dia
FEV/17 FEV/19
Linha do tempo
Kickoff
3 front-enders
0 pull requests
0 usuários
0 pageviews/dia
● React 15.x
● Redux 3.x
● Webpack 3.x
● Babel 6.x
● SASS
NOV/17FEV/17 SET/17 FEV/18 FEV/19JUN/17
Stack
Launch
3 front-enders
20 pull requests
250 usuários
1.200 pageviews/dia
● Jest
● Release job
● Deploy job
● ESLint
● Stylelint
● Readme
NOV/17SET/17 FEV/18 FEV/19JUN/17FEV/17
Qualidade e processos
Primeiro rollout
3 front-enders
40 pull requests
2.000 usuários
5.000 pageviews/dia
NOV/17SET/17 FEV/18 FEV/19FEV/17 JUN/17
● SassDoc
● Storybook
Qualidade e processos
Segundo rollout
5 front-enders
80 pull requests
10.000 usuários
20.000 pageviews/dia
NOV/17 FEV/18 FEV/19FEV/17 JUN/17 SET/17
● Sonarqube
Qualidade e processos
Rollout completo
7 front-enders
200 pull requests
15.000 usuários
100.000 pageviews/dia
NOV/17 FEV/18 FEV/19FEV/17 JUN/17 SET/17
● Cypress
Qualidade e processos
Fim do legado
35 front-enders
2.000 pull requests
50.000 usuários
765.000 pageviews/dia
● TrackJS
● PR check job
● Prettier
● Guidebook
● Contributing
● Deployment
NOV/17 FEV/18 FEV/19FEV/17 JUN/17 SET/17
Qualidade e processos
Jest
Cypress
TestesSassDoc
Storybook
Documentação MonitoramentoTrackJS
Sonarqube
PR check
Release
Deploy
Jobs Code styleESLint
Stylelint
Prettier
GuiasReadme
Guidebook
Contributing
Deployment
Qu
alid
ade
Pro
cess
osStack
QualidadeTestes
Ferramenta de testes unitários/integração
Jest
● Desde o início
● Threshold aumenta conforme priorização da qualidade
Quando?
Ferramenta de testes end-to-end
Cypress
● Existe ambiente estável de homologação
● Benefícios proporcionais à complexidade do ecossistema (APIs, bancos, filas, etc.)
● Benefícios também proporcionais ao tamanho da aplicação (segurança ao adicionar e refatorar)
Quando?
QualidadeDocumentação
Playground funcional de componentes
Storybook
● A equipe de design cresce e surgem tendências e inconsistências
● A equipe de desenvolvedores cresce e o paralelismo aumenta
Quando?
Documentação de variáveis/mixins SCSS
SassDoc
● A equipe de design cresce e surgem tendências e inconsistências
● A equipe de desenvolvedores cresce e o paralelismo aumenta
Quando?
Overview de arquitetura e convenções
Bônus: Guidebook
● Padroniza práticas e patterns
● Lint não é suficiente para padronizar
● Favorece a legibilidade, manutenção e revisão do código
● Funciona como onboarding
● A equipe de desenvolvedores cresce
Por quê?
Quando?
QualidadeMonitoramento
Ferramenta de monitoramento
TrackJS
● Aplicação está numa fase estável
● Bugs se tornam críticos e existe espaço no backlog para as correções
Quando?
Central de qualidade de aplicações
Sonarqube
● Critérios de qualidade estão bem definidos
● Benchmarking melhora conforme a quantidade de aplicações
Quando?
ProcessosJobs
ProcessosGuias
Readme Contributing
1. Guidebook
2. Commit
3. Pull-request
1. Setup
2. Execução do app
3. Execução de testes
4. Guidebook
5. Contributing
6. Deployment
Deployment
1. Guias de release
2. Guias de deploy
3. Lista de jobs
4. Lista de hooks
Arquitetura
Agrupamento por camadas
Layer-based
● Repetição de namespaces● Features descentralizadas● Não-modularização
Vantagens
Desvantagens
● Consistência de comportamentos● Concerns organizados
Quando?● Poucas features● Features simples● Definição de um workflow
Agrupamento por features com layers
Feature-based híbrido
● Consistência de comportamentos● Concerns organizados● Modularização
● Referência circular● Base de código pode ficar extensa
Vantagens
Desvantagens
● Muitas features● Features complexas
Quando?
Extração do módulo de UI Kit
Design system
● Reuso em outras aplicações● Versionamento independente● Consistência visual
Vantagens
Pessoas
Comunicação Boards
TrelloDiscussões
JIRABugs
Convenções
Melhorias
Testes
#alertsCanal de monitoramento
#bugsCanal de report de bugs
#releasesCanal de releases
#devsCanal dos devs
Reuniões
ChapterPriorização de tasks
Troca de conhecimento
Proposições
ObrigadoFernando Maia
[email protected]@fsmaia