Arquitetura frontend para aplicações de alta escalabilidade - William Oliveira (@1ilhas)

Com a evolução dos produtos digitais, o client side se tornou algo mais complexo de desenvolver, manter e escalar, mas também surgiram novas formas de produzir um frontend de qualidade e alta escalabilidade, vamos analisar algumas opções e casos de uso

Transcript

1. Arquitetura frontend para aplicações de alta escalabilidade William Oliveira (@1ilhas)
2. Antes de começar Não vamos entrar no debate de o que é arquitetura de software 1 3 2 Vamos passar rapidamente por algumas arquiteturas que não são o foco de hoje O último slide é o melhor!
3. Vamos imaginar um sistema dentro de uma empresa que está em constante evolução. Vamos evoluir o sistema e conhecer algumas alternativas de arquitetura durante o processo. Como vai funcionar
4. O que seria escalabilidade em uma interface?
5. • Resiliência • Disponibilidade • Qualidade • Segurança • Performance • Tolerância a falhas
6. Tribo de atendimento ao cliente de um grande banco . Sua squad acabou de nascer, seu produto está em construção Sem atendimento a empresa não lança novas features . .
7. 1ª Entrega Página de login Backend for Frontend (BFF) Server Side Rendering Página da conta de cliente
8. Backend for Frontend BFF Backend exclusivo da nossa aplicação Usuários Conta
9. Server Side Rendering (SSR) BFF SSR
10. Problemáticas
11. Possíveis soluções Copiar e colar os componentes de outras aplicações em nosso repositório 1 3 2 Refazer todos os componentes por nossa conta Criar uma biblioteca de componentes
12. Shared Components! Componentes compartilhados com o mesmo design system e comportamento em todas as aplicações . Inner source: geral pode dar manutenção e agilizar o amadurecimento da nossa lib de componentes .
13. Shared components Design System Manual da marca Biblioteca de componentes Site do bancão Software de atendimento
14. 2ª Entrega Shared components
15. Desafio! Precisamos integrar a nossa solução com outras 3 unidades de negócios da empresa .
16. 3ª Entrega / Integração BFF Usuários Conta C. Crédito Pontos Empréstimos
17. 3ª Entrega / Integração SSR SSR SSR BFF
18. 3ª Entrega / Integração Três novas aplicações, uma para cada nova unidade de negócio
19. Problemática TMA está subindo por ter vários sistemas em várias abas. As informações estão espalhadas e nosso time precisa se logar em cada aplicação que abre novamente .
20. Possíveis soluções Não responder clientes denunciando no ReclameAqui pela demora no atendimento 1 3 2 Juntar as unidades de negócio em uma mesma aplicação Trocar de emprego
21. Construção de uma SPA Um único login . Informações mais centralizadas de acordo com o protótipo do time de UX .
22. Clean Arch Arquitetura em camadas, independente de tecnologia, com alta testabilidade . Conseguimos criar novas telas rapidamente, adicionando novos use cases . app components Card Header Navigation Typography entities CreditCards Miles Statement User infrastructure http-client pages CreditCards Home Login Statement …
23. 4ª Entrega SSR BFF Uma aplicação única, com uma interface mais amigável, informações melhor disponibilizadas, um único login
24. Single Page Application Shared libraries Clean Architecture Server Side Rendering Backend for frontend
25. Desafio! A empresa não para de crescer, temos muitos novos produtos para conectar e o nosso time já não está mais dando conta .
26. Possíveis soluções A empresa pode parar de lançar novos produtos 1 3 2 Podemos contratar mais pessoas e fazer uma squad de 20 pessoas Utilizar uma arquitetura em que outros times podem "plugar" telas em nosso sistema
27. 5ª Entrega / MFE Squad Atendimento Squad Empréstimos Squad Milhas Squad Cartões
28. 5ª Entrega / MFE SSR BFF BFF BFF BFF
29. 5ª Entrega Uma aplicação única, com acesso a todos os sistemas da empresa, sem que um time único esteja sobrecarregado com a construção de novas interfaces
30. Single Page Application Shared libraries Clean Architecture Server Side Rendering Backend for frontend Microfrontends
31. Valeu!