Construindo Interfaces Extensíveis

Palestra sobre Micro Frontends e como eles podem ajudar nos negócios e experiência de desenvolvimento.

Transcript

1. Construindo Interfaces Extensíveis Com foco nos negócios e experiência de desenvolvimento @simaodeveloper
2. História Evolução da Arquitetura Web
3. fonte: https://micro-frontends.org/
4. fonte: https://micro-frontends.org/
5. fonte: https://micro-frontends.org/
6. ✗Problemas Toda mudança requer um novo release
8. A manutenção se torna difícil ✗Problemas
9. Rapidamente se torna desatualizado ✗Problemas
10. Possui muitos componentes ✗Problemas
11. Daniel Simão
13. Micro Frontends
14. Micro Frontend Definição
15. "An architectural style where independently deliverable frontend applications are composed into a greater whole" - Martin Fowler
16. Benefícios Upgrades Incrementais ✓
18. Bases de código simples e desacopladas Benefícios ✓
19. Equipes autônomas Benefícios ✓
20. fonte: https://micro-frontends.org/
21. Implantação independente Benefícios ✓
22. fonte: https://martinfowler.com/articles/micro-frontends.html
23. Agnóstico de Framework Micro Frontend
25. Abordagens de integração Micro Frontend
26. Integração via Build-Time Micro Frontend
27. fonte: https://martinfowler.com/articles/micro-frontends.html
28. ✓ Fácil de configurar e entender; ✗ Implantações recorrentes; ✗ Acoplamento entre container e filhos; Integração via Build-Time
29. Integração via Run-Time Micro Frontend
30. fonte: https://martinfowler.com/articles/micro-frontends.html
31. ✓ Implantação independente; ✓ Implantação de diferentes versões; ✗ Ferramentas e configuração é mais complexa; Integração via Run-Time
32. Integração via Server-Side Composition Micro Frontend
33. fonte: https://martinfowler.com/articles/micro-frontends.html
34. fonte: https://martinfowler.com/articles/micro-frontends.html
35. ✓ Implantação independente; ✓ Renderização no Servidor - SSR; ✗ Aumento da complexidade no cliente e no servidor; Integração via Server-Side Composition
36. Estilo Micro Frontend
38. Bibliotecas de componentes compartilhados Micro Frontend
40. Comunicação entre aplicativos Micro Frontend
41. fonte: https://greenrobot.org/eventbus/ Event-Bus Pattern
43. fonte: https://github.com/microsoft/redux-micro-frontend Global Store Pattern
44. Comunicação com o backend Micro Frontend
45. fonte: https://martinfowler.com/articles/micro-frontends.html
46. Teste Micro Frontend
47. fonte: https://twitter.com/kentcdodds/status/960723172591992832 The Testing Trophy
48. Infraestrutura Micro Frontend
49. fonte: https://aws.amazon.com/pt/blogs/architecture/micro-frontend-architectures-on-aws/
50. Desvantagens Tamanho do payload ✗
51. ✓ Requisita dependências compartilhadas uma única vez; ✓ Requisita dependência divergente se necessário; ✓ Separa as dependências do bundle da aplicação; Webpack Module Federation ✓ Payload menor devido aos pequenos bundles; ✓ Integração via Build/Run-time (Controle fica no Frontend)
52. Diferenças de ambiente Desvantagens ✗
53. Complexidade operacional e de governança Desvantagens ✗
54. • Você tem automação suficiente para provisionar e gerenciar de maneira viável a infraestrutura adicional necessária? • Seus processos de desenvolvimento, teste e lançamento de frontend serão dimensionados para muitos aplicativos? • Você está confortável com as decisões sobre ferramentas e práticas de desenvolvimento se tornando mais descentralizadas e menos controláveis? Complexidade operacional e de governança • Como você garantirá um nível mínimo de qualidade, consistência ou governança em suas muitas bases de código frontend independentes?
55. Conclusão • Times independentes com foco no negócio e mais especializados; • Melhora na escala, manutenção e experiência de desenvolvimento; • Os trade-offsem relação a configuração inicial valem a pena no longo prazo; • É visível o ganho em Performance, Entrega de valor com maior frequência, Fácil integração de novos engenheiros...
56. Obrigado!