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

MicroFrontends — The Past, the Present, and the...

MicroFrontends — The Past, the Present, and the Future

Full Stack Meetup Budapest

Avatar for SQUER Solutions

SQUER Solutions

June 01, 2022
Tweet

More Decks by SQUER Solutions

Other Decks in Technology

Transcript

  1. Micro Frontends: The Past, the Present, and the Future. @duffleit

    *and some of "Micro Frontends — The Bad Parts".
  2. @duffleit WebBanking New Payment 💸 € 20, 00 👧 Lisa

    to David from Perform Payment Banking Monolith Backend Frontend
  3. @duffleit WebBanking New Payment 💸 € 20, 00 👧 Lisa

    to David from Perform Payment Payment Backend Frontend Finances Onboarding
  4. @duffleit WebBanking New Payment 💸 € 20, 00 👧 Lisa

    to David from Perform Payment Payment Backend Frontend Finances Onboarding
  5. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity:
  6. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity:
  7. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: Verification Service Customer Service Backend For Frontend
  8. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: Verification Service Customer Service Backend For Frontend Consumer Driven APIs Generic APIs Generic APIs
  9. @duffleit No Domain Logic in Backend For Frontends. It's about

    Ui-Specific Aggregation, to get rid of over-fetching and over-requesting. Bad Part #1
  10. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity:
  11. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: Integration?
  12. @duffleit Just well structure and don't mess up your monolith.

    🚀 Links are still wonderful. 💯 Monorepo
  13. @duffleit WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20,

    00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity:
  14. @duffleit Just well structure and don't mess up your monolith.

    🚀 Links are still wonderful. 💯 Monorepo
  15. @duffleit Just well structure and don't mess up your monolith.

    🚀 Server Side Integration. Links are still wonderful. 💯
  16. @duffleit Just well structure and don't mess up your monolith.

    🚀 Server Side Integration. Integrate it all on the client side. ✌
  17. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: Iframes 👴 @duffleit Pure JS 😱 Web Components 😎
  18. MicroFrontend A MicroFrontend B MicroFrontend C What are the downsides?

    @duffleit Angular Angular Angular RxJS RxJS RxJS
  19. @duffleit Don't go for Micro Frontend only to fulfill your

    obsession with using the latest javascript frameworks out there. Bad Part #2
  20. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: This Integration Layer can become very complex. 🤯 @duffleit
  21. @duffleit Micro Frontends should allow us to enable fully verticalized

    teams not to be an interesting for your lead Frontend Engineer. Bad Part #3
  22. @duffleit Just well structure and don't mess up your monolith.

    🚀 Server Side Integration. Integration it all on the client side. ✌ Complexity 💰
  23. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: @duffleit @duffleit
  24. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: @duffleit @duffleit
  25. tl/dr: Build Micro Frontends with Progressive Enhancement in mind. @duffleit

    so, probably build it on top of Webpack Module Federation.
  26. if you plan to build Micro Frontends @duffleit give me

    a call, I'd love to challenge that you really need them. & even more important: