$30 off During Our Annual Pro Sale. View Details »

Frontend Architecture: Micro Frontends

Frontend Architecture: Micro Frontends

Versionswechsel, Systeme im Wartungsmodus, Kompatibilitätsprobleme: JavaScript Frontends unterliegen einem steten Fluss von Änderungen. Organisationen, die bereits bei ihrer Backend-Architektur erfolgreich die umzusetzenden Fachlichkeiten geschnitten haben, wünschen sich auch bei den Modulen ihrer SPA schärfere Grenzen, um von einem höheren Grad an Individualität und Unabhängigkeit bei Implementierung und Deployment zu profitieren.

In diesem Vortrag stelle ich den Architekturansatz Micro Frontends vor, und gebe einen Überblick über Herausforderungen und Vorteile für Organisation und Entwicklung sowie mögliche Integration-Patterns.

Das Thema wurde auf einen von der eyeworkers GmbH veranstalteten Kundentag am 08 November 2022 in München von mir vorgestellt und in einem Live Stream unter https://www.youtube.com/watch?v=mvtz1arSQkk nochmal präsentiert.

Thorsten Suckow-Homberg

November 16, 2022
Tweet

More Decks by Thorsten Suckow-Homberg

Other Decks in Programming

Transcript

  1. eyeworkers.de eyeworkers Frontend Architecture: Micro Frontends Thorsten Suckow-Homberg thorsten.suckow-homberg@eyeworkers.de linktr.ee/thorstensuckow

    Senchadays, Munich, November 2022 Implications on Organisation and Development
  2. Frontend Architecture: Micro Frontends Agenda 1. Problem 2. Motivation 3.

    Challenge 4. Integration eyeworkers eyeworkers
  3. Frontend Architecture: Micro Frontends Motivation eyeworkers

  4. Frontend Architecture: Micro Frontends Motivation Application Layer Domain Layer Infrastructure

    Layer Presentation Layer SPA • One Team • Monorepo • Strong Coupling • Vendor Lock • One Release Cycle • Single tech Stack Monolith eyeworkers
  5. Project Frontend Frontend Backend Service A Frontend Application Layer Service

    B Service C Backend Frontend Infrastructure Michael Geers, https://micro-frontends.org eyeworkers Frontend Architecture: Micro Frontends The Monolith: A Problem (?)
  6. Frontend Support User Profile Articles eyeworkers Frontend Architecture: Micro Frontends

    The Monolith: A Problem (?)
  7. Frontend Dev Invoicing Order Customer Care Purchasing Frontend Invoicing Team

    µFrontend Order Team µFrontend Shop Team µFrontend Customer Care Team µFrontend Vertical Teams Frontend Architecture: Micro Frontends The Monolith: A Problem (?) Support User Profile Articles eyeworkers
  8. Service A Project Frontend Frontend Backend Application Layer Service B

    Service C Backend Frontend Infrastructure (Conway'sLaw) Frontend eyeworkers Frontend Architecture: Micro Frontends The Monolith: A Problem (?)
  9. Frontend Dev Invoicing Order Customer Care Purchasing Frontend Invoicing Team

    µFrontend Order Team µFrontend Shop Team µFrontend Customer Care Team µFrontend Vertical Teams Frontend Architecture: Micro Frontends The Monolith: A Problem (?) Support User Profile Articles Conway's Law: “Organizations which design systems […] are constrained to produce designs which are copies of the communication structures of these organizations.” (Melvin E. Conway, How do committeesinvent?, 1968) Organizational Patterns of Agile Software Development (Coplien, Harrison, 2004): Problematic: When parts of the organization are not aligned close to the essential parts of the product, and the communication within the organization does not represent the relationships between parts of the product. eyeworkers Q: What if teams are not aligned to the domains that should be modelled in a software?
  10. Frontend Architecture: Micro Frontends Motivation Frontend • Why do we

    want to discard the monolith? maintainability resilience vertical slicing knowledgetransfer ownership avoid vendor locks domain boundaries • What benefits does a Micro Frontend Architecture give us? • How can we improve? simple refactorings lower coupling individual release cycles eyeworkers
  11. Technical Aspects Economically Aspects Social Aspects • future-proof • negative

    pull effects of single vendors does not affect the organization on a large scale • less technical debts • morescalability of the costs of the infrastructure • adopting/ (re-)modelling of internal processes cheaper • legacy Systems: Maintenance mode • modern technologies can be adopted early • chooseparadigms and tools depending on domains, not the other way around • team can grow with technology used • bonding through Knowledge Crunching • exchangeof experience between vertical teams • not stuck with old technology Frontend Architecture: Micro Frontends Motivation eyeworkers
  12. Frontend Architecture: Micro Frontends The Online-Shop Backend MicroServices SOA Shop

    Shopping Cart User Profile Shopping Cart User Profile Frontend Shop Frontend Frontend eyeworkers Support User Profile Articles
  13. Backend Frontend MicroServices SOA Shop Shopping Cart User Profile Shopping

    Cart User Profile Frontend Shop Frontend Shopping Cart • list cart contents • edit shopping carts User Profile • show order history • edit paymentoptions • manage shipping addresses Shop Frontend • search articles • list articles & categories • show recommendations Frontend Architecture: Micro Frontends The Online-Shop eyeworkers
  14. Shopping Cart Shop Frontend Frontend Architecture: Micro Frontends The Online-Shop

    User Profile Frontend eyeworkers
  15. Frontend Architecture: Micro Frontends Challenges for the µs Challenges •

    Data redundancy/-consistency • Communication • Latency Challenges • Communication • Composition • UI, UX, LaF Backend Shopping Cart User Profile MicroServices Shop Frontend Shopping Cart User Profile Frontend Shop Frontend Micro Frontends eyeworkers
  16. Backend Frontend Domain Modelling: UI: Formatting Styling UX Frontend Architecture:

    Micro Frontends Challenges for the µs • Value Objects • Entities • Services • Data Rendering eyeworkers
  17. Frontend Architecture: Micro Frontends Prerequisites µFrontend Backend Frontend • Individual

    development of Backend and Frontend • Backend Mocks arepossible • Public API • "API first" can help • Modularization • Modern Tooling, Dependency Management • Multiple Domain Models: Test withSplit & Deploy as Micro Frontends eyeworkers
  18. Frontend Architecture: Micro Frontends Integration – Build-Time Lockstep Release Process

    extjs-app-profile angular-shop Frontend @shopme/frontend react-cart (DeploymentMonolith) eyeworkers
  19. Frontend Architecture: Micro Frontends Integration – Build-Time Lockstep Release Process

    extjs-app-profile angular-shop Frontend @shopme/frontend react-cart Deployment Monolith The Monolith: A Problem? User Profile Shopping Cart Articles Invoicing Support ... ... Support User Profile Articles Monolith Modulith https://deviq.com/antipatterns/big-ball-of-mud eyeworkers
  20. Frontend Architecture: Micro Frontends Integration – Build-Time Lockstep Release Process

    extjs-app-profile angular-shop Frontend @shopme/frontend react-cart Deployment Monolith User Profile Shopping Cart Articles Invoicing Support ... ... Modulith Modules • high cohesion • low coupling • clear boundaries but the Modulith lacks • independent deployability eyeworkers • information hiding
  21. Container Pull Frontend extjs-app-profile angular-shop @shopme/frontend extjs-app-profile angular-shop node.appendChild(reactCartCmp); Frontend

    fetch("react-cart.manifest.json"); react-cart react-cart Frontend Architecture: Micro Frontends Integration – Build-Time eyeworkers
  22. Frontend Architecture: Micro Frontends Integration – Run-Time Iframes Shopping Cart

    Shop Frontend User Profile Frontend eyeworkers
  23. Frontend Architecture: Micro Frontends Integration – Run-Time Web Components Shop

    Frontend Shopping Cart User Profile Frontend eyeworkers
  24. Frontend Architecture: Micro Frontends Integration – Run-Time SPA MPA Shop

    Frontend Shopping Cart User Profile Frontend https://shopme.deploy:8080/index.html https://shopme.deploy:8080/cart-frontend https://shopme.deploy:8080/shop-frontend https://shopme.deploy:8080/account-frontend eyeworkers
  25. Frontend Architecture: Micro Frontends Integration – Run-Time App Shell Shell

    Shell Shell Shop Frontend Shopping Cart User Profile Frontend eyeworkers • Orchestrator • has some knowledge about the frontends used • provides routing, authentication
  26. Frontend Architecture: Micro Frontends Integration – Run-Time Micro Frontend Anarchy

    https://www.thoughtworks.com eyeworkers
  27. Frontend Architecture: Micro Frontends Integration – Run-Time Micro Frontend Anarchy

    ExtJS Angular React 2 4 3 5 B{ 6 7 C{ 8 9 D{ 12 11 F { 14 13 15 G { 10 E { 1 A { blocks B, C, D, E, F, G blocks C, D, E, F, G blocks D, E, F, G blocks F, G blocks G Call Stack Time eyeworkers
  28. Frontend Architecture: Micro Frontends What's next? Micro Frontends https://www.thoughtworks.com eyeworkers

  29. Frontend Architecture: Micro Frontends What's next? • autonomous teams: •

    decide on the Tech Stack • cross-functionalteams model the frontends • differentFrontends • One CSS to rule them all • Shared UI libraries • data flow • integration necessitates how frontend fragments communicate • shared data • data gathered via RPC/REST demands unified rendering mechanism ? Separate Ways eyeworkers
  30. Frontend Architecture: Micro Frontends What's next? Architectural requirements 1. make

    yourself familiar with them 2. prioritize them 3. evaluate them ! Shared State/ Navigation between apps? Hyperlinks less Legacy Apps or strong isolation required? a lot Iframes yes Individual deployment/ mix of technologies? no Bootstrap multiple SPAs yes Deployment Monolith no Manfred Steyer, ObjektSpektrum 02/2019 eyeworkers
  31. Frontend Architecture: Micro Frontends What's next? State of Frontend 2022

    eyeworkers
  32. Frontend Architecture: Micro Frontends What's next? Join Us! https://www.youtube.com/watch?v=4KVOuQDIfmw https://medium.com/dazn-tech

    https://www.youtube.com/watch?v=BuRB3djraeM https://micro-frontends.org/ eyeworkers