How Deep Is Your Micro Frontend

talk at Micro Frontends Conference 2023
https://conference.microfrontends.cloud

Recording
https://youtu.be/r8MSfF8xNvc

Transcript

1. How Deep Is Your Micro Frontend? Michael Geers 12. June 2023, Micro Frontends Conference
2. 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
3. I work at We build tailored e-commerce systems together for and with traditional companies.
4. Common Situation Existing off-the-shelf e-commerce system (monolith) reached its limit.
5. 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.
6. Solution: Verticalization monolith micro frontends Today’s topic
7. verticalization / self-contained systems / micro frontends Today’s topic and this Micro Frontend Depth
8. Micro Frontend Depth monolith verticalization / self-contained systems / micro frontends Today’s topic and this & Width BONUS A Challenging Real World Example
9. Depth levels
10. Frontend only frontend api gateway backend microservices frontend backend monolith legacy system, headless SaaS, …. frontend multiple backend systems browser stuff
11. Frontend + Backend 1* frontend BFF 
 backend for frontend backend microservices business logic *data gathering (aka BFF)
12. Frontend + Backend 2* frontend *including business logic backend business logic domain #1 domain #2 domain #3 domain #4 operations shared platform
13. Frontend + Backend + Ops frontend you build it, you run it backend business logic domain #1 domain #2 domain #3 domain #4 operations infrastructure
14. 🌟 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 … … … …
15. Technology Independence easier migrations, right tool for the job
16. 🌟 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 ✅ … … …
17. Parallel Frontend Development teams have narrower scope can work side-by-side
18. 🌟 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 ✅ ✅ … …
19. „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 👩🏭 📦 🔬
20. Continuous delivery
21. 🌟 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 ✅ ✅ 🤩 …
22. 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
23. 🌈 Cross-Functional Teams 🤘
24. 🌟 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 ✅ ✅ 🤩 🤩
25. 😲 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
26. 🌟 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 … … … … …
27. Vary the width
28. 2 33 $ 66 $ 99 $ buy 2 1 66 $ 1 1 list home detail basket payment confirm $ $ %% Team Inspire Team Decide Team Checkout Customer Journey Source: Micro Frontends in Action How do we separate? systems are aligned with user fl ow
29. UI Composition Team Inspire Team Decide Team Checkout Page Fragments Fragment different micro frontends on one screen if required Source: Micro Frontends in Action
30. 1 team 1 system = our usual start
31. what’s a system? loosely coupled to others may consist of multiple stronger coupled services domain #2 domain #1
32. growing & shrinking low change rate focus shift feature demand 
 high success
33. shrinking 1 team n systems team takes responsibility for a foreign system
34. shrinking 1 team merge system - reduce complexity - works for similar tech-stacks
35. 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
36. 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
37. 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
38. natural growth extract subteam and subsystem new team large team new system large system
39. more systems more integration more complexity
40. 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
41. 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
42. 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
43. 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
44. 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
45. Distributed Transactions
46. Architecture Principals for Decoupling ✅ Eventual Consistency ✅ Asynchronous Communication ✅ No Central Coordination
47. Tradeoffs Consistency Atomic Eventual Communication Synchronous Asynchronous Coordination Orchestration Choreograph loose coupling monolith mode
48. Tradeoffs Consistency Atomic Eventual Communication Synchronous Asynchronous Coordination Orchestration Choreograph loose coupling monolith mode
49. Tradeoffs Consistency Atomic Eventual Communication Synchronous Asynchronous Coordination Orchestration Choreograph loose coupling monolith mode
50. YouTube: Architecture. The Hard Parts by Neal Ford Book: Software Architecture - The Hard Parts (O'Reilly) Recommendation 
 Making Sensible Architecture Tradeoffs
51. 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?
52. How does UX work ? in a micro frontends architecture Who designs user fl ows? What are the tradeoffs?
53. UX UX UX How does UX fi t in? UX top down UX as a service part of the team
54. 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.
55. systems x business technical Structuring (existing) business units along domains. 
 Not only tech teams. 💬 alignment > less coordination 💡 validate ideas quickly 🚀 faster time to market
56. 🌟 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 ✅ ✅ 🤩 🤩 🚀
57. get it at manning.com with code ctwmcrfrontend23 🤫 The code also works for all other books there. I’ve written a book 35% off
58. 🌈 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
59. How Deep Is Your Micro Frontend? Michael Geers 12. June 2023, Micro Frontends Conference lov e 🎧
60. win an ebook