SlideShare ist ein Scribd-Unternehmen logo
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

Weitere ähnliche Inhalte

Ähnlich wie Back to the Frontend – aber nun mit Microservices

ForgeRock Webinar - Was ist Identity Relationship Management?
ForgeRock Webinar - Was ist Identity Relationship Management?ForgeRock Webinar - Was ist Identity Relationship Management?
ForgeRock Webinar - Was ist Identity Relationship Management?
Hanns Nolan
 
DACHNUG50 MX Digitalisierung - DACHNUG Vortrag.pdf
DACHNUG50 MX Digitalisierung - DACHNUG Vortrag.pdfDACHNUG50 MX Digitalisierung - DACHNUG Vortrag.pdf
DACHNUG50 MX Digitalisierung - DACHNUG Vortrag.pdf
DNUG e.V.
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
gedoplan
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
DNUG e.V.
 
Magento Commerce Cloud Edition
Magento Commerce Cloud EditionMagento Commerce Cloud Edition
Magento Commerce Cloud Edition
TechDivision GmbH
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
DNUG e.V.
 
Banking portal
Banking portalBanking portal
Banking portal
JoeyNbg
 
Webcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die CloudWebcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die Cloud
QUIBIQ Hamburg
 
Führende B2B-Shopsoftware für den Mittelstand
Führende B2B-Shopsoftware für den MittelstandFührende B2B-Shopsoftware für den Mittelstand
Führende B2B-Shopsoftware für den Mittelstand
TechDivision GmbH
 
"Design & Generate": Standard ERP Systeme nach Mass
"Design & Generate": Standard ERP Systeme nach Mass"Design & Generate": Standard ERP Systeme nach Mass
"Design & Generate": Standard ERP Systeme nach Mass
topsoft - inspiring digital business
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenJakob
 
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgSlides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
DNUG e.V.
 
Software as a Service E-Commerce Technologien
Software as a Service E-Commerce TechnologienSoftware as a Service E-Commerce Technologien
Software as a Service E-Commerce TechnologienMartina Goehring
 
Vorteil: Wissen. Collaboration Solutions für Wissensmanagement in Echtzeit
Vorteil: Wissen. Collaboration Solutions für Wissensmanagement in EchtzeitVorteil: Wissen. Collaboration Solutions für Wissensmanagement in Echtzeit
Vorteil: Wissen. Collaboration Solutions für Wissensmanagement in Echtzeit
Intland Software GmbH
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
adesso AG
 
B1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid DevelopmentB1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid Development
Andreas Schulte
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
Cenarion Information Systems GmbH
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
Torsten Fink
 
Zeitnahe Reaktion auf Verordnungsänderungen mit Feature Toggles
Zeitnahe Reaktion auf Verordnungsänderungen mit Feature TogglesZeitnahe Reaktion auf Verordnungsänderungen mit Feature Toggles
Zeitnahe Reaktion auf Verordnungsänderungen mit Feature Toggles
BATbern
 

Ähnlich wie Back to the Frontend – aber nun mit Microservices (20)

ForgeRock Webinar - Was ist Identity Relationship Management?
ForgeRock Webinar - Was ist Identity Relationship Management?ForgeRock Webinar - Was ist Identity Relationship Management?
ForgeRock Webinar - Was ist Identity Relationship Management?
 
DACHNUG50 MX Digitalisierung - DACHNUG Vortrag.pdf
DACHNUG50 MX Digitalisierung - DACHNUG Vortrag.pdfDACHNUG50 MX Digitalisierung - DACHNUG Vortrag.pdf
DACHNUG50 MX Digitalisierung - DACHNUG Vortrag.pdf
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
Magento Commerce Cloud Edition
Magento Commerce Cloud EditionMagento Commerce Cloud Edition
Magento Commerce Cloud Edition
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
Banking portal
Banking portalBanking portal
Banking portal
 
Webcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die CloudWebcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die Cloud
 
Führende B2B-Shopsoftware für den Mittelstand
Führende B2B-Shopsoftware für den MittelstandFührende B2B-Shopsoftware für den Mittelstand
Führende B2B-Shopsoftware für den Mittelstand
 
"Design & Generate": Standard ERP Systeme nach Mass
"Design & Generate": Standard ERP Systeme nach Mass"Design & Generate": Standard ERP Systeme nach Mass
"Design & Generate": Standard ERP Systeme nach Mass
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgSlides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
 
Software as a Service E-Commerce Technologien
Software as a Service E-Commerce TechnologienSoftware as a Service E-Commerce Technologien
Software as a Service E-Commerce Technologien
 
Vorteil: Wissen. Collaboration Solutions für Wissensmanagement in Echtzeit
Vorteil: Wissen. Collaboration Solutions für Wissensmanagement in EchtzeitVorteil: Wissen. Collaboration Solutions für Wissensmanagement in Echtzeit
Vorteil: Wissen. Collaboration Solutions für Wissensmanagement in Echtzeit
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
B1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid DevelopmentB1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid Development
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Barrierefreiheit
BarrierefreiheitBarrierefreiheit
Barrierefreiheit
 
Zeitnahe Reaktion auf Verordnungsänderungen mit Feature Toggles
Zeitnahe Reaktion auf Verordnungsänderungen mit Feature TogglesZeitnahe Reaktion auf Verordnungsänderungen mit Feature Toggles
Zeitnahe Reaktion auf Verordnungsänderungen mit Feature Toggles
 

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