Micro frontends: The Good, The Bad and The Ugly

Microfrontends  The good the bad and the ugly @vannsl

Hello, Code is Colorful. I am Vanessa Böhner. Senior Product
Engineer @ S2 I like Vue, Svelte, Good Food and Weightlifting You can call me @vannsl :) Nice to meet you!

@vannsl Think of an Online Shop

@vannsl Online Shop Flow 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 Legacy Code https://goiabada.blog/the-5-stages-of-dealing-with-legacy-code-6d578205beeb

Project: Rewrite it. @vannsl @vannsl | 2019 Create Something Scalable
The Goal

The Real Monolith @vannsl @vannsl | 2019 The A Team
Frontend Backend

The Frontend & The Backend @vannsl @vannsl | 2019 Team
Backend and DevOps Frontend Backend The A Team Frontend Backend Team Frontend and Design

Microservices @vannsl @vannsl | 2019 Team Frontend and Design Team
Backend and DevOps Frontend Backend Frontend Backend Aggregation Layer Service Product Service Cart Service Checkout Service Account Team Frontend and Design The A Team Frontend Backend

Next Step Frontend Integration for Verticalised Systems @vannsl Or: Micro
frontends

@vannsl @vannsl | 2019 Team Inspire Frontend Backend Design Team
Acquisition Frontend Backend Design Team Purchase Frontend Backend Design Verticals & Crossfunctional Teams

Benefits: Autonomous Teams @vannsl @vannsl | 2019 Mission 1 Mission
2 Mission 3

Benefits: Incremental Upgrades @vannsl @vannsl | 2019 Lib Lib Lib

Benefits: Independent Deployments @vannsl @vannsl | 2019

Benefits: Decoupled Code @vannsl @vannsl | 2019 ×

@vannsl × Benefits: Decoupled Code @vannsl | 2019

@vannsl https://www.gps-can.com.au/covid19-blog/call-to-arms-covid-19-workplace-strategies

But how? Let’s Go

Zalando Project Mosaic, Podium and Other @vannsl @vannsl | 2019
Project Mosaic Podium Custom Container-App - iFrames - JS Bundles - Web Components

1 Bundle, Buildtime Container Application Container-App @vannsl @vannsl | 2019
iFrame iFrame iFrame

Container Application Container-App @vannsl @vannsl | 2019 iFrame iFrame iFrame

@vannsl @vannsl | 2019 <body> <h1>Hey Code is Colorful!</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> Runtime Integration via iFrames: One MF per Page Example

Zalando Project Mosaic, Podium and Other @vannsl @vannsl | 2019
Project Mosaic Podium Custom: Container-App - iFrames - JS Bundles - Web Components

Project Mosaic @vannsl @vannsl | 2019 Team SHIELD Team SWORD
Microservices and Databases Layout Service Templates with Fragments Router Static Routes

@vannsl @vannsl | 2019 Internet + Cloud Services Tailor (Layout
Service) UI Component Library Skipper (Router) Fragment Fragment Fragment Fragment Fragment Fragment

Layout and Fragment Service @vannsl @vannsl | 2019 Tailor (Layout
Service) Fragment 1 Fragment 2 Fragment 3 One Template

Tailor Template Example @vannsl @vannsl | 2019 <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>

Rendered Template @vannsl @vannsl | 2019 Fragment LAYOUT HEADER Fragment
LAYOUT FOOTER Fragment PRODUCT DAILY LOOK Fragment PRODUCTS OVERVIEW Fragment PRODUCTS VISITED

Desktop Layout @vannsl @vannsl | 2019 Fragment LAYOUT HEADER Fragment
LAYOUT FOOTER Fragment PRODUCTS DAILY DEAL Fragment PRODUCT OVERVIEW Fragment PRODUCTS VISITED

Communication and Event Streaming @vannsl @vannsl | 2019 Team SWORD
Team SHIELD Microservices and Databases Communication via API or Event Streaming Clientside Eventbus

Communication and Event Streaming @vannsl @vannsl | 2019 Team SWORD
Team SHIELD Clientside Eventbus Declarative, not imperative Microservices and Databases Communication via API or Event Streaming

Microfrontends & Verticals @vannsl @vannsl | 2019 The Good Happy
developers Innovative Teams

@vannsl The beginners’ pitfalls The Bad Microfrontends & Verticals @vannsl
| 2019

@vannsl @vannsl | 2019 Fullstack Dev UX Scrum UI Fullstack
Dev Fullstack Dev Fullstack Dev PO The Challenge

Code Reuse - DRY @vannsl @vannsl | 2019 UI Component
Library Shared Services

Code Reuse - DRY @vannsl @vannsl | 2019 Webpack Configuration
Testing Setup Utils Helpers Vendors Assets Don’t share anything Honestly, don’t.

@vannsl

Microfrontends @vannsl @vannsl | 2019 The Ugly Be aware of…

Microfrontend @vannsl @vannsl | 2019 The Ugly Be aware of…
Memory Leaks

(not) Isolated Instances

Configuration Mistakes

☝ Rules

3 How can we guarantee an overall good UX? Can
we switch between different teams? 2 Golden Rules @vannsl @vannsl | 2019 1How and where do we implement new features? Design Systems

Developer Experience vs. User Experience @vannsl SinnerSchrader × Accenture Interactive
DX UX

Companies using Microfrontends @vannsl @vannsl | 2019 Spotify Klarna Zalando
Upwork OpenTable Allegro HelloFresh SinnerSchrader

Thank you @FrontConf #SocialDistancing Project | Month Xth, YYYY

Thank you, @FrontConf @vannsl Vanessa Böhner @vannsl https://vannsl.io

Micro frontends: The Good, The Bad and The Ugly

Micro frontends: The Good, The Bad and The Ugly

More Decks by FrontConf

Other Decks in Programming

Featured

Transcript