Microfrontends

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

Transcript

1. MICROFRONTENDS como quebrar o frontend de aplicações enormes em partes menores
3. QUEBRANDO O MONOLITO “Monolito”, por Rene Aigner 3
4. PRIMEIRO PASSO: QUEBRE O MONOLITO EM MICROSERVIÇOS 4 Frontend Serviços
5. SEGUNDO PASSO: QUEBRE O FRONTEND? 5 Frontend A Serviços Frontend B Frontend C
6. VANTAGENS 6 Autonomia para os times Deploys não precisam de sincronização Diversidade Tecnológica Performance Resiliência
7. MAS SERÁ QUE TER TRÊS FRONTENDS SERIA UMA BOA IDEIA? 7 a.seusite.com b.seusite.com c.seusite.com Qual eu acesso?
8. PARA O USUÁRIO, TEM QUE SER UMA COISA SÓ 8 seusite.com Ah sim!
9. 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?)
10. PARTE I: CRIANDO APPS ISOLADOS Uma aplicação frontend que pode ser deployada de forma independente 10
11. APP OU COMPONENTE? 11 App
 tem uma razão própria para existir Componente
 só existe dentro de algum app
12. VAMOS CRIAR TRÊS APPS 12
13. COMO RODAM OS APPS? 13
14. CORTANDO O BOLO VERTICALMENTE 14 Equipe de Frontend Equipe de Backend Equipe de Operações Vários Produtos
15. CORTANDO O BOLO VERTICALMENTE 15 Frontend Backend Operações Equipe do produto A Equipe do produto B Equipe do produto C
16. PLATAFORMAS 16 PaaS
17. PARTE II: JUNTANDO APPS EM UMA PÁGINA Temos os apps rodando separado, como juntar eles num mesmo lugar? 17
18. UMA PÁGINA COMPLETA 18
19. A PÁGINA JUNTA OS APPS 19 header.dominio.com products-list.dominio.com cart.dominio.com dominio.com
20. CARREGANDO APPS DO BACKEND (MAIS FÁCIL) 20 Usuário Página Apps index header products-list cart cart products-list header index
21. E SE ALGUM APP DEMORAR A CARREGAR? 21 Usuário Página Apps index header products-list cart cart products-list header index delay
22. 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
23. CARREGANDO OS APPS PELO FRONTEND (MAIS COMPLEXO) 23 Usuário Página Apps index header products-list cart cart products-list header
24. CARREGANDO OS APPS PELO FRONTEND (MAIS COMPLEXO)
26. 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
27. SOLUÇÃO MISTA 27 https://github.com/zalando/tailor
28. PARTE III: ROTEAMENTO E PUBLICPATH Como resolvemos CORS? O navegador precisa saber como acessar os recursos 28
29. CORS 29
30. 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
31. MAS E OS ARQUIVOS RELATIVOS? 31 Use URLs absolutas! https://webpack.js.org/guides/public-path/
32. ADICIONANDO UM ROUTER! 32 header.dominio.com products-list.dominio.com cart.dominio.com pagina.dominio.com Router dominio.com
33. 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
34. 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
35. ESTAMOS CARREGANDO REACT 3 VEZES! 35
36. 36 “100kb de JavaScript é mais pesado que 100kb de imagem” alguém no twitter
37. PODEMOS USAR UMA CDN NA PÁGINA 37
38. ESTAMOS CARREGANDO REACT 3 VEZES! 38 CDN
39. SAFE EXTERNALS 39
40. COMO CHEGAR A UM CONSENSO? 40
41. COMO CHEGAR A UM CONSENSO?
42. TECH RADAR https://www.thoughtworks.com/insights/blog/build-your-own-technology-radar
43. 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
44. PARTE V: COMUNICAÇÃO No frontend, não temos uma API Rest pra usar, como fazer um app se comunicar com outro? 44
46. COMUNICAÇÃO Enviando um evento Escutando um evento products-list cart
47. NOTAS FINAIS tl;dr: YAGNI 47
48. 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
49. PERGUNTAS? 49
50. OBRIGADO