Die Grenzen zwischen Web und Desktop überwinden

ChameRIA – Desktopanwendungen mit HTML5

Daniel Bremer-Tonn und Clement Escoffier

Die Popularität von Webtechnologien auf der Basis von HTML, CSS und JavaScript ist seit Jahren unverändert hoch. Im Zuge der Entwicklung und vor allem der Unterstützung von HTML5 entwickelt sich der Browser zu einer immer ernst zu nehmenderen Anwendungsplattform. Mit chameRIA stellen wir eine Lösung vor, mit der die Möglichkeiten aktueller Webtechnologien für anspruchsvolle und plattformunabhängige Desktopanwendungen genutzt werden können.

Der Hype um HTML5 und vor allem JavaScript scheint nicht abzuebben. Produkte wie Googles ChromeOS lassen die Grenze zwischen Web und Desktop zusehends verschwimmen. Die Umsetzung von ansprechenden und hochdynamischen UIs geht heutzutage mit Hilfe von Webtechnologien einfach und schnell von der Hand. Im Gegensatz zu herkömmlichen Desktop-Technologien wie Swing oder SWT sind eigene, maßgeschneiderte, optisch ansprechende UI-Elemente in einem Bruchteil der Zeit umsetzbar. Zum einen liefern ausgereifte JavaScript-Bibliotheken wie z.B. jQuery eine einfach zu benutzende und dennoch mächtige Entwicklungsgrundlage für sämtliche Aktionen rund um die DOM-Manipulation und zusätzliche Features wie Animationen. Webtechnologien gelten heutzutage als „Common Skills“ und sind im Gegensatz zu Technologien wie Swing oder SWT unter Entwicklern bedeutend stärker vertreten. Außerdem erhöht die Weiternutzung von bereits gewonnener Expertise durch Web-Projekte für anstehende Entwicklungsarbeit im Desktopbereich die Einsatzmöglichkeiten. Aus diesen Gründen haben wir uns in einer konkreten Projektsituation für HTML5 für den Desktop entschieden.

Ein E-Book Reader für den Desktop

Für ein Berliner Startup-Unternehmen sollte eine E-Book Reader Anwendung entwickelt werden (Abb. 1).

Abb. 1: E-Book Reader, Mac OSX Version

Besondere Anforderungen wurden an die Usability und das Design gestellt. Das komplette UI basierte auf einem pixelgenauen Design und entsprach nach seinem Aussehen und der Funktionalität nicht dem herkömmlichen Look & Feel einer Desktopanwendung. Sämtliche UI-Elemente wurden komplett neu entworfen und zusätzliche Animationseffekte, wie das automatische sanfte Ein- und Ausblenden von UI-Elementen, vorgesehen. Zusätzlich sollte die Anwendung auch via Touchscreen gesteuert werden können.

Eine erste Machbarkeitsanalyse zeigte schnell, dass für die Umsetzung des UI herkömmliche Technologien wie Swing, SWT nicht in Frage kamen. Diese Komponentenframeworks stellen UI-Elemente bereit, die entweder plattformneutral oder dem unterliegenden Betriebssystem entsprechend nachgebildet sind bzw. dieses direkt entsprechen. In unserem konkreten Fall konnte jedoch nicht auf die vorhandenen UI-Elemente zurückgegriffen werden, da diese dem vorgegebenen Design nicht entsprachen und nicht in dem nötigen Grade anpassbar waren. Infolgedessen hätten sämtliche UI-Elemente eigenhändig nachgezeichnet und zusätzliche Animationseffekte mühsam implementiert werden müssen. Zum einen wäre der Aufwand hierfür zu hoch und zum anderen zusätzliche Manpower in Form von Swing/SWT-Experten vonnöten gewesen. Die Umsetzung des Frontend der Desktop-Anwendung sollte komplett auf der Basis von HTML5 und JavaScript in einer Webview erfolgen.

Das Backend sollte auf Java basieren, um eventuell rechenintensivere Logik von der Webview zu entkoppeln. Da die Anwendung auf mehreren Plattformen (Windows, Mac OSX, Linux) laufen sollte, war Java die erste Wahl. Eine weitere wichtige Forderung war, dass die Anwendung verschiedene Ausbaustufen bieten sollte. Damit sollte es möglich sein, den E-Book-Reader als Produkt mit verschiedenen Konfigurationen für verschiedene Kunden anzubieten. So war neben der eigentlichen Reader-Komponente zur Darstellung der Dokumente auch eine Komponente für das lokale Verwalten, Kaufen und Herunterladen von Büchern vorgesehen.

Daher sollte die Anwendung modular und komponentenbasiert aufgebaut sein. Zusätzlich unterstützt dieser Ansatz einen inkrementellen Entwicklungsprozess und erleichtert das Testen. Durch eine lose Kopplung von Frontend und Backend sollte auch die Möglichkeit bestehen, die Komponenten verteilt zu betreiben. Als letzten Punkt sollte die Lösung eine gute Systemintegration bieten. Um im E-Book Reader auch DRM-geschützte Dokumente lesen zu können, musste eine native Laufzeitbibliothek für die Entschlüsselung der Dokumente eingebunden werden.

Existierende Lösungen zur Entwicklung webbasierter Anwendungen

Für die Erstellung kompletter Anwendungen auf der Basis von HTML5 gibt es bereits fertige Lösungen. Bekannte Vertreter für das Erstellen von iOS- und Android-Anwendungen mit Hilfe von HTML5 und JavaScript sind z.B. Phonegap [1] oder Appcelerator Titanium [2].

Während Phonegap für mobile Plattformen angedacht ist, können mit Titanium auch direkt Desktopanwendungen erstellt werden. Der Charme von Titanium liegt darin, sowohl Mobil- als auch Desktopanwendungen auf derselben Codebasis bauen zu können. Für den Desktopbereich gibt es jedoch Einschränkungen, vor allem bei der Systemintegration. Die Benutzung von nativen Komponenten (z.B. spezielle DLLs unter Windows) ist nicht möglich. Für einfache Desktopanwendungen bietet Titanium eine elegante Möglichkeit der Umsetzung. Für die zu entwickelnde E-Book-Reader-Anwendung schied diese Lösung aufgrund der nötigen Integration einer nativen Komponente aus.

Neben der Möglichkeit, spezielle Entwicklungs- und Laufzeitumgebungen zu nutzen, bietet sich auch der Browser für Desktopanwendung an. Allerdings lassen sich auch hier weder externe Geräte noch native Komponenten einbinden.

ChameRIA

Mit ChameRIA haben wir eine Laufzeitumgebung entwickelt, die unseren Anforderungen genügt und komplett auf ausgereifte und erprobte Technologien aufsetzt. Wir stellen diese Plattform anderen interessierten Entwicklern als Open-Source-Projekt zur Verfügung. ChameRIA selbst besteht grob betrachtet aus Frontend- und Backendkomponenten (Abb. 2).

Abb. 2: chameRIA Schichtenmodell

Das Frontend ist für das Rendern des UI verantwortlich und greift auf eine integrierte Webkit-Komponente zurück. Damit können die Frontendkomponenten komplett in HTML5 und JavaScript implementiert und dank plattformübergreifender Webkit-Implementierungen auf allen Plattformen dargestellt werden.

Geschrieben von
Daniel Bremer-Tonn und Clement Escoffier
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.