![Page 1: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/1.jpg)
Escalando uma aplicação front-end
Arquitetura, qualidade, processos e pessoas
![Page 2: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/2.jpg)
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
![Page 3: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/3.jpg)
Revolucionar o universo da
alimentação por uma vida mais
prática e prazerosa.
iFood
15 milhões
pedidos/mês
![Page 4: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/4.jpg)
Spotify Squad framework
● Tribos
● Squads
● Chapters
● Guilds
Organização
![Page 5: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/5.jpg)
Portal do parceiro
![Page 6: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/6.jpg)
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
![Page 7: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/7.jpg)
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
![Page 8: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/8.jpg)
Linha do tempo
![Page 9: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/9.jpg)
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
![Page 10: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/10.jpg)
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
![Page 11: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/11.jpg)
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
![Page 12: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/12.jpg)
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
![Page 13: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/13.jpg)
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
![Page 14: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/14.jpg)
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
![Page 15: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/15.jpg)
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
![Page 16: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/16.jpg)
QualidadeTestes
![Page 17: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/17.jpg)
Ferramenta de testes unitários/integração
Jest
● Desde o início
● Threshold aumenta conforme priorização da qualidade
Quando?
![Page 18: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/18.jpg)
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?
![Page 19: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/19.jpg)
QualidadeDocumentação
![Page 20: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/20.jpg)
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?
![Page 21: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/21.jpg)
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?
![Page 22: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/22.jpg)
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?
![Page 23: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/23.jpg)
QualidadeMonitoramento
![Page 24: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/24.jpg)
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?
![Page 25: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/25.jpg)
Central de qualidade de aplicações
Sonarqube
● Critérios de qualidade estão bem definidos
● Benchmarking melhora conforme a quantidade de aplicações
Quando?
![Page 26: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/26.jpg)
ProcessosJobs
![Page 27: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/27.jpg)
![Page 28: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/28.jpg)
ProcessosGuias
![Page 29: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/29.jpg)
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
![Page 30: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/30.jpg)
Arquitetura
![Page 31: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/31.jpg)
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
![Page 32: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/32.jpg)
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?
![Page 33: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/33.jpg)
Extração do módulo de UI Kit
Design system
● Reuso em outras aplicações● Versionamento independente● Consistência visual
Vantagens
![Page 34: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/34.jpg)
Pessoas
![Page 35: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/35.jpg)
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
![Page 37: front-end Escalando uma aplicação · 2019-05-17 · Focado em React.js desde 2017 Atualmente trabalho no iFood Guitarrista desde 1996 Aspirante a viajante Fernando Maia. Revolucionar](https://reader034.vdocuments.com.br/reader034/viewer/2022042222/5ec84107e7f4b405a134c4fa/html5/thumbnails/37.jpg)