Neo Tech Blog – Data. Technologie. Mobile

HTML5 App

Hybrid App Entwicklung auf HTML5 Basis – Grenzen und Möglichkeiten (Teil 1)

Keine Kommentare


Hybride Apps auf HTML5 Basis haben viele Vorteile bei der cross platform 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 90% 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?

Wer mehr über die kommende Generation HTML5-basierter Hybrid-Apps erfahren will, kann in der Präsentation zur Mobile Tech Conference in Berlin Informationen über die nächste Generation hybrider Applikationen finden und Einblick in Live-Beispiele und Erfahrungen aus dem Projektalltag bekommen.

 

Weiter zu Teil 2: Die Zukunft von Hybrid Apps

Sidney Bofah und Christian Justus

Autor: Sidney Bofah und Christian Justus

Sidney Bofahs Passion gilt hybriden Crossplatform-Applikationen auf Basis von HTML5 & JavaScript. 2012 stieg er bei der Neofonie Mobile GmbH als Projektmanager 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.

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.