Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hinter den Kulissen von SCS Architekturen

Hinter den Kulissen von SCS Architekturen

Die Slides zu meinem Talk auf der JavaLand 2019

Mirko Sertic

March 19, 2019
Tweet

More Decks by Mirko Sertic

Other Decks in Technology

Transcript

  1. Hinter den Kulissen von
    SCS-Architekturen
    2019 | Mirko Sertic | Thalia Bücher GmbH
    Die fiesen Details

    View Slide

  2. Worum geht es
    • Großes Unternehmen aus Deutschland
    • Sehr alte Code Basis
    • Monolithische Systemstruktur
    • Abnehmende Flexibilität bei Changes
    • Lessons Learned. Die fiesen Details, die nicht im SCS Manifest stehen

    View Slide

  3. Disclaimer

    View Slide

  4. Disclaimer
    Welt, bleib wach!
    Online-Bücher

    View Slide

  5. Die SCS Architektur
    •Each SCS is an autonomous web application
    •Each SCS is owned by one team
    •The SCS‘s domain, all data, the logic to process that data and all code
    to render the web interface is contained within the SCS
    •The SCS can fulfill ist primary use cases on ist own, without having to
    rely on other systems being available

    View Slide

  6. Lektion #1
    Die Organisation

    View Slide

  7. Organisation
    • Microservices skalieren Organisationen und Software
    • Das gleiche gilt für die SCS Architektur
    • Does it scale up VS. does it scale down?
    • Wie viele Services verträgt ein Team?

    View Slide

  8. Organisation
    • Es geht nicht im die Internas der Systeme, sondern um die
    Schnittstellen
    • Schnittstelle schlecht = mindestens zwei Systeme und/oder Teams
    betroffen

    View Slide

  9. Systemschnitt
    Welt,bleib wach!
    Online-Bücher
    Welt,bleib wach!
    Online-Bücher

    View Slide

  10. Systemschnitt
    Welt,bleib wach!
    Online-Bücher
    Welt,bleib wach!
    Online-Bücher
    Suchmaschine
    Redaktion / CMS
    Empfehlungen / Reco-Engine
    Login

    View Slide

  11. Lektion #2
    Der Migrationsweg

    View Slide

  12. Migrationsweg
    • Integration einzelner HTML Bestandteile
    z.B. die Suchzeile, der Anmeldestatus, CMS Bereiche
    Bestandteile können überall eingebunden werden
    • Migration ganzer Seiten
    z.B. ein Suchergebnis, die Warenkorbseite
    pro Seitentyp ein führendes Team und System

    View Slide

  13. Migrationsweg
    WebServer / httpd
    Legacy WebContainer / Tomcat

    View Slide

  14. Migrationsweg
    SSI
    Server-Side-Includes
    UI-Aggregation
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer

    View Slide

  15. Migrationsweg
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition

    View Slide

  16. Migrationsweg von HTML-Bestandteilen
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition




    View Slide

  17. Migrationsweg von HTML-Bestandteilen
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition







    <br/>1<br/>

    View Slide

  18. Migrationsweg von HTML-Bestandteilen
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition




    <br/>1<br/>

    View Slide

  19. Migrationsweg von HTML-Bestandteilen
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition



    <br/>1<br/>2<br/><!--#include<br/>virtual="/suche/suchbox.html" --><br/>

    View Slide

  20. Migrationsweg von HTML-Bestandteilen
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition



    <br/>1<br/>2 3<br/><!--#include<br/>virtual="/suche/suchbox.html" --><br/>

    View Slide

  21. Migrationsweg für komplette Seiten
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition

    Suchergebnis


    View Slide

  22. Migrationsweg für komplette Seiten
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition



    <br/>1<br/><body><br/><div<br/>Suchergebnis<br/></div><br/></body><br/>

    View Slide

  23. Migrationsweg für komplette Seiten
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition



    <br/>1<br/><body><br/>{{suchergebnis}}<br/></body><br/>

    View Slide

  24. Migrationsweg für komplette Seiten
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition



    <br/>1<br/>2<br/><body><br/>{{suchergebnis}}<br/></body><br/>

    View Slide

  25. Migrationsweg für komplette Seiten
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SSI (Server Side Includes)
    für
    UI Composition



    <br/>1<br/>3<br/>2<br/><body><br/>{{suchergebnis}}<br/></body><br/>

    View Slide

  26. Essenz der Migrationsstrategie
    • Legacy System wird immer weiter ausgehöhlt
    • Für komplette Seiten ist es nur noch eine Template-Quelle
    • Die Template-Quelle kann später leicht durch ein CMS ersetzt
    werden

    View Slide

  27. Lektion #3
    Session Management

    View Slide

  28. Session Management
    • Was ist mit Anmeldeinformationen?
    • Gibt es eine Session-ID? Wer pflegt sie?
    • Zentraler vs. Dezentraler Session-Store

    View Slide

  29. Session Management
    SSI
    Server-Side-Includes
    UI-Aggregation
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer

    View Slide

  30. Session Management
    WebServer / httpd
    Legacy WebContainer / Tomcat SCS WebContainer
    SessionID Management
    via zentralem Cookie
    Federated Session Management Federated Session Management

    View Slide

  31. Session Management Caveats
    • Cookies können manipuliert werden!
    • Fachliche Ereignisse via Event-Sourcing propagieren
    B. User X hat sich in Session Y angemeldet
    • Kein zentraler Session-Store, da Systeme unabhängig operieren sollen!
    • Session-ID via URLRewriting is a different beast, Session-ID !=
    Loadbalancing Route (jvmroute)

    View Slide

  32. Lektion #4
    Character Encodings

    View Slide

  33. Character Encodings
    • SSI funktioniert nur, wenn alle Systeme das gleiche Encoding
    verwenden
    • Es gibt Legacy-Systeme, die noch nicht UTF-8 sprechen
    • Kann komplex werden, unbedingt ein Auge drauf halten
    → z.B. Protokolle, Datenbanken, I18N

    View Slide

  34. Lektion #5
    Frontend Architektur

    View Slide

  35. Systemschnitt
    Welt,bleib wach!
    Online-Bücher
    Welt,bleib wach!
    Online-Bücher

    View Slide

  36. Systemschnitt
    Welt,bleib wach!
    Online-Bücher
    Welt,bleib wach!
    Online-Bücher
    Suchmaschine
    CMS
    Reco Engine
    Login

    View Slide

  37. Die Sache mit dem JS und CSS
    • Wir brauchen CSS-Prefixing / Namespacing
    • Wir brauchen JS-Module
    • Wir brauchen Asset-Versionierung
    • Wir brauchen CDN / Caching
    • Wir brauchen BEM-Styles (Block-Element-Modifier)

    View Slide

  38. Frontend-Architektur
    • Brauchen wir ein Design-System??
    • Brauchen wir globale Styles?
    • Brauchen wir eine zentrale Asset-Ablage?

    View Slide

  39. Frontend-Architektur
    • Brauchen wir ein Design-System?
    → Kann bei Diskussionen helfen
    • Brauchen wir globale Styles?
    → So wenig wie nötig
    • Brauchen wir eine zentrale Asset-Ablage?
    → Ja, für die globalen Styles und Polyfills

    View Slide

  40. Wie viele Frontends gibt es?
    Welt,bleib wach!
    Online-Bücher

    View Slide

  41. Wie viele Frontends gibt es?
    Welt,bleib wach!
    Online-Bücher
    Each SCS is an autonomous web application

    View Slide

  42. Wie viele Frontends gibt es?
    Welt,bleib wach!
    Online-Bücher
    Welt,bleib wach!
    Online-Bücher
    HTML Frontend
    z.B. Foundation
    Each SCS is an autonomous web application

    View Slide

  43. Wie viele Frontends gibt es?
    Welt,bleib wach!
    Online-Bücher
    Welt,bleib wach!
    Online-Bücher
    HTML Frontend
    z.B. Foundation
    HTML Frontend
    z.B. Bootstrap
    Welt,bleib wach!
    Online-Bücher
    Each SCS is an autonomous web application

    View Slide

  44. Wie viele Frontends gibt es?
    Welt,bleib wach!
    Online-Bücher
    Welt,bleib wach!
    Online-Bücher
    HTML Frontend
    z.B. Foundation
    Native App IOS / Android
    nur mit WebView!
    HTML Frontend
    z.B. Bootstrap
    Welt,bleib wach!
    Online-Bücher
    Welt,bleib wach!
    Online-Bücher
    Each SCS is an autonomous web application

    View Slide

  45. Frontend-Architektur und QA
    • Wer testet einzelne HTML Bestandteile?
    • Wer testet ganze Seiten?

    View Slide

  46. Frontend-Architektur und QA
    • Wer testet einzelne HTML Bestandteile?
    → Das Team, welches das ausliefernde SCS betreut
    • Wer testet ganze Seiten
    → Das Team, welches das verantwortliche SCS betreut

    View Slide

  47. Frontend-Architektur Caveats
    • Regeln für semantisches HTML beachten
    • Zentrale Komponten schwer zu realisieren, da Kontext variieren kann
    • Mikroformate und SEO abhängig vom Kontext
    • Tag-Manager Integration in Verbindung mit Ad-Blockern oder
    modernen Browsern immer schwieriger (unterwandert
    Zuständigkeit)

    View Slide

  48. Lektion #6
    Frontend Performance

    View Slide

  49. Progressive Enhancement
    • SSIs werden sequentiell abgearbeitet
    • Ein SCS liefert einzelne HTML Bestandteile aus

    View Slide

  50. Progressive Enhancement
    • SSIs werden sequentiell abgearbeitet
    • Ein SCS liefert einzelne HTML Bestandteile aus
    → Details via Fetch API erst nachladen, wenn sichtbar und benötigt

    View Slide

  51. Lektion #7
    Systemintegration

    View Slide

  52. Systemintegration
    • Sessionmanagement und Tracking
    • Fachliche Ereignisse
    • Datenreplikation

    View Slide

  53. Systemintegration
    • Sessionmanagement und Tracking
    • Fachliche Ereignisse
    • Datenreplikation
    Communication with other SCSs or 3rd party systems is asynchronous
    wherever possible.
    To make SCSs more robust … shared infrastructure should be minimized.

    View Slide

  54. Systemintegration
    • Asynchron bedeutet kein synchrones HTTP
    • Keine geteilte Infrastruktur bedeutet kein zentraler Datentopf mit
    Stammdaten über Produkte oder Kunden

    View Slide

  55. Systemintegration
    • Daten müssen durch Event-Sourcing synchronisiert werden
    • Es gibt doch eine zentrale Infrastruktur, der Message-Broker
    • Rabbit/ActiveMQ ist gut, Kafka eventuell sinnvoller

    View Slide

  56. Systemintegration / Event Storming

    View Slide

  57. Systemintegration / Event Storming
    Artikeldaten
    geändert
    Kunden-
    Anschrift
    geändert
    Auftrag
    erteilt
    Storno
    eingegangen

    View Slide

  58. Systemintegration / Event Storming
    Artikeldaten
    geändert
    Kunden-
    Anschrift
    geändert
    Auftrag
    erteilt
    Storno
    eingegangen
    Kunde
    angemeldet
    Kunde
    abgemeldet
    Aufruf einer
    Produktseite
    Klick auf
    Empfehlung

    View Slide

  59. Systemintegration / Event Storming
    Artikeldaten
    geändert
    Kunden-
    Anschrift
    geändert
    Auftrag
    erteilt
    Storno
    eingegangen
    Kunde
    angemeldet
    Kunde
    abgemeldet
    Aufruf einer
    Produktseite
    Klick auf
    Empfehlung
    DSGVO
    Widerspruch
    Data-Breach
    erkannt!
    Aufruf einer
    Produktseite
    Klick auf
    Empfehlung

    View Slide

  60. Systemintegration / Event Storming
    • Rabbit/ActiveMQ ist gut, Kafka eventuell sinnvoller
    • Kafka ist ein verteiltes Transaktionslog
    • Kafka ermöglicht eine Zeitreise für Desaster Recovery

    View Slide

  61. Lektion #8
    Operations

    View Slide

  62. Operations
    • Ops Know-How gehört in die verantwortlichen Teams
    • DevOps ist eine Kultur, keine Rolle
    • Zentrale Infrastruktur ist teilweise wirtschaftlich notwendig
    → Storage, Kubernetes, Influx / Grafana
    • Zentrale Dienste zwingend notwendig
    → Datenschutz, Notdienst

    View Slide

  63. Lektion #9
    Frontend Performance
    Mark II

    View Slide

  64. Frontend-Performance Mark II
    Artikeldaten
    geändert
    Aufruf einer
    Produktseite

    View Slide

  65. Frontend-Performance Mark II
    Artikeldaten
    geändert
    Aufruf einer
    Produktseite
    • Nutzung von Varnish für Seitencaching

    View Slide

  66. Frontend-Performance Mark II
    Artikeldaten
    geändert
    Aufruf einer
    Produktseite
    • Nutzung von Varnish für Seitencaching
    • Nutzung von Precomputed Content /
    statischen HTML Generatoren

    View Slide

  67. Finale Lektion
    Lessons Learned

    View Slide

  68. Lessons Learned
    • Zu viele synchrone Schnittstellen = Risiko für verteilten Monolithen
    • Verteilte Systeme = verteilte Probleme
    • Infrastrukturkosten können explodieren
    • Security auf keinen Fall vergessen!

    View Slide

  69. Lessons Learned
    • Domain-Driven Design ist ein Evergreen
    • Event Storming hilft, Ursache-Wirkungs-Ketten zu erkennen und zu
    verstehen
    • Wert auf API-Design legen, Messages sind Teil der API!
    • Resist the Hype!

    View Slide

  70. Lessons Learned
    • Resilience Patterns sind wichtig ( Circuit-Breaker etc. )
    • Pull-Messaging für Skalierung und Back-Pressure
    • Eventual Consistency ist fast überall
    • Fokus auf Mean Time To Recover/Repair ( MTTR )

    View Slide

  71. Lessons Learned
    • SCS Architektur guter Ansatz für Produktentwicklung
    • SCS Architektur guter Ansatz um Organisationen zu skalieren
    • SCS Architektur lenkt den Fokus auf das Produkt und auf klare
    Schnittstellen
    • SCS Architektur funktioniert auch mit Brown-Field Projekten

    View Slide

  72. Herzlichen Dank!
    Mirko Sertic
    Software Craftsman im Web / eCommerce Umfeld
    @mirkosertic
    [email protected]
    https://www.mirkosertic.de
    https://github.com/mirkosertic

    View Slide