eyeworkers.de eyeworkers Frontend Architecture: Micro Frontends Thorsten Suckow-Homberg [email protected] linktr.ee/thorstensuckow Senchadays, Munich, November 2022 Implications on Organisation and Development 

Frontend Architecture: Micro Frontends Agenda 1. Problem 2. Motivation 3. Challenge 4. Integration eyeworkers eyeworkers 

Frontend Architecture: Micro Frontends Motivation eyeworkers 

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 

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 (?) 

Frontend Support User Profile Articles eyeworkers Frontend Architecture: Micro Frontends The Monolith: A Problem (?) 

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 

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 (?) 

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? 

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 

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 

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 

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 

Shopping Cart Shop Frontend Frontend Architecture: Micro Frontends The Online-Shop User Profile Frontend eyeworkers 

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 

Backend Frontend Domain Modelling: UI: Formatting Styling UX Frontend Architecture: Micro Frontends Challenges for the µs • Value Objects • Entities • Services • Data Rendering eyeworkers 

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 

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

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 

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 

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 

Frontend Architecture: Micro Frontends Integration – Run-Time Iframes Shopping Cart Shop Frontend User Profile Frontend eyeworkers 

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

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 

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 

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

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 

Frontend Architecture: Micro Frontends What's next? Micro Frontends https://www.thoughtworks.com eyeworkers 

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 

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 

Frontend Architecture: Micro Frontends What's next? State of Frontend 2022 eyeworkers 

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