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.

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