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".
   

   View Slide

2. David Leitner
   @duffleit
   Coding Architect
   ✉ david@squer.at
   🐥 @duffleit
   

   View Slide

3. @duffleit
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
    

    View Slide

11. @duffleit
    Persistence Logic
    Domain Logic
    Process Flow
    Presentation Backend For Frontend
    Domain Services
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. @duffleit
    Server Side Integration
    Server Side Includes or Edge Side Includes
    

    View Slide

20. @duffleit
    Server Side Integration
    dashboard.layout.html
    profile.layout.html landing.layout.html
    layout server
    Onboarding
    Service
    Finances
    Service
    HTML Fragments
    HTML Fragments
    

    View Slide

21. @duffleit
    Just well structure
    and don't mess up
    your monolith.
    🚀 Server Side
    Integration.
    Integrate it all
    on the client
    side.
    ✌
    

    View Slide

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
    😎
    

    View Slide

23. MicroFrontend A MicroFrontend B MicroFrontend C
    What are the downsides?
    @duffleit
    Angular Angular Angular
    RxJS RxJS RxJS
    

    View Slide

24. @duffleit
    Don't go for Micro Frontend
    only to fulfill your obsession
    with using the latest javascript
    frameworks out there.
    Bad Part #2
    

    View Slide

25. MicroFrontend A MicroFrontend B MicroFrontend C
    What are the downsides?
    @duffleit
    Angular
    RxJS
    SystemJS
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

30. @duffleit
    Just well structure
    and don't mess up
    your monolith.
    🚀 Server Side
    Integration.
    Integration it
    all on the client
    side.
    ✌
    Complexity
    💰
    

    View Slide

31. Pure Server Side Integration,
    nor pure Client Side Integration
    is how we build WebApps today.
    @duffleit
    

    View Slide

32. We embrace
    Progressive Enhancement.
    @duffleit
    

    View Slide

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

    View Slide

34. @duffleit
    

    View Slide

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

    View Slide

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

    View Slide

37. tl/dr:
    Build Micro Frontends with
    Progressive Enhancement in mind.
    @duffleit
    so, probably build it on top of Webpack
    Module Federation.
    

    View Slide

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:
    

    View Slide

39. David Leitner
    @duffleit
    Coding Architect
    ✉ david@squer.at
    🐥 @duffleit
    

    View Slide