Was sind Hybride Apps?

Hybride Apps verbinden die Vorteile aus nativer und mobiler Website. Sie haben auf HTML5 Basis viele Vorteile bei der crossplattform Entwicklung. Zahlreiche Tools stellen im Zusammenspiel mit schnellen Devices die Notwendigkeit nativer Umsetzungen immer öfter in Frage. Doch wo liegen die Grenzen hybrider Apps? Sidney Bofah und Christian Justus von Neofonie Mobile berichten von ihrer Erfahrung mit HTML5-basierten Hybrid-Apps und UI-Libraries.

Bei der Entwicklung von HTML5 Hybrid Applikationen können für eine Vielzahl typischer Mobile-App-Einsatzszenarios technologische Implementierungsmuster gefunden werden, welche gänzlich oder zu signifikanten Teilen auf Basis von HTML5, JS und CSS basieren. Hier gilt die Faustregel: Während eine rein HTML-basierte Implementierung auf Daten- und Logikebene auf den großen mobilen Browserplattformen anpassungsfrei lauffähig ist, wird der plattformspezifisch notwendige Anpassungsgrad umso höher, je weiter es Richtung User Interface (UI) geht.

Auf UI-Ebene gelten andere Spielregeln – zum einen aufgrund von Performancefragen, zum anderen aufgrund konzeptioneller Herausforderungen, wie den Umgang mit Plattform-Interface-Charakteristika. Ein auch zu gelungener HTML-Nachbau eines nativen UI-Elements wird als solcher bewusst oder unbewusst erkannt, mit negativen Folgen für User Engagement (“The Uncanny Valley of UX”). Findet sich dieses Element zudem auf dem “falschen” System wieder, so vergibt man die Chance, von gelernten Plattformkonventionen profitieren zu können, z.B. ist eine “UITabBar” auf Android fehl am Platz.

Es gibt aber auch Ausnahmen, was die die User Interface Anpassung angeht. Ein Beispiel hierfür ist die Photo-To-Print-App eines führenden Fotobuchanbieters. Hier erfolgt die ressourcenaufwändige Umwandlung der Bilddaten innerhalb der App, so dass die Fotos druckfertig an das Backend des Kunden geliefert werden. Während die UI komplett in HTML5/JS umgesetzt ist, greift auf Businesslogik-Ebene eine Weiche, die entscheidet, wie das “Number Crunching“ der Bilddaten lokal erfolgen soll, ob nativ oder via JavaScript. Für die Darstellung der Bildbearbeitungsinteraktion wird HTML5 Canvas genutzt. Hier setzt Apple eine harte Restriktion auf 5 Megabyte, was für ein qualitativ hochwertiges Print-Fotobuch nicht ausreicht. Die App wählt zur Laufzeit also je nach Kontext und Plattform die richtige Umwandlungstechnik, und kann so unter iOS z.B. die GPU zur schnellen Bearbeitung optimal auslasten.

Sind die Anforderungen der App bekannt, kann ein Ineinandergreifen der Bausteine des Technology-Stacks anvisiert und notwendige Abstraktionen vorgesehen werden und auf diese Weise letztlich eine einheitliche Codebasis geschaffen werden. Im Fotobuch-Projekt ist das Resultat eine Codebase für alle großen mobilen Plattformen (iOS iPhone / iPad, Android Phones / Tablets, Windows Phone, Windows 8.1),  zuzüglich des Browsers. Dieses Entwicklungsmodell – eine kooperative oder kompetitive Prototypenphase vor Festschreibung der Detailspezifikation – hat sich bei unseren Kunden bewährt.

HTML5 – App Defizite

Anders als bei der Entwicklung auf Basis nativer PSDKs gibt es im Hybridbereich keine übergeordnete Instanz, welche einen sanktionierten, empfohlenen Entwicklungsapproach inklusive Hochleistungstools und Referenzimplementierungen bereitstellt. Dadurch erhält man sehr viele Freiheiten – nach den ersten Erfolgen stößt man aber oft auf Probleme im Detail oder man sieht sich durch unintuitive Entwicklerworkflows eingeschränkt. Ein Praxisbeispiel ist der WebKit-View-Debugger – ein Werkzeug, welches die Live-Inspektion von WebViews zur Laufzeit ermöglich, und damit Dreh- und Angelpunkt der Fehlersuche ist. Eine offizielle Lösung wird in Form des WebKit-Inspektors von Apple angeboten eingebunden, auf Android sind bis zu Version 4.3 Lösungen von Drittherstellern notwendig. Dabei ist bei den kommenden HTML5-Einsatzszenarien ein hochwertiges UI-Tooling unabdinglich, um z.B. Flaschenhälse in einer WebGL-Pipeline zu erkennen.

Hochwertige Dokumentation und Lernmaterial, wie sie von Apple, Google und Microsoft angeboten werden, sucht man in diesem Fall am besten bei den Anbietern der Frameworks, welches man für die Entwicklung gewählt hat – in unseren Liveprojekten sind dies z.B. die Tutorials von egghead.io (AngularJS), oder die ambitionierte ‚Famous University’.

Umgehung von HTML5-seitigen Performancelücken

Typisch kritische Bereiche der HTML5-Vergangenheit waren zudem klassische ‚CRUD’-Apps, in welchen es in erster Linie um die Darstellung aufbereiteter Daten – meist in Form langer, verschachtelter Listen – geht. Hier setzt das flüssige Scrolling langer Listen lange Zeit arkanes Geheimwissen voraus – insbesondere, wenn es um mehr als nur iOS ging. Dabei ist diese Interaktion mit Datenbanken auch im Kontext von B2B-Szenarios hochrelevant. Die HTML-seitige Performancelücke in Bezug auf das Rendering von Listen-Controls wurde so zur Hauptursache von Zuckerbergs bitterer Absage an HTML5 in 2012. Besserung erfolgte einerseits auf Tooling-Seite, andererseits auf Seite der Browserintegration. Paradebeispiel ist das Ionic Framework, das effektive native Lösungsansätze als Inspiration für eine JavaScript-Implementierung nutzt. Als Praxisbeispiel kann die vielzitierte Listenansicht dienen: Das ‚Recycling’ von Einträgen, welches die Darstellung scheinbar unendlich langer Listen durch cleveres Speichermanagement ermöglicht, ist eine Anleihe aus der iOS UITableView. Möglich wurden diese Meilensteine indes nur durch die Implementierung einer JS-Scrollingroutine.

Um bei der Suche nach pragmatischen Lösungen keine Zeit zu verlieren, ist Erfahrung immer noch unschätzbar wertvoll. Da geht es um ganz prinzipielle Fragen, wie z.B. Implementieren wir dieses Feature nativ oder nicht?

Mobile Lösungen

Erfahren Sie mehr zu unserer Mobile Kompetenz

Autoren: Sidney Bofah & Christian Justus

SidneyChristian

Sidney Bofahs Passion gilt hybriden Crossplatform-Applikationen auf Basis von HTML5 & JavaScript. 2012 stieg er bei der Neofonie Mobile GmbH alsProjektmanager ein und begleitete seitdem als Project Lead und Technical Lead zahlreiche native und hybride Applikationsprojekte für iOS, Android und Windows. Seit März 2014 verantwortet er den Bereich Business Development. Nach vielen Jahren Erfahrung als Frontend-Webentwickler setzte Christian Justus 2013 seine erste hybride Mobile Applikation mit AngularJS und Cordova um. Seitdem hat Christian bei Neofonie Mobile als Senior Web Developer und federführender Frontend-Architekt einen wesentlichen Beitrag zu allen HTML5-basierten Projekten geleistet.

Das könnte Sie auch interessieren

android-car

Konnektivität im Auto – Möglichkeit und Chancen

| Mobile Business | No Comments
Immer mehr Fahrzeughersteller öffnen ihre Fahrer-Informations-Displays für Apps. Damit hat die nächste Runde der digitalen Revolution im Auto begonnen. Denn jetzt bestimmen wir als Fahrer die Inhalte auf dem Fahrzeug-Display. Möglich...
App CMS - Aktuelles Neofonie

Wie 300 Apps am Tag mit einem App-Baukasten produziert werden

| Mobile Business | No Comments
Jonas Mücke ist Java Programmierer bei Neofonie. In der Blog-Serie “Digitalmacher” gibt er einen Einblick in seine Arbeit und spricht über die Technologien und Herausforderungen bei der Entwicklung eines “App-Baukastens”....
Serious Games Beispiel

Mit iBeacons neue Unterhaltungswerte schaffen

| Mobile Business | No Comments
Nur wenige Artikel über das Thema iBeacons kommen ohne den Hinweis aus, dass diese Technik perfekt für die Nutzung in Kulturstätten wie Museen geeignet sei. Diese Einschätzung ist grundsätzlich richtig,...

Data. Services. Technologies.