Dynamic UI Fragment Composition

Dynamic UI Fragment Composition

Herausforderungen

Die angestrebte Microservice-Architektur dient vorrangig der Verteilung von Verantwortung innerhalb des Projekts. Im Sinne der Prinzipien Loosely coupling und High Cohesion ist also auch die Einführung eines zentralen User Interface (UI) Services nicht zielführend. Dies impliziert, dass die diversen kleinen Projektteams für ihre Microservices einschließlich der UI verantwortlich sind.

Neben der angesprochenen Verteilung der Verantwortung sind aber auch grundlegende Prinzipien der Human-Computer-Interaction (HCI) und ein Corporate Design (CD) zu realisieren. Wie ein derartiges, einheitliches Look & Feel erreicht werden kann, beschreibt das vorliegende Konzept. Neben der Umsetzung nicht-funktionaler Anforderungen, welche im Folgenden dokumentiert werden, gilt es ebenso informelle Beschreibungen des Verhaltens der Microservices zu beachten. Letzteres muss wiederum durch neue Mechanismen im sozialen System sichergestellt und implementiert werden.

Lösung

Der Pool² wird als Rich-Internet-Application (RIA) entworfen. Neben der Verwendung im Browser soll auch eine mobile Nutzung möglich sein. Im ersten Schritt wird dabei angenommen, dass Web-Apps als mobile Clients implementiert werden. Die Menge an möglichen Client-Technologien lässt sich somit auf HTML, CSS und JavaScript einschränken.

Die hier skizzierte Lösung basiert daher auf drei Säulen:

• Geteiltes CSS
• Geteilte HTML-Templates
• Widgets

Während die erste Säule (Geteiltes CSS) die gemeinsame Nutzung von Design-Elementen und Layout-Beschreibungen erlaubt und somit gemeinsames CD ermöglicht, dient die zweite Säule (Geteilte HTML-Templates) der Implementierung global genutzter User Interfaces (UIs). So wird in geteilten HTML-Templates eine globale Navigation umgesetzt, zentraler statischer Inhalt verfügbar gemacht (wie bspw. ein Impressum) oder ein Header inkl. Logo für alle Inhalte der RIA bereitgestellt. Diese HTML-Templates beinhalten dabei stets auch Platzhalter für Inhalte, welche durch den jeweiligen Microservice dargestellt werden sollen.

Nachdem die beiden vorherigen Säulen die Nutzung eines globalen User Interfaces erlauben, dienen Widgets der gemeinsamen Nutzung von UI-Elementen durch verschiedene Services. Beispielsweise werden mehrere Services die Auswahl von Nutzern mittels des UI ermöglichen. Neben Herausforderungen hinsichtlich der Wartbarkeit, könnte auch ein CD und die Konsistenz der Nutzerführung nach den gängigen Prinzipien der HCI nicht sichergestellt werden, wenn jeder Service eigene UI-Elemente für diesen Zweck bereitstellen würde. Da Nutzer vom Drops Microservice verwaltet werden, soll dieser auch UI-Elemente zur Verwendung der Nutzer bereitstellen. Nach diesem Prinzip entwickelt, folgt die Architektur auch bezüglich der UI-Elemente den Prinzipien Loosely coupling und High Cohesion, welche für Microservice-Architekturen grundlegend sind.

Geteiltes CSS

Globales CSS ist im Sinne einer Trennung der Domain nach Bounded Contexts allen Kontexten übergeordnet. Daher ist die Verantwortung für das CSS nicht einem der Microservices zuzuordnen, die funktionale Anforderungen abbilden, sondern separat zu betrachten. CSS wird somit durch den speziellen Microservice Dispenser implementiert, welcher diese nicht-funktionale Anforderung abbildet.

Das CSS selbst folgt gängigen Richtlinien zur Erstellung modularen CSS (https://css-tricks.com/css-style-guides/ und http://cssguidelin.es/), fungiert als Pattern Library und wird mithilfe von LESS (http://lesscss.org/) entwickelt, um Wartbarkeit und Weiterentwicklung zukunftssicher zu gestalten.

<link rel="stylesheet" href="https://pool.vivaconagua.org/dispenser/vca/0.8.4/css/base.min.css">