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

fernando.maia@ifood.com.br@fsmaia