BACK TO THE FRONTEND
ABER NUN MIT MICROSERVICES
OOP München, 6.Februar 2020

OTTO in Zahlen
• 7 Millionen aktive Kunden
• 3 Millionen Produkte von mehr als 6.800 Marken
auf otto.de
• Bis zu 10 Bestellung pro Minute auf otto.de
• Über 97 Prozent des Umsatzes über digitale Kanäle
• Über 55 Prozent aller Käufe im OTTO-Shop erfolgen
über Smartphones und Tablets
• Der Anteil der Visits über mobile Endgeräte beträgt
70 Prozent
• Jede zweite Waschmaschine, die online bestellt
wird, kommt von OTTO
• Jeder dritte online bestellte Fernseher, kommt von
OTTO

Unterschiedliche Szenarien bei der Frontend-Integration von Services
31 2B2C Webshop B2B Web-App Inhouse Web-App

Pricing Inventory Rules
§ Verschiedene zum Teil disjunkte Fachlichkeit in
einer Software
§ Wenige Releases mit zum Teil hohem Aufwand
§ Einheitlicher Technologie Stack mit
abgestimmtem Look & Feel
Unsere Herausforderung
§ Ablösung einer 20 Jahre alten Software
§ Beinhaltet Kernfunktionen der
Einkaufsprozesse und bildet den
Artikellebenszyklus ab
§ Beinhaltet ein einheitliches Frontend für die
Fachlichkeit
Am Anfang war der… Monolith
Presentation
Business Logic
Data Access

Leistung und Skalierbarkeit
Anzahl paralleler Benutzer
Zuverlässigkeit
Zero Downtime?
Benutzbarkeit
Antwortzeiten, Ladezeiten
Look & Feel
Usability, Unterstützte Geräte
Sicherheitsanforderungen
Security, SSO / FIDO2
Jedes Szenario hat unterschiedliche Schwerpunkte in seinen nicht
funktionalen Anforderungen
Auffindbarkeit
Suchmaschinenoptimierung (SEO)
Repräsentation
Corporate Identity
Entwicklung
Anzahl Entwickler und Schnitt der Teams
Rollout
Frequenz, Continuous Delivery & Integration
Im Allgemeinen… Im Speziellen…

§ Priorisierung der Transformation durch
aktuelle Geschäftsnotwendigkeiten
§ Aufbau eigenständiger Teams für die
herausgelöste Fachlichkeit
§ Parallel Refactoring im Monolithen um
Migration zu erleichtern
Aus Sicht des Anwenders
§ Jedes Team ist aktuell für sein eigene
graphische Oberfläche verantwortlich
§ Aus Sicht der internen Fachanwender sind
jedoch keine bis wenige Systembrüche
gewünscht
§ Im B2B Umfeld sind die Umbrüche gänzlich
zu vermeiden
Herauslösen von Fachlichkeit aus dem Monolith und erstellen neuer
eigenständiger Microservices
Pricing Inventory Rules
Presentation
Business Logic
Data Access
P
BL
DA

§ Backend Teams stellen nur noch
(versionierte) APIs bereit
§ Separates Team erstellt das Frontend
§ Feature Bereitstellung folgt immer dem
Frontend Release
Spezialisierung API Gateway / Backend for
Frontend
§ Zentrale Lösung für Logging,
Authentifizierung, Caching und
Transformation
§ Minimierung von Round-Trips in der
Kommunikation zwischen Frontend und
Backend
§ Einsatz separater Gateways je Frontend
(WebApp, MobileApp,..)
Microservices mit Frontend Monolith
API
Business Logic
Data Access
Pricing
API
Business Logic
Data Access
Rules
Presentation
API Gateway

Micro Frontends - We've seen significant benefits from introducing
microservices, which have allowed teams to scale the delivery of independently
deployed and maintained services. Unfortunately, we've also seen many teams
create a frontend monolith — a large, entangled browser application that sits
on top of the backend services — largely neutralizing the benefits of
microservices. Since we first described micro frontends as a technique to
address this issue, we've had almost universally positive experiences with the
approach and have found a number of patterns to use micro frontends even as
more and more code shifts from the server to the web browser. So far, web
components have been elusive in this field, though.
Quelle: ThoughtWorks, Technology Radar
Welche Ansätze gibt es, damit die Teams wieder ihr eigenes Frontend
bauen dürfen?
APR
2019
NOV
2017
NOV
2016
ASSESS
TRIAL
ADOPT

Teams können nur erfolgreich miteinander Arbeiten, wenn die
Teamstrukturen den Architekturmustern folgen
Von Experten-Teams… …zu Cross Funktionalen Teams
Business
Frontend
Backend Ops
Test RulePricing

Server
§ Server Side Include (SSI)
§ Varnish + ESI
§ Compoxure
§ Tailor
§ …
Client
§ Java Script + AJAX
§ iFrames
§ WebComponents / Custom Elements
§ Single SPA Library
§ Hinclude
§ …
Micro Frameworks – Optionen für die Frontend Integration
Pricing Rules
Presentation
Business Logic
Data Access
Presentation
Business Logic
Data Access

Single Page Application
Besteht aus nur einer Seite: HTML, JavaScript, CSS
API-First auf Serverseite
Server generiert JSON
per JavaScript wird HTML auf Clientseite erzeugt
GET /b2banalytics
HTTP/1.1 200 OK <html> … </html>
GET /partner/detail.json HTTP 1.1
HTTP 1.1 OK JSON {…}

WebComponents
Custom Elements Shadow DOM HTML Templates
<ordercheckout></ordercheckout>
<product-preview></product-preview>
<user-profile></ user-profile>
<item-stockinfo></item-stockinfo>

nginx
Server Side Includes
Team ProductData Team Analytics
/productlist
auth-proxy&KeyCloack
/productlist
<html>
<!--#include virtual=„/sale/detail“ -->
<h1>Product</h1>
Total 66 EUR
/sale/detail
<html>
<h1>Product</h1>
Total 66 EUR
</html>

Eine Integration der Services am Beispiel von Otto.de
https://www.otto.de/jobs/technology/techblog/

Geht auch mit ganzen Seiten

Sicherstellen einer einheitlichen UI durch eine Pattern Library
https://www.otto.de/pattern-library/

Rules Inventory
Micro und Macro Architektur - Die einzelnen Teams haben die
Wahlmöglichkeit über die eingesetzte Technologie
Mongo
DB
React
Spring
Boot
S3
Vue
Lamda
Cassan-
dra
Pyth-
on
Pricing
Oracle
React
Spring
Boot

Kommunikation – Möglichst asynchron und resilient
Pricing Rules
Service
Domain
Persistence
Service
Domain
Persistence
Frontend Frontend
Frontend-Integration
Messaging

Bootup Template
Welche Lösungen braucht jeder?
Toggle
Vault
Jobs
Config Cache
Status
DB & Persistence
Metric
Logging

Was ändert sich in der Zusammenarbeit?
Cross-Functional Teams besetzen
Aber auch Spezialisten werden gebraucht
Fokus auf Auslieferung legen – Geschwindigkeit vor Synergie
Customer Focus in die Teams bringen
Kleinen Scope festlegen
Renovierung und Refactoring muss akzeptiert werden und gemacht werden
Aufsetzen von COPs und Gremien

Und was braucht man so?
Start simple: Erstmal einfach
Optimiere spät: Beim Backend
Optimiere von Anfang an: bei Request & Response
Clean Code von Anfang an
Alles muss isoliert getestet werden
An Breaking Changes denken
Wäge ab ob eine Lösung Technisch oder Organisatorisch gefunden wird
Baue Muster für Querschnitt: Log, Track, Security….
Baue eine interaktive lebende Pattern Library

André Fleischer
andre.fleischer@otto.de
Heiko Schröder
heiko.schroeder@otto.de
@andrefleischer