Anzeige
Check these out next
Microfrontends: The good, the bad, and the ugly
23. Feb 2021•0 gefällt mir•450 Aufrufe
0 gefällt mir
Sei der Erste, dem dies gefällt
Mehr anzeigen
Aufrufe
Aufrufe insgesamt
0
Auf Slideshare
0
Aus Einbettungen
0
Anzahl der Einbettungen
0
Downloaden Sie, um offline zu lesen
Melden
Technologie
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.
Vanessa BöhnerFolgen
Anzeige
Anzeige
Anzeige
Recomendados
How to build a static website in two and a half days with Nuxt and Tailwind CSSVanessa Böhner
Tailwind CSS - KanpurJSNaveen Kharwar
Deploying A Static Website Using WordPressDaniel Schutzsmith
Tech talk on Tailwind CSSSquareboat
Page speed: low hanging legumesErich
Don't let FaaS do a BaaS jobTessa Mero
Microfrontends: The good, the bad, and the ugly
- Micro Frontends @vannsl The good, the bad, and the ugly
- 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
- Why/When? How? How not? @vannsl
- 📖 Let me tell you a story about eMary, the growing Online Shop @vannsl
- Landing Page Explanation @vannsl
- Product Categories Manufacturers Combinations/Sets Landing Page Explanation @vannsl
- Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
- Cart Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
- Cart Chatbot Flow A lot of stuff Product Categories Manufacturers Combinations/Sets Single Product Colors Sizes Landing Page Explanation @vannsl
- 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
- 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
- https://goiabada.blog/the-5-stages-of-dealing-with-legacy-code-6d578205beeb @vannsl
- Why or When? To or not to Micro Frontend @vannsl
- Create something scalable The Goal @vannsl
- The Real Monolith The A Team Frontend Backend @vannsl
- Frontend & Backend Split The A Team Team Frontend & Design Team Backend & DevOps Frontend Frontend Backend Backend @vannsl
- 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
- Frontend Integration for Verticalised Systems @vannsl
- Or: Micro Frontends Frontend Integration for Verticalised Systems @vannsl
- Verticals & Crossfunctional Teams Team Inspire Team Acquisition Team Purchase Backend Backend Backend Frontend Frontend Frontend Design Design Design @vannsl
- Benefits: Autonomous Teams Mission 1 Mission 2 Mission 3 @vannsl
- Benefits: Incremental Upgrades Bundle Products Bundle Marketing Bundle Cart Lib Lib Lib @vannsl
- Benefits: Independent Deployments @vannsl
- Benefits: Decoupled Code Boundled Together @vannsl
- Benefits: Decoupled Code @vannsl Boundled Together ×
- Benefits: Decoupled Code Boundled Together × @vannsl
- Benefits: Decoupled Code × @vannsl
- How? To implement Micro Frontends @vannsl
- Frameworks Project Mosaic Podium Custom bit Single SPA Webpack 5 + Module Federation @vannsl
- Frameworks Custom Container Application - iFrames - JS Bundles - Web Components @vannsl
- Frameworks Custom Container Application - iFrames - JS Bundles - Web Components @vannsl
- 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
- 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
- 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
- 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
- Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Team SWORD Team SHIELD Microservices @vannsl
- Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Layout Service Templates with Fragments Team SWORD Team SHIELD Microservices @vannsl
- Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Layout Service Templates with Fragments Team SWORD Team SHIELD Microservices @vannsl
- Runtime Integration via Bundles Example: Multiple Micro Frontends per Route Layout Service Templates with Fragments Team SWORD Team SHIELD Microservices Static Routes Router @vannsl
- 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
- 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
- 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
- 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
- Rendered Template Mobile Fragment LAYOUT HEADER Fragment LAYOUT FOOTER Fragment PRODUCT DAILY LOOK Fragment PRODUCT OVERVIEW Fragment PRODUCT VISITED @vannsl
- Rendered Template Desktop Fragment LAYOUT HEADER Fragment LAYOUT FOOTER Fragment PRODUCT DAILY DEAL Fragment PRODUCT OVERVIEW Fragment PRODUCT VISITED @vannsl
- Event Streaming Communication Microservices and Databases Communication via API or Event Streaming Team SWORD Team SHIELD Clientside Eventbus @vannsl
- How not to? Prevent pitfalls @vannsl
- The Challenge of creating something scalable when not scaled Fullstack Dev UX Scrum UI Fullstack Dev Fullstack Dev Fullstack Dev PO @vannsl
- 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
- Event Streaming Communication Team SWORD Team SHIELD Microservices and Databases Communication via API or Event Streaming Clientside Eventbus @vannsl
- Event Streaming Communication Clientside Eventbus Microservices and Databases Communication via API or Event Streaming Team SWORD Team SHIELD
- Event Streaming Communication Clientside Eventbus Microservices and Databases Communication via API or Event Streaming Make it declarative, not imperative Team SWORD Team SHIELD
- Memory Leak: Event Bus https://www.alxolr.com/articles/understanding-memory-leaks-in-node-js-part-2 @vannsl
- Memory Leak https://www.alxolr.com/articles/understanding-memory-leaks-in-node-js-part-2 @vannsl
- Misconfiguration Development Database Production Database Router Service @vannsl
- Misconfiguration Development Database Production Database Router Service @vannsl
- Misconfiguration Development Database Production Database Router Service @vannsl
- Thanks! @vannsl @expectPodcast @WorkingDraft @ausbaufahig @FrontendFoxDACH 👋 @vannsl
Anzeige