MicroFrontends — The Past, the Present, and the Future

Full Stack Meetup Budapest

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