27.05.2014

Einsatz in der Automatisierungsbranche

Rich-Client-Anwendungen mit HTML5

Im Office- und Konsumbereich ist zu beobachten, dass klassische Anwendungen, wie etwa Office 365, in das Web übertragen werden. Im Kontext der Automatisierungsindustrie ist dies bisher eher ein seltenes Phänomen. Und wenn, dann findet man entsprechende Lösungen meist nur im Bereich der Visualisierung. Doch bei genauerer Betrachtung ist der Trend aus dem Office- und Konsumbereich auch auf andere Bereiche der Automatisierungsbranche übertragbar.

Autoren: Josha Dittgen, M&M Software GmbH;
Thomas Gaus, M&M Software GmbH.


Bild 1: Geräte- und Plattformvielfalt sowie mobile Anwendungen gewinnen in der Automatisierungsbranche zunehmend an Bedeutung.
Bild: M&M Software GmbH

Was ist eine Rich Client-Anwendung überhaupt? Eine eindeutige Definition gibt es nicht. Jedoch lässt sich grundsätzlich feststellen, dass eine Rich-Client-Anwendung dem Nutzer fast immer eine relativ umfassende Oberfläche bietet, welche für einen bzw. mehrere Anwendungsfälle entwickelt wurde. Früher waren dies größtenteils Anwendungen, die lokal auf einem PC installiert wurden. Heute hingegen gibt es jedoch mehr technische Möglichkeiten eine Rich-Client-Anwendung zu realisieren. Fortschrittlichere Webtechnologien ermöglichen heute Anwendungen im Internet, die klassischen Rich-Client-Desktop-Anwendungen in nichts nachstehen. Die Eigenschaften früherer Webanwendungen, wie z.B. 'nur onlinefähig' oder 'beschränkte Interaktionsmöglichkeiten', haben heute keinen Bestand mehr. Die Grenzen zwischen klassischen Desktop- und World Wide Web-Applikationen verschwimmen immer mehr.

Was hat HTML5 mit dieser Entwicklung zu tun?

Durch HTML5 sind in letzter Zeit Webanwendungen oder auch sogenannte 'Apps' entstanden, welche für die Nutzer wie vollwertige Desktop-Anwendungen wirken. Die Design- und Interaktionsmöglichkeiten durch HTML5 sind riesig - z.B. durch Drag&Drop oder Animationen. Dabei muss eine Anwendung nicht zwangsläufig webbasiert sein, auch für Desktop-Anwendungen kann dieser Ansatz durchaus interessant sein. HTML5 bietet Entwicklern viele neue Möglichkeiten. Eine Übersicht der wichtigsten Funktionen befindet sich weiter unten im Text. Neben diesen Funktionen zählen auch Visualisierungselemente wie Video, Audio und dynamische 2D- und 3D-Grafiken oder SVG bis hin zu Geo-Location-API, Device-APIs oder Touch Events zu den Neuerungen. Zentrale HTML5-Technologien sind:

  • • Web Worker: Multithreading in Client-Anwendungen durch Ausführung von Scripts in eigenständigen Threads.
  • • File System API: Zugriff auf lokales Dateisystem für Lese- und Schreibzugriffe auf Dateien und Verzeichnisse.
  • • Web Sockets: Protokoll für bidirektionale Kommunikation zwischen Client und Server, welche von beiden Seiten aktiv verwendet werden kann.
  • • Server-Sent Events: Alternative zu Web Sockets für Übermittlung von Push-Nachrichten über eine dauerhafte Verbindung zwischen Client und Server.
  • • Web Storage-Local Storage und Session Storage: Größenlimitierte lokale Speicher zur dauerhaft oder sessionbasierten Speicherung von Key-Value-Paaren.
  • • Indexed Database: Clientseitige relationale SQL Datenbank zur Speicherung von größeren Datenmengen.
  • • Full-Screen API: API für automatischen Wechsel in die Vollbildansicht.

Wird von HTML5 gesprochen, ist meistens nicht nur HTML an sich gemeint, sondern hinter dem Überbegriff 'HTML5' verbirgt sich auch noch Java-Script und CSS. Umgangssprachlich deckt HTML5 somit alles ab, was für die Entwicklung einer Rich-Client-Anwendung oder einer App benötigt wird. Dies ist die Hypertext Markup Language zur Strukturierung der Inhalte, JavaScript für die Logik bzw. die Interaktionen in einer Anwendung und CSS für das Layout und die Formatierung der Oberflächen. Unterstützt wird die Entwicklung meist durch OpenSource UI-Frameworks wie AngularJS, ExtJS oder Qooxdoo. Sie bieten neben einer umfassenden Sammlung von Oberflächenelementen ein Framework mit bekannten objektorientierten Konzepten. Fehlt eine Funktionalität oder ein Oberflächenelement, lässt sich dies meist durch eine zusätzliche JavaScript Bibliotheken schnell und einfach ergänzen. Standardmäßig stehen zwar immer viele Bibliotheken zur Verfügung, diese sind jedoch normalerweise auf einen speziellen Anwendungsfall zugeschnitten - z.B. für Diagramme. Die Vorteile liegen ganz klar auf der Hand. Mittels einer Vielzahl an neuen Funktionen lassen sich nativ aussehende Applikationen umsetzen, die auf Augenhöhe mit klassischen Rich-Client-Anwendungen sind. Ein weiteres großes Plus: Durch Webtechnologien lässt sich eine gewisse Plattformunabhängigkeit erreichen. Bei der Ausführung der Anwendungen spielt es keine Rolle, welches Betriebssystem auf dem PC läuft. Lediglich der verwendete Browser sorgt ggf. für eine geringe Einschränkung. Aufgrund des starken Wettbewerbs ziehen die Browserhersteller bei fehlenden Features jedoch erfahrungsgemäß schnell nach.

Auch die Automatisierung profitiert

Automatisierungskomponenten wie SPSn oder Remote IOs besitzen heute oft einen integrierten Webserver, über den z.B. Geräte-Parametrierung, -Diagnose, -Statusanzeige oder IO-Tests möglich sind. Das Potential integrierter Anwendungen ist in den letzten Jahren dank der gesteigerten Leistungsfähigkeit der Hardware stark gestiegen. Dementsprechend wachsen die Erwartungen der Nutzer, z.B. an erweiterte Onlinediagnosefunktionen. Diese im Gerät integrierten Anwendungen machen bisherige Desktop-Varianten jedoch nicht überflüssig. Sie haben weiterhin durchaus ihre Berechtigung, da sie Schnittstellen zu Engineering-, CAE- und MES-Systemen bieten und auch offline eingesetzt werden können. Nicht zuletzt liefern die Desktop-Pendants häufig noch mehr Funktionalität, etwa bei der Konfiguration eines Gesamtsystems mit mehreren vernetzten Geräten und Funktionen wie Dokumentationserstellung, Backup und Restore. Eine durchgängige Usability und ein einheitliches Corporate Identity spielen bei beiden Lösungen für die Hersteller eine wichtige Rolle. Zudem ist die Wiederverwendung von Komponenten aufgrund der Funktionsüberschneidungen von großer Bedeutung. Genau an diesem Punkt kommen die Vorteile von HTML5 zu tragen: Denn anstelle von mehreren Komponenten in verschiedenen Technologien, entwickelt man nur noch gemeinsam genutzte Komponenten. Diese lassen sich dann wiederum in den Webservern der Geräte als auch in den Desktop-Anwendungen einsetzen. Die Desktopoberfläche ist dabei vollständig in HTML5 realisiert. Dies spiegelt sich direkt in einer durchgängigen Oberfläche und einheitlichen Usability wieder. Schnittstellen zu Fremdsystemen oder spezielle Kommunikationskomponenten basieren hingegen weiterhin auf bewährten Technologien wie Microsoft.Net, auf die die HTML5-Komponenten direkt zugreifen können. In der eingebetteten Variante interagiert die Anwendungslogik direkt über den Webserver mit der Firmware. Dies erhöht die Wiederverwendbarkeit und die Qualität und verkürzt die Entwicklungszeit. Zudem können aufgrund der Plattformunabhängigkeit, neue Anwendungsszenarien schneller in die Tat umgesetzt werden. Der Einsatz von HTML5-Anwendungen ist auch zunehmend im mobilen Bereich und in industriellen Clouds zu beobachten. Bei mobilen Anwendungen werden neben den klassischen browserbasierten 'Web-Apps' zunehmend hybride Apps entwickelt - auch hier kommt HTML5 zum Einsatz. Hybride Apps basieren auf speziellen Frameworks wie PhoneGap mit denen sich plattform-spezifische Anwendungen entwickeln lassen, die in den App-Stores der verschiedenen Plattformen (iOS, Android, Windows Phone etc.) angeboten werden können. Ferner ermöglichen diese Frameworks plattform- unabhängige Zugriffe auf die spezifischen APIs und Hardwarekomponenten wie z.B. die Kamera eines Gerätes.

Fazit

Geräte- und Plattformvielfalt sowie mobile Anwendungen gewinnen in der Automatisierungsbranche zunehmend an Bedeutung. Vor diesem Hintergrund werden in Zukunft neue Arten von Anwendungen mit neuen Szenarien Einzug halten. Auch wenn HTML5 eine Reihe von Vorteilen, insbesondere Wiederverwendung und Plattformunabhängigkeit bietet, muss man bei der Umsetzung diverse Hürden überwinden. So ist auch heute, nach mehreren Jahren, die Kompatibilität zwischen den Browsern sowie der unterschiedliche Grad der HTML5-Unterstützung noch immer eine Herausforderung. Daher gilt es abhängig von den Anforderungen und den Einsatzfällen, die Vor- und Nachteile gezielt zu betrachten und zu bewerten. Denn jede erfolgreiche Webanwendung muss sich heute immer an klassischen Desktopanwendungen messen lassen.

Anzeige