FrontJS 7 - Micro frontends - Hype ou não?

Apresentação sobre o conceito de micro frontends, e quais metodologias podem ser abordadas para aplicar MFe em aplicações frontend.

Transcript

1. Micro Frontends Hype ou não?
2. Raí Siqueira Engenheiro de software e Tech Leader na Justa Pagamentos, apaixonado por tecnologias web, fã de cerveja e Open-Source. Entusiasta Docker. LinkedIn: https://linkedin.com/in/raisiqueira GitHub: https://github.com/raisiqueira Instagram: https://instagram.com/rai_siqueira Site: https://raisiqueira.dev
5. Storytelling
9. Micro Frontends
10. Quando surgiu o termo? Fonte: https://www.thoughtworks.com/pt/radar/techniques/micro-frontends
11. Quando foi indicado o uso? Fonte: https://www.thoughtworks.com/pt/radar/techniques/micro-frontends
12. Bundle menores CI/CD independente Times autônomos Agnóstico a tecnologia
13. Bundle menores CI/CD independente Times autônomos Agnóstico a tecnologia
14. Bundle menores CI/CD independente Times autônomos Agnóstico a tecnologia
15. Bundle menores CI/CD independente Times autônomos Agnóstico a tecnologia
16. Bundle menores CI/CD independente Times autônomos Agnóstico a tecnologia
17. Como “fazer” micro frontends?
18. HTML Iframes HTML portals* Web Components ES Modules Frameworks p/ micro frontends SSR (Server side render) Path based Webpack module federations* Pacotes NPM
19. HTML Iframes HTML portals* Web Components ES Modules Frameworks p/ micro frontends SSR (Server side render) Path based Webpack module federations* Pacotes NPM
20. HTML Iframes HTML portals* Web Components ES Modules Frameworks p/ micro frontends SSR (Server side render) Path based Webpack module federations* Pacotes NPM
21. Frameworks para MFe’s (JS runtime) qiankun（乾坤） Single SPA One App - Amex
24. Demo
28. Resumo - Vá com calma, analise junto do seu time se MFe se encaixa no escopo dos seus projetos;
29. Resumo - Vá com calma, analise junto do seu time se MFe se encaixa no escopo dos seus projetos; - Autonomia (foque em desacoplar sua aplicação e na manutenibilidade da mesma);
30. Fontes - https://www.thoughtworks.com/pt/radar/techniques/micro-frontends - https://wicg.github.io/portals/ - https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/iframe - https://webpack.js.org/concepts/module-federation/ - https://single-spa.js.org/
31. Links para as demos - https://github.com/raisiqueira/react-webpack-module-federation - https://github.com/raisiqueira/micro-frontend-test
32. Thanks! #tamojusto
33. Estamos contratando!!!! https://jobs.kenoby.com/justa https://github.com/justapagamentos