Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Microfrontends: The good, the bad, and the ugly
Similar to Microfrontends: The good, the bad, and the ugly (20)
Recently uploaded
Recently uploaded (20)
Microfrontends: The good, the bad, and the ugly
- 1. Micro Frontends @vannsl The good, the bad, and the ugly
- 2. Hi! Frontend Lead ZAGE.life 🎙 expect(Exception) 💻 🎙 Working Draft 💻 🎙 Ausbaufähig🍷🥃 🦊 Chapter Lead Frontend Foxes DACH I’m Vanessa Böhner, nice to e-meet you! @vannsl
- 4. 📖 Let me tell you a story about eMary, the growing Online Shop @vannsl
- 7. Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
- 8. Cart Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
- 9. Cart Chatbot Flow A lot of stuff Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
- 10. Cart Checkout Address Validation Payment Methods Confirmation Chatbot Flow A lot of stuff Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
- 11. Cart Checkout Address Validation Payment Methods Confirmation My Account My Orders Shipments Chatbot Flow A lot of stuff Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
- 13. Why or When? To or not to Micro Frontend @vannsl
- 14. Create something scalable The Goal @vannsl
- 15. The Real Monolith The A Team Frontend Backend @vannsl
- 16. Frontend & Backend Split The A Team Team Frontend & Design Team Backend & DevOps Frontend Frontend Backend Backend @vannsl
- 17. Microservices Team Frontend & Design Aggregation Layer Service Product Service Cart Service Checkout Service Account The A Team Team Frontend & Design Team Backend & DevOps Frontend Frontend Backend Backend @vannsl
- 18. Frontend Integration for Verticalised Systems @vannsl
- 19. Or: Micro Frontends Frontend Integration for Verticalised Systems @vannsl
- 20. Verticals & Crossfunctional Teams Team Inspire Team Acquisition Team Purchase Backend Backend Backend Frontend Frontend Frontend Design Design Design @vannsl
- 21. Benefits: Autonomous Teams Mission 1 Mission 2 Mission 3 @vannsl
- 22. Benefits: Incremental Upgrades Bundle Products Bundle Marketing Bundle Cart Lib Lib Lib @vannsl
- 24. Benefits: Decoupled Code Boundled Together @vannsl
- 25. Benefits: Decoupled Code @vannsl Boundled Together ×
- 26. Benefits: Decoupled Code Boundled Together × @vannsl
- 28. How? To implement Micro Frontends @vannsl
- 29. Frameworks Project Mosaic Podium Custom bit Single SPA Webpack 5 + Module Federation @vannsl
- 30. Frameworks Custom Container Application - iFrames - JS Bundles - Web Components @vannsl
- 31. Frameworks Custom Container Application - iFrames - JS Bundles - Web Components @vannsl
- 32. Runtime Integration via iFrames Example: One Micro Frontend per Route <body> <h1>Hey you!</h1> <iframe id="micro-frontend"></iframe> <script type="text/javascript"> const microFrontends = { "/": "https://home", "/product": "https://product", "/checkout": "https://checkout" } const iframe = document.getElementById("micro-frontend"); iframe.src = microFrontends[window.location.pathname]; </script> </body> @vannsl
- 33. Runtime Integration via iFrames Example: One Micro Frontend per Route <body> <h1>Hey you!</h1> <iframe id="micro-frontend"></iframe> <script type="text/javascript"> const microFrontends = { "/": "https://home", "/product": "https://product", "/checkout": "https://checkout" } const iframe = document.getElementById("micro-frontend"); iframe.src = microFrontends[window.location.pathname]; </script> </body> @vannsl
- 34. Runtime Integration via iFrames Example: One Micro Frontend per Route <body> <h1>Hey you!</h1> <iframe id="micro-frontend"></iframe> <script type="text/javascript"> const microFrontends = { "/": "https://home", "/product": "https://product", "/checkout": "https://checkout" } const iframe = document.getElementById("micro-frontend"); iframe.src = microFrontends[window.location.pathname]; </script> </body> @vannsl
- 35. Runtime Integration via iFrames Example: One Micro Frontend per Route <body> <h1>Hey you!</h1> <iframe id="micro-frontend"></iframe> <script type="text/javascript"> const microFrontends = { "/": "https://home", "/product": "https://product", "/checkout": "https://checkout" } const iframe = document.getElementById("micro-frontend"); iframe.src = microFrontends[window.location.pathname]; </script> </body> @vannsl
- 36. Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Team SWORD Team SHIELD Microservices @vannsl
- 37. Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Layout Service Templates with Fragments Team SWORD Team SHIELD Microservices @vannsl
- 38. Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Layout Service Templates with Fragments Team SWORD Team SHIELD Microservices @vannsl
- 39. Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Layout Service Templates with Fragments Team SWORD Team SHIELD Microservices Static Routes Router @vannsl
- 40. Layout Example (Syntax of Tailor of Project Mosaic) <head> <fragment src="https://assets" /> </head> <body> <fragment src="https://layout/header" /> <fragment src="https://product/daily" /> <fragment src="https://product/overview" /> <fragment src="https://product/visited" /> <fragment src="https://layout/footer" /> </body> @vannsl
- 41. Layout Example (Syntax of Tailor of Project Mosaic) <head> <fragment src="https://assets" /> </head> <body> <fragment src="https://layout/header" /> <fragment src="https://product/daily" /> <fragment src="https://product/overview" /> <fragment src="https://product/visited" /> <fragment src="https://layout/footer" /> </body> @vannsl
- 42. Layout Example (Syntax of Tailor of Project Mosaic) <head> <fragment src="https://assets" /> </head> <body> <fragment src="https://layout/header" /> <fragment src="https://product/daily" /> <fragment src="https://product/overview" /> <fragment src="https://product/visited" /> <fragment src="https://layout/footer" /> </body> @vannsl
- 43. Layout Example (Syntax of Tailor of Project Mosaic) <head> <fragment src="https://assets" /> </head> <body> <fragment src="https://layout/header" /> <fragment src="https://product/daily" /> <fragment src="https://product/overview" /> <fragment src="https://product/visited" /> <fragment src="https://layout/footer" /> </body> @vannsl
- 44. Rendered Template Mobile Fragment LAYOUT HEADER Fragment LAYOUT FOOTER Fragment PRODUCT DAILY LOOK Fragment PRODUCT OVERVIEW Fragment PRODUCT VISITED @vannsl
- 45. Rendered Template Desktop Fragment LAYOUT HEADER Fragment LAYOUT FOOTER Fragment PRODUCT DAILY DEAL Fragment PRODUCT OVERVIEW Fragment PRODUCT VISITED @vannsl
- 46. Event Streaming Communication Microservices and Databases Communication via API or Event Streaming Team SWORD Team SHIELD Clientside Eventbus @vannsl
- 47. How not to? Prevent pitfalls @vannsl
- 48. The Challenge of creating something scalable when not scaled Fullstack Dev UX Scrum UI Fullstack Dev Fullstack Dev Fullstack Dev PO @vannsl
- 49. The Challenge of creating something scalable when not scaled Fullstack Dev UX Scrum UI Fullstack Dev Fullstack Dev Fullstack Dev PO Fullstack Dev UX Scrum UI Fullstack Dev Fullstack Dev Fullstack Dev PO Fullstack Dev UX Scrum UI Fullstack Dev Fullstack Dev Fullstack Dev PO Fullstack Dev UX Scrum UI Fullstack Dev Fullstack Dev Fullstack Dev PO @vannsl
- 50. Event Streaming Communication Team SWORD Team SHIELD Microservices and Databases Communication via API or Event Streaming Clientside Eventbus @vannsl
- 51. Event Streaming Communication Clientside Eventbus Microservices and Databases Communication via API or Event Streaming Team SWORD Team SHIELD
- 52. Event Streaming Communication Clientside Eventbus Microservices and Databases Communication via API or Event Streaming Make it declarative, not imperative Team SWORD Team SHIELD
- 53. Memory Leak: Event Bus https://www.alxolr.com/articles/understanding-memory-leaks-in-node-js-part-2 @vannsl