Cross-Plattform Mobile Entwicklung

Da in letzter Zeit das iPhone und iPad immer mehr Konkurrenz bekommt - vor allem von Android - müssen immer mehr Applikationen auf mehr als nur einer Plattform entwickelt werden, um das Zielpublikum zu erreichen. Um zu vermeiden die gleiche App für mehrere Umgebungen entwickeln zu müssen - und damit meistens praktisch den doppelten Aufwand zu haben - werden immer mehr Tools und Frameworks entwickelt, womit man mit einer App alle Smartphones und Tablets erreichen kann.

Native Apps generieren

Hierfür gibt es prinzipiell zwei Möglichkeiten: Einerseits kann man auf ein Framework setzen, das mithilfe eines Compilers native Applikationen erzeugt und damit auch das jeweilige “Look and Feel” automatisch von der Plattform übernimmt. Ein Beispiel hierfür ist Appcelerator Titanum Mobile, der es erlaubt mithilfe einer proprietären Entwicklungsumgebung und Javascript native Applikationen für iPhone und Android zu erzeugen. Ermöglicht wird dies dadurch, dass der Entwickler mit JavaScript nicht HTML, sondern direkt native Widgets ansprechen kann. Vor allem auf iPhone erreicht dies bereits ein wirklich gutes Look and Feel sowie brauchbare Performance. Jedoch weder die Umgebung noch das Ergebnis auf Android ist wirklich überzeugend - und für weitere Plattformen muss man auf entsprechende Updates warten.

HTML5

Allerdings unterstützen alle modernen Smartphones HTML 5, CSS 3 und JavaScript, womit sich leicht interaktive Anwendungen entwickeln lassen. Dies hat den Vorteil, dass meistens keine neue Technologie erlernt werden muss, da HTML5 und JavaScript wohl jedem Webentwickler bekannt sein dürfte. Jedoch kann mit HTML lediglich der Look and Feel der Zielplattformen nachgeahmt werden und fühlt sich bei weitem nicht so an wie die gleichen “nativen” Apps. Dies wird zwar bereits wesentlich durch diverse Frameworks erleichtert und wird von Version zu Version besser, aber es ist wohl nicht zu erwarten, dass diese an die Performance von nativ entwickelten Apps jemals heran kommen.

Native Wrapper / “Rahmen Apps”

Das Erste was man benötigt, um mithilfe von HTML5 eine “App” zu Entwickeln ist ein “Wrapper” bzw. Rahmen in dem der HTML und Javascript code ausgeliefert und geladen wird. Dieser ist auch dafür zuständig etwaige native Features des Smartphones bzw. Tablets zur Verfügung zu stellen. Zum Beispiel wenn Zugriff auf GPS oder sonstige Sensoren benötigt wird.

Phonegap ist eine Open Source Wrapper App, die momentan die meisten Zielplattformen unterstützt. Unter anderem iOS, Android, Blackberry, Web OS und Windows Mobile.

HTML5 & JavaScript UI Frameworks

Um Applikationen entwickeln zu können die auch wirklich wie “Apps” aussehen und sich dementsprechend verhalten, benötigt man noch ein UI Framework das es ermöglicht das native “Look and Feel” zu immitieren. Hierzu gehören Widgets wie Textboxen, Slider, Dialoge, sowie Layouts als auch Transition Animationen. Zu den UI Frameworks mit den meisten Features zählen: jQuery Mobile (MIT License), jQ Touch (MIT License), Sencha Touch (GPL) und Unify (MIT + Apache License). All diese Frameworks haben ihre ganz eigenen Vor- und Nachteile. Die einfachste Unterscheidung ist durch deren Zielplattform: jQ Touch ist nur auf Smartphones (derzeit nur iOS) optimiert, während die anderen auch versuchen Features für Tables bereit zu stellen.

Unify ist speziell darauf abgestimmt mit Phonegap verwendet zu werden. Es zielt darauf ab das “native” Feeling mit HTML5 / JavaScript zu vermitteln - sowohl auf Smartphones und Tablets als auch am Desktop. Prinzipiell scheint es ein vielversprechendes Projekt zu sein, das sich momentan allerdings in meinen Augen noch im Anfangsstadion befindet.

jQuery Mobile macht dagegen - obwohl derzeit erst die Alpha Version von 1.0 released wurde - einen sehr ausgereiften Eindruck, auch wenn noch einige Probleme ungelöst scheinen.

Probleme

Im Grunde leiden alle UI Frameworks an den selben drei fundamentalen Problemen:

• position:fixed: So einfach es klingt - jede App benötigt eine Navigation am oberen Rand (z.B. für “Back”-Button oder sonstige Elemente) sowie oftmals auch Tabs am unteren Rand (vor allem bei Android) - Um dies zu erreichen, könnte man in HTML/CSS3 einfach das Attribut position:fixed; verwenden - Leider ist dies weder im Browser von iOS noch von Android unterstützt. Elemente mit position:fixed; scrollen mit bzw. werden am Ende vom Scrollen repositioniert. Die einzige aktuelle Lösung ist mithilfe von JavaScript das Scrollen von der Applikation selbst machen zu lassen, statt dem “nativen” Scrollen (z.B. mithilfe von iScroll) - Dies wirkt allerdings derzeit meist sehr ruckelig und bei weitem nicht so wie das der jeweiligen Plattformen.
• Transitions: Das Überblenden beim Wechsel zwischen Dialogen wird von iOS mithilfe von Javascript und CSS Attributen erlaubt und funktioniert dort zumeist sehr gut und flüssig, allerdings ist die Übersetzung auf Android teilweise anders und wesentlich langsamer.
• Natives Look and Feel: Dies ist wohl das Problem, das am längsten bestehen bleiben wird - Jede Zielplattform hat seine eigenen Conventions und Bräuche. Eine iPhone App braucht immer einen Software-Backbutton, Tabs unter Android sind meistens oben, nicht unten, Android Apps haben immer ein “Options Menü” das man über den Hardware-Button aktivieren kann, etc. All diese Dinge werden beim Entwickeln von nativen Applikationen immer berücksichtigt - jedoch nimmt noch kein UI Framework darauf Rücksicht. Für Perfektionisten ist es damit weiterhin notwendig auf alle Platform zugeschnittene UI Designs zu machen, um die jeweilige Usability sicher zu stellen.

Fazit

Wenn man eine App für Smartphones plant, ist es wichtig zu berücksichtigen wie sich die Zielgruppe verändern wird. Wenn immer nur eine oder maximal zwei Plattformen benötigt werden für eine App mit beschränktem Umfang, lohnt es sich wahrscheinlich die Usability so sehr zu optimieren und sie tatsächlich zwei Mal zu implementieren. Für langfristige Projekte kann man allerdings davon ausgehen, dass man durchaus Mithilfe von HTML5, CSS und JavaScript brauchbare, userfreundliche Apps entwickeln kann - Vor allem wenn die bestehenden Frameworks noch die letzten Probleme lösen. Das UI Design und Testen auf allen Plattformen nimmt einem natürlich kein Framework ab.

Meine persönlichen Favorites sind derzeit Phonegap mit jQuery Mobile - und der Hoffnung, dass das ScrollView Experiment bald richtig funktioniert.