Micro Frontends —Unraveling the Illusions

Slide 1

Slide 1 text

@duffleit Micro Frontends Unraveling the Illusions @duﬄeit

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

@duffleit Frontend Monolith Independent Deployments Independent Scale Resilience Technology Freedom

Slide 5

Slide 5 text

@duffleit

Slide 6

Slide 6 text

@duffleit

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@duﬄeit Progressive enhancement

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

@duﬄeit Frontend Communication Browser

Slide 25

Slide 25 text

@duﬄeit Frontend Communication Browser

Slide 26

Slide 26 text

@duﬄeit Frontend Communication Browser

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

@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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

@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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

@duﬄeit Product Search Checkout Delivery Progress 👧 🧑 🧑 🔗 Product Catalogue Rating Basket 👧 🧑 🧑 👧 🧑 🧑 👧 🧑 🧑 📜 Backend For Frontend Value Stream

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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