Micro Frontends - True End-to-End Decoupling in Practice

Slide 1

Slide 1 text

Micro Frontends True End-to-End Decoupling in Practice Hey Architect! Conference 24, Mercedes Benz AG, 9.10.2024 Michael Geers, @naltatis, neuland Büro für Informatik

Slide 2

Slide 2 text

Who am I? Michael Geers 👨💻 Software Engineer 📐 Frontend Architect Author 📕 Micro Frontends in Action, Manning 📝 micro-frontends.org Work neuland Büro für Informatik, Bremen E-Commerce & Verticalized Architectures Open Source ☀🚘 evcc.io Core Team - solar EV charging

Slide 3

Slide 3 text

Agenda 1. What are they & why should I care? 2. How do they work? 3. Real-World example Hey Architect! Conference 24, Mercedes Benz AG, 9.10.2024 Michael Geers, @naltatis, neuland Büro für Informatik

Slide 4

Slide 4 text

High-performing Teams success factors for

Slide 5

Slide 5 text

Deployment Frequency Lead Time to Change Mean Time To Recovery Change Failure Rate

Slide 6

Slide 6 text

Continuous Delivery High Degree Of Automation

Slide 7

Slide 7 text

Easy to implement For small Teams and small projects

Slide 8

Slide 8 text

What about Large Projects

Slide 9

Slide 9 text

Monolithic Software days / weeks deployment frequency large

Slide 10

Slide 10 text

Monolithic Software large Large team

Slide 11

Slide 11 text

Monolithic Software large small team small team small team small team

Slide 12

Slide 12 text

Microservices Mins / Hours

Slide 13

Slide 13 text

Frontend Monolith Microservices Mins / Hours

Slide 14

Slide 14 text

Frontend Monolith Microservices Mins / Hours Sprints / Weeks inter-team dependencies

Slide 15

Slide 15 text

Frontend Devs Backend Devs Devops Teams of Tech-Experts

Slide 16

Slide 16 text

the micro frontends approach Teams of Tech-Experts DOMAIN search experts

Slide 17

Slide 17 text

Team Explore Team Decide Team Checkout Helps user to explore the product portfolio. Helps user to decide which product is right for him. Helps user to complete the purchase. Missions Frontend Backend DevOps

Slide 18

Slide 18 text

Micro Frontends or verticalized architecture or self-contained systems

Slide 19

Slide 19 text

Cross- Functional Teams Domain Ownership End-to-End Responsability user interface database system properties of a micro frontends architecture

Slide 20

Slide 20 text

Slide 21

Slide 21 text

home category product cart checkout success Pages

Slide 22

Slide 22 text

Pages home category product cart checkout success team explore team decide team checkout LINKS integration via

Slide 23

Slide 23 text

Composition explore decide checkout explore

Slide 24

Slide 24 text

Isolation each micro frontend is a self-contained mini-application

Slide 25

Slide 25 text

DEPLOYMENT teams can update their micro frontends independently Mins / Hours

Slide 26

Slide 26 text

Tech-Agnostic teams can choose di ff erent technologies v18 v19 v19 + + + → Use this power wisely. Alignment has bene fi ts. #futureproo fi ng #decoupling

Slide 27

Slide 27 text

Integration techniques Web Components iFrames Links Browser Events using web standards SSI/ESI Import Maps

Slide 28

Slide 28 text

Integration techniques Single SPA Piral Zephyr Cloud using tools & frameworks Baseplate Cloud Module Federation qiankun Luigi Picard.js Ionic Portals

Slide 29

Slide 29 text

Agenda 1. What are they & why should I care? 2. How do they work? 3. Real-World example Hey Architect! Conference 24, Mercedes Benz AG, 9.10.2024 Michael Geers, neuland Büro für Informatik

Slide 30

Slide 30 text

Tractor Store same application with di ff erent implementations micro-frontends.org/tractor-store/

Slide 31

Slide 31 text

micro-frontends.org/tractor-store/ Tractor Store - e-commerce example - pages transitions - composition - communication - performance testing - styles & data provided - SPA and/or server-render - serverless-ready

Slide 32

Slide 32 text

micro-frontends.org/tractor-store/ Tractor Store examine di ff erent approaches examine the code everything is open source

Slide 33

Slide 33 text

Demo preact custom elements implementation

Slide 34

Slide 34 text

Slide 35

Slide 35 text

More stuff I didn’t talk about today Design Systems Organisational Implications Local Development Dependency Sharing Performance Implications Sharing Knowledge Freedom vs. Alignment Debugging & Error Reporting Testing Strategies Migration Szenarios

Slide 36

Slide 36 text

Micro Frontend bene fi t What’s my Favorite Working in a team with a clear focus feels fantastic. It’s possible to know every feature of your codebase.

Slide 37

Slide 37 text

Want to learn more? my book micro-frontends.org micro-frontends.org/ tractor-store/

Slide 38

Slide 38 text

Thanks for Listening! geers.tv These and other slides on this topic. Michael Geers michael.geers@neuland-b fi .de @naltatis GitHub, Mastodon, LinkedIn

Slide 39

Slide 39 text

Questions? Hey Architect! Conference 24, Mercedes Benz AG, 9.10.2024 Michael Geers, @naltatis, neuland Büro für Informatik