16. Januar 2015 von & gespeichert unter Coding, Programmierung.

Noch etwa zur Zeit, als Apple seine ersten Entwicklerwerkzeuge für das iPhone veröffentlichte oder als Google mit Android daherkam, war es relativ schwer vorstellbar, HTML, CSS und JavaScript für die Entwicklung von Apps zu nutzen. Zu schwach war noch die Hardware oder zumindest der interne Browser. Doch das hat sich mittlerweile enorm gewandelt. Smartphone- sowie Tablet-Apps mit Hilfe von Web-Technologien sind für einen Web-Entwickler gar nicht mehr so abwegig. Mobile Webseiten haben häufig schon das Look&Feel einer App mit einer stetig sichtbaren Navigation oder Transitions zwischen den einzelnen Seiten.

Bei einigen Projekten in der Vergangenheit konnte ich viele Erfahrungen mit dem Apache-Projekt Cordova sammeln. Zuvor testete ich Adobes Phonegap aus, stellte aber schnell fest, dass es (bisher) nur eine Art Wrapper um Cordova ist. Es schadet aber niemals bei Problemen beide Begriffe bei der Suche auf Stackoverflow und Co. zu verwenden. Im Kern nutzt Cordova ein sogenanntes Web-View und bietet über JavaScript eine Schnittstelle zu nativen Funktionen.

Erste Schritte

Cordova ist sehr schnell installiert, Grundvoraussetzung ist lediglich Node.js sowie die für die jeweilige Zielplattform notwendige Entwicklungsumgebung. Für iOS-Apps ist ein Mac zwingend erforderlich, zudem sollten auch die Xcode Command Line Utilities installiert werden. Die einzelnen Werkzeuge des Android SDKs müssen über die PATH-Variable verfügbar sein. Die Dokumentation bietet einen ausführlichen Überblick über das Thema.

Ein Projekt ist schnell erstellt und eingerichtet. Alle wesentlichen Bestandteile der App befinden sich im Projekteigenen www-Ordner. Persönlich setze ich den Task-Runner Gulp ein, der den www-Ordner automatisch befüllt. Besonders bei umfangreichen Projekten ist das empfehlenswert, da so die einzelnen Komponenten besser modularisiert werden können. Gulp kümmert sich je nach Konfiguration dann um den Rest. Aber Achtung: mit leerem www-Ordner verweigert Cordova die Arbeit.

Eine Datei mit dem Namen config.xml befindet sich im Projekt-Ordner und dient zur Konfiguration der App. Hier können neben Metadaten der App, Icons und Splash-Screens auch zusätzliche Plattformkonfigurationen und Plugins verwaltet werden. Letzteres ist nützlich, wenn man z. B. die Kamera ansprechen oder einen lästiges Problem beseitigen will.

Plugins sind leider recht häufig nötig, da die unterschiedlichen mobilen Plattformen auch unterschiedliche Browser-Implementierungen bieten. Und auch wenn unter Android und iOS die Browser-Engines miteinander verwandt sind, gibt es dennoch einige wesentliche Unterschiede. Mit dem mobilen Internet Explorer in Windows Phone oder der Gecko-Engine in Firefox OS existieren weitere völlig verschiedene Implementierungen der Web-Standards.

Die leidigen Themen

Ein Beispiel für entsprechende Probleme ist der Viewport, der auf mobilen Geräten sehr wichtig ist. Manche Androidversionen ignorieren ihn gänzlich, was Workarounds erforderlich macht. Ein anderes Problem ist, dass die fixe Geräte-Ausrichtung (z.B. Landscape) auf dem iPad völlig ignoriert wird, obwohl sie auf dem iPhone prächtig funktioniert.

Ähnlich sieht es aus, wenn client-seitige Persistenz benötigt wird. Die eine Plattform unterstützt Web SQL, die andere wiederum nicht. Und da es auch kein offizieller Standard ist, bleibt noch Web Storage oder IndexedDB. Letzteres kann aber auch wieder nicht jeder Browser. Hier kann man sich jedoch mit einer Bibliothek wie z.B. http://pouchdb.com/ behelfen, die eine einheitliche Schnittstelle bietet.

04_cordova_-_apps_mit_web-technologien-02

 

Was gefällt

Andererseits lassen sich Prototypen, aber auch vollwertige Apps sehr schnell umsetzen, da es weitestgehend nur eine Code-Basis gibt – eben HTML, CSS und JavaScript. Das Schönste daran ist dann auch CSS3, das animationslastige und zugleich performante Apps ermöglicht. So war ich in der Lage, fast alle Animationen in den Apps mit CSS-Animations bzw. -Transitions umzusetzen. Als Web-Entwickler freut es mich umso mehr, wenn ich auf die aktuellsten Technologien im Web zurückgreifen kann. In Verbindung mit AngularJS und dem exzellenten Ratchet konnte ich bereits sehr gute Ergebnisse erzielen. Sollte es einmal ein Projekt geben, das wir öffentlich als Referenz nutzen dürfen, werde ich in diesem Blog gerne mit Beispielen ins Detail gehen.

Beschränkt man sich zunächst erst einmal nur auf Android und iOS, so ist auch das Testen sehr angenehm. Denn schon bevor die App ein erstes Mal auf einem Gerät läuft, kann sie im Chrome mit Hilfe der sehr guten Entwicklerwerkzeuge auf Herz und Nieren untersucht werden. Sobald die App dann auf dem Gerät läuft, bedarf es nur weniger Handgriffe, um mit Chrome bzw. Safari einen genauen Blick auf das Innenleben des Web-Views zu werfen.

Einschätzung

Cordova betrachte ich letztendlich mit einem lachenden und mit einem weinenden Auge. Einerseits ermöglicht es einen schnellen und plattformübergreifenden Produktionszyklus, der auch betriebswirtschaftlich interessant ist. Zudem stehen einem die neuesten Errungenschaften bei CSS3, HTML5 oder JavaScript zur Verfügung. Andererseits bestehen noch zu viele Inkonsistenzen zwischen den Platformen. Auch nicht jedes Plugin ist geeignet, das ein oder andere Problem zu lösen. Dennoch: Cordova wird auch weiterhin bei uns auf dem Schirm sein.

Habt ihr Erfahrungen mit plattformunabhängiger App-Entwicklung sammeln können? Welche Werkzeuge sind für euch die erste Wahl? Vielleicht Titanium, Haxe bzw. OpenFL, Adobe AIR oder auch Cordova? Lasst es uns in den Kommentaren wissen.

über den Autor

krone@pluspol.info'
Stefan ist leidenschaftlicher Gamer, Film- sowie Musikliebhaber und begeisterter Entwickler. Sein Interesse gilt den neuesten Technologien. Seine stete Unzufriedenheit mit dem Status Quo treibt ihn an, besser zu werden.



Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.