Diese Präsentation wurde erfolgreich gemeldet.

Microfrontends: The good, the bad, and the ugly

0

Teilen

1 von 58
1 von 58

Microfrontends: The good, the bad, and the ugly

0

Teilen

Herunterladen, um offline zu lesen

Everybody is talking about slicing up the monolith. The goal is to create scalable architectures. But how can we achieve that?

For one project, we have decided to give everything, using cutting edge technology, micro-services, verticals, server-side rendering, and more. Talking about upgrading the legacy code base, the plan was to have this greenfield project on separate URLs.

Everybody is talking about slicing up the monolith. The goal is to create scalable architectures. But how can we achieve that?

For one project, we have decided to give everything, using cutting edge technology, micro-services, verticals, server-side rendering, and more. Talking about upgrading the legacy code base, the plan was to have this greenfield project on separate URLs.

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Microfrontends: The good, the bad, and the ugly

  1. 1. Micro Frontends @vannsl The good, the bad, and the ugly
  2. 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
  3. 3. Why/When? How? How not? @vannsl
  4. 4. 📖 Let me tell you a story about eMary, the growing Online Shop @vannsl
  5. 5. Landing Page Explanation @vannsl
  6. 6. Product Categories Manufacturers Combinations/Sets Landing Page Explanation @vannsl
  7. 7. Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
  8. 8. Cart Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
  9. 9. Cart Chatbot Flow A lot of stuff Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
  10. 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. 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
  12. 12. https://goiabada.blog/the-5-stages-of-dealing-with-legacy-code-6d578205beeb @vannsl
  13. 13. Why or When? To or not to Micro Frontend @vannsl
  14. 14. Create something scalable The Goal @vannsl
  15. 15. The Real Monolith The A Team Frontend Backend @vannsl
  16. 16. Frontend & Backend Split The A Team Team Frontend & Design Team Backend & DevOps Frontend Frontend Backend Backend @vannsl
  17. 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. 18. Frontend Integration for Verticalised Systems @vannsl
  19. 19. Or: Micro Frontends Frontend Integration for Verticalised Systems @vannsl
  20. 20. Verticals & Crossfunctional Teams Team Inspire Team Acquisition Team Purchase Backend Backend Backend Frontend Frontend Frontend Design Design Design @vannsl
  21. 21. Benefits: Autonomous Teams Mission 1 Mission 2 Mission 3 @vannsl
  22. 22. Benefits: Incremental Upgrades Bundle Products Bundle Marketing Bundle Cart Lib Lib Lib @vannsl
  23. 23. Benefits: Independent Deployments @vannsl
  24. 24. Benefits: Decoupled Code Boundled Together @vannsl
  25. 25. Benefits: Decoupled Code @vannsl Boundled Together ×
  26. 26. Benefits: Decoupled Code Boundled Together × @vannsl
  27. 27. Benefits: Decoupled Code × @vannsl
  28. 28. How? To implement Micro Frontends @vannsl
  29. 29. Frameworks Project Mosaic Podium Custom bit Single SPA Webpack 5 + Module Federation @vannsl
  30. 30. Frameworks Custom Container Application - iFrames - JS Bundles - Web Components @vannsl
  31. 31. Frameworks Custom Container Application - iFrames - JS Bundles - Web Components @vannsl
  32. 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. 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. 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. 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. 36. Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Team SWORD Team SHIELD Microservices @vannsl
  37. 37. Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Layout Service Templates with Fragments Team SWORD Team SHIELD Microservices @vannsl
  38. 38. Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Layout Service Templates with Fragments Team SWORD Team SHIELD Microservices @vannsl
  39. 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. 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. 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. 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. 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. 44. Rendered Template Mobile Fragment LAYOUT HEADER Fragment LAYOUT FOOTER Fragment PRODUCT DAILY LOOK Fragment PRODUCT OVERVIEW Fragment PRODUCT VISITED @vannsl
  45. 45. Rendered Template Desktop Fragment LAYOUT HEADER Fragment LAYOUT FOOTER Fragment PRODUCT DAILY DEAL Fragment PRODUCT OVERVIEW Fragment PRODUCT VISITED @vannsl
  46. 46. Event Streaming Communication Microservices and Databases Communication via API or Event Streaming Team SWORD Team SHIELD Clientside Eventbus @vannsl
  47. 47. How not to? Prevent pitfalls @vannsl
  48. 48. The Challenge of creating something scalable when not scaled Fullstack Dev UX Scrum UI Fullstack Dev Fullstack Dev Fullstack Dev PO @vannsl
  49. 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. 50. Event Streaming Communication Team SWORD Team SHIELD Microservices and Databases Communication via API or Event Streaming Clientside Eventbus @vannsl
  51. 51. Event Streaming Communication Clientside Eventbus Microservices and Databases Communication via API or Event Streaming Team SWORD Team SHIELD
  52. 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. 53. Memory Leak: Event Bus https://www.alxolr.com/articles/understanding-memory-leaks-in-node-js-part-2 @vannsl
  54. 54. Memory Leak https://www.alxolr.com/articles/understanding-memory-leaks-in-node-js-part-2 @vannsl
  55. 55. Misconfiguration Development Database Production Database Router Service @vannsl
  56. 56. Misconfiguration Development Database Production Database Router Service @vannsl
  57. 57. Misconfiguration Development Database Production Database Router Service @vannsl
  58. 58. Thanks! @vannsl @expectPodcast @WorkingDraft @ausbaufahig @FrontendFoxDACH 👋 @vannsl

×