Um das Frontend mehrerer Self-Contained Systems auf einer Seite zu integrieren, gibt es verschiedene Strategien. Im April war ich bei einem ganz interessanten Meetup der Java User Group Hamburg zu dem Thema „VueJS und Microservices für myhermes“. In diesem haben die Entwickler von Hermes vorgestellt, was für Probleme sie hatten und wie sie die mit ihrer neuen Self-Contained Systems Architektur gelöst haben die demnächst produktiv gehen und ihr monolithisches Altsystem ablösen soll. Interessant fand ich dabei, wie sie die Frontends verschiedener Self-Contained Systems auf einer Seite integrieren.

Bei ihnen ist immer ein Self-Contained Systems für das Ausliefern einer bestimmten Seite (wie bspw. die Paketshop Suche) verantwortlich. Es kann aber auch andere Self-Contained Systems zusätzlich auf der Seite einbinden, wie bspw. einen Warenkorb oder ein Paketverfolgungs-Suche.

Gestartet sind sie dabei mit einer klassischen serverseitigen Integration mittels Server Site Includes mit nginx als reverse Proxy. Das hat aber den Nachteil, dass ein Entwickler viele Systeme hochfahren muss, um die vollständige Seite zu sehen: den nginx für das Auswerten der Server Site Includes, den Haupt-Service der für die Seite wie bspw. die Paketshop Suche verantwortlich ist und das komplette Html Gerüst der Seite ausliefert sowie die Services, die auf der Seite des Haupt-Services eingebunden werden, wie bspw. einen Warenkorb. Auch kann das HTML der Self-Contained Systems durch die serverseitige Integration nicht in die Preview ihres Content Management Systems eingebunden werden. Stattdessen binden sie ein statisches Bild in die Html Preview ihres Content Management Systems ein.

Interessant fand ich ihren Ansatz für eine clientseitige Integration. Dafür setzen sie Vue.js als View Framework ein. Ein Self-Contained System stellt also eine Vue.js Komponente bereit, die von anderen Services eingebunden werden kann. Die Assets der Vue.js Komponenten können dabei von einem zentralen Asset Server bezogen werden. Im produktiven Betrieb redet die Komponente in der Regel mit einem Rest Backend Service, um bspw. den aktuellen Warenkorb abzurufen oder ein Paket zu verfolgen. Der Trick, der diese clientseitige Integration elegant macht ist, dass sie die Vue.js Komponenten so schreiben, dass sie per Default in einem Demo Modus sind und vorbereitete statische Daten (canned data) anzeigen und in diesem Demo Modus daher nicht mit einem Backend Service kommunizieren. Entwickelt man also an dem Self-Contained System für die Paketshop Suche, muss man nur dieses starten um die komplette Seite zu sehen. Die anderen Self-Contained Systems, die auf der Seite eingebunden werden, wie bspw. der Warenkorb, werden auf Grund des Demo Modus korrekt gerendert ohne dass der nginx oder ihre Backend Rest Services hochgefahren sein müssen. Auch die Preview im Content Management System funktioniert ohne Probleme, da in diesem die Vue.js Komponenten im Demo Modus eingebunden sind. Der Nachteil ist allerdings, dass sie dadurch an Vue.js gebunden sind, da Vue.js in vielen Self-Contained Systems eingesetzt wird. Meiner Erfahrung nach ist in so einem Umfeld spannend was passiert, wenn die Version von Vue.js aktualisiert werden soll und die neue Version nicht mit der alten kompatibel ist.

Rein grundsätzlich meinten sie, dass sie sowohl die clientseitige und serverseitige Integration im Einsatz haben und auch beide Lösungen für neue Self-Contained Systems zugelassen sind. Ich fand die Idee mit dem Demo Modus auf jeden Fall sehr interessant und geschickt.