Über unsMediaKontaktImpressum
Olena Bochkor & Dr. Veikko Krypczyk 20. August 2019

Rapid Application Development fürs Web

Um Web-Applikationen zu erstellen, gibt es unzählige Wege und noch viel mehr Bibliotheken und Frameworks. Letztendlich läuft es auf Seiten des Clients immer auf die Technologien HTML, CSS und JavaScript hinaus. Oft ist jedoch der Entwicklungsprozess leider wenig effizient und das Tooling verbesserungswürdig. Gefragt ist Rapid Application Development für das Web, damit man sich auf den Business-Prozess konzentrieren kann.

Die Rolle der Informationstechnik und die einer wichtigen Teildisziplin – der Softwareentwicklung – ändert sich in einem erheblichen Ausmaß. Historisch hat sich IT lediglich als Dienstleister im Sinne eines "Werkzeuges" verstanden. Der Fokus war primär technikgetrieben. Über eine Vielzahl von Zwischenstufen verschiebt sich dieser Fokus und die Bedeutung der IT hin zu einem Business-Innovator (s. Abb. 1). IT liefert in diesem Stadium wichtige Beiträge zur Weiterentwicklung des Geschäftsmodells oder verändert dieses sogar dauerhaft. Unternehmen, welche auf diesem Weg erfolgreich sind, haben gegenüber der Konkurrenz die Chance auf echte Wettbewerbsvorteile.

Auf der Basis dieses Ansatzes kann man auch wie folgt formulieren [2]: "Eine moderne IT-Abteilung…

  • versteht die Geschäftsprozesse und entwickelt für die Fachbereiche proaktiv innovative und flexible Lösungen,
  • treibt die digitale Transformation im Sinne der Unternehmensstrategie voran,
  • managt alle vom Unternehmen benötigten IT-Services zuverlässig und kundenorientiert und
  • ist agil und entwickelt neue Vorgehens- und Partnermodelle".

Natürlich sind von diesem Ziel als Innovationstreiber viele IT-Dienstleister noch weit entfernt. Bei erfolgreicher Transformation bieten sich vielfältige Chancen. Auch die Art der Software, welche heute gefragt ist, ändert sich. Waren lange Zeit vermehrt Desktop-Applikationen im Einsatz, so geht der Trend seit geraumer Zeit hin zu flexiblen Web-Applikationen.

Ausschlaggebend für den Wandel sind eine veränderte Nutzerperspektive und neue technische Möglichkeiten. Diese Faktoren betrachten wir im kommenden Textabschnitt.

Veränderte Perspektiven und technische Treiber

Eine hohe Gerätevielfalt führt zu einem veränderten Nutzerverhalten. Dazu einige Beispiele: Statt einem Desktop-Rechner werden zahlreiche der alltäglichen Aufgaben heute auf mobilen Geräten durchgeführt. Nutzer möchten nicht in der Wahl ihrer Technik und Plattform eingeschränkt werden. Hat man einen Flug am heimischen PC gebucht, dann möchte man unterwegs auf dem Smartphone auf das Kundenkonto zugreifen können. Das Ticket zeigt man bequem als QR-Code bei der Kontrolle vor. Der Außendienstmitarbeiter einer Versicherung kalkuliert das kundenindividuelle Angebot direkt vor Ort, die Unterschrift erfolgt per Stifteingabe auf dem Tablet und die Dokumente können jederzeit über die Cloud vom Kunden eingesehen werden. Dazu genügt die Eingabe des Nutzernamens und eines Passwortes in einer Web-Applikation. Anwender, egal ob im privaten oder betrieblichen Umfeld, möchten heute nach Möglichkeit die Software ihrer Wahl von jedem beliebigen Ort aus, mit allen möglichen Geräten und unabhängig von der eingesetzten Systemumgebung nutzen. Es ist kaum noch vermittelbar, dass eine Anwendung nur unter einem bestimmten Betriebssystem läuft. Als Entwickler sind wir daher gefordert, diese Ansprüche durch entsprechende Software abzudecken. Ein Weg dorthin sind moderne Web-Applikationen. Das Ziel ist geräte- und plattformübergreifende Software, welche sich am besten automatisch an die Bedürfnisse und an die Einsatzbedingungen des Anwenders anpasst.

Diese Entwicklung geht auch mit verbesserten technischen Möglichkeiten einher. Es gibt eine Reihe von technischen Treibern, welche die Welt der Softwareentwicklung heute in einem besonderen Maße prägen. Eine entscheidende Entwicklung ist die permanente Verfügbarkeit von schnellem Internet. Wir können heute davon ausgehen, dass eine Applikation über das Internet einen nahezu ständigen Zugriff auf Daten und Services hat. Weitere prägende technische Entwicklungen sind die Verwendung von Cloud-Services und die Umstellung der Anwendungsarchitektur auf Microservices. Statt monolithisch aufgebauter Software-Clients teilt man die Funktionalität auf viele kleinere Einheiten auf, welche lose miteinander gekoppelt werden. Dieses Konzept erhöht die Flexibilität und als Programmierer kann man auf das Know-how von anderen Entwicklern und Serviceanbietern zurückgreifen, welche entsprechende Funktionen zur Verfügung stellen. Einmal programmierte Services können dann in mehreren Anwendungen auf einfachste Art und Weise wiederverwendet werden. Um diesen Änderungen Rechnung zu tragen, etablieren sich in zunehmenden Maße Web-Applikationen. Das gilt sowohl für Migrationsprojekte als auch für Neuentwicklungen.

Moderne Web-Applikationen

Dynamische Web-Applikationen sind nichts Neues. Diese gibt es schon lange und sie basieren auf dem Datenaustausch zwischen Client und Server. Zu unterscheiden sind client- und serverseitige Technologien. Auf Seiten des Clients erfolgt die Ausführung im jeweilig verwendeten Browser. Technisch basieren diese auf HTML5 und CSS3. Damit werden Struktur und Layout (Design) beschrieben. Dynamik und die Fähigkeit auf Nutzerinteraktionen ermöglicht der Einsatz der Scriptsprache JavaScript, welche direkt in allen Browsern und auf nahezu allen Systemen unterstützt wird. Auf Seiten des Servers kommen verschiedene Technologien zum Einsatz. Business-Anwendungen und Content-Management-Systeme basieren zum Beispiel auf der Skriptsprache PHP für die Abbildung der Logik. Der Ablauf ist bekanntermaßen wie folgt organisiert: Der Nutzer sendet eine Anfrage über den Browser an den Server. Diese Anfrage wird durch das PHP-Programm verarbeitet. Dazu kann es erforderlich sein, dass das PHP-Programm Daten aus einer Datenbank abruft. Die Datenbank ist ebenfalls auf dem Webserver installiert bzw. von diesem erreichbar. Der PHP-Interpreter erzeugt auf der Basis der Anfrage und seines spezifischen Algorithmus nunmehr die Antwort in Form einer HTML-Datei. Diese HTML-Datei wird an den Client übermittelt. Der Browser selbst bekommt also stets eine HTML-Datei als Ergebnis geliefert und ist lediglich für deren Anzeige verantwortlich.

Viele moderne Ansätze verfolgen jedoch eine primär clientseitige Technologie. Der Browser kann nach wie vor nur HTML-Dateien anzeigen. Das Design und das Layout werden über CSS vorgenommen. Neu ist, dass mittels der Skriptsprache JavaScript nunmehr Programmlogik im Browser ausgeführt wird. Heute kann man davon ausgehen, dass alle aktuellen Browser JavaScript ausführen können. Aus Sicherheitsgründen kann der Nutzer die Ausführung jedoch unterbinden. Ebenso kann der Server Dienste via Rest für Clients anbieten. Für spezielle Services kann und muss man nicht selbst programmieren. Hier kann man die Angebote von Dritten (Third-Party Services) nutzen. Dazu gehört zum Beispiel die Nutzung eines Zahldienstes wie PayPal in der eigenen Web-Applikation.

Web-Applikationen auf der Basis von JavaScript sind oft so genannte Single Page-Applikationen. Statt mit jeder Benutzeranforderung die gesamte Seite neu zu laden (Page Reload) werden nur die Teile der Seite ausgetauscht, welche tatsächlich zu aktualisieren sind. Die zugehörigen Techniken sind AJAX (Asynchronous JavaScript and XML) und JSON (JavaScript Object Notation). Die Technologie im Client kann man auch als Pyramide auffassen (s. Abb. 2). Zur Vereinfachung der Entwicklung und dem Konzept der Wiederverwendung folgend, werden Frameworks und Klassenbibliotheken auf unterschiedlichen Ebenen eingesetzt. Wiederkehrende Aufgaben können damit standardisiert werden und es werden Muster für die Architektur der Web-Applikation vorgegeben.

Mehr Produktivität für die Entwicklung ist gefragt

Softwareentwicklung ist kostenintensiv. Das gilt insbesondere dann, wenn es sich um Individualentwicklung handelt. Von der Anforderungsanalyse bis hin zur Bereitstellung der Software und der laufenden Pflege ist der Aufwand und die damit verbunden Kosten zu kalkulieren. Mit Hilfe moderner und flexibler Vorgehensmodelle aus dem agilen Spektrum, z. B. Scrum, trägt man dem Umstand Rechnung, dass die Planung oft revidiert werden muss. Man schafft es, den Kunden die Applikationen zeitnah bereitzustellen und auch das Scheitern oder die sehr lange Verzögerung des Projektabschlusses zu vermeiden. Bei der eigentlichen Entwicklung werden die Kosten sehr stark durch die Effizienz des Entwicklungsprozesses und die Leistungsfähigkeit der Werkzeuge beeinflusst. Gerade die vielfältigen Möglichkeiten der Web-Entwicklung führen jedoch auch zu Nachteilen, u. a.:

  • Klassenbibliotheken und Frameworks erfordern einen hohen Aufwand an Einarbeitung,
  • es werden umfassende Kenntnisse in einer Vielzahl von Technologien benötigt, u. a. HTML, CSS, JavaScript, Node.js, TypeScript usw. und
  • es gibt oft nur eine rudimentäre Werkzeugunterstützung, das betrifft gerade den Bereich des Designs der Benutzeroberfläche.

Insgesamt führt das dazu, dass die Produktivität der Entwicklung leidet. Damit verbunden sind höhere Projektrisiken und Kosten. Kritisch betrachtet geht gerade im Umfeld der Web-Entwicklung der Weg oft zurück auf die Kommandozeile, zum Beispiel werden Benutzeroberflächen aufwändig manuell über Code erstellt, statt komfortable Designer zu nutzen. Hier muss man kritisch hinterfragen, wie eine höhere Produktivität der Entwicklung möglich ist. Das Thema ist grundsätzlich nicht neu. Es wurde vielmehr schon immer versucht, die Entwicklung von Software mit integrierten und möglichst einfach zu bedienenden Werkzeugen zu vereinfachen. Treiber dieser Entwicklung ist die dringende Notwendigkeit, die projektentscheidende Time to Market zu verkürzen. In vielen praxisorientierten Ansätzen zur Beschleunigung des Entwicklungsprozesses werden so genannte Rapid Application Development (RAD)-Tools verwendet. Mit Hilfe dieser Werkzeuge soll eine Beschleunigung des Entwicklungsprozesses erreicht werden. Das geschieht hauptsächlich durch ein vereinfachtes und komponentenbasiertes Erstellen der Benutzeroberflächen. Ebenso werden regelmäßig Komponenten auch auf anderen Ebenen des Entwicklungsprozesses eingesetzt, zum Beispiel zur Anbindung von Datenbanken.

Für die Entwicklung von Desktop-Applikationen ist das Problem schon sehr gut gelöst. Komponenten-basiert werden auch komplexe Benutzeroberflächen in einer kurzen Zeitspanne erstellt. Eine wichtige Anforderung im Bereich der Business-Applikationen ist sehr oft das Gestalten von umfassenden und komplexen Eingabedialogen. Ein bekanntes Beispiel ist die Arbeit mit dem integrierten Designer in der Entwicklungsumgebung Visual Studio für Windows-Desktop-Anwendungen. Diesen Ansatz in die Welt der Web-Applikationen zu überführen, ist das Ziel des Frameworks Wisej.

Moderne Web-Applikationen mit Wisej

Mit Wisej gelingt es den Entwicklern ohne tiefere Kenntnisse in Web-Technologien moderne Web-Applikationen zu bauen [3]. Es kann alternativ C# oder VB .NET als Programmiersprache eingesetzt werden, um in Visual Studio zu entwickeln. Mit Hilfe eines graphischen Designers erstellt man das User-Interface auf der Basis von Komponenten. Die Vorgehensweise ist den meisten Entwicklern vertraut, denn seit vielen Jahren werden auf gleiche Art und Weise Desktop-Applikationen erstellt. Die Komponenten von Wisej sind weitgehend zu Windows-Forms-Komponenten kompatibel, so dass Wisej auch für größere Migrationsvorhaben sehr gut geeignet ist. Während der Programmierung muss man sich keine Gedanken über das Zusammenspiel von HTML5, CSS3 und JavaScript machen. Man kann sich vollständig auf die Umsetzung seines Geschäftsmodells und eines ansprechenden User-Interfaces konzentrieren.

Abb. 3 zeigt die Architektur einer Wisej-Web-Applikation. Auf der Serverseite werden Steuerelemente, wie zum Beispiel Buttons, Textboxen und andere Komponenten verwendet. Diese Komponenten basieren auf .NET und werden zur Entwurfszeit im Designer erstellt. Es sind eine große Auswahl an Standardkomponenten vorhanden, die durch Extensions erweitert werden können. Der Entwickler wählt die passenden Komponenten für das User-Interface aus der Palette aus und platziert diese auf den Formularen. Die Programmlogik wird über Events verknüpft. Wisej Widgets bilden die serverseitigen verwendeten Komponenten für die Darstellung im Client ab. Dazu werden JavaScript-Klassen auf der Basis der Bibliothek qooxdoo eingesetzt. Es besteht die Möglichkeit Third Party-Komponenten (JavaScript) einzubinden.

Betrachten wir die Interaktion zwischen Client und Server: In vereinfachter Sichtweise erhält die serverseitige Middleware Ajax-Anfragen vom Client im JSON-Format, sendet die Anfragen als .NET-Events an die serverseitigen Komponenten, sammelt die Änderungen am User Interface und übermittelt die Unterschiede als JSON-Paket an den Client. Die Antwort wird von der Middleware auf Clientseite weiterverarbeitet. Ebenso werden Event-Anfragen von den Widgets gesammelt und als Anfragen an den Server übermittelt. Auf Seiten des Servers wird unter Verwendung des .NET-Frameworks programmiert. Damit kann eine Wisej-Anwendung die Geschäftslogik und Datenbankwelt von .NET nutzen.

Zusammenfassung: Mit Wisej erstellt man eine Web-Applikation, aber mit dem oft sehr komplexen Technologie Stack des Webs kommt man als Entwickler nur wenig in Berührung. Intern arbeitet ein schneller .NET-JSON-Serializer und -Parser auf Serverseite. Die Clientseite nutzt den Standard JavaScript-JSON-Serializer und -Parser. Auf diese Weise gelingt auch bei einer hohen Datentransferrate, wie zum Beispiel bei der Darstellung von tausenden von Datensätzen in einem Grid, eine sehr gute Performance.

Projekt mit Wisej anlegen

Eine Testversion von Wisej kann man von [3] laden und installieren. Es werden neue Projektvorlagen in Visual Studio bereitgestellt (s. Abb. 4). Nach dem Start von Visual Studio wählt man zum Beispiel Web Application. Man gelangt direkt zum graphischen Designer. Über die Tool-Palette gestaltet man das User-Interface. Für jedes Objekt kann man die passenden Eigenschaften einstellen. Wisej hat die typischen Eigenschaften der Controls um spezifische Attribute für die Web-Programmierung, zum Beispiel CssStyle oder CssClass, ergänzt. In der Toolpalette finden sich alle wichtigen Controls, um ein User-Interface zu erstellen. Darunter sind einfache Controls, wie Texteingabefelder, Labels, Buttons und komplexere Controls, wie ein DataGridView zur Anzeige und Pflege von Daten in Tabellenform. Ebenso finden sich neben den visuellen Controls auch nicht-visuelle Elemente, wie zum Beispiel ein OpenFileDialog. Neben den klassischen Controls gibt es auch typische Web-Elemente, wie zum Beispiel den TinyEditor (Texteingabe) und ein Element zur Anzeige einer Google-Maps-Karte.

Die Applikation kann direkt aus Visual Studio ausgeführt und gedebuggt werden. Im Hintergrund wird der Internet Information Server (IIS-Express) gestartet. Dieser lauscht unter der lokalen Adresse localhost und unter dem in den Projektoptionen vorgegebenen Port. Im Browser wird die Web-Applikation angezeigt. Ein Beispiel sehen Sie in Abb. 5 für die Anzeige einer Karte.

Folgende Features bietet dieser Ansatz:

  • Das Grundgerüst für eine Web-Applikation steht innerhalb weniger Sekunden durch die Auswahl einer passenden Projektvorlage.
  • Das Design der Benutzeroberfläche erfolgt auf der Basis von Komponenten via Drag-and-drop mit Hilfe des Designers, welcher vollständig in Visual Studio integriert ist.
  • Die Programmierung kann durchgängig in einer .NET-Programmiersprache, d. h. C# oder VB .NET durchgeführt werden. Ein Wechsel in andere Sprachen, wie HTML, CSS, JavaScript, ist nicht erforderlich.
  • Es gibt die Möglichkeit einer komponentenbasierten Integration von häufig genutzten Funktionen, wie die Anbindung einer Datenbank oder Standarddialogen.
  • Funktionserweiterungen über Extensions zum Beispiel für Geo-Location oder Sprachübersetzungen sind möglich.

Die Web-Applikationen sind responsiv und passen sich den Verhältnissen auf den Clients automatisch an. Darüber hinaus kann eine Wisej-Web-Applikation leicht im Design nach Wunsch gestaltet werden. Man arbeitet Theme-basiert. Bereits während der Entwurfszeit werden die Änderungen sichtbar. Zur Auswahl stehen vordefinierte Themes. Ebenso ist es möglich, die Themes individuell anzupassen bzw. ein eigenes Theme zu erstellen. Auch dieses kann man dialogorientiert erledigen (Theme Builder). Der zugehörige CSS-Code wird automatisch generiert. Enthalten sind bereits moderne Themes, die beispielsweise an das Material-Design von Google erinnern.

Wisej bietet interessante Optionen für das Deployment. Derzeit wird der Internet Information Server (IIS) unter Windows unterstützt. Ferner kann man die Applikation auch relativ flexibel über die Cloud, zum Beispiel über Server bei Amazon AWS oder Microsoft Azure, bereitstellen. Ebenso gibt es die Möglichkeit, Wisej-Web-Applikationen auch auf Rechnern ohne IIS auszuführen. Mit Hilfe der Wisej.HostService-Extension kann die Anwendung einfach als Dienst gestartet werden. In naher Zukunft ist Unterstützung für Linux vorgesehen, erfährt man vom Hersteller. Für besondere Einsatzszenarien ist auch ein Ausführen ohne Server möglich. Dazu gibt es die Datei Wisej.Application.exe. Diese kopiert man in den betreffenden Projektordner und startet das Programm. Daraufhin wird ein Startfenster eingeblendet und die Anwendung lädt im Hintergrund und wird ausgeführt.

Der Vorteil von RAD-Tools für das Erstellen von Web-Applikationen

Überträgt man den aus der Desktop-Entwicklung etablierten Ansatz einer RAD-basierten Programmentwicklung auf das Erstellen von Web-Applikationen, so ergibt sich eine Reihe von Vorteilen. Gerade bei Business-Applikationen müssen umfassende Datenmasken generiert werden. Mit Hilfe eines grafischen Designers gelingt dieses in einem akzeptablen Zeitrahmen. Erfahrungen des vorgestellten Frameworks Wisej haben ergeben, dass es realistisch ist, dass die Umsetzung komplexer Applikationen um den Faktor 5 bis 10 beschleunigt wird.

Fazit

Moderne Web-Applikationen können mit vielen Vorteilen punkten, zum Beispiel sind sie plattformunabhängig, es ist keine Installation auf den Clients notwendig und sie sind meist direkt mehrbenutzerfähig. Für die Entwicklung steht eine sehr große Auswahl an Technologien zur Verfügung. Einer produktiven Entwicklung stehen ein hoher Einarbeitungsbedarf und ein oft unausgereiftes Tooling gegenüber. Gerade das Erstellen von umfassenden Dialogen und komplexen Workflows kann sehr zeitraubend sein. Demgegenüber stehen die steigenden Anforderungen nach einer schnellen Umsetzung. Gefragt sind daher Ansätze, welche den Entwicklungsprozess vereinfachen.

Autoren

Olena Bochkor

Der Arbeitsschwerpunkt von Olena Bochkor ist der Entwurf und das Design moderner und kundengerechter Benutzeroberflächen.
>> Weiterlesen

Dr. Veikko Krypczyk

Dr. Veikko Krypczyk arbeitet u. a. als Softwareentwickler, Fachautor und Dozent. Über die Firma LARInet gibt er darüber hinaus sein Wissen in Schulungen zu aktuellen Fragestellungen der IT weiter.
>> Weiterlesen
botMessage_toctoc_comments_9210