Hybrid Apps – Das Beste von Web- und Native Code

otto-ipad-app

Es hat bereits viele Diskussionen über die Vor- und Nachteile von Mobile Web und nativen Apps gegeben. OTTO selbst hat die iPad App hybrid entwickelt. In diesen Beitrag werden wir mehr auf die Vorteile beider Technologien eingehen und nennen Beispiele, wie man diese elegant kombinieren kann. Wir gehen weniger auf eine triviale Pro- und Contra Liste ein, welche bereits genügend im Netz zu finden sind. Wir werden erklären, warum wir uns für die hybride Lösung entschieden haben und weswegen wir keine Cross-Frameworks empfehlen.

Unsere iPad-App hat gerade den 1-jährigen Geburtstag gefeiert. Der Fokus wurde auf Fashion gesetzt und dient als virtuelles Schaufenster für die Kunden. Mit aktuellen Trends und zusammengestellten Outfits wird man zu neuer Kleidung inspiriert. Die sogenannten Schaufenster nennen wir intern Decks, welche jede Woche aktualisiert werden.

otto-ipad-app

An dieser Stelle hat die Web-Technologie den großen Vorteil, dass die Inhalte jederzeit aktualisiert werden können, was neben den Decks ebenfalls auch für diverse Settings für uns essenziell ist. Insbesondere wenn nach dem Deployment ein Fehler aufgefallen ist, müssen wir darüber die Kontrolle behalten und sicherstellen, dass für dringende Updates keine Abhängigkeiten zum Apple Review Prozess bestehen. Des Weiteren ist das technische Know-How weiter verbreitet. Es stehen wesentlich mehr Experten in der Web Entwicklung zur Verfügung. Dann gibt es noch das Pro-Argument, dass eine Web-Anwendung systemunabhängig ist.

Es besteht weiterhin eine sehr große Nachfrage in App-Stores. Dafür gibt es diverse Gründe und damit ist es für viele Unternehmen eine hervorragende Möglichkeit, Produkte über diese Plattform zu vertreiben. Die User haben inzwischen ein ausgeprägtes Feingefühl für Details und Qualität. Die Ansprüche an intuitiver User Interfaces und zuverlässiger Software nehmen permanent zu. Wenn die Apps mit der nativen Sprache des Systems (Objective-C/iOS oder Java/Android) entwickelt werden, kann die UI mit bewährten Bedienkonzepten direkt verwendet werden. Es geht hierbei um das Feeling der User und es ist empfehlenswert, UI Elemente nicht mit Web-Technologien zu emulieren. Ein großer Teil der User bevorzugt auch die Software mit Features, welche sich mit Web Pages nicht vergleichbar oder gar nicht umsetzen lassen. Des Weiteren haben native Apps eine deutlich hohe Performance.

Für uns sind die Vorteile beider Technologien relevant, womit sich einige Nachteile von selbst ausschließen. Damit haben wir uns für die Entwicklung einer Hybrid App entschieden. Wir sind uns bewusst darüber, dass es dafür Frameworks gibt. Während PhoneGap als simpler Wrapper dient und das Ansprechen weniger Hardware-Funktionen wie z.B. Kontaktbuch, Kompass oder die Kammera unterstützt, steht bei Titanium eine große Auswahl an nativen Funktionen zur Verfügung, welche die API der iOS Umgebung via JavaScript direkt ansprechen können und gar kein HTML verwenden.

hybrid-app-definition

Die Hersteller werben damit, dass man Apps mit der gleichen Codebase für mehrere Systeme entwickeln kann. Für triviale Apps funktioniert es, sobald diese allerdings komplexer werden und schwer reproduzierbare Bugs auftreten, wird es jedoch wieder zunehmend kompliziert und aufwändig. Oft arbeitet ein Feature ausschließlich in iOS, während es in der anderen Umgebung wieder kaputt geht. Der Zeitvorteil in der Entwicklung wird damit wieder relativiert. Des Weiteren hat sich gezeigt, dass beim Build-Prozess wieder ein Spezialist gefragt ist, welcher sich mit dem ensprechden System auskennt. Dazu bestehen Abhängigkeiten zum Hersteller des Frameworks. Sobald Apple oder Google die API’s ändern, muss das entsprechende Framework nachziehen. Es kann sehr an den Nerven zehren, wenn die App fehlerhaft beim Kunden liegt, das Update abgewartet werden muss, um dann noch die Aktualisierung durch das Apple Review zu bekommen. In dieser Zeit können Tage und Wochen vergehen, was für professionelle Apps nicht tragbar ist.

performance-native-hybrid-html5-apps

Damit hatten wir uns entschieden, eine Multi-Device-Platform (MDP) auf Basis von Java zu entwickeln, welche die Web Inhalte an die Mobile Devices bzw. an die iPad App sendet. Die MDP sendet ebenfalls diverse Konfigurationsdateien im JSON Format, welche vom nativen Code der App verarbeitet werden. In den Konfigurationsdateien haben wir neben vielen anderen Einstellungsparametern auch so genannte Feature-Toggles, womit wir jedes Feature jederzeit an- und ausschalten können. Besonders intensiv arbeiten wir auch mit Deck Konfigurationen, womit alle Informationen sich in einer JSON Datei befinden, welche dann von der App zu vollständigen Decks (Schaufenster zum Swipen) geparst werden. Jede Artikel Seite ist wiederum eine Web View, in welcher das HTML von der MDP gerendert wird.

Der größte Teil der UI ist nativ umgesetzt, weil wir mit HTML/JS keine vergleichbare Qualität erreicht haben. Auch bei dem neuen Feature „Lieblinge“ (auch bekannt als Favorites) ist es eine gute Entscheidung gewesen, weil sich diese Bedienung angenehm snappig anfühlt, die Animationen sauber laufen und einfach zu implementieren sind. Es lässt sich beliebig und unkompliziert erweitern, was bei manchen Ideen wie z.B. dem Anordnen der Elemente, mit JavaScript eine größere Herausforderung werden könnte, ohne eine vergleichbare Haptik.

Die Hybrid Kommunikation der App mit dem MDP Server erfordert einen soliden Unterbau. In der iPad App versenden wir verschiedene Events über das NotificationCenter, welches als Basis für ein Publisher/Subscriber Pattern verwendet wird. Damit können die Web Views miteinander kommunizieren und wechselseitig Daten an nativen Code senden. Sobald ein Datenaustausch mit der MDP stattfindet, müssen alle Daten validiert und weitere Sicherheitsaspekte bedacht werden.

Mit diesem Technologie Stack haben wir das Beste aus beiden Welten kombiniert. Wir haben mehr Kontrolle und Flexibilität über unsere Apps mit weniger Abhängigkeiten.