Interview mit Sidney Bofah und Christian Justus

HTML5-basierte Hybrid-Apps – einst Mantra, jetzt Realität
Kommentare

HTML5-basierte, hochperformante Hybridapplikationen gehören längst zur Praxis. Crossplattform-Entwicklung wird zur Realität. Doch was bringt die Zukunft? Wie schätzen Entwickler den Fortschritt HTML5-basierter Applikationen ein und wie ist ihr Eindruck von UI-Libraries wie famo.us? Auf der MobileTech Conference 2014 in Berlin möchten Sidney Bofah und Christian Justus, Entwickler der Neofonie Mobile GmbH, im Rahmen des Workshops „Nativ oder nicht? Die kommende Generation HTML5-basierter Hybrid-Apps“ ihre Erfahrungen an die Teilnehmer weitergeben. Der Workshop soll einen Ausblick auf die nächste Generation hybrider Applikationen anhand von Live-Beispielen und Erfahrungen aus dem Projektalltag geben.

Wir befragen Sidney Bofah und Christian Justus zu ihren Erfahrungen mit HTML5-basierten Hybrid-Apps und UI-Libraries wie famo.us, zu Veränderungen durch iOS 8 für Entwickler sowie zum Einsatz Modularer Webviews und den Neuerungen in ECMAScript 6.

Nach einigen Jahren Erfahrung mit HTML5 – ist „write once, deploy anywhere“ inzwischen wirklich Realität geworden? Welche persönlichen Erfahrungen habt Ihr gemacht?

Sidney Bofah: Tatsächlich ist dieses in den vergangenen Jahren – Jahrzehnten – bemühte Mantra heute zumindest teilweise Wirklichkeit. Das heißt: für eine Vielzahl typischer Mobile-App-Einsatzszenarios kann heute ein technologisches Implementierungsmuster gefunden werden, welches gänzlich oder zu signifikanten Teilen auf Basis von HTML5, JavaScript und CSS basiert. 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 geht.
Abweichungen von der Regel gibt es natürlich immer. Eine genaue Umkehrung ins Gegenteil ist zum Beispiel 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 das UI komplett in HTML5/JavaScript 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 nutzen wir HTML5 Canvas. 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.
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 Prozent 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.

Christian Justus: Sind die Anforderungen der App bekannt, kann ein Ineinandergreifen der Bausteine des Technology-Stacks anvisiert und notwendige Abstraktionen vorgesehen 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.

Welche sind die Bereiche, in denen die Entwicklung von HTML5-basierten Applikationen noch kritisch betrachtet werden muss? Wo liegen die Defizite?

Sidney: Typisch kritische Bereiche der HTML5-Vergangenheit waren nunmehr bereits klassische ‚CRUD’-Apps, in welchen es in erster Linie um die Darstellung aufbereiteter Daten – meist in Form langer, verschachtelter Listen – geht. Hier setzte 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-Szenarien hochrelevant, überschneidet sich hier z.B. mit einer klassischen Nachrichten-App: Beide setzen auf Drilldown-Listen, enthalten wenige variable Bausteine (z.B. Social Media Widgets) und Verlangen eine performante Scrollingroutine. Die HTML-seitige Performancelücke in Bezug auf das Rendering von Listen-Controls wurde so zur Hauptursache von Zuckerbergs bitterer Absage an HTML5 im Jahr 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 Abtrennung “alter Zöpfe”, d. h. dass auch die Implementierung einer JS-Scrollingroutine implementiert wurde. Diesen radikalen Schnitt erfolgreich durchgezogen zu haben – und das Framework somit lediglich ab Android 4/iOS 6 aufwärts anzubieten – ist meines Erachtens nach eine der größten Leistungen des Ionic-Teams.

Christian: Anders als bei der Entwicklung auf Basis nativer PSDKs gibt es im Hybridbereich keine übergeordnete Instanz, welche einen sanktionierten, empfohlenen Entwicklungs-Approach 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öglicht, und damit Dreh- und Angelpunkt der Fehlersuche ist. Eine offizielle Lösung wird in Form des WebKit-Inspektors von Apple angeboten, 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 Dokumentationen und Lernmaterial, wie sie von Apple, Google und Microsoft angeboten werden, sucht man in diesem Fall am besten bei den Anbietern des Frameworks, das 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’. 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 beispielsweise: Implementieren wir dieses Feature nativ oder nicht?

iOS 8 bringt WebGL, den Nitro-beschleunigten Mobile Safari und die runderneuerte WKWebview – und damit auch einschneidende Veränderungen für Entwickler?

Christian: Mit iOS 8 beseitigt Apple zwei unverständlich lange existierende Hindernisse für die Entwicklung von Hybrid Apps: Die neue WKWebview erhält endlich die gleiche, schnelle JavaScript-Engine, die im Mobile Safari verwendet wird. Je nach Anwendung können hier Performance-Zuwächse im zweistelligen Prozentbereich erwartet werden. Gleichzeitig bringt die WKWebview erstmals Unterstützung für WebGL und somit einen direkten Kanal zur Grafikkarte. Es gab zwar schon Third-Party-Lösungen für WebGL, diese waren aber reine WebGL-Renderer ohne HTML-Fähigkeiten, somit in erster Linie für Spiele interessant. Jetzt sind dagegen auch komplexe 3D-Anwendungen als Hybrid-App realisierbar.

Sidney: Mit iOS 8 beendet Apple eben viele Verschwörungstheorien, welche die lange fast methodisch anmutende, fehlergespickte Implementierung der UIWebview beschrieben. Die Tatsache, dass hier über mehrere Major-Releases hinweg nicht einmal zuverlässige Scrolling-Events ausgeliefert werden konnten, lotete selbst die Frustgrenzen der hartgesottensten Mobile-Devs aus. Die Leistungsfähigkeit vieler Hybrid-Teams wird oft noch an der Fähigkeit zu praktikablen Workarounds für diese Schludrigkeiten gemessen. Endlich damit abzuschließen, Parität herzustellen, ist überfällig und kommt dem User zugute, indem die freigewordene Energie in Features investiert werden kann, statt in Workarounds.

In Eurer Session sprecht Ihr auch UI-Libraries wie famo.us an, das auf den ersten Blick Staunen hervorruft. Habt Ihr schon praktische Projekterfahrung mit famo.us gemacht? Wie sahen die aus?

Christian: Famo.us ist ein extrem ambitioniertes Projekt. Das Framework deckt scheinbar alle Aspekte der UI-Entwicklung ab, von Touchinputs, einer einfachen Physik-Engine bis hin zu einer eigenen Rendering-Pipeline, der es egal sein würde, ob sie nach DOM, Canvas oder WebGL berechnet. Das Ziel dabei ist, hybride Apps losgelöst von den Vorgaben von HTML5 und CSS zu ermöglichen und so Freiheiten vergleichbar zur nativen Entwicklung zu schaffen. Der Preis hierfür ist eine relativ hohe Komplexität mit einer mehrwöchigen Lernkurve. Derzeit steht famo.us noch am Anfang, trotzdem konnte das Team gerade eine Series-B-Finanzierung über 25 Millionen US-Dollar abschließen. Derart gestärkt wird es auf jeden Fall eher gelingen, die vorhandenen Lücken zu schließen und einen Baukasten mit vorgefertigten, wirklich brauchbaren Komponenten für einen leichteren Einstieg anzubieten.

Sidney: Da nahezu kein Projekt auf der grünen Wiese entsteht, war für uns zunächst die Integration mit existierenden Frameworks wie Angular und Cordova interessant. Insellösungen wie z.B. das junge ‘Framework7’-CSS-Toolkit, welches das iOS-7-UI zu 100 Prozent in HTML5 implementiert, bleiben nur in Testballons interessant. Eine Integration mit den großen MVC-Frameworks ist ein Muss für größere Projekte. Das hehre Unterfangen vom CEO Steven Newcombe, JavaScript als endgültige Lösung für die User Interfaces auf allen Devices zu positionieren, gewinnt vor dem Hintergrund von ‘Windows Unified Apps’ an Substanz. Um jedoch alleine auf den mobilen Devices etabliert werden zu können, ist es notwendig, Webapps aus der Defensive zu holen – so dass auch spielerisch wirkende UIs mit eigenem Charakter auf reiner HTML-Basis entstehen können, die sich durch Details wie ein durch physische Attribute (vgl. UIKit Dynamics) beeinflusstes Szenenmodell hervortun. Das frühe Release der famous/angular-Integration hat uns hier positiv überrascht. Der modulare Aufbau des Frameworks ermöglicht die schrittweise Ergänzung oder den Einsatz in einzelnen Features. Das Zusammenfließen der technologischen Bemühungen wird dann hoffentlich in den Features WebGL-Renderer und dynamisch aktualisierbarer Cordova-Wrapper evident. Für uns ist aufgrund der Leistungsfähigkeit die Integration mit Ionic von Interesse. Erste Smoketests sprechen hier eine eindeutig positive Sprache.

Modulare Webviews sind dank Projekten wie Cordova 4.0 und Crosswalk im Aufschwung, doch haben sie eine Chance, sich zu etablieren?

Christian: Modulare Webviews können die Entwicklungskosten erheblich reduzieren, da sie die möglichen Divergenzen von Referenzplattform und Implementierung gegen Null bewegen. Sprich, wenn heute eine Applikation für das gebräuchliche ‘‘iOS oder Android” entsteht (und HTML-basiert ist), dann ist damit eigentlich eine relativ große Bandbreite von WebKit-Implementierungen gemeint, welche je nach Zahl der anvisierten Betriebssystem- und Devicespezifikation variiert. In der Praxis läuft ein auf Android 4.4 tadellos lauffähiges UI auf Android 4.2, 4.3 oder gar 4.3.1 jedoch anders oder gar nicht, wie dies erwartet worden ist. Teilweise liefern die Komponenten nicht einmal grundlegende JS-Events, so dass effizientes Arbeiten oft Workaround Engineering bedeutet.

Sidney: Hinzu kommt auch noch das Fehlen des in Kit Kat neuen Chrome Remote Debugger, so dass eine Live-Debugging-Session nur mit Third-Party-Tools wie JSHybugger notwendig war. Liefert man seine eigene Webview mit, schlägt man drei Fliegen mit einer Klappe: 1. Ist die Wahrscheinlichkeit hoch, dass ein QA-Mitarbeiter die App genauso schon mal in der Hand hatte, 2. wird auf einen Schlag das Potpourri der Webviews unter Android 2.3 – 4.4 auf einen aktuellen Stand vereinheitlicht und 3. erhält man eine entschlackte, auf die Hybridnutzung optimierte Webview, von der man erwarten kann, dass der Overhead klein gehalten wird. Perspektivisch betrachtet ist die Payload-Größe der App ein wichtiger Punkt, da das Datenvolumen nicht unverhältnismäßig groß sein wird. Der Webview-Overhead bei der Installation früherer Cordova-Crosswalk-Projekte lag bei ca. 30 bis 40 MB. Nach eigenen Angaben schafft es das Team von famo.us mittlerweile, diesen Payload mit dem hauseigenen Wrapper auf 10 MB zu reduzieren.

Zur Person:

Sidney BofahMit einem Jahrzehnt Erfahrung in der Webentwicklung gilt Sidney Bofahs Passion hybriden Crossplatform-Applikationen auf Basis von HTML5 & JavaScript. Nach dem Studium der BWL mit den Schwerpunkten Wirtschaftsinformatik und strategische Unternehmensführung (FU Berlin / Diplom) und des Internationalen Managements (University of Westminster, London / BA) folgten berufliche Stationen in der Wissenschaft, Entwicklung und Beratung. Sidney stieg 2012 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.

Christian JustusChristian Justus erwarb sein Diplom in angewandten Medienwissenschaften an der Technischen Universität Ilmenau. Nach seinem Studium gründete er ein Startup, das er als „Teilzeit-CEO“ führt. Nach vielen Jahren Erfahrung als Frontend-Webentwickler setzte er 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.

MobileTech Conference 2014

MobileTech Conference 2014

Mobile-Interessierte aufgepasst! Jede Menge spannende Sessions rund um Android, iOS und das Mobile-Web gibt es auf der MobileTech Conference, die vom 1. bis 4. September in Berlin stattfindet und mit mehr als 60 renommierten Mobile-Experten aufwartet. Als Teilnehmer kann man zusätzlich auch die Sessions der gleichzeitig stattfindenden Internet of Things Conference kostenlos besuchen. Wer sich bis für 3 Konferenztage zusätzlich das Intellibook-Tablet mit Android-OS, 7,85 Zoll-HD-Touch-Display und Dual-Core Rockchip-Prozessor als Geschenk oben drauf. Im Rahmen des Kollegenrabatts (3+ Kollegen) spart man ferner 10 Prozent extra. Alle Infos auf der MobileTech Conference Homepage. 

Aufmacherbild: colorful application icons hand Foto via Shutterstock / Urheberrecht: My Life Graphic

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -