Micro Frontends — Unraveling the Illusions

@duffleit Micro Frontends Unraveling the Illusions @duﬄeit

@duffleit DAVID LEITNER Coding Architect 👋 [email protected] 🌎 @duﬄeit

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

@duffleit Frontend Monolith Independent Deployments Independent Scale Resilience Technology Freedom

@duffleit

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

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

@duﬄeit Browser 👧 🧑 🧑 👧 🧑 🧑 👧 🧑
🧑 👧 🧑 🧑 Autonomous Teams 💃 Micro Frontend

@duﬄeit 👧 🧑 🧑 👧 🧑 🧑 👧 🧑 🧑
👧 🧑 🧑 Autonomous Teams 💃 🔗 Linked Applications

@duﬄeit Browser 👧 🧑 🧑 👧 🧑 🧑 👧 🧑
🧑 👧 🧑 🧑 Autonomous Teams 💃 Micro Frontend

@duﬄeit Build Time Browser 👷 💃 Mono repos Compose MicroFrontend
Build Time Integration

@duﬄeit Server Side Browser 👷 💃 SSI Compose MicroFrontend 👷
👷 👷 📦 📦 📦 📦 ESI Independent Deployments Resilience Server Side Integration

@duﬄeit Browser 👷 💃 👷 👷 👷 📦 📦 📦
📦 App Shell Independent Deployments Resilience Avoid Roundtrips Runtime Integration

@duﬄeit Server Time Build Time INtegration Server Side Integration Runtime
Integration Build Time Run Time ⭐

@duﬄeit Browser Global Dependency App Shell Independent Deployments Reusage vs.
Global Dependency

@duﬄeit Browser Loading Times App Shell Independent Deployments Reusage vs.
Global Dependency

@duﬄeit Browser Loading Times Independent Deployments Newer Version Default Version
Reusage vs. Global Dependency Webpack Module Federation

@duﬄeit tomdale.net/2017/09/compilers-are-the-new-frameworks SVELTE

@duﬄeit Browser Slow Rendering Times Slow Rendering Time ⏳ ⏳
⏳ ⏳

@duﬄeit Progressive enhancement

@duﬄeit SSR Slow Rendering Time Browser Hydration 📄 🚀

@duﬄeit Frontend Communication Browser

@duﬄeit Frontend Communication Browser 📜 📜 📜 📜 Contract Libs
Backward or Forward compatible to avoid Breaking Changes

@duﬄeit 🪢 Integration Patterns ♻ Reusage of Global Dependency 💦
SSR and Hydration ✉ Client Side Integration And many more

@duﬄeit Micro Frontends are a technical challenge with is basically
solved.

@duﬄeit Micro Frontends are a technical challenge with is basically
solved.* *famous last words

@duﬄeit How big should a Micro Frontend be? Which is
not a technical Question. Only as big to still ﬁt in our heads as a team. Daniel Terhorst-North

@duﬄeit Product Search Checkout Delivery Progress 👧 🧑 🧑 👧
🧑 🧑 👧 🧑 🧑 🔗 🤯 🤯 🤯 Team Vertical Limited by Cognitive Load

@duﬄeit Product Search Checkout Delivery Progress 👧 🧑 🧑 🔗
Product Catalogue Rating Basket 👧 🧑 🧑 👧 🧑 🧑

@duﬄeit Checkout Delivery Progress 👧 🧑 🧑 🔗 🔗 Product
Catalogue Rating Basket 👧 🧑 🧑 👧 🧑 🧑

@duﬄeit Checkout Delivery Progress 👧 🧑 🧑 Product Catalogue Rating
Basket 👧 🧑 🧑 👧 🧑 🧑

@duﬄeit Checkout Delivery Progress 👧 🧑 🧑 Rating ⭐ Product
🥭 Basket 🛍 Product Catalogue Rating Basket 👧 🧑 🧑 👧 🧑 🧑 Product Detail

@duﬄeit 👧 🧑 🧑 Rating ⭐ Product 🥭 Basket 🛍
Product Catalogue Rating Basket Product Detail 👧 🧑 🧑 👧 🧑 🧑

Product Catalogue Rating Basket Product Detail Rating ⭐ Product 🥭 🛍 Product Search Rating Basket Product Search Rating ⭐ Product 🥭 🛍 👧 🧑 🧑 👧 🧑 🧑

@duﬄeit 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.

Product Catalogue Rating Basket Product Detail Rating ⭐ Product 🥭 🛍 Product Search Rating Basket Product Search Rating ⭐ Product 🥭 🛍 👧 🧑 🧑 👧 🧑 🧑

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

@duﬄeit Product Search Checkout Delivery Progress 👧 🧑 🧑 👧
🧑 🧑 👧 🧑 🧑 🔗 🤯 🤯 🤯 Team Vertical Limited by Cognitive Load

Product Catalogue Rating Basket 👧 🧑 🧑 👧 🧑 🧑

Product Catalogue Rating Basket 👧 🧑 🧑 👧 🧑 🧑 👧 🧑 🧑

Product Catalogue Rating Basket 👧 🧑 🧑 👧 🧑 🧑 👧 🧑 🧑 📜 Backend For Frontend Value Stream

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

Basket 👧 🧑 🧑 👧 🧑 🧑 👧 🧑 🧑 Checkout Delivery Progress

Basket 👧 🧑 🧑 👧 🧑 🧑 👧 🧑 🧑 Checkout 🔗 👧 🧑 🧑 👧 🧑 🧑 👧 🧑 🧑 Deilvery 🔗 👧 🧑 🧑 👧 🧑 🧑

@duﬄeit So many thing to consider, Let’s sum up.

@duﬄeit We possess most of the technical foundations necessary to
successfully build Micro Frontends.

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

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

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

@duﬄeit 👧 🧑 🧑 👧 🧑 🧑 👧 🧑 🧑
👧 🧑 🧑 Autonomous Teams USER 💃 👧 🧑 🧑

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

@duﬄeit DAVID LEITNER Coding Architect 👋 [email protected] 🌎 @duﬄeit

Micro Frontends — Unraveling the Illusions

Micro Frontends — Unraveling the Illusions

More Decks by SQUER Solutions

Other Decks in Technology

Featured

Transcript

Micro Frontends —Unraveling the Illusions