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

MicroFrontends — The Past, the Present, and the Future

MicroFrontends — The Past, the Present, and the Future

Full Stack Meetup Budapest

E6c61f085d7aceaf97b7bd00e9195514?s=128

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. David Leitner @duffleit Coding Architect ✉ david@squer.at 🐥 @duffleit

  3. @duffleit

  4. @duffleit WebBanking New Payment 💸 € 20, 00 👧 Lisa

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

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

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

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

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity:
  9. 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
  10. 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
  11. @duffleit Persistence Logic Domain Logic Process Flow Presentation Backend For

    Frontend Domain Services
  12. @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
  13. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

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

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

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

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

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

    🚀 Server Side Integration. Links are still wonderful. 💯
  19. @duffleit Server Side Integration Server Side Includes or Edge Side

    Includes
  20. @duffleit Server Side Integration dashboard.layout.html profile.layout.html landing.layout.html layout server Onboarding

    Service Finances Service HTML Fragments HTML Fragments
  21. @duffleit Just well structure and don't mess up your monolith.

    🚀 Server Side Integration. Integrate it all on the client side. ✌
  22. 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 😎
  23. MicroFrontend A MicroFrontend B MicroFrontend C What are the downsides?

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

    obsession with using the latest javascript frameworks out there. Bad Part #2
  25. MicroFrontend A MicroFrontend B MicroFrontend C What are the downsides?

    @duffleit Angular RxJS SystemJS
  26. MicroFrontend A MicroFrontend B MicroFrontend C Webpack Module Federation, FTW!

    @duffleit Angular v13 Angular v12 Angular v13
  27. MicroFrontend A MicroFrontend B MicroFrontend C Webpack Module Federation, FTW!

    @duffleit . Angular v12 Angular v13
  28. 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
  29. @duffleit Micro Frontends should allow us to enable fully verticalized

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

    🚀 Server Side Integration. Integration it all on the client side. ✌ Complexity 💰
  31. Pure Server Side Integration, nor pure Client Side Integration is

    how we build WebApps today. @duffleit
  32. We embrace Progressive Enhancement. @duffleit

  33. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

    👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: @duffleit @duffleit
  34. @duffleit

  35. @duffleit Again, Webpack Module Federation, FTW!

  36. WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00

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

    so, probably build it on top of Webpack Module Federation.
  38. 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:
  39. David Leitner @duffleit Coding Architect ✉ david@squer.at 🐥 @duffleit