$30 off During Our Annual Pro Sale. View Details »

Micro Frontends — Unraveling the Illusions

Micro Frontends — Unraveling the Illusions

Frontend Meetup Munich — FrontMuc

SQUER Solutions

September 21, 2023
Tweet

More Decks by SQUER Solutions

Other Decks in Technology

Transcript

  1. @duffleit
    Micro Frontends
    Unraveling the Illusions
    @duffleit

    View Slide

  2. @duffleit
    DAVID LEITNER
    Coding Architect
    👋 [email protected]
    🌎 @duffleit

    View Slide

  3. @duffleit
    Microfrontends
    a strive for fully verticalized teams
    Microfrontends in the Wild

    View Slide

  4. @duffleit
    Frontend
    Monolith
    Independent
    Deployments
    Independent
    Scale
    Resilience
    Technology
    Freedom

    View Slide

  5. @duffleit

    View Slide

  6. @duffleit

    View Slide

  7. @duffleit
    👧 🧑
    🧑
    👧 🧑
    🧑 👧 🧑
    🧑
    👧 🧑
    🧑
    Independent
    Deployments
    Resilience
    Autonomous
    Teams

    View Slide

  8. @duffleit
    We were so committed to the concept
    of Micro Frontends that we began
    addressing all the technical challenges
    associated with their implementation.

    View Slide

  9. @duffleit
    Browser
    👧 🧑
    🧑
    👧 🧑
    🧑 👧 🧑
    🧑
    👧 🧑
    🧑
    Autonomous
    Teams
    💃
    Micro
    Frontend

    View Slide

  10. @duffleit
    👧 🧑
    🧑
    👧 🧑
    🧑 👧 🧑
    🧑
    👧 🧑
    🧑
    Autonomous
    Teams
    💃
    🔗
    Linked
    Applications

    View Slide

  11. @duffleit
    👧 🧑
    🧑
    👧 🧑
    🧑 👧 🧑
    🧑
    👧 🧑
    🧑
    Autonomous
    Teams
    💃
    🔗
    Linked
    Applications

    View Slide

  12. @duffleit
    Browser
    👧 🧑
    🧑
    👧 🧑
    🧑 👧 🧑
    🧑
    👧 🧑
    🧑
    Autonomous
    Teams
    💃
    Micro
    Frontend

    View Slide

  13. @duffleit
    Build Time
    Browser
    👷
    💃
    Mono repos
    Compose MicroFrontend
    Build Time
    Integration

    View Slide

  14. @duffleit
    Server Side
    Browser
    👷
    💃
    SSI
    Compose MicroFrontend
    👷 👷 👷
    📦 📦 📦 📦
    ESI
    Independent
    Deployments
    Resilience
    Server Side
    Integration

    View Slide

  15. @duffleit
    Browser
    👷
    💃
    👷 👷 👷
    📦 📦 📦 📦
    App Shell
    Independent
    Deployments
    Resilience
    Avoid
    Roundtrips
    Runtime
    Integration

    View Slide

  16. @duffleit
    Server Time
    Build Time
    INtegration
    Server Side
    Integration
    Runtime
    Integration
    Build Time
    Run Time

    View Slide

  17. @duffleit
    Browser
    Global
    Dependency
    App Shell
    Independent
    Deployments
    Reusage vs. Global Dependency

    View Slide

  18. @duffleit
    Browser
    Loading Times
    App Shell
    Independent
    Deployments
    Reusage vs. Global Dependency

    View Slide

  19. @duffleit
    Browser
    Loading Times
    Independent
    Deployments
    Newer Version
    Default Version
    Reusage vs. Global Dependency
    Webpack
    Module Federation

    View Slide

  20. @duffleit
    tomdale.net/2017/09/compilers-are-the-new-frameworks
    SVELTE

    View Slide

  21. @duffleit
    Browser
    Slow Rendering
    Times
    Slow Rendering Time
    ⏳ ⏳ ⏳ ⏳

    View Slide

  22. @duffleit
    Progressive enhancement

    View Slide

  23. @duffleit
    SSR
    Slow Rendering Time
    Browser
    Hydration
    📄
    🚀

    View Slide

  24. @duffleit
    Frontend Communication
    Browser

    View Slide

  25. @duffleit
    Frontend Communication
    Browser

    View Slide

  26. @duffleit
    Frontend Communication
    Browser

    View Slide

  27. @duffleit
    Frontend Communication
    Browser
    📜 📜 📜 📜
    Contract Libs
    Backward or Forward
    compatible to avoid
    Breaking Changes

    View Slide

  28. @duffleit
    🪢 Integration Patterns
    ♻ Reusage of Global Dependency
    💦 SSR and Hydration
    ✉ Client Side Integration
    And many more

    View Slide

  29. @duffleit
    Micro Frontends are a technical
    challenge with is basically solved.

    View Slide

  30. @duffleit
    Micro Frontends are a technical
    challenge with is basically solved.*
    *famous last words

    View Slide

  31. @duffleit
    How big should a Micro Frontend be?
    Which is not a technical Question.
    Only as big to still fit
    in our heads as a team.
    Daniel Terhorst-North

    View Slide

  32. @duffleit
    Product Search Checkout Delivery Progress
    👧 🧑
    🧑
    👧 🧑
    🧑
    👧 🧑
    🧑
    🔗
    🤯 🤯 🤯
    Team Vertical Limited by Cognitive Load

    View Slide

  33. @duffleit
    Product Search Checkout Delivery Progress
    👧 🧑
    🧑
    🔗
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  34. @duffleit
    Checkout Delivery Progress
    👧 🧑
    🧑
    🔗
    🔗
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  35. @duffleit
    Checkout Delivery Progress
    👧 🧑
    🧑
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  36. @duffleit
    Checkout Delivery Progress
    👧 🧑
    🧑
    Rating ⭐
    Product 🥭
    Basket
    🛍
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑 Product
    Detail

    View Slide

  37. @duffleit
    👧 🧑
    🧑
    Rating ⭐
    Product 🥭
    Basket
    🛍
    Product
    Catalogue
    Rating
    Basket
    Product
    Detail
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  38. @duffleit
    👧 🧑
    🧑
    Rating ⭐
    Product 🥭
    Basket
    🛍
    Product
    Catalogue
    Rating
    Basket
    Product
    Detail
    Rating ⭐
    Product 🥭
    🛍
    Product
    Search Rating
    Basket
    Product
    Search
    Rating ⭐
    Product 🥭
    🛍
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  39. @duffleit
    Typically, we do not achieve full
    end-to-end verticalization in our value
    streams.
    As it is usually not beneficial to divide our value
    streams based solely on the provided UI representation.

    View Slide

  40. @duffleit
    👧 🧑
    🧑
    Rating ⭐
    Product 🥭
    Basket
    🛍
    Product
    Catalogue
    Rating
    Basket
    Product
    Detail
    Rating ⭐
    Product 🥭
    🛍
    Product
    Search Rating
    Basket
    Product
    Search
    Rating ⭐
    Product 🥭
    🛍
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  41. @duffleit
    👧 🧑
    🧑
    Rating ⭐
    Product 🥭
    Basket
    🛍
    Product
    Catalogue
    Rating
    Basket
    Product
    Detail
    Rating ⭐
    Product 🥭
    🛍
    Product
    Search Rating
    Basket
    Product
    Search
    Rating ⭐
    Product 🥭
    🛍
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  42. @duffleit
    Much of our complexity has started to
    reside outside of the value streams and
    instead lies in the orchestration of
    these finely-grained Micro Frontends.
    Which ultimately introduces high coupling.
    Independent
    Deployments
    Resilience

    View Slide

  43. @duffleit
    Product Search Checkout Delivery Progress
    👧 🧑
    🧑
    👧 🧑
    🧑
    👧 🧑
    🧑
    🔗
    🤯 🤯 🤯
    Team Vertical Limited by Cognitive Load

    View Slide

  44. @duffleit
    Product Search Checkout Delivery Progress
    👧 🧑
    🧑
    🔗
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  45. @duffleit
    Product Search
    Checkout Delivery Progress
    👧 🧑
    🧑
    🔗
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  46. @duffleit
    Product Search
    Checkout Delivery Progress
    👧 🧑
    🧑
    🔗
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  47. @duffleit
    Product Search
    Checkout Delivery Progress
    👧 🧑
    🧑
    🔗
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑
    👧 🧑
    🧑
    📜
    Backend For
    Frontend
    Value Stream

    View Slide

  48. @duffleit
    Product Search
    👧 🧑
    🧑
    🔗
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑
    👧 🧑
    🧑
    The integration and orchestration of
    the various capabilities offered by the
    value streams do not occur "between
    the teams”.
    One team accountable for delivering a
    great customer experience.

    View Slide

  49. @duffleit
    Product Search
    👧 🧑
    🧑
    🔗
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑
    👧 🧑
    🧑
    Checkout Delivery Progress

    View Slide

  50. @duffleit
    Product Search
    👧 🧑
    🧑
    🔗
    Product
    Catalogue
    Rating
    Basket
    👧 🧑
    🧑
    👧 🧑
    🧑
    👧 🧑
    🧑
    Checkout
    🔗
    👧 🧑
    🧑
    👧 🧑
    🧑
    👧 🧑
    🧑
    Deilvery
    🔗
    👧 🧑
    🧑
    👧 🧑
    🧑

    View Slide

  51. @duffleit
    So many thing to consider,
    Let’s sum up.

    View Slide

  52. @duffleit
    We possess most of the technical foundations
    necessary to successfully build Micro Frontends.

    View Slide

  53. @duffleit
    But Micro Frontends do not address technical
    challenges, they serve as a means to scale our
    engineering organization through
    full end-to-end verticals.

    View Slide

  54. @duffleit
    👧 🧑
    🧑
    👧 🧑
    🧑 👧 🧑
    🧑
    Autonomous
    Teams
    USER
    💃
    Useful vertical slices
    frequently do not align
    with the expected
    frontend channel
    experience.
    👧 🧑
    🧑

    View Slide

  55. @duffleit
    Micro Frontends address the sociotechnical
    challenge of enabling fully end-to-end
    verticalized organizations, a situation we rarely
    encounter in practice.

    View Slide

  56. @duffleit
    👧 🧑
    🧑
    👧 🧑
    🧑 👧 🧑
    🧑
    👧 🧑
    🧑
    Autonomous
    Teams
    USER
    💃
    👧 🧑
    🧑

    View Slide

  57. @duffleit
    The more your value streams differ from your
    user flows, the less Micro Frontends are the
    answer.

    View Slide

  58. @duffleit
    DAVID LEITNER
    Coding Architect
    👋 [email protected]
    🌎 @duffleit

    View Slide