Cross-platform Entwicklung mit PhoneGap und Ionic

von am 29.10.2014
0
featured_image

Wer heutzutage eine App für Smartphones entwickeln will, muss eigentlich mindestens die beiden grossen Plattformen Android und iOS unterstützen. Wer überdies ein Herz für „mobile Randgruppen“ mit Windows Phones oder gar Blackberrys, FirefoxOS und wie sie alle heissen hat, wird schnell merken, dass die native Entwicklung für ein breiteres Publikum – gelinde ausgedrückt – etwas aufwändig wird. PhoneGap kann hier einen Ausweg bieten.

PhoneGap/Cordova

Mit PhoneGap können Applikationen mit HTML, CSS und JavaScript für unterschiedliche Mobilplattformen erstellt werden. Das UI einer PhoneGap Applikation ist eine Web Browser View der jeweiligen Mobilplattform ohne die üblichen Navigationselemente des Browsers. Die von PhoneGap verwendete Web View ist dieselbe wie diejenige, die vom nativen OS benutzt wird. Im Vergleich mit einem cross-platform Framework wie Xamarin, bei der nie die Möglichkeit besteht, den gesamten Code über alle Plattformen hinweg wiederzuverwenden, kann der Code Reuse mit PhoneGap im Idealfall bis zu 100% betragen. (Bei Xamarin kann zwar die Businesslogik geteilt werden, aber falls man mit Xamarin Forms nicht zum Ziel kommt, muss das UI für die unterschiedlichen Plattformen separat oder gar native implementiert werden.)

Quelle: http://phonegap.com/2012/05/02/phonegap-explained-visually/

Über die Plugin Architektur von PhoneGap kann ausserdem in eingeschränktem Rahmen auf die Funktionalität bzw. die Hardware der Endgeräte zugegriffen werden. Dazu kann der findige Entwickler für die gewünschten Plattformen entweder ein eigenes Plugin schreiben, oder noch einfacher, sich aus einem der bereits bestehenden und recht breiten Plugin Repositories bedienen. Um ein eigenes Plugin zu programmieren, ist für jede zu unterstützende Plattform ein Stück native Code erforderlich. Dieser kann schlussendlich über ein JavaScript Interface aus der Web Applikation heraus angesprochen werden. Unter folgendem Link findet sich ein ausführlicher Guide zum Implementieren eines eigenen Plugins.

Ionic

Nach diesem kurzen Abriss zu PhoneGap im Allgemeinen soll hier ein UI-Framework vorgestellt werden, welches das Entwickeln mit PhoneGap vor allem für Web-Entwickler besonders attraktiv macht – Ionic. Hinter diesem klingenden Namen verbirgt sich ein HTML 5 Framework, welches speziell für die native Applikationsentwicklung auf mobilen Endgeräten entwickelt wurde. Ionic benötigt Angular.js um sein volles Potenzial ausschöpfen zu können und wird daher sinnvollerweise auch in einer Angular.js Web Applikation eingesetzt. Es bietet bereits einige Basis UI Komponenten, welche ziemlich einfach genutzt und auch erweitert werden können. Auf diese Weise kann eine Webapplikation mit einer recht ansprechenden Oberfläche schnell und komfortabel aufgebaut werden. Zu den wichtigsten UI Komponenten gehören Side-Menus, Formularelemente, Buttons, Tabs, Listen mit eingebauter Editier- und Löschfunktionalität, Card Layouts und vieles mehr.

Quelle: http://ionicframework.com

Ein sehr interessanter – manch einer mag auch sagen matchentscheidender – Vorteil von Ionic ist die spezielle Optimierung der UI Komponenten für aktuelle Mobile Browser mit minimalen DOM Manipulationen, ohne jQuery und mit hardware-beschleunigten Animationen. So soll gemäss Hersteller ein grosser Performance Gewinn etwa im Vergleich zu anderen UI Frameworks erzielt werden. Aus der Vergangenheit kennt man PhoneGap-Apps, die auf Basis von jQuery Mobile entstanden. Diese reagieren oft unglaublich schwerfällig auf Benutzereingaben und antworten nach dem Klick auf einen Button manchmal erst mit Verzögerungen im Sekundenbereich. Dies fühlt sich einerseits alles andere als native an und führt andererseits immer wieder zu Fehleingaben.

Praxistauglichkeit

Nach Vergleichen in der Praxis können wir dann auch bestätigen, dass die Performance einer Ionic-PhoneGap Applikation recht ordentlich ist. Natürlich gibt es auch hier manchmal Verzögerungen bei der Eingabe, aber es ist im Grossen und Ganzen recht flüssig zu bedienen. Auffällig ist jedoch der Performance Unterschied zwischen den verschiedenen mobilen Plattformen. iOS reagiert um einiges flotter auf Benutzereingaben als Android. Auch die Animationen laufen flüssiger ab. Eine ganz spannende Webseite zu diesem Thema ist PropertyCross.com. Hier wurde eine nicht-triviale App zum Durchsuchen von Immobilienangeboten mit unterschiedlichen cross-platform Frameworks umgesetzt und auf die Möglichkeiten der Code-Wiederverwendung untersucht. Die Resultate dazu sind visuell sehr gut zusammengefasst und die jeweilige Implementation lässt sich zumindest für Android direkt von  der Webseite herunterladen und ausprobieren. Auf diese Weise bekommt man als Entwickler bereits einen guten ersten Eindruck wie sich das entsprechende Framework auf dem Endgerät anfühlt. Somit kann auch gleich die von Ionic propagierte Performance Optimierung gut mit derjenigen von anderen Frameworks verglichen werden.

Quelle: http://propertycross.com/ionic/

Ionic unterstützt momentan offiziell nur Android 4+ und iOS 6+, was für mich als Windows Phone Benutzer schon fast ein K.O.-Kriterium ist. Allerdings basteln die fleissigen Ionic-Entwickler gemäss diversen Foreneinträgen bereits an der Unterstützung für WP8. Leider scheinen diese Anstrengungen in jüngster Zeit jedoch zu Gunsten „wichtigerer Herausforderungen“ wieder zurückgestellt worden zu sein. Nach Tests mit meinem Windows Phone lässt sich die Anwendung zwar kompilieren und auf dem Gerät installieren, zeigt jedoch nur einen schwarzen Screen, was dem Benutzererlebnis der eigenen App natürlich nicht unbedingt zuträglich sein dürfte. Neben Windows Phone ist auch der Support von Firefox OS geplant.

Folgende Schritte führen zur ersten eigenen PhoneGap Applikation mit Ionic für Android:

  1. Node.js herunterladen und installieren
  2. PhoneGap installieren  (cordova und PhoneGap sind dabei austauschbar)
c:\> npm install –g cordova/PhoneGap
  1. Ionic installieren
c:\> npm install –g ionic
  1. Ein neues Projekt starten (wobei es unterschiedliche Ionic App Templates gibt)
c:\> ionic start [appName] sidemenu
  1. Ins app Verzeichnis wechseln
  2. Android als Zielplattform hinzufügen
c:\[pathToApp]\[appName]> ionic platform add android
  1. Ausführen der Anwendung
c:\[pathToApp]\[appName]> ionic run android
  1. Die Anwendung wird kompiliert und ausgeführt. Ist ein Android Mobiltelefon angeschlossen und Debugging über ADB aktiviert wird die Applikation direkt auf dem Endgerät installiert, andernfalls wird die Anwendung im Android Emulator gestartet

Einfach, oder?

Can-I-Use?

Fazit aus der Geschichte: Die native Applikationsentwicklung mit PhoneGap und Ionic im Speziellen (aber auch anderen HTML 5 Frameworks im Allgemeinen) eignet sich momentan hervorragend zur Entwicklung von einfacheren, nicht sehr rechenintensiven Apps. Applikationen, welche ein typisches Seitenlayout im Stil einer Webseite haben und beispielsweise mit Tabs und Listen arbeiten, sind ideal. Im Optimalfall wird bei der Entwicklung sogar erst zusammengetragen, welche UI Komponenten vonnöten sind, danach wird diese Liste mit den bereits in Ionic enthaltenen abgeglichen.

Mit „einfacheren Apps“ ist in diesem Kontext vor allem der Zugriff auf die Mobiltelefonhardware gemeint. Muss die Anwendung lediglich übers Netzwerk kommunizieren oder allenfalls ein Foto aufnehmen können, ist das selbstverständlich überhaupt kein Problem. Und somit kann auch die nächste kongeniale Selfie-App problemlos mit PhoneGap und Ionic entwickelt werden.

Pferdefuss PhoneGap Plugins

Ganz allgemein kann ausserdem konstatiert werden, dass es, sobald Hardware Zugriff erforderlich wird, eine ziemlich gute Idee ist, sich vor dem Entscheid eingehend mit den bereits bestehenden Plugins und den Möglichkeiten von HTML5 zu beschäftigen. Hierbei muss eruiert werden, ob der geforderte Hardware Zugriff damit überhaupt möglich ist. Falls ja, sollte das entsprechende Plugin oder Java Script vor dem Start der Entwicklung unbedingt mit allen benötigten Mobile OS Plattformen auf Tauglichkeit getestet werden. Es ist gut möglich, dass ein Plugin beispielsweise gar nicht für alle Plattformen entwickelt wurde oder schlicht und ergreifend einfach nicht funktioniert.

Falls noch kein Plugin für die gewünschte Funktionalität existiert, kann die Entwicklung eines eigenen Plugins einen Ausweg bieten. Allerdings ist hierbei wie bereits erwähnt native Code vonnöten und es muss natürlich wiederum vorgängig abgeklärt werden, ob und in welchem Umfang die Zielplattform die angestrebte Funktionalität überhaupt unterstützt. Und genau an dieser Stelle liegt auch der Hund begraben! Ist beispielsweise der Zugriff auf Kamera und Geolocation, etc. relativ leicht möglich, gibt es andere Hardware Schnittstellen, die auf den verschiedenen Plattformen mit unterschiedlichen Restriktionen belegt sind. Teilweise ist der Zugriff sogar unmöglich. Auch das Verhalten des Mobiltelefons beim Zugriff auf eine Hardware API kann auf den verschiedenen Betriebssystemen unterschiedlich sein. Grund dafür sind die erwähnten unterschiedlichen (Sicherheits-) Restriktionen oder Programmierparadigmen der einzelnen Plattformen.

Als Beispiel soll hier das Ausführen eines Tasks der HTML 5 Applikation in einem  Background Service angeführt werden. Unter Android besteht die Möglichkeit, einen eigenen Background Service in Native-Code zu implementieren. Dieser Service kann den Code der Web Applikation dann im Hintergrund weiter ausführen. Ein How-To zum Erstellen eines Background Services mit einer PhoneGap Applikation für Android findet sich unter „Create a Service on Android with a PhoneGap Application“.

iOS hingegen nutzt eine andere Art des Multitasking und erlaubt die Ausführung von Hintergrund Tasks nur in sehr beschränktem Masse. Seit der 7. Inkarnation des Betriebssystems besteht beispielsweise die Möglichkeit der Nutzung der „Background Fetch“ oder „Remote Notification“ Features. Hinter diesen Features steckt jedoch ein anderer Gedanke als beim Android Background Service und es existieren grobe Einschränkungen bei der Einsatzmöglichkeit. Weitere Informationen können dem hier verlinkten Stack Overflow Thread entnommen werden. Windows Phone bringt für derartige Anforderungen die so genannten Background Agents mit. Aber auch diese unterliegen von Haus aus etlichen Restriktionen.

Spätestens zu diesem Zeitpunkt sollten dann auch Xamarin oder gar die native Entwicklung wieder in die Abklärungen mit einbezogen werden, da der cross-platform Ansatz mit PhoneGap möglicherweise nicht der richtige Weg ist. Weitere Infos zur cross-platform Entwicklung mit Xamarin sind übrigens ebenfalls in unserem Blog oder bei Kerry Lothrop zu finden.

Hilfe – soll ich PhoneGap nun einsetzen?

Nach dieser Fülle an Informationen mag es etwas schwierig sein, die Pro- bzw. Contra-Argumente gegeneinander abzuwägen. Der potenzielle PhoneGap Nutzer fragt sich nun möglicherweise „to PhoneGap or not to PhoneGap“? Für derartige Glaubensfragen soll folgendes Flussdiagramm dem geneigten Leser die Entscheidung erleichtern und einen Anhaltspunkt liefern, wann es eine gute Idee sein könnte PhoneGap einzusetzen und in welchem Fall vom Verzehr abgeraten wird:

flowchart_caniuse

Eigene Darstellung

Weiterführende Links

Weitere Beiträge zum Thema finden Sie unter:

Einen Kommentar hinterlassen

Ihre E-Mail-Adresse wird weder veröffentlicht noch weitergegeben. Pflichtfelder sind mit einem * markiert.