In the Code: Der Weg zum neuen GUI

2. November 2015 um 10:30
  • kolumne
  • In the Code
image

Samuel Iseli, Entwicklungsleiter beim Business-Software-Hersteller Vertec zeigt die Überlegungen auf, die zu einem unorthodoxen Ansatz für den Bau eines neuen GUI führten.

Bei Vertec haben wir vor einiger Zeit beschlossen, die Benutzeroberfläche, neudeutsch GUI ("graphical user interface"), unserer Standard-Applikation neu zu gestalten. Die bisherige Software ist weitgehend in Delphi implementiert, für neue Entwicklungen setzen wir auf die .NET Plattform. Die Architektur unserer Applikation weist glücklicherweise eine recht gute Trennung von Oberfläche und Business-Logik auf, so dass wir uns auf die Neugestaltung des GUI konzentrieren können, ohne Risiken in der Kern-Funktionalität unserer Software einzugehen.
Trotzdem ist eine Generalüberholung eines wesentlichen Teils eines Produktes ein aufwändiges Vorhaben mit welchem sich ein vernünftiger Hersteller von Standard-Software möglichst selten beschäftigen möchte. Was wir tun, soll also möglichst zukunftsfähig sein.
Wir haben uns daher etwas genauer überlegt, was wir vom neuen GUI alles erwarten. Dabei sind neben den offensichtlichen Dingen, wie "gut bedienbar" und "nett anzusehen", unter anderem folgende Anforderungen zusammengekommen:
- Unterstützung von Mobilgeräten und Web-Browser. Die Applikation kann auf verschiedenen Arten von Geräten verwendet werden, dabei steht überall der volle Funktionsumfang zur Verfügung und das Zielgerät wird optimal unterstützt.
- Cloud Fähigkeit: Das Produkt kann unabhängig vom Firmen-Netzwerk via Internet bedient werden, ohne wesentliche Einschränkung des Funktionsumfangs.
- Konfigurierbar: Wir erweitern die Möglichkeiten für Oberflächen-Anpassungen durch den Kunden. Die angepassten Teile sind auf allen Client-Plattformen verfügbar.
- Reaktiv: Alle Änderungen an Daten (auch von anderen, gleichzeitigen Benutzern) sind unmittelbar auf dem GUI sichtbar. Das ist bisher in der Vertec Software bereits selbstverständlich und bietet viele Vorteile für die Bedienung.
Wiederhol Dich nicht
Die Sache mit den verschiedenen unterstützten Gerätetypen stellte sich als echte Knacknuss heraus. Multipliziert man die deutlich über 200 verschiedenen Standard-Dialoge in Vertec mit der Anzahl ins Auge gefasster Ziel-Plattformen, beschleicht einen beim Gedanken an den Implementierungsaufwand rasch ein etwas unangenehmes Gefühl. Von der Unterstützung der kundenspezifischen Anpassungen gar nicht zu reden.
Ein wichtiges Prinzip beim Entwickeln von Software lautet "don't repeat yourself", es gibt sogar ein nettes Akronym dazu: DRY. Denselben Code oder dieselben Strukturen an mehreren Orten im Source-Code einer Software zu duplizieren, bringt fast immer Probleme mit sich. Abgesehen vom ursprünglichen Implementierungsaufwand müssen Änderungen und Verbesserungen immer an mehreren Orten vorgenommen werden und sind damit aufwändig und fehlerträchtig.
Übertragen auf die Welt der Benutzeroberflächen ergibt sich aus dem DRY Prinzip der Wunsch, die zahlreichen Dialoge der Applikation nur einmal definieren zu müssen. Aus einem gemeinsamen Source-Code sollen sich Applikationen für verschiedene Plattformen wie Windows, Mac, Android, iOS generieren lassen.
Ab in die Cloud
Nun kommt aber noch der Wunsch nach "Cloud-Fähigkeit" dazu, will heissen, die Software soll von überall auf der Welt her bedient werden können. Naheliegende Lösung dafür ist eine Web-Applikation. Web-Applikationen sind sogar inhärent "cross-platform", schliesslich ist ein Web-Browser auf fast jedem Gerät zu finden. Auch die Standardisierung in diesem Bereich ist mittlerweile HTML5-sei-Dank auf einem recht brauchbaren Niveau angelangt.
Also alles in Butter mit einer Web-Applikation? Leider nicht ganz.
Web-Applikationen für Mobilgeräte zu entwickeln ist zwar möglich, führt aber häufig zu nicht ganz optimalen Ergebnissen. Eine "native" App ist vom Aussehen und der Bedienbarkeit ("look and feel") einer webbasierten Lösung meist überlegen.
Zudem läuft die Web-Applikation in einem Browser-Sandkasten und bietet nur beschränkte Möglichkeiten zur Integration mit anderen Anwendungen. Das gilt sowohl für Mobilgeräte als auch für Desktop-Anwendungen, wo wir bei Vertec zum Beispiel auf möglichst nahtlose Zusammenarbeit mit Applikationen der Microsoft Office Familie zählen.
Für nahtlose Integration auf dem Desktop und optimale Bedienbarkeit auf Mobilgeräten sind wir also weiterhin auf massgeschneiderte Client-Applikationen für bestimmte Gerätetypen angewiesen. Der Web-Browser ist dabei nur eine von mehreren Plattformen, die wir unterstützen möchten.
Die Lösung
Wir haben uns schliesslich für einen etwas unorthodoxen Ansatz entschieden, welcher anfänglich einen gewissen Mehraufwand zur Folge hat, von dem wir uns aber deutliche Vorteile in Sachen Zukunftsfähigkeit unseres Systems erhoffen. Aus Architektur-Sicht verschieben wir die Grenze zwischen Client und Server ein wenig. Den Aufbau der Benutzeroberfläche ("UI" für "user interface") macht der Server, die Client-Applikation stellt das Ganze nur dar. Der Client wird dabei etwas dünner und dümmer, der Server trägt zusätzliche Verantwortung für die Oberfläche und wird dafür dicker.
Für jede Plattform entwickeln wir eine Client-Applikation, die einzig aus einer Sammlung von UI-Elementen besteht. Diese Applikation ist "dumm" und kann von sich aus nichts. Sie wird vom Server gesteuert und kann jede auf dem Server definierte Oberfläche darstellen. Das hat den Vorteil, dass die Client-Applikation plattform-spezifisch entwickelt ist und die verwendeten UI-Elemente auf das Zielgerät optimiert sind. Ausserdem stehen uns für die Entwicklung auf jeder Plattform die geeignetsten Entwicklungswerkzeuge zur Verfügung. Für den Web-Browser heisst das: Eine JavaScript-Applikation, welche zur Darstellung des GUI die aktuellsten HTML5 Browser-Features nutzen kann. Mit einer Website hat das nicht mehr viel zu tun, HTML verwenden wir nur beim Start, um den JavaScript Code zu laden. Das Resultat ist eine Browser-Applikation, welche einer Desktop Anwendung in Sachen Bedienbarkeit in nichts nachsteht.
Der Server ist in diesem Zusammenspiel sowohl für Business- als auch für UI-Logik und für die Verbindung zur Datenbank zuständig. Ausserdem verwaltet der Server die eigentlichen Definitionen der verschiedenen UI-Dialoge. Diese sind serverseitig für alle Plattformen gemeinsam implementiert. Zwischen Client und Server werden nur die Eigenschaften der Oberflächen-Elemente und deren Veränderungen übertragen.
Vorteile und Nachteile
Vom Grundprinzip her hat das eine gewisse Ähnlichkeit mit Remote Desktop Lösungen (Windows Terminal-Services oder X-Windows auf Linux). Der grosse Unterschied ist, dass letztere Verfahren eine Oberfläche als Bild (pixelbasiert) übertragen, unsere Lösung aber auf Basis einzelner UI-Elemente arbeitet. Der wesentliche Vorteil unseres Ansatzes ist, dass die UI-Elemente plattform-spezifisch implementiert sind und damit das "look and feel" der jeweiligen Geräte optimal unterstützen. Auch in Sachen benötigter Netzwerk-Bandbreite erwarten wir gewisse Vorteile gegenüber Remote Desktop.
Der Nachteil unseres Lösungsansatzes ist, dass serverseitig für jeden verbundenen Client relativ viel Ressourcen belegt werden. Bei einer normalen Web-Applikation, welche öffentlich verfügbar ist, könnte sich das ungünstig auswirken. Da sich die Anzahl der Benutzer unserer Business-Lösung aber genau voraussagen lässt, können wir diesem Aspekt durch entsprechende Dimensionierung des Servers Rechnung tragen.
In einem ersten Schritt wird es Vertec Client-Applikationen für die Web- und die Windows-Plattform geben, weitere Plattformen insbesondere aus dem Mobilbereich (Android, iOS ) werden in weiteren Schritten dazukommen. Der Aufwand für die Entwicklung einer Client-Applikation für neue Geräte wird deutlich geringer sein als für eine volle Applikation mit Umsetzung aller Detail-Dialoge. Damit haben wir Entwicklungskapazitäten frei für die Entwicklung von "richtigen" Programmfeatures und müssen uns um Oberflächen-Aufbau hoffentlich erst wieder in vielen Jahren kümmern.
Wir sind nicht die Einzigen
Wir möchten hier nicht verschweigen, dass wir weder die Ersten noch die Einzigen sind, die auf eine solche Idee gekommen sind. Es gibt andere Projekte, welche ähnliche Ansätze verfolgen und auf die wir im Laufe unserer Entwicklung aufmerksam geworden sind, so von Dolphin platform. Leider haben sich aufgrund inkompatibler Entwicklungs-Plattformen und fehlendem Fokus auf Multiplattform-Fähigkeit keine Zusammenarbeiten ergeben.
Über den Autor:
Samuel Iseli ist Mitinhaber und Entwicklungsleiter der Firma Vertec (Zürich und Hamburg). Er ist bei Vertec für alle technischen Aspekte der Produktentwicklung und für die Leitung des Entwicklungs-Teams verantwortlich. Samuel Iseli hat an der Universität Zürich in Physik diplomiert und verfügt über mehr als 30 Jahre Erfahrung in verschiedensten Bereichen der Software-Entwicklung.
Vertec ist Herstellerin betriebswirtschaftlicher Standard-Software für Dienstleistungsunternehmen. Mit ihren integrierten ERP- und CRM-Lösungen bedient Vertec europaweit etwa 700 Kunden mit über 15'000 Usern.

Loading

Mehr erfahren

Mehr zum Thema

image

#Security: Menschen schaffen Sicherheit

Eine Sicherheitskultur zu etablieren ist für viele CISOs das erklärte Ziel, doch wie soll das konkret erreicht werden? Cornelia Puhze von der Stiftung Switch zeichnet in ihrer Kolumne mögliche Wege auf.

publiziert am 21.8.2024
image

Vogt am Freitag: (k)ein Linkedin-Thriller

Plötzlich ist in meiner Timeline in jedem zweiten Linkedin-Posting jemand "thrilled". Warum nur? Bitte mehr chill statt thrill.

publiziert am 16.8.2024
image

Vor 21 Jahren: Der Blaster-Wurm treibt (kurz) sein Unwesen

"Das System fährt herunter." Der Blaster-Wurm liess den RPC-Dienst abstürzen, woraufhin sich infizierte Windows-Computer neu starteten.

publiziert am 16.8.2024
image

Parldigi direkt: Digitale Souveränität bei der sicheren Kommunikation schützen

Die Polycom-Nachfolge muss modular sein und auf offenen Standards basieren. Ein Vendor Lock-in sei zu vermeiden, schreibt Mitte-Nationalrätin Isabelle Chappuis in ihrer Parldigi-Kolumne.

publiziert am 14.8.2024