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

Microfrontends

 Microfrontends

como quebrar o frontend de aplicações enormes em partes menores

Rogério Chaves

May 04, 2017
Tweet

More Decks by Rogério Chaves

Other Decks in Programming

Transcript

  1. 2

  2. VANTAGENS 6 Autonomia para os times Deploys não precisam de

    sincronização Diversidade Tecnológica Performance Resiliência
  3. MAS SERÁ QUE TER TRÊS FRONTENDS SERIA UMA BOA IDEIA?

    7 a.seusite.com b.seusite.com c.seusite.com Qual eu acesso?
  4. DESAFIOS DE MICROFRONTENDS ALÉM DE MICROSERVIÇOS 9 Para o usuário,

    tem que parecer ser uma coisa só UI/UX consistente Performance ao ter muitas tecnologias Comunicação Carregamento e Integração (CORS?)
  5. APP OU COMPONENTE? 11 App
 tem uma razão própria para

    existir Componente
 só existe dentro de algum app
  6. CORTANDO O BOLO VERTICALMENTE 14 Equipe de Frontend Equipe de

    Backend Equipe de Operações Vários Produtos
  7. CORTANDO O BOLO VERTICALMENTE 15 Frontend Backend Operações Equipe do

    produto A Equipe do produto B Equipe do produto C
  8. PARTE II: JUNTANDO APPS EM UMA PÁGINA Temos os apps

    rodando separado, como juntar eles num mesmo lugar? 17
  9. CARREGANDO APPS DO BACKEND (MAIS FÁCIL) 20 Usuário Página Apps

    index header products-list cart cart products-list header index
  10. E SE ALGUM APP DEMORAR A CARREGAR? 21 Usuário Página

    Apps index header products-list cart cart products-list header index delay
  11. SOLUÇÃO 22 • Política de Performance (ex: < 200ms) •

    Times responsáveis por adiar o carregamento do que for necessário pra não atrapalhar a performance • Nginx SSI
  12. CARREGANDO OS APPS PELO FRONTEND (MAIS COMPLEXO) 23 Usuário Página

    Apps index header products-list cart cart products-list header
  13. 25

  14. ALTERNATIVAS 26 Alternativas Vantagens Desvantagens Backend Fácil de fazer Não

    necessita JS (SEO) Se um app fica mais lento, tudo fica mais lento iFrames Carrega em paralelo Isolamento completo Fácil de usar Não compartilha o mesmo estilo da página, problemas de comunicação, integração Client-Side JavaScript Carrega em paralelo Melhor integração É só JavaScript Trabalhoso de implementar Backend Progressive Loading Carrega progressivamente Não necessita JS (SEO) Difícil de implementar Só carrega na ordem WebComponents Carrega em paralelo Algum isolamento Padrão aberto Apps tem que se adaptar Os browsers ainda não concordam
  15. FAÇA UM PROXY PROS APPS 30 Usuário Página Apps index

    header products-list cart cart products-list header 30 header products-list cart cart products-list header proxy
  16. ROUTER 33 • Tem uma API • Equipes podem cadastrar

    suas próprias rotas • Páginas usam o Router pra descobrir onde estão os apps • Apps usam sua url no router para servir os assets • Resolve problema de CORS
  17. PARTE IV: CDNS + TECH RADAR PARA CONSENSO Como carregamos

    só uma versão da biblioteca que precisamos? Como fazemos as equipes concordarem em que tecnologias usar? 34
  18. TECH RADAR • Alinhamento • Flexibilidade na padronização • Criado

    em conjunto pelas equipes (mais democrático) • Repetido um frequência definida • Permite visualizar um movimento conforme a tecnologia evolui
  19. PARTE V: COMUNICAÇÃO No frontend, não temos uma API Rest

    pra usar, como fazer um app se comunicar com outro? 44
  20. 45

  21. NOTAS FINAIS • Não use nada disso a menos que

    você precise: só use uma solução complexa se você tiver um problema complexo
 • Criar, usar ou padronizar frameworks e bibliotecas pode te deixar preso à ferramenta, priorize soluções nativas e simples
 • Não use a mesma solução pra todas as equipes, cada equipe tem necessidades diferentes • Continue em constante evolução para que depois não seja tarde demais