Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Arquitetura frontend para aplicações de alta es...

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

William Oliveira

June 15, 2022
Tweet

More Decks by William Oliveira

Other Decks in Programming

Transcript

  1. 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!
  2. 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
  3. 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 . .
  4. 1ª Entrega Página de login Backend for Frontend (BFF) Server

    Side Rendering Página da conta de cliente
  5. 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
  6. 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 .
  7. 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 .
  8. 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
  9. Construção de uma SPA Um único login . Informações mais

    centralizadas de acordo com o protótipo do time de UX .
  10. 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 …
  11. 4ª Entrega SSR BFF Uma aplicação única, com uma interface

    mais amigável, informações melhor disponibilizadas, um único login
  12. 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 .
  13. 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
  14. 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