Escalando uma aplicação front-end além do código

Nessa talk será explorada a evolução de uma aplicação de larga-escala em React.js desde o dia zero até um cenário com cerca de quinze equipes de diferentes áreas desenvolvendo, sob diversos pontos de vista além do código: uma timeline de evoluções de padrões arquiteturais, qualidade, processos, cultura e organização.

Transcript

7. FEV/17
9. • • • • • FEV/17
10. • • • • • • JUN/17
11. SET/17 • •
12. NOV/17 •
13. FEV/18 •
14. • • • • • • FEV/19
15. Jest Cypress SassDoc Storybook TrackJS Sonarqube PR Check Release Deploy ESLint Stylelint Prettier Readme Guidebook Contributing Deployment
17. Ferramenta de testes unitários/integração • Desde o início • Threshold aumenta conforme priorização da qualidade • Benefícios proporcionais ao tamanho da aplicação
18. Ferramenta de testes end-to-end • Existe ambiente estável de homologação • Benefícios proporcionais à complexidade do ecossistema (APIs, bancos, filas, etc.)
20. Playground funcional de componentes • A equipe de design cresce e surgem tendências e inconsistências • A equipe de desenvolvedores cresce e o paralelismo aumenta
21. Documentação de variáveis/mixins SCSS • A equipe de design cresce e surgem tendências e inconsistências • A equipe de desenvolvedores cresce e o paralelismo aumenta
22. Overview de arquitetura e convenções • 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
24. Ferramenta de monitoramento • Aplicação está numa fase estável • Bugs se tornam críticos e existe espaço no backlog para as correções
25. Central de qualidade de aplicações • Critérios de qualidade estão bem definidos • Benchmarking melhora conforme a quantidade de aplicações
29. 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 1. Guias de release 2. Guias de deploy 3. Lista de jobs 4. Lista de hooks
31. Agrupamento por camadas • Repetição de namespaces • Features descentralizadas • Não-modularização • Consistência de comportamentos • Concerns organizados • Poucas features • Features simples • Definição de um workflow
32. Agrupamento por features com layers • Consistência de comportamentos • Concerns organizados • Modularização • Referência circular • Base de código pode ficar extensa • Muitas features • Features complexas
33. Extração do módulo de UI Kit • Reuso em outras aplicações • Versionamento independente • Consistência visual
35. Trello Discussões JIRA Bugs Convenções Melhorias Testes #alerts Canal de monitoramento #bugs Canal de report de bugs #releases Canal de releases #devs Canal dos devs Chapter Priorização de tasks Troca de conhecimento Proposições