Making of a HTML5 Cloud Desktop

Aus heutiger Sicht mag vielleicht der ein oder andere den Kopf schütteln. So geschehen bei einer Redaktionstour in London, auf der wir den HTML5 Cloud Desktop für unsere Lösung Cortado Corporate Server vorstellten. "You’ve done the hard stuff first", so die Reaktion von Jason Stamper, Redakteur der Computer Business Review. Mit dieser Einschätzung lag er durchaus richtig. Wir haben die komplizierten Dinge zuerst umgesetzt - aber das lag weniger an uns, als an der Standardisierung von HTML5 und an der Vielzahl von Geräten, die wir unterstützen wollten.

Doch einen Schritt zurück. Seit mehreren Jahren arbeiten wir an der Entwicklung unserer Unternehmenslösung Cortado Corporate Server, mit der mobile Geräte in die Unternehmens-IT integriert werden können. Die Lösung bietet Mobile Device Management und stellt den Nutzern Desktop-Funktionen wie Dateizugriff, Drucken, Faxen oder das Erzeugen von Datenbankreports zur Verfügung. Eine kostenlose gehostete Einzelnutzerversion namens Cortado Workplace ergänzt dieses Portfolio. Den für den Zugriff benötigten Cloud Desktop in Form nativer Clients gibt es auch für die mobilen Betriebssysteme iOS, Android und BlackBerry OS. Immer wieder jedoch trugen Kunden an uns den Wunsch heran, dass sie - unter anderem hervorgerufen durch ByoD-Programme - einen performanten plattformunabhängigen Cloud Desktop benötigen, der mit jedem Browser und nahezu jedem Gerät nutzbar ist.

Von JavaFX zu HTML5

Webbasierte Dateiexplorer gibt es viele und auch wir stellten unseren Kunden bislang einen solchen zur Verfügung. Doch von einer richtigen Desktop-Experience sind solche Services weit entfernt. Nach dem Webexplorer starteten wir deshalb eine Entwicklung auf Basis von JavaFX. Rein funktional erwies sich die Implementierung als durchaus erfolgreich, doch die grafischen Gestaltungsmöglichkeiten waren recht limitiert. Der Todesstoß war letztendlich die lange Ladezeit der JavaFX Runtime. Mindestens 60 Sekunden ohne jegliche Rückmeldung musste der Anwender warten - ein Wert, den fast keine unserer Testpersonen akzeptierte. Da spielte es dann auch keine Rolle mehr, dass Oracle im vergangenen Herbst den weiteren Support der Plattform aufkündigte; die vollständige Entwicklung des JavaFX-Clients wurde abgeschrieben.

Danach folgte unser aktuelles Projekt Printer Dashboard zum Monitoring von Druckumgebungen, das vor dem Hintergrund der JavaFX-Erfahrungen und nach zahlreichen RIA-Entwicklungsmethoden auf Basis von Microsoft Silverlight entwickelt wurde- einer an und für sich sehr ausgereiften und professionellen Entwicklungsumgebung. Umso erstaunter waren wir, als wir feststellen mussten, dass die erste Windows 8 Beta zwar HTML5 perfekt beherrschte, Silverlight allerdings nicht. Microsoft besserte hier mittlerweile zwar nach - dennoch wurde uns schnell klar, dass das Unternehmen aus Redmond nunmehr stark auf HTML5 setzen würde und schickten auch unsere Silverlight-Entwickler auf die HTML5-Schulbank. Da unsere bis dato gesammelten eigenen Erfahrungen mit dem künftigen Web-Standard ebenfalls positiv waren (wir starteten das HTML5-Cloud-Desktop-Projekt bereits im Frühjar 2011), wurden wir in unserer strategischen Entscheidung bestärkt: Die Zukunft der Webentwicklung gehört HTML5.

Von Mobile zu Web

Anders als wahrscheinlich die meisten Unternehmen sind wir nicht von der klassischen Webanwendung zu HTML5 gelangt, sondern von unserem Produkt Cortado Workplace, das einen Cloud Desktop für BlackBerry OS, Android und iOS bietet. Da ist es klar, dass wir beim Cloud-Desktop-Projekt ein großes Augenmerk auf die Usability legen, denn die iPad-Anwender sollten beim Wechseln auf den HTML5-Client - beispielsweise auf einem Mac - auf keinen Fall enttäuscht werden.

Was ist an HTML5 so besonders?

Um unsere Begeisterung für HMTL5 nachvollziehen zu können, ist zunächst ein kleiner technischer Exkurs vonnöten: HTML5 ist ein Standard, der in nahezu allen aktuellen Browsern läuft. Da ihn Apple, Google, Microsoft und Adobe einsetzen, bezweifelt wohl niemand mehr, dass sich dieser dauerhaft durchsetzen wird. Zur Ausführung von HTML5-Anwendungen ist keinerlei Plug-in - wie noch bei Flash oder Silverlight - mehr notwendig. Die Anwendung startet sofort und hat fast keinerlei Ladezeiten. Neben der Möglichkeit, Videos oder dynamische Vektorgrafiken darzustellen, besticht HTML5 insbesondere dadurch, dass das typische Website-Verhalten wie beispielsweise der Refresh nach einer Auswahl entfällt. So entspricht die Usability der lokaler Anwendungen. Ein gutes Beispiel dafür ist die Dateivorschau unseres Cloud Desktops, die der schnellen Ansicht von Dokumenten dient. Das Bild lässt sich nicht nur darstellen, sondern kann auch sehr schnell und flüssig rotieren. Ohne CSS3 stünde in dem Fall der entwicklungstechnische Aufwand in keinem Verhältnis zum gewünschten Effekt.

Um diese Eigenschaften weiter zu unterstützen, verfügt HTML5 auch über die Möglichkeit, Daten lokal zu speichern. Sogar eine lokale Speicherung von SQL-Daten ist möglich und soll teilweise Offline-Szenarien abdecken.

Ist die Zeit reif?

Zwar ist HTML5 in aller Munde, aber der Standard noch lange nicht festgelegt. In einer Presseinformation im vergangenen Mai verkündete das World Wide Web Consortium W3C, dass es sich 2014 als Ziel für die Fertigstellung gesetzt habe. Wer jetzt mit der HTML5-Entwicklung startet, wird noch einige "Spezialbehandlungen" implementieren und seinen Kunden bestimmte Browser-Versionen empfehlen müssen. Bei IE6 bis 8 geht gar nichts; der Internet Explorer 9, der schon sehr viel für HTML5 verspricht, hinkt aktuell noch hinter seinen Marktbegleitern hinterher. Man darf gespannt sein, was der Internet Explorer 10 bieten wird. Erste Erfahrungen mit der Windows 8 Beta stimmen bereits sehr positiv in dieser Richtung. Wem es auf Geschwindigkeit ankommt, sollte auf Googles Browser Chrome zurückgreifen. Selbst auf einem schnellen Mac kann er gegenüber dem Safari deutlich punkten.

Es geht!

Trotz der Schwierigkeiten gerade im IE-Umfeld ist eines ganz klar: Mit HTML5 kann man bereits jetzt ausgereifte Lösungen erstellen. Und wer heute bereits erste HTML5- Erfahrungen sammelt, wird in Kürze die Nase vorn haben. Für professionelle Entwickler ist es letztendlich ein Muss, solche Erfahrungen zu sammeln. Nach allem, was sich derzeit abzeichnet, wird die Nachfrage nach HTML5-Know-how in den kommenden Monante massiv steigen.

Eingesetzte Tools

Im folgenden möchte ich kurz die Tools vorstellen, die während der Entwicklung des Cloud Desktops zum Einsatz kamen. Ein wichtiges Hilfsmittel zur HTML5-Entwicklung stellte die JavaScript-Bibliothek "Modernizr" dar. Diese prüft die Verfügbarkeit von HTML5-Features im verwendeten Browser und bietet im Falle eines nicht unterstützten Features alternative Darstellungen an. Ein Beispiel dafür ist der Drag-and-Drop-Upload, der von Internet Explorer und Safari jedoch nicht unterstützt wird (hier kommt der herkömmliche Upload-Dilaog via Explorer zum Einsatz).

Einen guten Überblick gibt die Featureliste von Modernizr. Aber aufgepasst! Jeder Automatismus hat auch seine Grenzen. So wollten wir testen, inwieweit unser HTML5-Cloud-Desktop bereits auf Windows Phone 7.5 angezeigt werden kann. Das Ergebnis: gar nicht. Letztendlich stellte sich aber heraus, dass der Modernizr Windows Phone noch nicht kannte und deshalb unser Desktop nicht sichtbar war. Neben dem Modernizr hat sich im Rahmen des Projektes auch gezeigt, das JQuery wichtiger ist denn je, um beispielsweise browserübergreifendes Drag-and-Drop zu ermöglichen.

Auf dem Event Google I/O 2010 erhielten wir dann noch den Tipp zu Aptana, das sich als sehr funktional erwiesen hat. Unsere Entwickler nehmen das Aptana Eclipse Plugin, unsere Designer das Aptana Studio.

Design und Usability

Der Anspruch des Cloud-Desktops könnte somit für ein HTML5-Projekt kaum höher gesetzt werden. Unser Ziel war es, dem Anwender eine vollständige Desktop-Experience zu bieten, der Cloud-Desktop soll die ideale Plattform sein, um den Trends von ByoD und Consumerization zu entsprechen und das auf allen Plattformen, die durch unsere nativen Clients nicht bereits abgedeckt werden.

Doch nützt das beste Design nichts, wenn der Anwender es nicht bedienen kann. Deshalb ging der HTML5-Cloud-Desktop erst einmal in die interne Betaversion, um das Feedback der ersten Anwender einzuholen. Ergebnis der ersten Feedbackrunde: der Logout-Dialog, den wir selbst noch sinnvoll und schön fanden, verschwand.

Architektur und Ressourcenverteilung

Die nativen Clients für die mobilen Plattformen existierten bereits; somit bestand Klarheit über die grundsätzliche Architektur. Die Client-Komponente sollte via SSL mit einer Serverkomponente kommunizieren, die dann auf Basis einer Protokollbeschreibung Aktionen serverseitig ausführt. Das kann der Ausdruck auf einem Netzwerkdrucker sein, das Rendern eines PDFs oder das Zurückliefern von Inhalten, wie beispielsweise Dateilisten. Für die Kommunikation zwischen Client und Server setzen wir auf modernes AJAX (XMLHttpRequest Level 2) und das sehr schlanke Datenaustauschformat JSON. Weil der HTML5-Cloud-Desktop keine serverbasierte Website ist, sondern ein browserbasierter Client, lässt sich auch die Kommunikation zwischen Client und Server optimieren. So konnten wir in unserem US-Büro in Denver feststellen, dass der Dateizugriff mit unserem Cloud Desktop bis zu sechsmal schneller ist als mit einem Windows Fileshare. Das einfachere Einloggen durch die Möglichkeit des Verzichts auf ein VPN sowie die Möglichkeit einer Dateivorschau wurden dabei noch nicht einmal berücksichtigt.

Von Anfang an war klar, dass die Usability und das Design im Vordergrund steht. Deshalb wagten wir eine völlig neue Herangehensweise. Statt in der Softwareentwicklung entstanden die ersten Prototypen in der Marketing-Abteilung. Statt unsere Entwickler auf HTML5 zu schulen, bildeten wir unsere Grafiker zu HTML5-/CSS3-Entwicklern aus. Dadurch konnten wir sicherstellen, dass zum einen keine unnötigen Kompromisse beim Design eingegangen werden mussten und dass zum anderen die möglichen Reibungsverluste auf ein Minimum gesenkt werden konnten. Mittlerweile hat sich aus dem Marketing heraus ein Team gebildet, das übergreifend für das User-Interface und die Usability zuständig ist. Im HTML5-Kontext arbeitet dieses Team eng mit den HTML5-Frontend-Entwicklern zusammen, die den HTML5-Client mit der notwendigen Programmlogik ausstatten und die ihrerseits wiederum die Kommunikation zu den Serverentwicklern sicherstellen.

Deployment

Eine HTML5-Lösung ist eine echte Client-Software und keine serverseitige Website. Das Thema der Softwareverteilung entfiel deshalb vollständig. Als wir den HTML5-Client erstmals intern zur Verfügung stellten, schlugen einige Mitarbeiter bei unserer IT auf und fragten, ob sie den Client installiert bekämen. Erst nach der nochmaligen Erklärung, dass der Aufruf des Links genüge, glaubten sie uns das auch.

Fazit

Unsere Erfahrungen aus dem Projekt zeigen ganz klar: HTML5-Features sind heute schon machbar und führen zu hervorragenden Ergebnissen. Die Entwicklungszeit war, obwohl wir alle sehr viel lernen mussten, vergleichbar mit der mobiler Clients. Stellt sich letztendlich die Frage, was die Zukunft bringen wird und ob native Client-Entwicklung auch weiterhin Sinn machen werden. Aktuell ist die Antwort für komplexe Anwendungen wie unsere klar: Der native Client hat definitiv Vorteile (siehe Tabelle unten). Das wird auch noch die nächsten Jahre so bleiben, denn der HTML5-Client hat keine Möglichkeit, auf lokale Schnittstellen oder das Betriebssystem zuzugreifen. Doch hier zeichnen sich schon erste Veränderungen ab. Beispielsweise bietet Motorola in Rahmen seines Webtop SDK das USB-Interface als Webservice. RIM arbeitet mit dem WebWorks SDK für die nächste BlackBerry-Generation auch an diversen lokalen Funktionen. Entwickelt sich dieser Trend weiter, kann HTML5 endlich die Versprechen erfüllen, mit denen Java einst antrat. (sh)

HTML5-Funktionen des Cortado Cloud Desktop

Funktion	HTML5	Native	Funktion des Cloud-Desktops
Lokale Schnittstellen (Bluetooth, Wifi)	Nein	Ja	Drucken
Hintergrundprozesse auf dem Gerät	Teilweise	Ja	Drucken
Kontrolle anderer Anwendungen	Nein	Ja	Mobile Device Management
Auslesen von Geräteinformationen	Nein	Ja	Mobile Device Management
Open In / Share With	Teilweise	Ja	Bearbeiten von Dokumenten
AppStore	Nein	Ja	Verteilung der Anwendung und Co-Marketing bzw. Auffindbarkeit der Anwendung