Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

Hey Architect! Conference 2024

Michael Geers

October 09, 2024
Tweet

More Decks by Michael Geers

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. Pages home category product cart checkout success team explore team

    decide team checkout LINKS integration via
  7. 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
  8. Integration techniques Single SPA Piral Zephyr Cloud using tools &

    frameworks Baseplate Cloud Module Federation qiankun Luigi Picard.js Ionic Portals
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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.
  14. Thanks for Listening! geers.tv These and other slides on this

    topic. Michael Geers michael.geers@neuland-b fi .de @naltatis GitHub, Mastodon, LinkedIn