Back to the Frontend – aber nun mit Microservices
- 1. BACK TO THE FRONTEND ABER NUN MIT MICROSERVICES OOP München, 6.Februar 2020
- 2. 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
- 3. Unterschiedliche Szenarien bei der Frontend-Integration von Services 31 2B2C Webshop B2B Web-App Inhouse Web-App
- 4. 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
- 5. 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…
- 6. § 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
- 7. § 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
- 8. 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
- 9. 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
- 10. 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
- 11. 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 {…}
- 12. WebComponents Custom Elements Shadow DOM HTML Templates <ordercheckout></ordercheckout> <product-preview></product-preview> <user-profile></ user-profile> <item-stockinfo></item-stockinfo>
- 13. 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>
- 14. Eine Integration der Services am Beispiel von Otto.de https://www.otto.de/jobs/technology/techblog/
- 15. Geht auch mit ganzen Seiten
- 16. Sicherstellen einer einheitlichen UI durch eine Pattern Library https://www.otto.de/pattern-library/
- 17. 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
- 18. Kommunikation – Möglichst asynchron und resilient Pricing Rules Service Domain Persistence Service Domain Persistence Frontend Frontend Frontend-Integration Messaging
- 19. Bootup Template Welche Lösungen braucht jeder? Toggle Vault Jobs Config Cache Status DB & Persistence Metric Logging
- 20. 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
- 21. 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