Die letzte Technologie die wir uns im Rahmen dieser Blogreihe anschauen sind die Hybrid Apps. Falls Sie den vorherigen Artikel zu den Progressive Web Apps nicht gelesen haben, sollten Sie dies unbedingt tun, bevor Sie diesen Artikel lesen. In diesem Artikel wird erklärt was eine Hybrid App ist, was die Vor- und Nachteile einer Hybrid App sind und welche Risiken und Abhängigkeiten bei der Entwicklung entstehen. Des Weiteren werden die möglichen Technologien zur Entwicklung einer Hybrid App vorgestellt und das entsprechende Know-How am Markt untersucht. Danach werden Entwicklungskosten und -aufwand überprüft und anschließend wird der Artikel mit der Beispiel App abgeschlossen.
Blogreihe
Hier finden Sie die Auflistung der einzelnen Blogartikel, die zur Blogreihe gehören. Diese Agenda wird mit jedem neu veröffentlichten Artikel erweitert.
Hybrid Apps
Hybrid Apps
Eine Hybrid App ist eine Web App, die mit Hilfe von einem Wrapper als „normale“ App verpackt wird. Ähnlich wie eine PWA läuft die Hybrid App in einer WebView, welche ein verpacktes Browser Fenster ist. Das bedeutet, dass die App in einer WebView läuft und von einem Nativen Wrapper umgeben ist. Für die eigentliche App kommen daher auch alle gängigen Web-Technologien in Frage. Man kann demnach auch eine fertige PWA nehmen und diese, mit kleinen Modifikationen, mit einem solchen Wrapper umgeben. Der grundlegende Unterschied ist allerdings, dass der Wrapper mit Hilfe einer Bridge die nativen Features nutzbar macht. Außerdem können Hybrid Apps in den App Store des Gerätes geladen werden.
Vor- und Nachteile
Ein großer Vorteil ist, wie auch schon bei vorherigen Technologien, dass ein großer Teil des Codes wiederverwendet werden kann. Der Code von Hybriden Apps lässt sich in zwei Teile aufteilen. In die Web App und den Wrapper. Die Web App lässt sich plattformunabhängig wiederverwenden, während der Wrapper teilweise abgeändert werden muss. Aufgrund der hohen Wiederverwendbarkeit des Codes, sinken auch die Entwicklungskosten im Vergleich zur nativen Entwicklung oder der Entwicklung mit nicht-nativen Frameworks.
Genauso wie bei den Progressive Web Apps, werden für die Entwicklung keine nativen Entwickler benötigt, sondern nur noch Web Entwickler und solche, die sich mit dem entsprechenden Wrapper auskennen. Mit Hybriden Apps ist es möglich die nativen Features zu nutzen. Allerdings benötigt man dafür viele extra Plugins, welche wiederum mit nativem Code geschrieben werden müssen. Benötigt man also viele native Features könnte man zusätzlich native Entwickler benötigen, die die Plugins schreiben können.
Aufgrund der WebView entsteht genauso wie bei den Progressive Web Apps das Look & Feel Problem. Eine Hybride App benutzt nicht die nativen Komponenten und hat demnach nicht das native Look & Feel. Dadurch sehen die Apps auf allen Plattformen gleich aus. Außerdem ist eine Hybride App, wie eine PWA auch, durch die WebView in Performance Hinsicht eingeschränkt.
Risiken und Abhängigkeiten
Bei der Entwicklung von Hybriden Apps ist man wieder stark abhängig von Third-Party-Plugins, wenn man native Features nutzen möchte. Das birgt das Risiko, dass Plugins veralten oder auf anderen Plugins aufbauen, die veralten. Außerdem bestehen teilweise Abhängigkeiten zwischen den Technologien zur Entwicklung hybrider Apps.
Da Hybride Apps unter der Haube genauso wie PWAs eine WebView nutzen ist man auch wieder abhängig von dem verwendeten Browser. Diese Abhängigkeit bezieht sich aber im Falle hybrider Apps nicht auf die Nutzung von nativen Funktionalitäten.
Technologien und Markt Know-how
Der Inhalt einer Hybrid App nutzt die Entwicklungsmöglichkeiten einer Web App. Das bedeutet hier bietet sich die Möglichkeit an, die gleichen Technologien zu verwenden, wie bei einer Progressive Web App oder auch direkt eine fertige Web App. Beispiele für Wrapper sind Apache Cordova oder PhoneGap. Apache Cordova wurde ursprünglich von der Firma Nitobi entwickelt, welche 2011 von Adobe gekauft wurde. Adobe hat daraufhin PhoneGap entwickelt, welches auf Apache Cordova basiert und anschließend Cordova als Open-Source Projekt veröffentlicht.
Ein weiteres Framework zur Entwicklung von Hybriden Apps ist das Ionic Framework. Ionic ist ein Framework, welches die Möglichkeit bietet mit React, Angular oder Vue eine Web App zu bauen und dabei native Features nutzen, welche von Apache Cordova oder Capacitor verfügbar gemacht werden. Capacitor ist ein weiteres Framework, welches ähnlich zu Cordova und PhoneGap ist und sogar kompatibel mit Cordova Plugins ist.
Anhand der Statistiken erkennt man, dass die Beliebtheit der Hybriden Apps nicht so hoch ist wie bei anderen Technologien. Aus einer Statista Umfrage geht hervor, dass Software Developer die genannten Frameworks, im Vergleich zum letzten Jahr, weniger verwenden. Cordova wird nur noch von 18% der Befragten genutzt, wobei es im Vorjahr noch 29% waren. Die Nutzung von Ionic ist von 28% auf 18% gesunken und PhoneGap wird noch von 6% der zuvor 11% genutzt.
Auch die Suchergebnisse nach Jobs zeigen, dass die Frameworks nicht sehr gefragt sind. Bei Indeed liefert Cordova 39 Ergebnisse und Phone Gap 50, während Ionic sogar 195 Ergebnisse liefert. Stack Overflow liefert für Cordova 62 Ergebnisse, für PhoneGap 3 und für Ionic 13. Besonders im Vergleich zu den vorherigen Technologien zeigen die Frameworks für hybride Apps deutlich weniger Beliebtheit und vor allem auch einen zurückgehenden Trend.
Entwicklungsaufwand und -kosten
Die Entwicklung einer Hybrid App lässt sich in zwei Teile teilen. Zum einen in die Entwicklung einer Web App, welche später in der Web View angezeigt wird und zum anderen in die Entwicklung des Wrappers um die Web App. Die Entwicklung der Web App benötigt nur Web Developer und lässt sich mit dem Entwicklungsaufwand einer PWA vergleichen. Bei der Verwendung des Wrappers kann es vorkommen, dass für einige Plugins native Entwickler benötigt werden.
Der Gesamtentwicklungsaufwand liegt dementsprechend etwas höher als bei einer Progressive Web App, aber immer noch niedriger als bei der nativen Entwicklung. Der Entwicklungsaufwand wäre demnach in etwa vergleichbar mit der Entwicklung mit nicht-nativen Frameworks.
Beispiel-App
Die Beispiel-App wurde anders aufgesetzt als die bisherigen. Als Web App wurde keine neue Anwendung entwickelt, sondern die zuvor entwickelte PWA verwendet. Diese wurde dann mit Hilfe des PhoneGap Frameworks zu einer Hybriden App verwandelt. Durch die Verwendung der zuvor entwickelten PWA sind die Features, welche allein durch die WebView realisierbar waren, weiterhin erfüllt. Dazu gehört die Logik der Knöpfe und der Uhr an sich. Lediglich die Vibration und die Wiedergabe des nativen Wecker-Tons können von dem Framework übernommen werden.
Der Wecker-Ton ließ sich recht einfach implementieren mit dem Third-Party-Plugin cordova-plugin-nativesounds. Die Vibration war schon vom Browser möglich, führte allerdings bei der Umstellung auf eine hybride App zu Problemen. Da das System nicht mehr eine Instanz des Browsers sieht, sondern davon überzeugt wird, dass eine native App läuft, müssen für die Nutzung der Geräte-Vibration explizite Berechtigungen im, in diesem Beispiel nativen Android-Code, der um die WebView läuft, erteilt werden. Durch die eher mager beschriebene Dokumentation und durch fehlende Dokumentation über das implementieren einer fertigen PWA mit PhoneGap, dauerte die Entdeckung der Lösung relativ lange.
Hier nochmal der Erfüllungsgrad der einzelnen Features in einer Tabelle.
++: Feature ist vollständig umgesetzt
+-: Feature ist nur teilweise umgesetzt
--: Feature ist gar nicht umgesetzt
| Anforderung | Erfüllt | Anmerkung |
|---|---|---|
| Uhr | ++ | |
| Runde Progressbar | ++ | |
| Picker für die Zeit | ++ | |
| Play-Button | ++ | |
| Reset-Button | ++ | |
| Vibration | ++ | explizite Permissions notwendig |
| Wecker-Ton | ++ | Third-Party-Plugin |
Wenn Sie die nächsten Artikel der Blogreihe "Technologien mobiler Anwendungen" nicht verpassen wollen, dann folgen Sie newcubator auf den
Social Media Kanälen und schauen Sie regelmäßig auf unserer Blogseite vorbei. Im
nächsten Artikel vergleichen wir alle bisher vorgestellten Technologien auf
technischer Ebene miteinander.
