How Deep Is Your Micro Frontend

Slide 1

Slide 1 text

How Deep Is Your Micro Frontend? Michael Geers 12. June 2023, Micro Frontends Conference

Slide 2

Slide 2 text

Who am I? Michael Geers 👨💻 Software Engineer 📐 Frontend Architect 💚 Web Technology Fanboy Author 📕 Micro Frontends in Action, Manning 📝 micro-frontends.org Passion ☀🚘 open source solar charging 👉 evcc.io #renewableEnergy

Slide 3

Slide 3 text

I work at We build tailored e-commerce systems together for and with traditional companies.

Slide 4

Slide 4 text

Common Situation Existing off-the-shelf e-commerce system (monolith) reached its limit.

Slide 5

Slide 5 text

Growing Pains Technical Reasons Scaling gets too expensive. Changes often introduce errors. Organisational Reasons Too many people in one repo. Rules and processes to avoid chaos.

Slide 6

Slide 6 text

Solution: Verticalization monolith micro frontends Today’s topic

Slide 7

Slide 7 text

verticalization / self-contained systems / micro frontends Today’s topic and this Micro Frontend Depth

Slide 8

Slide 8 text

Micro Frontend Depth monolith verticalization / self-contained systems / micro frontends Today’s topic and this & Width BONUS A Challenging Real World Example

Slide 9

Slide 9 text

Depth levels

Slide 10

Slide 10 text

Frontend only frontend api gateway backend microservices frontend backend monolith legacy system, headless SaaS, …. frontend multiple backend systems browser stuff

Slide 11

Slide 11 text

Frontend + Backend 1* frontend BFF   backend for frontend backend microservices business logic *data gathering (aka BFF)

Slide 12

Slide 12 text

Frontend + Backend 2* frontend *including business logic backend business logic domain #1 domain #2 domain #3 domain #4 operations shared platform

Slide 13

Slide 13 text

Frontend + Backend + Ops frontend you build it, you run it backend business logic domain #1 domain #2 domain #3 domain #4 operations infrastructure

Slide 14

Slide 14 text

🌟 Bene fi ts for going deeper technology independence parallel frontend development continuous delivery autonomy level   waiting for others frontend only … … … … frontend + backend 1   data gathering … … … … frontend + backend 2   business logic … … … … frontend + backend + ops … … … …

Slide 15

Slide 15 text

Technology Independence easier migrations, right tool for the job

Slide 16

Slide 16 text

🌟 Bene fi ts for going deeper technology independence parallel frontend development continuous delivery autonomy level   waiting for others frontend only ✅ … … … frontend + backend 1   data gathering ✅ … … … frontend + backend 2   business logic ✅ … … … frontend + backend + ops ✅ … … …

Slide 17

Slide 17 text

Parallel Frontend Development teams have narrower scope can work side-by-side

Slide 18

Slide 18 text

🌟 Bene fi ts for going deeper technology independence parallel frontend development continuous delivery autonomy level   waiting for others frontend only ✅ ✅ … … frontend + backend 1   data gathering ✅ ✅ … … frontend + backend 2   business logic ✅ ✅ … … frontend + backend + ops ✅ ✅ … …

Slide 19

Slide 19 text

„In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team. This ensures that every feature is developed, tested and deployed independently from other features.“ Micro Frontends De fi nition: Thoughtworks Technology Radar 👩🏭 📦 🔬

Slide 20

Slide 20 text

Continuous delivery

Slide 21

Slide 21 text

🌟 Bene fi ts for going deeper technology independence parallel frontend development continuous delivery autonomy level   waiting for others frontend only ✅ ✅ ❌ … frontend + backend 1   data gathering ✅ ✅ ❌ … frontend + backend 2   business logic ✅ ✅ 😁 … frontend + backend + ops ✅ ✅ 🤩 …

Slide 22

Slide 22 text

Frontend Payment Service Content Service Operations Platform Business Attributes Service Specialist Teams Team Inspire Team Decide Team Checkout Cross Functional Teams grouped around a use case or customer need grouped around a skill or technology developing a new feature inter-team communication ⏳ Autonomy level waiting for others Source: Micro Frontends in Action

Slide 23

Slide 23 text

🌈 Cross-Functional Teams 🤘

Slide 24

Slide 24 text

🌟 Bene fi ts for going deeper technology independence parallel frontend development continuous delivery autonomy level   waiting for others frontend only ✅ ✅ ❌ 😑 frontend + backend 1   data gathering ✅ ✅ ❌ 🙂 frontend + backend 2   business logic ✅ ✅ 😁 😁 frontend + backend + ops ✅ ✅ 🤩 🤩

Slide 25

Slide 25 text

😲 Drawbacks of high depth 🌈 cross-functional isn’t always easy 🍱 full-stack instead of specialization 🤯 team has a lot of responsibility 👪 greater minimum team size required

Slide 26

Slide 26 text

🌟 Bene fi ts for going deeper technology independence parallel frontend development continuous delivery autonomy level   waiting for others … frontend only ✅ ✅ ❌ 😑 … frontend + backend 1   data gathering ✅ ✅ ❌ 🙂 … frontend + backend 2   business logic ✅ ✅ 😁 😁 … frontend + backend + ops ✅ ✅ 🤩 🤩 … full-stack + business   own ideas, test & learn … … … … …

Slide 27

Slide 27 text

Vary the width

Slide 28

Slide 28 text

2 33 $ 66 $ 99 $ buy 2 1 66 $ 1 1 list home detail basket payment conﬁrm $ $ %% Team Inspire Team Decide Team Checkout Customer Journey Source: Micro Frontends in Action How do we separate? systems are aligned with user fl ow

Slide 29

Slide 29 text

UI Composition Team Inspire Team Decide Team Checkout Page Fragments Fragment different micro frontends on one screen if required Source: Micro Frontends in Action

Slide 30

Slide 30 text

1 team 1 system = our usual start

Slide 31

Slide 31 text

what’s a system? loosely coupled to others may consist of multiple stronger coupled services domain #2 domain #1

Slide 32

Slide 32 text

growing & shrinking low change rate focus shift feature demand   high success

Slide 33

Slide 33 text

shrinking 1 team n systems team takes responsibility for a foreign system

Slide 34

Slide 34 text

shrinking 1 team merge system - reduce complexity - works for similar tech-stacks

Slide 35

Slide 35 text

prepare for growth Pattern #1 : start with n systems per team n teams 1 team split team if needed works great in a known domain   > low risk for wrong cuts higher operational complexity if cuts are not needed

Slide 36

Slide 36 text

prepare for growth Pattern #2 : design system to be divided later n teams 1 team split system if needed modulith modular monolith Sollbruchstelle (German) predetermined breaking point

Slide 37

Slide 37 text

prepare for growth Pattern #2 : design system to be divided later n teams 1 team split system if needed modulith modular monolith Sollbruchstelle (German) predetermined breaking point

Slide 38

Slide 38 text

natural growth extract subteam and subsystem new team large team new system large system

Slide 39

Slide 39 text

more systems more integration more complexity

Slide 40

Slide 40 text

Real World Example Customer Chat Building a bike shed █ ██████ ████████ ██████ ████ ██████████████ ████████ ████ ██████████ send message inquiry system Chat interface for experts to support customers with their DIY projects. Customer Service Back Of fi ce

Slide 41

Slide 41 text

The Data Picker Pattern Customer Chat Building a bike shed █ ██████ ████████ ██████ ████ ██████████████ ████████ ████ ██████████ send message materials for premium bike shed #22 ███ ██ ██ █ + ▼ █ ██ █ ██ █ materials system inquiry system System for composing and managing part lists. Knows all products, individual pricing, discounts, availability, … included materials system acts as an HTML form fi eld containing the id of the selected list inquiry system doesn’t have to know anything about lists and products 😁 perfect decoupling

Slide 42

Slide 42 text

The Data Picker Pattern Customer Chat Building a bike shed █ ██████ ████████ ██████ ████ ██████████████ ████████ ████ ██████████ send message materials for premium bike shed #22 ███ ██ ██ █ + ▼ █ ██ █ ██ █ New Legal Requirement The state of a sent material list must be conserved. 🌟 Quick solution: inquiry system noti fi es materials system when a message is submitted via browser events. 🙂 still decoupled but two-way communication inquiry system materials system message sent event

Slide 43

Slide 43 text

Customer Chat Building a bike shed █ ██████ ████████ ██████ ████ ██████████████ ████████ ████ ██████████ send message materials for premium bike shed #22 ███ ██ ██ █ + ▼ █ ██ █ ██ █ inquiry system New Legal Requirement Documents can’t be modi fi ed after sending. 🌟 Solution: inquiry system includes document system. Same pattern as with materials system. materials system document system upload ███ ██   ███ █ ██ █ █ ██ New Feature Instructions and data sheets can be attached. 🌟 🫤 loosely coupled but increasing complexity message sent event

Slide 44

Slide 44 text

Customer Chat Building a bike shed █ ██████ ████████ ██████ ████ ██████████████ ████████ ████ ██████████ send message materials for premium bike shed #22 ███ ██ ██ █ + ▼ █ ██ █ ██ █ inquiry system materials system document system upload ███ ██   ███ █ ██ █ █ ██ New Feature Material lists can have a set of initial documents. 🌟 😭 loosely coupled but high complexity Hard to debug and change. Three teams are involved. list selection changed message sent event

Slide 45

Slide 45 text

Distributed Transactions

Slide 46

Slide 46 text

Architecture Principals for Decoupling ✅ Eventual Consistency ✅ Asynchronous Communication ✅ No Central Coordination

Slide 47

Slide 47 text

Tradeoffs Consistency Atomic Eventual Communication Synchronous Asynchronous Coordination Orchestration Choreograph loose coupling monolith mode

Slide 48

Slide 48 text

Tradeoffs Consistency Atomic Eventual Communication Synchronous Asynchronous Coordination Orchestration Choreograph loose coupling monolith mode

Slide 49

Slide 49 text

Tradeoffs Consistency Atomic Eventual Communication Synchronous Asynchronous Coordination Orchestration Choreograph loose coupling monolith mode

Slide 50

Slide 50 text

YouTube: Architecture. The Hard Parts by Neal Ford Book: Software Architecture - The Hard Parts (O'Reilly) Recommendation   Making Sensible Architecture Tradeoffs

Slide 51

Slide 51 text

Customer Chat Building a bike shed █ ██████ ████████ ██████ ████ ██████████████ ████████ ████ ██████████ send message materials for premium bike shed #22 ███ ██ ██ █ + ▼ █ ██ █ ██ █ upload ███ ██   ███ █ ██ █ █ ██ Are these the best system boundaries? Is this the best user experience?

Slide 52

Slide 52 text

How does UX work ? in a micro frontends architecture Who designs user fl ows? What are the tradeoffs?

Slide 53

Slide 53 text

UX UX UX How does UX fi t in? UX top down UX as a service part of the team

Slide 54

Slide 54 text

Getting user fl ow and system boundaries aligned will make integration easy. Discussing UX decisions and their tradeoffs in an early stage can save you a lot of technical complexity.

Slide 55

Slide 55 text

systems x business technical Structuring (existing) business units along domains.   Not only tech teams. 💬 alignment > less coordination 💡 validate ideas quickly 🚀 faster time to market

Slide 56

Slide 56 text

🌟 Bene fi ts for going deeper technology independence parallel frontend development continuous delivery autonomy level   waiting for others time to market   idea to implementation frontend only ✅ ✅ ❌ 😑 🚶 frontend + backend 1   data gathering ✅ ✅ ❌ 🙂 🚴 frontend + backend 2   business logic ✅ ✅ 😁 😁 🏍 frontend + backend + ops ✅ ✅ 🤩 🤩 🏎 full-stack + business   own ideas, test & learn ✅ ✅ 🤩 🤩 🚀

Slide 57

Slide 57 text

get it at manning.com with code ctwmcrfrontend23 🤫 The code also works for all other books there. I’ve written a book 35% off

Slide 58

Slide 58 text

🌈 Thanks for listening! fabricius.isometrics want more of this? Michael Geers naltatis geers.tv slides of this talk Woodshop Igor Ovsyannykov   https://unsplash.com/photos/ iXV0i4Wo4yc Tocotronic Stefan Müller   https:// fl ic.kr/p/JCTQXd Logistik falco   https://pixabay.com/de/photos/logistik- lager-transport-versand-852936/ Wooden Counter David Siglin   https://www.pexels.com/photo/blur-blurry- bokeh-close-up-347139/ Was zurückblieb Fabricius Seifert https://www.fabriciusseifert.de/ produkt/was-zurueckbleibt/ Credits

Slide 59

Slide 59 text

How Deep Is Your Micro Frontend? Michael Geers 12. June 2023, Micro Frontends Conference lov e 🎧