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

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

Rai Siqueira
September 22, 2020

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.

Rai Siqueira

September 22, 2020
Tweet

More Decks by Rai Siqueira

Other Decks in Programming

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
  3. None
  4. None
  5. Storytelling

  6. None
  7. None
  8. None
  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
  22. None
  23. None
  24. Demo

  25. None
  26. None
  27. None
  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