Yearly Archives

2018

embarc echo – Juli 2018

By | Allgemein, echo | No Comments

Impulse aufgreifen – embarc echo

Finden Sie in gewohnt kurzer Form frische Anregungen aus unseren Konferenzbeiträgen, Fachartikeln oder in unserer aktuellen Blogserie rund um zeitgemäße Architekturstile. Außerdem haben wir Tipps für einen schnellen Einstieg in das Thema Machine Learning, Referenzwissen direkt zum Download und stellen einen unserer neuen Kollegen vor. Mit aktuellen Informationen und einem Ausblick schauen wir zudem auf künftige Termine & Veranstaltungen.

Download embarc echo Juli-2018 (PDF, 8 Seiten)

embarc_echo_Juli-2018 -- Klicken zum Download ...

Einen Computergegner asynchron anbinden mit RabbitMQ (Micro Moves, Bauteil 6)

By | Inhaltliches | No Comments

Blog-Serie Micro Moves -- LogoIn der vorherigen Folge der Micro-Moves-Serie haben wir einen Service für die Spielregeln im Schach synchron an einen anderen Service angeflanscht. Mit diesem Bauteil zeigen wir nun asynchrone Kommunikation. Konkret ermöglichen wir es Benutzern unserer Online-Schachplattform FLEXess sich mit einem der ganz Großen im Computer-Schach zu messen.

Um was geht es — ein Überblick

Im Bild sieht es aus, als gäbe es dieses Mal gleich zwei Bauteile. Was die Anzahl Prozesse angeht stimmt das auch. Wir integrieren einen Computer-Spieler (Stockfish) und binden ihn via Messaging asynchron an das games-Modul an. Inhaltlich passiert am Ende aber nur eins: Unsere Benutzer können gegen den Ranglisten-Ersten (CCRL 40/40, Stand Juli 2018) im Computer-Schach antreten. Oder auch der Computer gegen sich selbst, wenn wir einfach nur zugucken wollen.

Überblick FLEXess, Bauteil 6

Computerschach

Ein Jahrhundertraum wie das Fliegen. Eine Machine bauen, die Menschen im Schach bezwingt. Seit Wolfgang von Kempelens berühmten Schachtürken um 1780 haben sich Menschen daran versucht. Das Problem können wir als gelöst ansehen. Claude Shannon hat 1949 mit seinem Aufsatz „Programming a Computer for Playing Chess“ die theoretische Grundlage gelegt. 1996 verlor das erste Mal ein amtierender Schachweltmeister — stellvertretend für die gesamte Menschheit sozusagen — unter Wettkampfbedingungen gegen eine Machine (Deep Blue). Mit dem aktuellen Megatrend Machine Learning hatte das Ganze übrigens nichts zu tun. Deep Blue lernte nicht. Es rechnete einfach brutal schnell.

Erste Schach-Computer für den privaten Gebrauch erschienen bereits 1977 und kosteten noch eine Stange Geld. Der Fortschritt in der Hardware lässt uns heute bequem auf unserem Smartphones gegen eine App verlieren. Der eigentliche (Rechen-)Kern von Schach-Programmen wird dabei als „Engine“ bezeichnet. Engines lassen sich typischerweise in verschiedene Schachoberflächen integrieren. Damit dies einfach möglich ist, und auch damit Engines leicht gegeneinander antreten können, haben sich textbasierte Kommunikationsprotokolle etabliert. Das verbreitetste heute ist UCI (kurz für Universal Chess Interface, Spezifikation siehe hier).Stockfish Logo

Um auch Nutzern von FLEXess die Möglichkeit zu geben, gegen einen ernstzunehmenden Computergegner anzutreten, binden wir in dieser Folge Stockfish an. Das ist eine besonders spielstarke Chess Engine, in C++ implementiert und Open Source. Stockfish ist auf allen Ranglisten vorne dabei (Spitzenreiter zum Beispiel in der CCRL 40/40, Computer Chess Rating Lists, Stand Juli 2018). Das Programm unterstützt das UCI-Protokoll und lässt sich dadurch einfach integrieren.

Stockfish auf der Kommandozeile

Wenn Ihr Stockfish für Eurer Notebook herunterladet findet Ihr auf der entsprechenden Seite auch ein einfaches UI, mit dem sich die Engine interaktiv passabel bedienen lässt. Uns interessiert allerdings die Kommandozeile. Startet Ihr die Stockfish Engine in einem Terminal könnt Ihr Befehle eingeben und die Denkarbeit des Programmes beobachten, inkl. des  „besten Zuges“ nach Ende einer Analyse. Die folgende Abbildung zeigt in einem Terminal, dass Stockfish ein Schäfermatt auch auf der Kommandozeile souverän nach Hause spielt.

Stockfish in der Kommandozeile

Die von mir eingegebenen Befehle waren isready, position, go und quit. Mit position wird die aktuelle Spielsituation gesetzt. Die Eingabe ist in FEN möglich (mit position fen …, Details zu dieser Notation findet Ihr in der zugehörigen Randnotiz). Oder wie oben im Bild durch Angabe der bisherigen Züge ausgehend vom Start (mit position startpos moves e2e4 e7e5 d1h5 …). Die verwendete Züge ermöglichen weiß am Zug ein sogenanntes Schäfermatt. Die schicke Abbildung unten zeigt das Brett nach diesen 6 (Halb-)zügen. Es ist übrigens mit dem chess-diagrams-Modul als Folge 2 dieser Serie generiert.

Spielsituation vor Schäfermatt

Der UCI-Befehl go lässt Stockfish losrechen. Mit dem depth-Parameter habe ich die Suchtiefe beschränkt, damit die Ausgaben nicht das Terminal zutexten und wir die vorherigen Eingaben noch im Screenshot sehen. Mit bestmove gibt Stockfish seinen Zug aus. Dame auf h5 schlägt auf f7 und setzt Matt. Besser geht es nicht.

Mit quit können wir die Session beenden. Wir wollen Stockfish nicht weiter unterfordern.

Stockfish anbinden

Roboter mit SteckerBei der Integration der Schach Engine habe ich mich für Python entschieden, um ein bisschen Gluecode zu schreiben. Ihr findet diesen im Modul computer-player auf GitHub. Die betreffende Datei heißt stockfish.py und umfasst ca. zwei Dutzend Zeilen Quelltext. Die Python-Funktion calculate_move startet Stockfish als Subprozess. Via stdin gibt sie die Befehle (position, go …) an die Engine und holt sich das Ergebnis über dessen stdout ab.

Das Ganze funktioniert nur, wenn stockfish installiert ist. Ein kleiner Integrations-Test mit tox überprüft die Anbindung der Engine, indem er Stockfish u.a. genau das Schäfermatt serviert. Unser Image für Docker basiert auf Ubuntu. Das Dockerfile installiert Stockfish mit apt-get. Damit das Programm aktiv wird, wenn wir ihm Züge vorlegen, verbinden wir es via Messaging.

Die Messaging-Renaissance

Messaging ist eine etablierte Technologie, um Programme miteinander sprechen zu lassen, die dies von Natur aus nicht können. Entsprechende Middleware schaut auf eine lange Geschichte zurück. WebSphere MQ von IBM etwa erblickte als MQSeries bereits Anfang der 90er das Licht der Welt. Der spätere SOA-Hype befeuerte den Einsatz derartiger EAI-Lösungen. Neben kommerziellen Produkten von Firmen wie Oracle oder TIBCO gibt es auch Open Source-Lösungen, etwa Apache ActiveMQ.

RabbitMQ LogoMessaging-Lösungen kennzeichnen sich durch lose Kopplung aus. Die Kommunikationspartner können in sehr verschiedenen Technologien implementiert sein und auf unterschiedlichsten Plattformen laufen. Der Nachrichtenaustausch erfolgt asynchron und oftmals indirekt. Die Partnerprogramme brauchen sich weder kennen, noch gleichzeitig laufen. Das macht Messaging Lösungen für zeitgenössische Architekturstile wie Microservices, die lose Kopplung anstreben, sehr interessant.

Auch wenn die Konzepte die alten sind sehen wir vermehrt neuere, leichtgewichtige Messaging-Löungen auf dem Vormarsch. Ganz vorne dabei ist RabbitMQ. Die in Erlang entwickelte Open Source-Lösung implementiert eine Reihe von Standards, darunter AMQP (Advanced Message Queuing Protocol).

Für unsere Anbindung haben wir ein vorgefertigtes Docker-Image von RabbitMQ genutzt, und in der Konfigurationsdatei für docker-compose als Service vereinbart. Die gewählte Image-Variante beinhaltet die webbasierte Management-Konsole. Dadurch lässt sich RabbitMQ mit seinen Verbinden, Nachrichtenaustauschen und Queues prima von außen beobachten. Die folgende Abbildung zeigt bereits unser FLEXess in Aktion. Also beim Senden und Empfangen von Schachstellungen und Spielzügen als Nachrichten.

RabbitMQ Management Console

games und computer-player tauschen Nachrichten aus

Für die Anbindung zwischen games und computer-player (siehe auch Überblicksbild oben) nutzen wir zwei sogenannte „Direct Exchanges“ in RabbitMQ. Die Middleware bietet verschiedene Austauschmuster an — das direkte ist das einfachste. Die folgende Abbildung zeigt das Zusammenspiel:

Ablauf Messaging

Zwei Queues nehmen Nachrichten im JSON-Format auf. Im Fall eines Zuges, den Stockfish ausführen soll, legt games zunächst eine Nachricht mit der Spielsituation (Schachstellung in FEN) in der Message-Queue positions ab. Ein Computer-Spieler „lauscht“ auf dieser Queue (Implementierung der Funktionen in Python in der Datei stockfish_listener.py). Tatsächlich könnte es mehrere computer-player-Container  geben. Im Falle einer Nachricht liest computer-player die Position aus und nutzt die UCI-Integration wie oben beschrieben zur Ermittlung des besten Zuges aus Stockfishs Sicht. Dieser Zug geht über die Queue moves an games zurück. Über die Game-ID, die jede Nachricht als ein Attribut enthält, kann das games-Modul den Zug dem Spiel zuordnen und ausführen.

Die Aussteuerung von Spielsituationen in die Warteschlange positions erfolgt in games über den Spielernamen „stockfish“. So kann ein Spieler gegen den Computer spielen, indem er einfach eine Partie gegen „stockfish“ startet. Die folgende Abbildung zeigt mich (weiß) im Spiel gegen den Computer-Gegner. Im Moment sieht es noch ausgeglichen aus.

Spiel gegen den Computer-Gegner im Browser

Übrigens lassen sich über das UI des games-Subsyststems auch Partien starten, in denen Stockfish gegen sich selbst spielt. Einfach für beide Spielernamen „stockfish“ im Formular unter „Create a new game“ eintragen. Dann geht das los. Wählt Ihr „Play Game!“ könnt Ihr die „beiden“ Kontrahenten beobachten. Die folgende animierte Abbildung zeigt den Ausschnitt einer solchen Partie in Endlosschleife.

Stockfish gegen Stockfish

Weitere Informationen. Und wie es weiter geht.

Enterprise Integration Patterns: Designing, Building, and Deploying Messaging SolutionsRabbitMQ stellt exzellente Tutorials für alle denkbaren Programmiersprachen und verschiedene Kommunikationsmuster bereit. Ich habe mich für Python daran orientiert. Für die Integration in das games-Modul mit Spring Boot ließ ich mich von einem entsprechenden Beitrag inspirieren: „Getting Started: Messaging with RabbitMQ“.

Die fundierte Quelle für Messaging in Buchform ist meiner Meinung nach immer noch der Klassiker Enterprise Integration Patterns: Designing, Building, and Deploying Messaging Solutions von Gregor Hohpe.

Die Entwicklung von Programmen, die Schach spielen können, geht weiter. Auch heute noch treten Schachprogramme im Wettbewerb gegeneinander an. Mittlerweile mischt die künstliche Intelligenz tatkräftig mit. 2017 schlug Google’s AI-Lösung AlphaZero das traditionelle Spitzenprogramm Stockfish. Es benötigte 4 Stunden, um Schach zu lernen. Und verlor im Anschluss von 100 Partien keine einzige (Bericht hier).

Wie geht es hier mit FLEXess weiter eigentlich? Die Benutzer brauchten sich bisher noch nicht an der Plattform anmelden. Eine Zeichenkette für den Spielernamen einzugeben, genügt. Und jeder kann bei jedem mitspielen. Zeit, dass wir uns diesem offensichtlichen Mangel widmen!

Ach ja: Fragen und Anregungen sind natürlich jederzeit gerne willkommen. Per Kommentar hier im Blog oder gerne auch per Mail direkt an mich …

Zur Blog-Serie Micro Moves

 

 

 

 

Stefan Zörner im Juli bei der Java User Group Münster

By | Publikationen, Vorträge | No Comments
„Mikro- vs. Makroarchitektur – Spielraum und Spielregeln“

JUG Münster Logo

Mikro- vs. Makroarchitektur – Spielraum und Spielregeln
Sprecher: Stefan Zörner
Vortrag bei der Java User Group Münster
Mittwoch, 4. Juli 2018, 18:30 – 20:30 Uhr
Anmeldung über Xing
LVM Versicherung, Kolde-Ring, Münster

Foliendownload (PDF)

Während in einer klassischen Konzern-IT Standards und Blaupausen für immer gleiche Anwendungsarchitekturen sorgen, betonen Microservice-Ansätze die technologische Freiheit. Zwei extreme Spielarten der Ausgestaltung von Makro- und Mikroarchitektur.

In diesem Mix aus Vortrag und kurzen interaktiven Elemente lernt Ihr neben dem Konzept selbst auch die auf Eure Ziele abgestimmte Richtung, die Ihr in dieser Fragestellung einschlagen solltet. Wie sieht in Eurem Kontext die Balance aus – was gebt Ihr für alle Elemente Eurer Anwendung(slandschaft) vor, wo lasst Ihr bewusst Spielraum? Und gibt es auch noch etwas dazwischen? Zu diesem Zweck passen wir organisatorische und technologische Trends wie 2-Speed/Bimodale Architekturen, Cloud und Domänenorientierung in das Entwurfsdoppel Makro und Mikro ein.

Stefan Zörner - Mikro- vs. Makroarchitektur

Spielregeln für Schach und für robuste Aufrufe mit Hystrix (Micro Moves, Bauteil 5)

By | Inhaltliches | No Comments

Blog-Serie Micro Moves -- LogoMittlerweile (seit dem dritten Teil dieser Serie) könnt Ihr auf unserer Online-Schachplattform FLEXess Schach spielen. Allerdings ist die Überprüfung der Züge bzgl. der Spielregeln rudimentär. Solange die Figur die richtige Farbe hat, kann sie ziehen, wohin sie will. Im Extremfall auch quer übers Brett direkt auf den gegnerischen König. Weiterhin merken wir nicht, wenn eine Partie zu Ende ist. Wir führen in diesem Teil einen neuen Service ein, der die Spielregeln anbietet. Und nutzen ihn aus dem games-Modul, um diese Mängel zu beheben.

Um was geht es — ein Überblick

Die komplizierten Spielregeln führen zu einem Quelltext-mäßig umfangreichen Bauteil rules. Wir implementieren es in JavaScript. Das Modul stellt seine Funktionalität per HTTP bereit. In Anlehnung an den letzten Teil der Serie machen wir sie im Reverse Proxy bekannt und bauen ein Docker-Image dazu, das wir in Docker Compose integrieren. Die rote (5) in der folgenden Abbildung markiert den Standpunkt von rules im Gesamtbild („Sie befinden sich hier.“).

Erster Verwender des Moduls ist das Partien-Subsystem games, das überprüfen möchte, ob z.B. aus play eingehende Züge regelkonform sind. Und wissen will, ob eine Partie bereits beendet ist (Stichworte: Schachmatt, Patt). Hierzu greift es auf rules zu; der Zugriff erfolgt synchron. Wir sichern ihn mit Netflix Hystrix ab (Stichwort Resilience).

Aber der Reihe nach …

Spielregeln im Schach — und warum ein eigenes Modul?

Die Schachregeln sind verglichen mit anderen Spielen wie Dame oder Mühle vergleichsweise umfangreich. Es gibt sechs Figurenarten, die unterschiedlich ziehen. Der Bauer ist besonders kompliziert. Er schlägt anders als er zieht, darf am Anfang zwei Felder vor, mitunter en Passant schlagen und verwandelt sich auf der gegnerischen Grundlinie in eine andere Figur (engl. Promotion, für die englischen Schachbegriffe siehe diese Randnotiz). Darüber hinaus gibt es noch die Rochade, Schachmatt und Patt, die Regel, dass man nach seinem Zug nicht im Schach stehen darf … usw.

SchachfigurenEine vollständige Implementierung der Regeln ist aufwändig, aber nicht wirklich schwierig. Als nützlich erweist sich dabei eine Funktion, die für eine beliebige Position (im Wesentlichen die Platzierung der Figuren auf dem Brett, gegeben etwa in Forsyth-Edwards-Notation, siehe Randnotiz dazu) die Liste aller erlaubten Züge des am Zug befindlichen Spielers ermittelt. Mit dem Ergebnis könnt Ihr etwa prüfen, ob ein gegebener Zug gültig ist (er muss in der Liste auftauchen). Ist die Zugliste leer ist das Spiel beendet. Ob der König am Zug angegriffen ist macht dann den Unterschied aus zwischen Matt (verloren) und Patt (unentschieden aka Remis).

Die Spielregeln lassen sich prima automatisiert testen. Insbesondere die Funktion welche die gültigen Züge ermitteln. Auch hier leistet die Forsyth-Edwards-Notation gute Dienste, da man mit ihr in Unit-Tests sehr einfach die Eingabe als Zeichenkette repräsentieren kann. Hier ein Code-Fragment wie es in etwa in unseren Unit-Tests auftaucht

fen = "8/8/7R/3k4/8/3P4/7B/7K b - - 0 1"
expectedMoves = ["d5d4", "d5c5"]
pos = new Position(fen)
moves = ChessRules.getAllValidMoves(pos)
assert.equal(moves.length, expectedMoves.length)
...

In unserem Überblicksbild erkennt Ihr mögliche Verwender für Schachregeln. Neben dem Partien-Service games etwa die beiden Clients play (in Vue.js aus Folge 3) und später noch den Mobile Client. Diese Clients würden durch Nutzung der Spielregeln die Benutzbarkeit erhöhen, in dem sie etwa beim Auswählen einer Figur die Felder markieren, wo die Figur hinziehen darf. Und sie könnten einen eingegebenen Spielerzug prüfen, bevor sie ihn Richtung games schicken, und so den Server entlasten und unnötigen Netzwerkzugriffe (bei fehlerhaften Zügen) vermeiden.

Alternatives Schach: Neue Regeln für das Spiel der KönigeWenn jeder Client die Spielregeln selbst implementieren würde, ständen diesen Vorteilen der Nachteil des mehrfachen Aufwands gegenüber und die Gefahr von Inkonsistenzen. Wenn wir die Spielregeln später ergänzen wollen, um auch so schöne Varianten wie Atom-Schach oder Zombie-Schach zu unterstützen, müssten wir an verschiedenen Stellen Änderungen vornehmen. Schöne Anregungen für alternative Schachregeln finden sich übrigens im Buch rechts …

Die Spielregeln zentral zu entwicklen und als Bibliothek zur Verfügung zu stellen (vgl. Shared Kernel in DDD) wäre eine Option. Als problematisch könnten dabei unterschiedliche Programmiersprachen herausstellen. Eine weitere Möglichkeit wäre die Spielregeln im games-Modul zu integrieren. Ich habe mich dagegen entschieden, da dieses Modul eh schon recht groß ist, und ich es ungern neu deployen möchte, um neue Spielregeln zu unterstützen.

Die Wahl fiel daher auf einen eigenen Service rules, der die Spielregeln über eine HTTP-Schnittstelle bereitstellt. Im ersten Wurf nur Standard-Schach allerdings, kein Zombie-Schach.

Implementierung in JavaScript

Die für Micro Moves erstellte Implementierung der Spielregeln in JavaScript (Quelltext auf GitHub) benutzt folgendes Domänenmodell (folgende Abbildung). Die Felder des Brettes werden als Zahlen von 0..63 repräsentiert. Die zentrale Klasse Position spiegelt den Zustand einer Partie wider und orientiert sich an FEN. Objekte sind unveränderlich, die Methode performMove liefert eine neue Position mit der geänderten Spielsituation zurück.

Alle oben dargestellten Elemente finden sich in der Quelltextdatei domain.js. Die folgende Tabelle gibt einen Überblick über alle Dateien der Implementierung.

Datei Wesentliche Elemente Beschreibung
domain.js Colour, Move, Position Domänenmodell für die Schachelemente
geometry.js BoardGeometry Geometrie des Schachbretts, inkl. Bewegungen gerade, schräg …
rules.js ChessRules gültige Züge, angegriffene Felder, Schachmatt …

Für die Spielregeln liegen im Unterverzeichnis tests des Moduls eben solche. Realisiert sind sie mit dem Test-Framework Mocha, siehe etwa „Simple Node.js tests with assert and mocha“. Ihr führt sie einfach mit npm test aus, der folgende Screenshot zeigt einen Teil der Ausgabe:

"npm test" in rules (Ausschnitt)

Die folgende Tabelle skizziert die Operationen der Klasse ChessRules jeweils anhand Eingabe und Ergebnis.

Funktion Eingabe Ergebnis
getAllValidMoves Position Liste der aus der Postion heraus möglichen Züge für den aktiven Spieler
isSquareAttackedByColour Position, Feld, Farbe boolean, ob das Feld in der Postion von einer Figur der betreffenden Farbe angegriffen ist
isCheckmate Position boolean, ob die gegebene Position ein Schachmatt für den aktiven Spieler ist.
isStalemate Position boolean, ob die betreffende Position ein Patt ist.

Der Spielregeln-Service

Logo expressDer eigentliche Service für die Spielregeln ist mit Node.js und dem Framework Express realisiert. Express bezeichnet sich selbst als schnelles, offenes, unkompliziertes Web-Framework für Node.js. Im ersten Wurf unterstützt der Service nur zwei Funktionen. Über die URL /allValidMoves könnt Ihr zu einer Position (Request-Parameter fen) die Menge der möglichen Züge ermitteln (entspricht der Funktion getAllValidMoves aus den Regeln oben). Weiterhin ist es mit /validateMove möglich eine Position (Request-Parameter fen) und einen Zug (Request-Parameter move) anzugeben. Zurückgeliefert wird ein JSON-Dokument, das einen Boolean-Wert enthält, ob der Zug gültig ist. Weiterhin im Falle eines gültigen Zuges die neue Position nach Ausführung (in FEN), und ob diese Position ein Schachmatt ist oder ein Patt. Hier ein Beispiel-Resultat für einen Aufruf:

{
  "fen":"rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
  "move":"e2e4",
  "valid":true,
  "resultingFen":"rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1",
  "checkmateAfterMove":false,
  "stalemateAfterMove":false
}

Der Quelltext für den Service findet sich in der Datei server-main.js. Start mit npm start. Der Service enthält eine index.html als statische Testseite. Dort sind einige Aufrufe für die Funktionen verlinkt, damit Ihr sie direkt ausprobieren könnt, ohne selbst Aufrufe mit fen und move als URL-Parameter zu basteln. Die folgende Abbildung zeigt einen Screenshot der Seite, inkl. JSON-Ausgabe bei Aufruf eines Test-Links.

Testseite rules, inkl. Aufruf mit JSON-Ausgabe.

Das rules-Modul enthält darüber hinaus ein Dockerfile (vgl. Folge 4) und ist in die Docker Compose-Konfiguration von FLEXess integriert. Der Artikel „Dockerizing a Node.js web app“ erklärt kurz und knackig wie Ihr Docker Images für Node.js-Anwendungen baut. Ich habe mich daran orientiert.

Synchrone vs. asynchrone Kommunikation

Mit der neuen Funktionalität wäre das games-Modul nun in der Lage, eingehende Züge bzgl. der Spielregeln zu überprüfen. Weiterhin könnte es die neue Spielsituation aus dem Zug ermitteln, und ein Spielende durch Matt oder Patt erkennen.

Immer wieder Thema im Zusammenhang mit vertikalen Architekturstilen ist die Kommunikation zwischen Teilen, in unserem Fall also zwischen games und rules. Oftmals etabliert bereits die Makroarchitektur Regeln oder Prinzipien. Ist Kommunikation zwischen Vertikalen überhaupt erlaubt? Falls ja: synchron, asynchron oder je nach Fall beides. Hinzu kommen Entscheidungen zu Protokollen und Technologien.

All diese Optionen haben Vor- und Nachteile, die je nach Fall mehr oder weniger ins Gewicht fallen (sonst würde da nicht so breit diskutiert). In FLEXess legen wir hier keinen allgemeinen Regeln fest, sondern zeigen in verschiedenen Folgen unterschiedlichen Ansätze. Und diskutieren diese.

In unserem Fall wirkt die Wahl einer synchronen Kommunikation natürlich: Bei games geht ein Zug zu einer Partie ein. Das games-Modul prüft mit einem Aufruf gegen rules, ob er regelkonform ist, und wartet auf das Ergebnis (synchron). Je nach Ausgang der Überprüfung wird der Zug ausgeführt und persistiert, oder abgelehnt. in jedem Fall erhält der Aufrufer ein Ergebnis (auf das er solange wartet).

Motivation für die synchrone Kommunikation ist hier, dass games ohne die Überprüfung in rules den Zug nicht annehmen oder ablehnen kann. Gleichzeitig warten auf der Client-Seite zwei Spieler auf diese Entscheidung. Und bei einem liefe in einem echten Spiel die Schachuhr für seine Bedenkzeit weiter. Wir brauchen das Ergebnis jetzt.

Sequenz-Diagramm zur synchronen Kommunikation zwischen games und rules

Größter Nachteil der synchronen Kommunikation, und der Grund warum in Microservices-Architekturen asynchrone Kommunikation (also das Versenden nach Nachrichten ohne Warten auf Reaktion) bevorzugt sind, ist die höhere Kopplung. Das nicht zur Verfügung stehen von rules führt dazu, dass games keine Züge annehmen kann. Wir kommen darauf noch zurück!

Anbindung an das games-Modul

Im games-Modul kümmert sich die Klasse RulesClient (im Packet org.flexess.games.rulesclient, Quelltexte siehe GitHub) um die Anbindung an rules. Sie fungiert als Gateway (vgl. Pattern-Buch von Martin Fowler) und bietet zunächst nur die Methode validateMove (analog zur URL im Service) an.

Die Klasse kapselt den HTTP-Aufruf gegen rules und das Überführen der JSON-Anwort in ein geeignetes Java-Objekt (Klasse ValidateMoveResult). Als HTTP-Client nutze ich Java-Bordmittel aus java.net. Auf eine Service Registry verzichten wir wie hier — das rules-Modul (und ggf. auch mehrere Exemplare davon) ist durch Docker Compose im Docker-internen Netzwerk mit dem Hostnamen „rules“ erreichbar.

Der RulesClient landet per Dependency Injection im GamesService, der ihn im Rahmen der Operation createAndPerformMove heranzieht, um den eingehen Zug auf Regelkonformität zu überprüfen. Ungültige Züge quittiert er (wie zuvor) mit einer Exception, die der REST-Service als Fehlermeldung zum Client (z.B. die Vue.js SPA play) sendet, siehe Screenshot:

Illegaler Zug, dargestellt in play-SPA

Bei Problemen im RulesClient (z.B. rules-Service nicht verfügbar) kommt es zu IOException u.ä., die innerhalb des RulesClient behandelt dem Service als RuntimeException weitergereicht werden könnten. Sonderlich robust ist das nicht.

Resilience mit Netflix Hystrix

Der synchrone Ansatz birgt die Gefahr, dass ein Ausfall des Moduls rules die Arbeit des zentralen Moduls games massiv behindert. Auch wenn rules für die Bearbeitung von Anfragen lange braucht, zieht das games in Mitleidenschaft. Bei vielen parallelen Anfragen könnte der Thread-Pool von games für HTTP-Anfragen leerlaufen. games antwortet dann nicht nur (auch) langsam, sondern gar nicht mehr (Connection refused) — selbst bei Anfragen, welche die Spielregeln gar nicht betreffen!

Release It!: Design and Deploy Production-Ready SoftwareArchitekturmuster rund um Resilience (dt. „Unverwüstlichkeit“) zielen auf robuste, fehlertolerante Systeme ab. Hier reisst ein einzelnes Teilsystem nicht gleich die ganze Anwendung runter. In Microservices-Anwendungen, in denen synchrone Kommunikation zwischen Services lt. Makro-Architektur zulässig ist, ein wichtiger Punkt. Der Self-contained Systems-Ansatz (kurz SCS, siehe Charakteristiken) hingegen propagiert asynchrone Kommunikation zwischen SCSen, wo immer möglich.

Dort, wo synchrone Kommunikation zwischen Services in der Makroarchitektur zulässig ist (Paradebeispiel: Netflix) hat sich das Circuit Breaker-Pattern etabliert. Es orientiert sich an der Metapher des Schutzschalters in Stromkreisen. Im Falle von Überlast fliegt dort die Sicherung raus und verhindert dass etwa Brände durch überhitzte Leitungen entstehen. Circuit Breaker schützt den Zugriff auf externe Systeme, z.B. einen anderen Service. Antwortet dieser nicht oder langsam, wird der Schaltkreis unterbrochen. Der Service erhält keine Anfragen, bis sich die Situation beruhigt hat (was mit einzelnen Aufrufen ab und an getestet wird).

Martin Fowler beschreibt das Muster in einem Blog-Beitrag — wie für Muster üblich ist die kanonische Quelle allerdings ein Buch: der resilience-Klassiker „Release It!“ von Michael Nygard (Cover rechts). Die zweite Ausgabe ist in 2018 frisch erschienen.

Logo HystrixAls konkrete Implementierung im Java-Umfeld stellt Netflix Hystrix als Bibliothek bereit. Es bezeichnet sich selbst als Latenz- und Fehlertoleranzlösung für verteilte Systeme. Für andere Programmiersprachen gibt es ähnliche Lösungen. Hystrix lässt sich über die Integration von Spring Cloud leicht in unser bestehendes games-Modul aufnehmen.

Um eine Operation (hier den Aufruf des rules-Service aus games) mit Hystrix abzusichern gibt es zwei Optionen. Entweder Ihr schreibt eine Command-Klasse gemäß der Hystrix-API, oder Ihr nutzt eine spezielle Annotation @HystrixCommand und „markiert“ damit eine Methode. Spring wickelt dann gemäß AOP einen Proxy und umhüllt die Ausführung. Letzteres ist die einfachere Variante, Ihr findet den Quelltext dazu im games-Modul in den Klasse RulesClient. Dekoriert ist dort die Methode validateMove.

Falls rules nun nicht zur Verfügung steht oder langsam antwortet öffnet sich der Kreis, und rules wird nicht von weiteren Anfragen von games belästigt. Mit dem Hystrix Monitor lässt sich das Verhalten von außen beobachten (bei geeigneter Konfiguration — das Dashboard muss an den Stream kommen …). Im Folgenden Screenshot seht Ihr unsere anmontierte Methode einmal mit geschlossenem Stromkreis (links), einmal mit unterbrochenem.

Hystrix Dashboard

Egal ob Ihr ein Command schreibt oder die Annotation nutzt: Ihr könnt einen Fallback implementieren bzw. angeben, der bei einem unterbrochenen Stromkreises greift. In der Regel kommt hier ein Default-Verhalten zum Einsatz, das weniger Schmerzen bereitet als ein Fehler. Beispielsweise könnten alte Werte aus einem Cache zurückgeliefert werden, wenn ein entferter Service gerade nicht zur Verfügung steht, und das fachlich akzeptabel ist. Klassisches Beispiel hier sind Wetterdaten, wo der Aufrufer ggf. auch gut mit älteren leben kann.

Im Falle unserer Schachregeln habe ich auf eine Alternative verzichtet. Der Aufrufer erhält die Nachricht, dass der Zug nicht überprüft werden konnte. Der folgende Screenshot zeigt die Situation in der Vue.js-SPA play.

Meldung: Rules service not available.

Denkbar wäre auch im Fall der Nichtverfügbarkeit der Spielregeln den gegnerischen Spieler entscheiden zu lassen, ob der vorgelegte Zug regelkonform ist oder nicht. Im echten Schachspiel ist es ja auch so (man weist den Gegner auf einen fehlerhaften Zug hin). Die Idee gefällt mir. Auf eine Implementierung habe ich trotzdem verzichtet.  

Weitere Informationen. Und wie es weiter geht.

Understanding ECMAScript6: The Definitive Guide for JavaScript Developers (Cover)JavaScript hat durch Technologien wie Node.js oder Single Page Applikations deutlich an Relevanz gewonnen, auch im Unternehmensumfeld. Es geht nicht mehr darum klassischen HTML-Anwendungen mit ein bisschen Feenstaub in Form von browser-seitigem Scripting ein wenig mehr Interaktivität einzuhauchen. Stattdessen entstehen größere Softwarelösungen in dieser Sprache mit einem ganz eigenen, reichen Öko-System. Das Javascript von 1995 hat mit dem von heute nicht mehr viel zu tun. Hingegen waren meine JavaScript-Kenntnisse lange durch diese alten Erinnerungen geprägt. Ein Buch, das mir geholfen hat wieder Anschluss an das „zeitgenössische“ JavaScript zu finden ist „Understanding ECMAScript6: The Definitive Guide for JavaScript Developers“ von Nicholas Zakas (Cover siehe rechts).

Nachdem in dieser Folge die synchrone Kommunikation Thema war, zeigen wir als Alternative dazu später noch einen asynchronen Fall mir Messaging. Eine weiterer offener Punkt ist Security. Im Moment könnte jeder Benutzer an jedem Brett ziehen (er müsste nur auf die Partie klicken).  In der Realität würden die tatsächlichem Spieler einem auf die Finger hauen. Später übernimmt das unsere Plattform.

Ach ja: Fragen und Anregungen sind natürlich jederzeit gerne Willkommen. Per Kommentar hier im Blog oder gerne auch per Mail direkt an mich …

Zur Blog-Serie Micro Moves

Architektur-Spicker Nr. 7: Continuous Delivery

By | Publikationen, Spicker | No Comments
Architektur-Spicker Nr. 7: Continuous Delivery

Architektur-Spicker

Architektur-Spicker Nr. 7: Continuous Delivery
Autoren: Sandra Parsick & Stefan Zörner
Referenzkarte bei architekturSPICKER PDF, 6 Seiten
Erschienen 7. Juni 2018

Download unter architektur-spicker.de

Die aktuelle Ausgabe unseres Architektur-Spickers bringt zeitgemäße Techniken aus Continuous Integration (CI) und Continuous Delivery (CD) kurzgefasst zusammen und zeigt wie wichtige Architekturziele wie Stabilität und Reaktionsfähigkeit damit unterstützt werden. Der Aufbau einer passenden CI/CD-Kette bildet den ‚roten Faden‘ hierzu.

In dem sechsseitigen PDF gehen wir unter anderem auf die folgenden Fragen ein:
  • Wie startet man den Aufbau einer CI/CDKette?
  • Moderne Architekturansätze wie Microservices haben hohe Anforderungen bzgl. Integration und Verteilung. Welche Wechselwirkungen bestehen zwischen Architekturstil und CI/CD?
  • Neue Features in eure Lösung zu integrieren ist aufwändig und fehleranfällig. Wie minimieren Sie dieses Risiko?

 

Architektur-Spicker 1-7
Architektur-Spicker #7

 

follow us on Twitter – @embarced

Oliver Zeigermann, SciPy 2018 Austin – Understanding Machine Learning

By | Vorschau | No Comments
„Understanding Machine Learning by Looking at Simple Visualizations“

Artificial Intelligence & Machine Learning 101

Understanding Machine Learning by Looking at Simple Visualizations
Speaker: Oliver Zeigermann
Scientific Computing with Python, Austin, Texas July 9-15, 2018
SciPy 2018 – Talks and Posters
AT&T Executive Education and Conference Center, University of Texas campus in Austin

Machine Learning can be extremely helpful, but at the same time very hard to get into. So if you are either struggling to understand it yourself or want to help others understanding it, visualizations can be extremely helpful.

We embrace this idea and by looking at plots of a single, simple and intuitive data set we will explain the core concepts and Learning strategies.

The concepts include the difference between programming and machine learning, validation, and over- and underfitting. We will also cover k-nearest neighbors and neural networks.

Scipy 2018

follow us on Twitter – @embarced

Services bündeln mit nginx als Reverse Proxy und Docker (Micro Moves, Bauteil 4)

By | Inhaltliches | No Comments

Blog-Serie Micro Moves -- LogoMit den bisherigen Beiträgen der Micro Moves Blog-Serie ist ein Konglomerat von Bauteilen für unsere Online-Schach-Plattform FLEXess entstanden. Services laufen in separaten Prozessen und lauschen auf bestimmten Netzwerkadressen per HTTP. Besonders spürt das die Single Page Application (SPA) play aus Teil 3, die auf die REST-API aus Teil 1 und den Diagramm-Service auf Teil 2 zugreift. Dazu benötigt sie aktuell deren Hostnamen und Ports.

In dieser Folge kommt keine neue Funktionalität hinzu. Stattdessen räumen wir ein wenig auf, vereinheitlichen die Art, wie wir Services betreiben und auffindbar machen, und lassen FLEXess für einen Browser-Client wie eine Anwendung aussehen. Mit ein wenig Makro-Architektur schaffen wir Voraussetzungen sowohl für weitere Services in den nächsten Folgen, als auch für querschnittliche Themen wie beispielsweise Security.

Um was geht es — ein Überblick

Die Hauptrolle in dieser Folge spielt nginx. Ein Webserver, den wir als Reverse Proxy konfigurieren, und hinter dem wir alle Services (bestehende und zukünftige) verbergen. Die rote (4) markiert dessen Standpunkt im Gesamtbild („Sie befinden sich hier.“).

Überblick Folge 4

Weiterhin nutzen wir diese Folge, um die bestehenden Services in Docker-Images zu verwandeln. Anschließend können wir sie trotz der unterschiedlichen Laufzeitumgebungen (aktuell: Java/Tomcat, Python/gunicorn, JavaScript/node.js) im Deployment einheitlich behandeln. Auch unser neues Bauteil, den Reverse Proxy, betreiben wir später im Container.

Zunächst lassen wir das Ganze einfach mit Docker Compose auf einem einzelnen Host laufen. Interessantere Verteilungsoptionen (z.B. in der Cloud) heben wir uns für später auf.

Dockerfiles für die bisherigen Services

Docker LogoBisher laufen die Module games, chess-diagrams und play in separaten Prozessen und stellen ihre Funktionalität per HTTP auf unterschiedlichen Ports zur Verfügung. Im einfachsten Fall alle lokal auf localhost, standardmäßig (d.h. falls nicht von Euch verändert) auf den Ports 8080 (games via Apache Tomcat), 8000 (chess-diagrams via gunicorn) und 7000 (play via Node.js). Die von play ausgelieferte SPA greift übers Netzwerk nicht nur auf ihre eigenen Ressourcen (JavaScript-Quelltexte) zu, sondern auch auf die anderen beiden Services (um mit den Partien zu interagieren und das Schachbrett zu visualisieren).

Für diese Folge habe ich die Module zur Vereinheitlichung jeweils mit einem Dockerfile ausgestattet, um Images dafür zu bauen. Docker führt eine Virtualisierung auf Betriebssystemebene durch, die auch als Containerisierung (engl. containerization) bezeichnet wird. Dieser Spickzettel gibt einen guten Überblick über die wichtigsten Docker-Befehle — Alternativen findet Ihr etwa bei ZeroTurnaround (Cheat Sheet Docker) und DZone (Refcard #221). Weitere Details zu Docker auf deren Homepage.

Die Dockerfiles liegen jeweils direkt im entsprechenden Modulverzeichnis, also zum Beispiel micro-moves/modules/chess-diagrams/Dockerfile für chess-diagrams (Quelltexte hier). Ein Docker-Image bauen und einen entsprechenden Container starten könnt Ihr zum Beispiel für das Modul chess-diagrams per Kommandozeile so:

$ cd micro-moves/modules/chess-diagrams
$ docker build . -t chess-diagrams
$ docker run -p 8000:8000 -t chess-diagrams &

Die folgende Tabelle beinhaltet die verwendeten Basis-Images und Run-Commands innerhalb der Dockerfiles von FLEXess.

Modul Basis-Image („FROM name:tag“) Kommando („CMD“)
games openjdk:8 java -jar games.jar
chess-diagrams python:3.6 gunicorn chess_diagrams:app
play node:8 npm start

Beim games-Modul müsst Ihr vorher die Java-Anwendung mit Gradle bauen (siehe Folge 1). Das Dockerfile kopiert nämlich lediglich das resultierende jar-File (games.jar) mit allen Abhängigkeiten („Uberjar“, frei nach Nietzsche) in das Image. Auf den Build in einem Container habe ich verzichtet.

Verknüpfung mit einem Reverse Proxy

Logo nginxViel gewonnen haben wir noch nicht. Die Prozesse laufen jetzt in Docker-Containern, aber die play-SPA beispielsweise muss immer noch die Adressen/Ports von games und chess-diagrams kennen.

Um die interne Struktur von FLEXess (inkl. weiterer Services in der Zukunft) zu verbergen setzen wir einen sogenannten Reverse Proxy ein.

Bei einem „klassischen“ (Web-)Proxy nehmen Clients beispielsweise innerhalb eines Unternehmensnetzwerkes über diesen Kontakt mit der Außenwelt (dem Internet) auf. Die Motivation in Unternehmen ist oftmals das Filtern von Inhalten (kein Facebook bei der Arbeit). Bei einem Reverse Proxy hingegen nehmen Clients von außen über diesen Kontakt mit in unserem Netz liegenden Servern auf. Der direkte Aufruf von außen wird unterbunden, alles Anfragen gehen über den Reverse Proxy.

Directory Layout reverse-proxyAuf diese Weise kann ein Client alle Module von FLEXess über eine Adresse (Hostname und Port) ansprechen. Das Routing erfolgt mit Hilfe der URL. Als Software nutzen wir hierzu nginx. Hierbei handelt es sich um einen sehr rasanten Open Source Webserver, der sich seit einigen Jahren als Alternative zum Apache HTTP-Server etabliert. Er kann als Reverse Proxy betrieben werden, die Dokumentation dazu findet Ihr hier: „NGINX Reverse Proxy“.

Die Konfigurationsdatei nginx.conf für unsere Anwendung liegt in einem eigenen Modulverzeichnis reverse-proxy gemeinsam mit dem passenden Dockerfile (Struktur siehe Abbildung). nginx übernimmt nun auch die Aufgabe. die „Homepage“ von FLEXess auszuliefern. Zuvor hatte games eine provisorische Homepage. Die statischen Inhalte dazu liegen im reverse-proxy-Modul in einem Unterverzeichnis static. Die passende Konfiguration steht ebenfalls in nginx.conf. Die folgende Tabelle zeigt die Weiterleitung an die bisherigen Bauteile der Serie (wie in nginx.conf definiert).

Anfragemuster (location) Weiterleitung (proxy_pass) Beschreibung
/games-api/ http://games:8080/api/ REST API, Folge 1
/chess-diagrams/ http://chess-diagrams:8000/ Service für Diagramme, Folge 2
/games/ http://games:8080/ Spring Web MVC Oberfläche, Folge 3
/games-websocket/ http://games:8080/games-websocket/ WebSocket-Kommunikation, Folge 3
/play/ http://play:7000/ Auslieferung der SPA, Folge 3

Die Konfiguration der Weiterleitung für WebSocket ist dabei etwas spezieller, der Beitrag „NGINX as a WebSocket Proxy“ beschreibt, wie Ihr das in nginx anstellt. Dass die Weiterleitung mit den Hostnamen (wie z.B. play in http://play:7000/) funktioniert liegt am Docker-internen Netzwerk. Dazu jetzt …

Das Ganze fliegen lassen mit Docker Compose

Docker Compose LogoUm die mittlerweile immerhin vier Container unserer FLEXess-Applikation komfortabel bauen, starten und stoppen zu können bedienen wir uns Docker Compose. Hierbei handelt es sich um ein Werkzeug, um Anwendungen einfach zu betreiben, die aus mehreren Containern bestehen.

Einen guten Einstieg und Überblick über das Werkzeug gibt dessen Dokumentation („Overview of Docker Compose“). Gegenüber „ausgewachsenen“ Orchestrierungswerkzeugen wie Kubernetes hat es Einschränkungen, in unserer Blog-Serie hier zählt aber erst einmal „einfach“.

Directory Layout micro-movesDie Konfigurationsdatei im YAML-Format, die alle Bestandteile der Applikation aufzählt, liegt als docker-compose.yml auf einer Ebene mit den Modulen. Docker Compose nennt die Anwendung standardmäßig wie das Verzeichnis, also „modules“. Dies lässt sich per Kommandozeilenparameter -p (für project name) überschreiben. Um diesen nicht jedesmal angeben zu müssen legen wir eine weitere Konfigurationsdatei .env mit dem Projektnamen „flexess“ im Verzeichnis ab, die docker-compose bei jedem Aufruf ausließt.

Ein Start der kompletten FLEXess-Anwendung (Stand bis jetzt) vom Auschecken bis zum Nutzen läuft per Kommandozeile wie folgt ab.

$ git clone https://github.com/embarced/micro-moves.git
$ cd micro-moves/modules/games/
$ ./gradlew assemble
$ cd ..
$ docker-compose build
$ docker-compose up &

Installiert sein muss dafür ein JDK (zum Bauen von games) und Docker. Unter Ubuntu Linux etwa die folgenden Pakete mit apt-get: openjdk-8-jdk-headless dockerdocker-compose. Der verwendete Benutzer muss Mitglied der Unix-Gruppe docker sein, siehe „Post-installation steps for Linux“.

Das reverse-proxy-Modul ist in der Konfiguration das einzige, das einen Port veröffentlicht (bei uns 9000 für den HTTP-Transport von nginx, konfiguriert in docker-compose.yml). Die Anwendung ist daher im Anschluss über http://hostname:9000 im Browser aufrufbar. Die übrigen Services stehen nur innerhalb des Anwendungseigenen Netzes zur Verfügung (zu Netzwerken in Docker Compose siehe „Networking in Compose“). nginx wohnt selber in dem Netz und findet sie über ihre Service-Namen (z.B. chess-diagrams).

Die play-SPA kann die anderen Services (chess-diagrams, games) nun ansprechen, ohne deren Hostnamen und Port zu kennen. Sie verwendet einfach ihre eigenen Werte, die sich leicht per JavaScript im Browser ermitteln lassen. Es müssen dann nur noch die URLs erweitert werden, damit nginx das mit dem Routing hinbekommt (siehe Tabelle oben),

Docker Compose ermöglicht auch eine horizontale Skalierung „out-of-the-box“. Beispielsweise bringt der Befehl

$ docker-compose up --scale chess-diagrams=3 &

drei Exemplare des entsprechenden Services ins Spiel, die unser Reverse Proxy auch automatisch alle nutzt (Load Balancing). Mit dem games-Service funktioniert das leider nicht so gut, da er (noch) zustandsbehaftet ist.

Docker-Container nach Skalierung, angezeigt mit ps

Später werden Services auch innerhalb der FLEXess-Applikation andere Services direkt nutzen (nicht nur die play-SPA andere). Das Auffinden von Services innerhalb des Docker-eigenen Netzwerkes erspart uns hier den Einsatz einer separaten Service Registry wie beispielsweise Netflix Eureka oder HasiCorp Consul. Chris Richardson beschreibt dieses Lösungsmuster in seinem Das Microservices Patterns Buch  genauer, siehe auch seine Musterbeschreibung online.

Neben den Kommandozeilentools gibt es auch einige graphische Werkzeuge zum Beobachten von und Interagieren mit Docker-Containern. Ganz hübsch finde ich Kitematic, das Teil der Docker Toolbox ist. Die folgende Abbildung zeigt die Oberfläche mit FLEXess in Betrieb.

Kitematic in Aktion

Aktuelle Beschränkungen. Und ein Ausblick, wie es weitergeht

Wir haben mit diesem Beitrag und Bauteil einen gehörigen Satz gemacht. Weitere Services unserer FLEXess-Applikation lassen sich nun leicht integrieren und im Reverse Proxy bekannt machen.

Das ist auch nötig, denn es gibt funktional und qualitativ noch Luft nach oben, z.B.:

  • Spieler können sich nicht auf der Plattform registrieren, anmelden und Partien spielen. Das passiert im Moment anonym.
  • Eingehende Züge bleiben praktisch ungeprüft. Es ist daher leicht möglich, regelwidrige Züge zu machen.
  • Das games-Modul überprüft ebenfalls nicht, ob eine Partie zu Ende ist. Hierzu wäre die Stellung auf dem Brett zu analysieren (Schachmatt, Patt).
  • Das aktuelle Setup lässt die Applikation mit Docker Compose lediglich auf einem einzelnen Host laufen.

Weitere Folgen dieser Blog-Serie adressieren (u.a.) die oben genannten Mängel. Das führt zu weiteren Services (etwa für die Spielerverwaltung und die Schachregeln) aber auch querschnittlichen Aspekten (allen voran Security).

Bleibt also (so hoffe ich) spannend.

Ach ja: Fragen und Anregungen sind natürlich jederzeit gerne Willkommen. Per Kommentar hier im Blog oder gerne auch per Mail direkt an mich …

Zur Blog-Serie Micro Moves

 

 

Evolutionäre Architekturen – beim Software Architecture Summit Berlin

By | Vorschau | No Comments

Am 10. September ist Stefan Toth mit einem Workshop beim Software Architecture Summit in Berlin mit dabei.

„Evolutionäre Architekturen“
Logo Software Architecture Summit
 
Evolutionäre Architekturen
Sprecher: Stefan Toth
Halbtagsworkshop auf dem Software Architecture Summit, Berlin
Montag, 10. September 2018, 14 – 17.30 Uhr
H4 Hotel Berlin Alexanderplatz, Karl-Liebknecht-Str. 32, 10178 Berlin
#SoftwareArchitectureSummit

Damit größere Systeme oder Systemlandschaften über einen längeren Zeitraum hohe Qualität ausstrahlen, sind sowohl technische als auch fachliche Änderungen unausweichlich. Die gesündesten uns bekannten Ansätze kümmern sich stetig um diese Änderungen und betrauen möglichst viele Entwickler mit der Weiterentwicklung der Architektur. Konzepte und Technologien werden lokal und unabhängig getestet, bevor sie entweder verworfen werden, lokal als Optimierung bestehen bleiben oder als breiter anwendbares Konzept in die Landschaft wachsen. Durch den harten Test des Lebens (bzw. durch den kontinuierlichen Kontakt von Entwicklern mit wichtigen Qualitätsmerkmalen) entstehen wertvolle Beiträge zu einer Architektur, die sich stetig weiterentwickelt. Evolutionärer Architektur.

In diesem Workshop stellt Stefan den Zyklus evolutionärer Architekturentwicklung vor. Von Lernfenstern mit Experimenten und erlaubten Abweichungen vom „Standard“, über weich definierte Regeln und geförderte Innovation bis hin zur eingeschränkten Anwendbarkeit von überholten Konzepten. Beispiele aus realen Entwicklungsvorhaben verdeutlichen die Konzepte.

zur Website der Veranstaltung

follow us on Twitter – @embarced

Softwerkskammer Leipzig: Monolith sucht Resilienz (Softwarearchitektur Speed-Dating)

By | Publikationen, Vorträge | No Comments
Meetup Logo
 „Monolith sucht Resilienz — Softwarearchitektur Speed-Dating“
Interaktiver Vortrag. Impuls und Moderation: Stefan Zörner
Veranstaltung bei der Softwerkskammer Leipzig
24. Mai 2018, 19:00 Uhr
TomTom Telematics, Inselstraße 22, Leipzig

Foliendownload (PDF)

Zeitgemäße Softwarearchitektur ist nicht das Werk einzelner. Architekturansätze und Ideen entstehen im Team und werden gemeinsam reflektiert. Alle Entwickler müssen sie zumindest verstehen und mittragen können. Aber was genau müsst Ihr vermitteln? Reicht aufschreiben? Hilft UML?

Stefan Zörner zeigt auf lebendige Weise, wie Ihr Eure Softwarearchitektur wirkungsvoll kommunizieren könnt. Nach kurzen theoretischen Inputs rund um Architekturdokumentation und -bewertung probiert Ihr das Gehörte gleich aus. Ihr lernt die Lösungen anderer Teilnehmer kennen und erfahrt Schritt für Schritt, welche Zutaten in einem Architekturüberblick keinesfalls fehlen sollten – egal wie kurz er ist. Ihr lernt die richtigen Fragen zu stellen und passende Antworten parat zu haben.

Bringt bitte die Bereitschaft mit, Euch über Eure Projekte und Softwarelösungen auszutauschen, und anderen Teilnehmern Feedback zu geben. Die sonst üblichen Speed-Dating-Themen wie Ex-Partner und Kinderwünsche klammern wir aus.

Stefan Zörner - Monolith sucht Resilienz

Teilnehmerstimme nach dem Meetup:
Meetup-Kommentar von Robert Manigk

follow us on Twitter – @embarced

Figuren ziehen mit Single Page Application in Vue.js (Micro Moves, Bauteil 3)

By | Inhaltliches | No Comments

Blog-Serie Micro Moves -- LogoMit den ersten beiden Bauteilen der Micro Moves Blog-Serie sind zwei Services unserer Online-Schachplattform entstanden. Der games-Service für die laufenden Partien bietet eine REST-Schnittstelle (Folge 1), der chess-diagrams-Service liefert auf HTTP-Anfrage eine PNG-Bild mit der Situation auf dem Schachbrett (Folge 2).

In dieser Folge machen wir nun erste Schritte Richtung „echtes“ Frontend und kombinieren die beiden. Ziel ist es im Web-Browser eine neue Partie zu eröffnen und Züge zu machen. Ein zweiter Spieler kann sie sehen und seinerseits ziehen. Ihr könnt dann zu zweit gegeneinander Schach spielen immerhin schon. Schönes Iterationsziel also.

Um was geht es — ein Überblick

Diese Folge liefert sowohl ein Beispiel für ein klassisches Request-Response-basiertes Frontend, als auch eine Single Page Application (kurz SPA). Das klassische Frontend bauen wir im games-Service ein (im Bauplan unten die (1)). Der SPA spendieren wir ein neues Modul play; sie nutzt die beiden Services. Die rote (3) markiert deren Standpunkt der SPA im Gesamtbild („Sie befinden sich hier.“).

Überblick FLEXess

In dieser Folge kommen Spring Web MVC mit Thymeleaf als Template-Mechanismus zum Einsatz und das JavaScript-Framework Vue.js für die SPA. Wenn ein Spieler einen Zug macht, muss sein Gegner diesen sehen. Für diese Kommunikation vom Server zu den Clients nutzen wie WebSocket.

Aber der Reihe nach …

Die UI-Frage

Im Zusammenhang mit Microservices finde ich die Frage, wie man mit dem User Interface umgeht, besonders spannend. Martin Fowler und James Lewis sprechen in ihrer „Definition“ des Architekturstils von einer Anwendung, die aus unabhängigen Prozessen besteht. D.h. für den Benutzer sollte es sich wie ein UI anfühlen, obwohl die Lösung aus technologisch unterschiedlich realisierten Teilen besteht. Wie unser FLEXess hier auch. Wie stellt man das an?

In diesem Zusammenhang gibt es reichlich zu entscheiden. Rich Client vs. Web, im Falle Mobiler Endgeräte Native vs. Hybrid etc. Konzentrieren wir uns auf den häufigen Fall einer Webapplikation! Auch hier gibt es unterschiedliche Spielarten (Request/Response vs. SPA sehen wir später noch, und auch hier gibt es Hybrid-Ansätze).

Im Zuge vertikaler Architekturstile entscheidet unabhängig davon eine Frage: Trägt eine einzelne Vertikale (z.B. ein Microservice) sein UI mit sich, oder sind die Vertikalen UI-los. Die folgende Abbildung illustriert die beiden Extreme (auch hier gibt es Lösungen dazwischen).

UI-Optionen

Konkret kann das so aussehen, dass in Modell 1 links im Bild jeder Service neben der Business-Logik (BL) ein Webfrontend in sich trägt. Die Integration findet im Browser etwa über Links statt. Im Modell 2 bieten die Services die Business-Logik z.B. über eine REST-Schnittstelle an, Eine übergeordnete UI (etwa native Apps oder eine SPA) nutzt diese.

Im ersten Modell haben Teams den kompletten Technologie-Stack inkl. Frontend in der Hand und können z.B. die UI-Technologie zu einem gewissen Grad frei wählen. Dafür ist es bei diesem Ansatz fordernd, dem Anwender eine Anwendung aus einem Guss zu präsentieren. Modell 2 ermöglicht tendenziell eine bessere User Experience, aber unter Verzicht einer unabhängigen Entwicklung der einzelnen UI-Teile und echt Cross-funktionaler Teams (für das übergeordnete UI ist oft ein separates Team zuständig).

Der Widerspruch User Experience vs. unabhängige Entwicklung lässt sich abschwächen, etwas durch eine Integration im Build.

Web-Applikation mit Spring Web MVC und Thymeleaf

Ein technologisch „klassischer“ Ansatz gemäß Modell 1 (Vertikale mit UI Huckepack) erzeugt die Oberfläche serverseitig mit einem geeigneten Framework, und liefert an den Browser HTML-Seiten. Vielleicht angehübscht mit CSS und ein bisschen JavaScript für dynamische Aspekte, damit es nicht ganz so 90er rüberkommt. Eine Interaktion mit dem Nutzer läuft über einen Request/Response-Zyklus ab. Der Browser sendet ausgelöst durch einen Link oder das Absenden eines Formulars eine Anfrage, der Server antwortet mit dem neuen Seiteninhalt.

Zur Illustration dieses Ansatzes erweitern wir hierzu unser games-Modul für die Schachpartien entsprechend (Quelltext hier). Mit Spring Web MVC (Model View Controller) ist das flink gemacht. Insbesondere da wir in Folge 1 die Geschäftslogik getrennt von der REST-API gehalten haben. Die Klassen für die Weboberfläche findet Ihr im Paket org.flexess.games.web, das analog zur REST-API auf die Services zugreift:

Pakete im games-Modul (Diagramm: Teamscale)

Annotationen an den Controller-Klassen legen das Mapping von URLs zu Verhalten fest. Das Generieren der Seiten übernimmt Thymeleaf (Verwendung im Build-File Gradle angeben). Thymeleaf versteht sich als  moderne serverseitige Java-Template-Engine.

Thymeleaf LogoFür mehr Details: Der Beitrag „Getting Started: Serving Web Content with Spring MVC“ nutzt ebenfalls Thymeleaf und zeigt die Integration in Spring Boot. Etwas mehr zum Funktionsumfang der Template-Engine selbst zeigt Eugen Paraschiv in seinem Artikel „Introduction to Using Thymeleaf in Spring“.

Die Templates für unser games-Modul liegen im Verzeichnis src/main/resources/templates. Sie sind mit Bootstrap angehübscht. Die Startseite erreicht Ihr aktuell mit http://localhost:8080, wenn Ihr den Service wie in Folge 1 baut und startet. Weitere Seiten sind von dort verlinkt (Screenshots siehe Abbildung unten).

Später steuert games einen Beitrag zur Gesamtoberfläche von FLEXess gemäß UI-Modell 1 bei. Das diskutieren wir, wenn ein zweites Bauteil mit eigenem UI hinzu kommt, und die beiden sich aus einem Guss präsentieren wollen.

Screenshots Web Application

Grundsätzlich ließe sich mit dem Ansatz die ganze Oberfläche bauen. Die größte Herausforderung liegt in der Interaktion während einer Partie. Jeder Schachzug müsste mit einem Request zum Server gelangen, und der Gegner (anderer Client, anderer Browser) ihn auch sehen, um seinerseits mit einem Zug zu antworten.

Die Dynamikanforderungen an das UI nehmen wir zum Anlass, um als Alternative zur Request/Response-basierten Oberfläche eine Single Page Application (kurz SPA) zu zeigen. Ihr könnt dieses Teil als Blaupause für ein UI nach Modell 2 sehen.

Single Page Application mit Vue.js

Bei einer SPA liefert der Server eine einzelne (HTML-)Seite an den Client. Jede weitere Interaktion läuft mit Hilfe von JavaScript im Browser ab. Mit dem Server kommuniziert eine SPA typischerweise via REST. Passenderweise hält das games-Modul eine solche Schnittstelle bereit (vergleiche Folge 1, die Rolle von curl und Postman dort übernimmt jetzt die SPA).Vue.js Logo

Vue.js ist ein JavaScript-Framework zur Entwicklung eben solcher SPAs. Vergleichbare Lösungen (und Mitbewerber) wären React oder Angular.js. Die Vue.js-Homepage bietet einen guten Einstieg in die Entwicklung mit dem Framework.

Für unseren Fall hier haben wir lediglich das Spielen einer Partie als SPA umgesetzt. Aus der klassischen Web-Oberfläche gelangt man über einen Link zu ihr (siehe Screenshot oben, grüner Button „Play Game!“). Die zu spielende Partie wird via ID als Request-Parameter übergeben und von der play-SPA ausgelesen.

Die Quelltexte zur SPA findet Ihr hier. Sie sind überschaubar: Lediglich eine HTML-Seite (SPA halt ;-)) und dort eingebettet drei JavaScript-Dateien. Die folgende Tabelle gibt einen Überblick:

Datei Beschreibung
index.html Trägt die initiale HTML-Seite mit Layout, Navigation etc. und verweist auf die JavaScript-Dateien
src/main.js Die eigentliche Vue.js-Anwendung mit Daten und Verhalten
src/games.js Funktionen für die REST-Calls gegen die API des games-Moduld (z.B. Ziehen) sowie für die WebSocket-Kommunikation mit games.
src/chess-diagrams.js Funktionen für die Einbindung der Schach-Diagramme des chess-diagrams-Moduls.
package.json Informationen für npm. (Siehe unten)

Neben diese Dateien sind noch einige Fremdbibliotheken erforderlich. Vor allem Vue.js natürlich, aber auch Bootstrap für das Layout und Bibliotheken für WebSocket (siehe unten). Ich habe es mir hier einfach gemacht, und die Abhängigkeiten als Links auf ein CDN (Content Delivery Network) eingepflegt. Somit lädt der Browser sie einfach aus dem Internet. Alternativ wäre auch ein Build-Prozess mit geeigneten Tools denkbar. Das hebe ich mir für einen späteren Beitrag auf, wenn wir mehr mit JavaScript machen.

Die Anwendung starten und verwenden

Theoretisch könnte man die Anwendung lokal im Web-Browser öffnen. Sehr realistisch wäre das aber nicht — die Spieler müssen ja irgendwie an den Client kommen. Besser wäre da schon eine Verteilung über das games-Modul, das ja bereits Seiten per HTTP ausliefert (siehe oben).

Ich habe mich für einen separaten Serverprozess für play entschieden, um die Sachen voneinander entkoppelt zu halten (Angelehnt an Modell 2). Eine recht schlanke Lösung ist ein HTTP-Server, der sich via Node.js betreiben lässt (von Node.js werden wir später in dieser Serie noch mehr hören).

„Installation“ und Betrieb können bei installiertem npm (Node Package Manager, liegt Node.js bei) so erfolgen:

$ git clone https://github.com/embarced/micro-moves.git
Cloning into 'micro-moves'...
$ cd micro-moves/modules/play/
$ npm install
$ npm start

> play@0.1.0 start /Users/stefanz/Documents/GitHub/micro-moves/modules/play
> httpserver -p 7000

lo0: 127.0.0.1
utun0: null
vboxnet1: 192.168.99.1
en5: 192.168.2.124
server started: http://0.0.0.0:7000
$

 

Der verwendete Port 7000 ist in package.json hinterlegt. Die Spring Web MVC-Applikation oben ist schon vorbereitet. Deren „Play Game!“-Link verweist genau auf diese Adresse mit der ID der Partie als Parameter. Die SPA stellt sich dann so im Browser dar:

SPA play in Aktion

Die SPA setzt nach laden der index.html einen REST-Call gegen das games-Subsystem ab. Sie holt sich Partie-Informationen zur ID, die sie zum Beispiel in der Titelzeile (Namen der Spieler) anzeigt. Hingucker ist sicherlich die Darstellung des Brettes. Unter der Haube ein Bild aus dem chess-diagrams-Service (HTML-Tag img mit geeigneten src-Attribut. Die URL wird mit dem FEN-Wert aus den Spielinformationen als Parameter versorgt). Damit das Ganze funktioniert muss neben play (lokal, Port 7000) und dem games-Services (lokal, Port 8080) auch der chess-diagrams-Service (lokal, Port 5000, vgl. Folge 2) laufen.

Die Eingabe des Zuges erfolgt entweder als Text im Input-Feld (z.B. „e2e4“ für e2 nach e4), oder durch klicken in die Brettdarstellung. Eine Funktion aus chess-diagrams.js ermittelt die Koordinaten (z.B. „h4“) und fügt sie ins Input-Feld ein. Keep it simple.

Aktuell überprüft die Anwendung noch nicht, ob der Browser-Benutzer überhaupt an der Partie beteiligt ist. Den Themen Authentifizierung und Autorisierung widmen wir einen späteren Beitrag. Folgerichtig kann ein Benutzer jetzt einfach auf dem Brett gegen sich selbst spielen.

Der Screenshot oben ist in einer neuen Partie nach einem weißen und einem schwarzen Zug entstanden, gefolgt von einem weiteren Versuch den schwarzen Springer auf f6 zu bewegen. Allzu viel prüft der games-Service aktuell nicht (später übernimmt das der Spielregeln-Service). Zu Testzwecken checkt er zumindest, ob die Farbe der Figur passt. Daher die Warnmeldung im Screenshot.

Kommunikation mit Web Socket

Wie läuft die Kommunikation nun genau ab? Nach Eingabe des Zuges und Abschicken des Formulars  (Button „Send Move“) setzt die SPA einen REST-Call (POST Request) gegen den games-Service ab (Funktion sendMove() in games.js). Der landet dann in der Methode createMove() des GameRestController von games. Im Falle eines Fehlers (wie oben, Figur falscher Farbe) liefert diese einen passenden HTTP-Fehlercode zurück.

Playing ChessWenn der Zug akzeptabel ist speichert games ihn, führt ihn aus (ermittelt also die neue Spielsituation) und aktualisiert die Game-Entität (speziell: wie sieht das Brett aus, wer ist am Zug …?). Das erfolgt in der Methode createAndPerformMove() aus der Klasse GameService in games.

Die SPA könnte sich jetzt den neuen Zustand der Partie via GET-Request gegen games holen — sie „weiß“ ja, dass sich die Spielsituation durch Ausführung des Zuges geändert hat. Das ist allerdings nur die halbe Miete. Denn es gibt ja in der Regel noch einen zweiten Spieler mit einem anderen Browser, der ebenfalls über die Änderung informiert werden muss, um dann seinerseits einen Zug zu machen. Die Spieler ziehen ja abwechselnd.

Die SPA verbindet sich daher stattdessen per WebSocket mit dem games-Server, und lauscht auf Ereignisse. Der andere Spieler tut es ihm mit seinem Browser gleich. Im Falle einer neuen Spielsituation sendet games eine Nachricht an ein Topic, welche die neue Spielsituation enthält. Wenn beide Spieler mit ihren SPA dieses Topic abonnieren kriegen sie es mit. Das Topic lautet bei uns /topic/game_XY, wobei XY die ID der Partie ist.

Die Rolle des WebSocket-Servers übernimmt die Spring Boot-Applikation games. Die Konfiguration steckt in der Klasse org.flexess.games.web.WebSocketConfig. Auf Client- (also SPA-)Seite sind die betreffenden JavaScript-Funktionen in games.js implementiert (webSocketConnect() etc.). Die folgende Abbildung illustriert das Zusammenspiel zwischen zwei SPAs (Weißer und Schwarzer Spieler) und dem games-Service als Sequenzdiagramm. Weiß und Schwarz spielen jeweils einen Zug.

Sequenzdiagramm (plantUML)

Bei der Umsetzung habe ich mich am Beitrag „Using WebSocket to build an interactive web application“ orientiert, der ein „Hello World“ mit Spring Boot und WebSocket beschreibt.

Weitere Informationen — und wie es weiter geht …

Das Zusammenspiel der drei Einzelteile play, games und chess-diagrams ist im Moment noch „etwas“ fragil. Als Showcase mag es taugen, aber alle Teile laufen auf localhost und die Adressen und Ports sind in der Vue.js-Applikation als Konstanten fest verdrahtet (zu Beginn von games.js und chess-diagrams.js).

The Majesty of Vue.js 2Idealerweise sollte die SPA nicht alle unterschiedlichen Services persönlich kennen. Und bei horizontaler Skalierung sollten auch mehrere Exemplare der Services laufen können — unsichtbar für den Client. Derartige Themen adressieren wir mit dem nächsten Bauteil. Dann ziehen wir einen Reverse-Proxy ein.

Wenn Ihr mehr zu Vue.js erfahren wollt möchte Ich Euch noch das schöne Buch „The Majesty of Vue.js 2“ ans Herz legen (erschienen bei Leanpub, Cover rechts). Es führt mit vielen kleinen Beispielen lebendig in alle Aspekte ein, die wir hier verwendet haben (z.B. Computed Values zur Aktualisierung der Schachbrett-Graphik nach einem Zug).

Ach ja: Fragen und Anregungen sind natürlich jederzeit gerne Willkommen. Per Kommentar hier im Blog oder gerne auch per Mail direkt an mich …

Zur Blog-Serie Micro Moves