Mobile App-Entwicklung: Web Apps

30. September 2013

Nachdem ich im letzten Blogbeitrag die native App-Entwicklung beschrieben habe und auf Vor- sowie Nachteile eingegangen wurde, folgt im nachfolgenden Artikel die Entwicklung von Web Apps. Diese machen einige der Cross-Plattform-Nachteile von nativen Apps wett, sind aber auch keine Allzweckwaffe, wie zu sehen sein wird.

Begriffsklärung

Man kann argumentieren, dass es sich bei einer Web App gar nicht um eine “App” im klassischen Sinn handelt, denn sie wird nicht auf einem mobilen Gerät installiert, sondern wie eine normale Webseite oder eine klassische Webanwendung in einem Browser per URL aufgerufen. Gängige mobile Betriebssysteme bieten allerdings die Möglichkeit, eine Web-URL auf dem Startbildschirm zu hinterlegen und die dahinter liegende Seite auf dieser Ansicht wie eine App wirken zu lassen.

Doch auch in vielen anderen Aspekten grenzt sich eine Web App von klassischen Webseiten, mobilen Webseiten-Ansichten und Webanwendungen ab, wodurch der Begriff der “App” gerechtfertigt wird. So versuchen Web Apps mit UI-Bibliotheken wie jQuery Mobile oder Sencha Touch oftmals das Look&Feel von Apps auf gängigen mobilen Betriebssystemen nachzubilden. Dazu gehört nicht nur das Aussehen von UI-Controls, sondern auch typische Gesten und Animationen beim Auslösen einer Aktion. Auch lassen sich Webseiten zoomen und frei verschieben, Web Apps hingegen nicht – sie gleichen hier dem Verhalten einer nativen App.

Klassische Webanwendungen bestehen aus mehreren Seiten und ein Seitenwechsel bei Navigation durch den Benutzer führt zum Laden der neuen Seite im Browser. Im Gegensatz dazu werden Web Apps typischerweise als Single Page Application (SPA) realisiert. Dabei werden alle anzuzeigenden Inhalte entweder beim ersten Laden der Seite abgerufen und bei einer Benutzeraktion dynamisch ausgetauscht. Oder weitere Inhalte werden dynamisch abgerufen und in die Seite injiziert. Realisiert wird dies in JavaScript, wobei meist ebenfalls Bibliotheken wie jQuery Mobile oder Sencha Touch zum Einsatz kommen. Mit SPAs wird verhindert, dass es zu einem Browser-Refresh durch Neuladen einer Seite kommt, was zu einem schlechten Benutzererlebnis führt. Der SPA-Ansatz führt dazu, dass beispielsweise Animationen bei Seitenübergängen verwendet werden können, was die Web App wie eine native App wirken lässt.

Web Apps haben in den letzten Jahren vor allem durch die Fortschritte im Bereich der modernen Webentwicklung mit verbesserten Webtechnologien und Browsern an Popularität gewonnen. Das Ganze fand im Dunstkreis von HTML5 statt, ist aber eher auf die Weiterentwicklung populärer JavaScript-Bibliotheken zurückzuführen als tatsächlich auf den HTML5-Standard. Und so kommen bei Web Apps oftmals auch populäre JavaScript-Bibliotheken wie AngularJS, KnockoutJS, EmberJS und jQuery zum Einsatz, um dynamische Ansichten bereitzustellen und die Entwicklung einer wartbaren JavaScript-Codebasis zu unterstützen.

Zur Optimierung von Web Apps für unterschiedliche Formfaktoren (Phone, Tablet, …) lässt sich in einem gewissen Rahmen die Responsive-Webdesign-Technik anwenden. Dabei wird die Darstellung der App an das Zielgerät angepasst, indem z.B. sekundäre Inhalte ausgeblendet werden oder die Größe von Schriften, Bildern etc. angepasst wird. Technisch realisiert wird dies vor allem durch CSS3 Media Queries, auch Bibliotheken wie Bootstrap haben sich hier in letzter Zeit erfolgreich etabliert. Responsive Webdesign hat aber auch seine Grenzen. Generell sollte gerade bei Apps überlegt werden, wie das UI-Design auf verschiedenen Formfaktoren aussehen soll. Und wenn z.B. die Tablet-Ansicht mit ihren Inhalten stark von der Phone-Ansicht abweicht, kann es Sinn machen, auf voneinander getrennte UIs statt auf eine UI mit Responsive Webdesign zu setzen.

Vorteile

Durch ihre Aufrufbarkeit in einem beliebigen Browser sind Web Apps grundsätzlich Cross-Plattform-kompatibel, d.h. sie laufen auf jeder Plattform, die einen Browser besitzt. So können auch neue Plattformen adressiert werden, auf denen die Web App grundsätzlich lauffähig ist. Damit gewinnen Unternehmen Zukunftssicherheit. Wenn sie sich heute für eine Plattform entscheiden, können sie diese Plattform zukünftig wechseln und trotzdem bestehende Web Apps weiter verwenden. Außerdem lassen sich BYOD-Szenarien mit mehreren Zielplattformen einfach realisieren – eine Web App muss nur einmal geschrieben werden und ist auf vielen Plattformen lauffähig. Web Apps bieten demnach die Vorteile geringerer Kosten und einer geringeren Time to Market bei Cross-Plattform-Entwicklung (was ein Wettbewerbsvorteil sein kann), zudem können Unternehmen flexibel auf Änderungen im mobilen Bereich reagieren.

Web Apps haben die größte Reichweite. Da sie von überall per URL aufgerufen werden können, wird der Kundenkreis nicht beschnitten, wie es bei nativer Entwicklung mit der Beschränkung auf spezielle Plattformen der Fall ist. Ebenso müssen sich Web Apps nicht den Diktaten von App Stores beugen. Ein Deployment findet unmittelbar durch Bereitstellung einer Webseite statt, auch Updates stehen unmittelbar zur Verfügung, ohne dass ein App-Store-Zertifizierungsprozess notwendig ist. Auch die Versionierungsproblematik wird gelöst, da alle Benutzer bei Aufruf der URL stets auf dem aktuellen Codestand agieren.

Last but not least ist Wissen im Bereich Webtechnologien unternehmensintern oftmals bereits vorhanden, zudem kann für Web Apps erlerntes Know How später weiterverwendet werden (Investitionsschutz). Für neue Plattformen sind keine neuen Technologien zu adaptieren, um Apps entwickeln zu können. Weiterhin gibt es deutlich mehr Entwickler mit Web-Know-How als mit Erfahrung in nativer App-Entwicklung und auch im Internet findet man eine Unmenge an Informationen zum Thema Webentwicklung.

Nachteile

Web Apps sind nicht nativ, dabei eingesetzte Bibliotheken imitieren lediglich das Verhalten und Aussehen nativer Controls, sind aber immer an die Browser-Engine als Ausführungsumgebung gebunden. Das hat Auswirkungen auf die Performance und das Look&Feel von Web Apps. Diese können nicht zu 100% mit nativer Entwicklung mithalten, was als Kompromiss vor allem bei anspruchsvollen Consumer-Apps häufig nicht geduldet werden kann.

Die Cross-Plattform-Fähigkeit wird teilweise durch das unterschiedliche Verhalten der Browser auf unterschiedlichen Plattformen eingeschränkt – eine Problematik, die schon seit jeher mit HTML besteht, teilweise aber dadurch kompensiert werden kann, dass man sich auf “moderne Browser” beschränkt. Zudem kann die Performance bei komplexen Ansichten je nach eingesetzter JavaScript-Bibliothek auf verschiedenen Plattformen stark abweichen. Auch sollte man sich darüber bewusst sein, dass eine Web App prinzipiell eine “fits all”-Lösung in Bezug auf die umgesetzte UI darstellt. Unterschiedliche UI-Philosophien der unterschiedlichen Plattformen zu berücksichtigen ist mit einer UI kaum möglich, daher müssen oft Kompromisse gefunden werden. Dies führt dazu, dass sich eine Web App auf unterschiedlichen Plattformen eben doch nicht anfühlt wie eine native App, was zu einem schlechten Benutzererlebnis führen kann und sich wieder in Consumer-Szenarien/B2C oftmals verbietet (in Unternehmens-Szenarien/B2E aber durchaus annehmbar ist).

Web Apps können im Vergleich zu nativen/Hybrid Apps nicht auf Gerätefunktionen zugreifen, die über die Funktionalität des HTML5-Standards hinausgehen. Auch die Integration in das Betriebssystem wie z.B. die Unterstützung von Hardware-Buttons oder eine Behandlung des App Lifecycles sind generell nicht möglich. Auch Security kann ein Thema sein, da der Sourcecode der Web App im Browser sichtbar gemacht werden kann. Zudem ist keine sichere Offline-Haltung von Daten möglich, wenn der HTML5-Storage verwendet wird.

Da eine Web App per URL aufgerufen wird, muss immer eine Internetverbindung bestehen, um die App zu starten. Offline-Fähigkeit ist somit nicht möglich. Zudem kann es zu hohen Ladezeiten kommen, wenn die App sehr groß ist, was in mobilen Szenarien oft nicht gewünscht ist.

Nicht zuletzt kann die freie Verteilung von Web Apps auch ein Problem darstellen, denn Web Apps lassen sich nicht in gängige App Stores unter iOS, Android oder Windows einstellen. Sie sind somit für viele Anwender zunächst einmal nicht auffindbar (kein Problem im B2E-Bereich). Ebenfalls muss somit die Monetarisierung von Web Apps anders gelöst werden.

Einsatzgebiete

Web Apps eignen sich vor allem im internen Unternehmensbereich (B2E), da hierbei mit vergleichbar geringen Kosten und geringem Zeitaufwand eine App entwickelt werden kann, die in vielen Punkten wie eine native App wirkt, für mobile Endgeräte optimiert ist und womit sich Unternehmen gleichzeitig die Flexibilität der Plattformwahl bewahren. So kann zukünftig mit weniger Reibungsverlust die Plattform gewechselt bzw. eine neue Plattform adaptiert werden, zudem eignet sich eine Web App in BYOD-Szenarien, wenn mehrere Plattformen unterstützt werden sollen.

In Consumer-Szenarien/B2C sind Web Apps denkbar, wenn möglichst vielen Kunden Zugriff auf die App gegeben werden soll, ohne für jede Plattform eine neue App schreiben zu müssen. Gleichzeitig eignen sich Web Apps, wenn Inhalte in Suchmaschinen auffindbar sein sollen und wenn sie nicht über einen App Store verteilt werden müssen. Eine Web App sollte aber generell nur zum Einsatz kommen, wenn der Kompromiss bzgl. Look&Feel, Performance und Plattform-Integration tragbar ist, ansonsten sollte native App-Entwicklung favorisiert werden.

Geeignete Szenarien für Web Apps umfassen die meisten unternehmensinternen Business-Apps, Produktivitäts-Apps, Tools und Utilities sowie Information/News Apps.

Fazit und Ausblick

Web Apps haben aufgrund des Einsatzes von Webtechnologien auf Basis offener Webstandards einige Vorteile im Bereich Cross-Plattform-Entwicklung, die sie von nativen Apps abgrenzen und positiv hervorheben. Gerade im B2E-Bereich können Web Apps ihre Vorteile häufig ausspielen, weshalb der erkennbare Trend hin zu Web Apps gerechtfertigt erscheint. Dem stehen allerdings auch etliche Nachteile gegenüber, die vor allem in Consumer-Szenarien oft nicht tragbar sind.

Es sei auch darauf hingewiesen, dass die Entwicklung von Web Apps ein sehr dynamisches Feld ist, in dem es derzeit viel Bewegung gibt. Die entsprechenden Technologien und JavaScript-Bibliotheken werden stetig besser, sind aber teilweise noch nicht ganz ausgereift, was an der ein oder anderen Stelle zusätzlichen Aufwand bedeutet. Der rasante Fortschritt im Bereich der Webtechnologien bedeutet aber auch, dass perspektivisch in der Entwicklung von Web Apps noch mehr Musik als bisher spielen wird und Unternehmen, die sich heute Wissen in diesem Bereich aneignen, zukünftig von der Entwicklung profitieren werden.

Im nächsten Blogbeitrag möchte ich auf Hybrid-Apps eingehen, die eine Brücke zwischen Web Apps und nativen Apps schlagen und dadurch einige Vorteile, aber auch ein paar Nachteile, beider Welten vereinen.