11.02.2021 | Simon Paesler | 12 min Lesezeit
merken
Stern Icon
Stern Icon
Briefumschlag Iconper E-Mail erinnern X Icon
Ladekreisel
Bitte geben Sie eine E-Mail Adresse ein!
Das Datum darf nicht in der Vergangenheit liegen!
Stern Icondiesen Artikel merken
Stern Icondieser Artikel ist auf der Merkliste

App-Entwicklungsansätze im Vergleich: Funktionsumfang, Bibliotheken, UI und Workflow-Effizienz

-

Im ersten Teil dieses Beitrages wurden die Unterschiede in der Entwicklung nativer, hybrider und webbasierter Apps bereits in Bezug auf Komplexität, Übersichtlichkeit und Code-Umfang verdeutlicht. In diesem Teil werden die drei Ansätze nun auf Funktionsumfang, unterstützte Bibliotheken, UI und Design-Erstellung, Dokumentation sowie Workflow-Effizienz überprüft.

Funktionsumfang und unterstützte Bibliotheken

-

Ein wichtiger Punkt, auf den bei der Technologiewahl unbedingt geachtet werden muss, ist die Auswahl der bereits vorhandenen Bibliotheken und der Funktionsumfang der Sprache. Während der Entwicklung stellen sich zum Beispiel die Frage: wieviele Funktionen müssen selbst implementiert werden und wo kann auf fertige Bibliotheken zurückgegriffen werden? Alle drei Methoden unterstützen inzwischen fast alles, was für eine komplexe App benötigt wird. Trotzdem hat jede Technologie ihre Vorteile, wenn es um bestimmte Bereiche der App-Entwicklung geht.

Native Entwicklung
Die native Entwicklung hat ihre Stärken bei der Kommunikation mit Geräteschnittstellen. Das Benutzen der Kamera, GPS oder Bluetooth muss nicht über Anwendungscontainer wie Apache Cordova angefragt werden, sondern die App kann direkt auf Interfaces des Mobilgerätes zugreifen. Falls der Fokus der App auf umfangreicherem Austausch mit Geräteschnittstellen liegt, ist native Entwicklung die einzig vernünftige Lösung. In dieser Hinsicht bietet die native Sprache eines Gerätes (noch) mit Abstand den größten Funktionsumfang und die besten Anpassungsmöglichkeiten.

Build-Management-Automatisierungs-Tool wie Gradle bieten außerdem die Möglichkeit, auf eine Vielzahl von fertigen Bibliotheken zurückzugreifen und diese mit wenig Aufwand in eine App zu integrieren. Weil native Entwicklung lange die einzige Lösung in der App-Entwicklung war, ist die Auswahl inzwischen durchaus beachtlich.

Webtechnologien
Webbasierte Frameworks bieten den Vorteil, dass, bis auf wenige Ausnahmen, alle JavaScript Funktionen, die im Browser funktionieren, verwendet werden können. JavaScript, auf dem TypeScript basiert, hat seine Stärken vor Allem im asynchronen Laden von Daten, wie es auf fast allen Websiten verwendet wird. Die Nutzung von Promises und Callbackfunktionen ermöglicht es Entwicklern, im Hintergrund der App Daten zu laden ohne dass der UI-Thread davon beeinträchtigt wird. Dies hat den Vorteil, dass die App für den Benutzer sehr flüssig wirkt. Inzwischen ist es auch mit Webframeworks möglich, auf Gerätefunktionen wie die Kamera zurückzugreifen. Der Funktionsumfang ist aber deutlich eingeschränkter als mit nativen Technologien.

Beim Design der App bieten Webapps den Vorteil, dass Cascading Style Sheets (CSS) verwendet werden können. Hierzu finden sich unzählige Beispiele im Internet. Bei Bedarf kann auch mit relativ wenig Aufwand die UI einer Website kopiert werden, was sich z.B. bei Firmen anbietet, die bereits eine Website haben und sich bei ihrer App an deren Styling orientieren wollen.

Mithilfe des Node Package Managers (npm) ist es sehr einfach, auf eine Vielzahl von fertigen Bibliotheken zurückzugreifen. Da JavaScript bereits seit 1995 verwendet wird, gibt es inzwischen für alles eine fertige Lösung und die Wahrscheinlichkeit ist relativ gering, dass Funktionen abseits der Businesslogik selbst implementiert werden müssen.

Hybridtechnologien
Da Hybridtechnologien noch mit Abstand die Neuesten am Markt sind, ist hier der Funktionsumfang noch am kleinsten. Mit großen Firmen wie Google im Rücken ist aber zu erwarten, dass dieser noch weiter wachsen wird. Alle wichtigen Funktionen wie asynchrones Laden von Daten oder das Zurückgreifen auf Gerätefunktionen sind aber auch hier bereits problemlos möglich.

Der Package Manager pub.dev ermöglicht auch bei Flutter eine einfach Einbindung von Bibliotheken. Alle wichtigen Packages von großen Firmen oder Technologien sind hier bereits verfügbar. Beispiele hierfür wären das sqlite für eine lokale Datenbank oder firebase.core für eine Anbindung an Google’s Cloud-Plattform.

Da viele die Zukunft der App-Entwicklung in Hybridtechnologien sehen und die Beliebtheit von Frameworks wie Flutter weiter zunimmt, ist davon auszugehen, dass in Zukunft noch viele weitere Entwickler Bibliotheken veröffentlichen werden. So muss mit der Zeit immer weniger Aufwand mit dem Schreiben von Standardfunktionen verbracht werden.

UI und Design-Erstellung

-

Ein wichtiger Faktor, der viel Entwicklungsaufwand bedeuten und den Unterschied zwischen guten und schlechten Apps ausmachen kann, ist das UI. Daher werden die Tools analysiert und verglichen, die die Erstellung des Layouts erleichtern sollen.

Android Studio Layout Editor
Android stellt mit dem Android Studio Layout Editor eine grafische Oberfläche bereit, in der mithilfe von Drag-and-drop Elementen die Benutzeroberfläche “zusammengebaut” werden kann. Für schnelles Prototyping oder das grobe Umsetzen einer Vorlage eignet sich der Layout Editor gut, sobald jedoch feinere Änderungen, z.B. das Scrollverhalten einer Liste, vorgenommen werden sollen, ist er teilweise recht umständlich zu bedienen. In diesem Fall ist es dann meist effizienter die gewünschte Änderung direkt im Code vorzunehmen. Dennoch muss auch hier, analog zu Java, deutlich mehr Code geschrieben werden als für dasselbe Layout in einer der anderen Technologien.

Ein weiterer Punkt, der beachtet werden muss, ist die große Anzahl an verfügbaren Layouts. Sind Designanforderungen genauestens bekannt, mag dies eine Hilfe sein, anfangs wirkt es doch häufig verwirrend. Komplexere User Interfaces sind mit Android Studio problemlos umsetzbar, es ist nur mit verhältnismäßig viel Aufwand verbunden.

Ionic Creator
Der browserbasierte Layout Editor wirkt im Vergleich zu dem Android Studio Editor deutlich schlanker und aufgeräumter. Auch die Benutzung fühlt sich einfacher und flüssiger an. Ionic stellt eine große Anzahl an vorgefertigten UI-Komponenten zur Verfügung, die per Drag-and-drop in einen Handy-ähnlichen Frame gezogen werden können. So müssen auch komplexere Element, wie eine Landkarte oder ein Videoplayer, nicht selbst implementiert werden. Schlussendlich kann aus dem Layout HTML erzeugt werden, das direkt im Ionic Projekt verwendet werden kann. Wenn man keinen grafischen Editor benutzen möchte, hat man alternativ die Möglichkeit HTML mit CSS zu verwenden. Dies bietet den Vorteil, dass viele vorgefertigte Layouts im Internet existieren und direkt übernommen werden können.

Flutter Widget Maker
Flutter bietet bis jetzt noch keinen offiziellen Editor. Mehrere Open-Source Projekte befinden sich aber aktuell in der Entwicklungsphase und sehen vielversprechend aus. Einer davon ist der ebenfalls browserbasierte Flutter Widget Maker. Er ist, bis auf kleine Unterschiede, analog zum Ionic Creator und bietet Möglichkeiten Templates direkt als Widgets in Flutter-Projekte zu importieren.

 

Komplexe Designs und UI-Animationen lassen sich mit allen drei Technologien umsetzen. Ionic kann alle zur Verfügung stehenden Webtechnologien nutzen und sich so an einer großen Menge von Beispielen bedienen. Native Entwicklung mit Java ist in der Umsetzung etwas komplizierter und manchmal etwas umständlich. Flutter sticht durch seine Einfachheit deutlich hervor. Viele vorgefertigte Widgets wie Center oder Row beschleunigen die Realisierung eines Designs enorm. Auch komplexe Animationen lassen sich mit verhältnismäßig wenig Aufwand in kurzer Zeit umsetzen.

Dokumentation

-

Eine wichtige Rolle beim Zurechtfinden und der Entwicklung mit neuen Technologien sind die verfügbaren Dokumentationen. Fragen, die sich stellen sind unter anderem: Wie detailliert und umfangreich sind sie? Finde ich Hilfe, wenn ich bei einem Problem nicht weiterkomme? Hatte jemand schon einmal dasselbe Problem wie ich und hat es gelöst?

Ausführliche Dokumentationen findet man bei allen drei Entwicklungsmöglichkeiten. Hervorzuheben ist aber, dass die Android Dokumentation von Java nicht sehr praxisbezogen ist. Man findet viele Erklärungen zu Klassenparametern und verfügbaren Funktionen, nicht aber wie diese anzuwenden sind. Ionic und Flutter machen es besser und glänzen mit ausführlichen Code-Beispielen. Ionic hat in seiner Dokumentation eine Live-View des erklärten Codes in einem Handyframe eingebettet. So ist sofort ersichtlich, was genau eine Komponente eigentlich macht und wie sie aussehen kann. Dies ist für die Vorstellungskraft enorm hilfreich und dient zur Inspiration für die eigene App. Flutter hingegen stellt unter anderem Videos über einzelne Widgets bereit, die deren Funktionsweise erläutern. Viele Beispiele sollen Möglichkeiten aufzeigen und helfen bei der Auswahl der richtigen Komponenten.

Workflow-Effizienz

-

Um die Unterschiede im Entwicklungsworkflow zu vergleichen, müssen die jeweiligen Command Line Interfaces und Entwicklungsumgebungen genauer betrachtet werden. Diese sind unter anderem dazu da, automatisch Code zu erzeugen, der immer gleich aussieht.
In Java wäre das die Activity, bei Flutter das Widget. Beide können mit Android Studio relativ einfach über Befehle erzeugt werden. Ein Component in Ionic kann ebenfalls mit wenig Aufwand über das Ionic-CLI erstellt werden. Der Aufwand hierbei lässt sich als ungefähr gleich einschätzen.

Zum besseren Verständnis hier der typische Ablauf in der App-Entwicklung, der sich pro Tag mehrere Male wiederholt:

  1. Schreiben des Codes in der Entwicklungsumgebung
  2. Speichern der Datei
  3. Kompilieren der App
  4. Starten der App auf einem Emulator oder im Browser
  5. Funktionsfähigkeit des entwickelten Codes untersuchen und testen

Die Schritte eins, zwei und fünf sind bei allen Technologien analog. Der gravierende Unterschied findet sich in der Kompilierung in Schritt drei und vier wieder. Dies ist dem Unterschied in der Compilertechnologie geschuldet. Ionic und Flutter nutzen einen Just-in-Time Compiler (JIT), wohingegen Android mit Java typischerweise einen Ahead-of-Time Compiler (AOT) nutzt.

Just-in-Time Compiler
Sie haben in der Entwicklung den großen Vorteil, dass sie den Code erst zur Laufzeit kompilieren und nicht bevor die App gestartet wird. Es wird also alles erst dann kompiliert, wenn es gebraucht wird. Dies ist vor allem in der Entwicklungsphase hilfreich, da die App nur den entsprechenden Teil neu laden muss, der vom Entwickler verändert wurde.

Ahead-of-Time Compiler
Sie werden üblicherweise für Production Builds eingesetzt und haben gegenüber JIT-Compilern den Vorteil, dass das generierte Programm deutlich performanter läuft. Dieser Vorteil kann aber in der Entwicklung durchaus vernachlässigt werden. Der Nachteil ist aber, dass die Dauer des Kompilierungsvorganges deutlich erhöht wird.

Konkret für die Entwicklung bedeutet das: Während man bei der Java-App immer manuell die gesamte App neu kompilieren muss, bedienen sich Webtechnologien und Flutter dem sogenannten Hot-Reload. Über Einstellungen in der Entwicklungsumgebung
kann der Hot-Reload getriggert werden, sobald eine Datei gespeichert wird. Dann wird der Teil der App, der verändert wurde automatisch direkt neu geladen. Wenn die App in einem Emulator oder im Browser läuft, ist sie immer aktuell und muss nicht manuell neu gestartet werden. Schritt zwei und drei entfallen also und werden vom JIT-Compiler automatisch gestartet, sobald Schritt zwei ausgeführt wurde. Mit einem JIT-Compiler muss also deutlich weniger Zeit mit Warten verbracht werden. Bei einem einzelnen Kompiliervorgang werden nur wenige Sekunden gespart, dies summiert sich aber über den Tag verteilt zu einer nicht zu vernachlässigenden Dauer auf.

Übersicht zum Vergleich nativer, hybrider und webbasierter App-Entwicklung

-

nativ (Java)

hybrid (Flutter)

webbasiert (Ionic)

Komplexität der Sprache

+ gute Lesbarkeit der Sprache

– zu viel Boilerplate-Code

+ Wahl zwischen objektorientierter oder funktionaler Programmierung

+ leicht verständlich und unkompliziert

+ viele Möglichkeiten (z.B. UI-Animationen)

+ Wahl zwischen objektorientierter oder funktionaler Programmierung

Übersichtlichkeit

& Umfang des Codes

– erhöhter Code-Umfang

+ gute Übersichtlichkeit

+ geringer Code-Umfang

+ gute Übersichtlichkeit

+ geringer Code-Umfang

Funktionsumfang & unterstützte Bibliotheken

+ gute Kommunikation mit Geräteschnittstellen

+ Vielzahl fertiger Bibliotheken

– Noch relativ geringer Funktionsumfang

+ asynchrones Laden von Daten

+ Vielzahl fertiger Bibliotheken

UI und Design-Erstellung

– umständlich für feine Anpassungen

+ viele verfügbare Layouts

+ einfache Benutzung

– noch kein offizieller Editor

+ viele vorgefertigte UI-Komponenten

+ einfache Benutzung

Dokumentation

– nicht praxisbezogen

+ ausführliche Code-Beispiele

+ Videos zur Funktionsweise einzelner Widgets

+ ausführliche Code-Beispiele

+ Live-View

Workflow-Effizienz

– manuelle Kompilierung

– erhöhte Kompilierdauer

+ Hot-Reload

+ geringe Kompilierdauer

+ Hot-Reload

+ geringe Kompilierdauer

Fazit und Ausblick

-

Noch vor wenigen Jahren gab es kaum echte Alternativen zur nativen App-Entwicklung. Im Zuge der Digitalisierung wird die Nachfrage nach Apps immer größer. So haben sich inzwischen echte Wettbewerber am Markt etabliert, die viele Kinderkrankheiten bereits
hinter sich gelassen haben. Viele Frameworks bieten inzwischen deutliche Vorteile gegenüber nativer Entwicklung und vereinfachen viele Prozesse. Wer 2020 eine neue App entwickelt, der sollte Hybrid und Webapps durchaus in Betracht ziehen, da diese mit Features wie dem Hot-Reload den Entwicklungsprozess deutlich vereinfachen und vor allem beschleunigen. Auch viele andere Probleme bzw. Schwachstellen nativer Entwicklung sind eleganter gelöst. Auch Webtechnologien haben sich inzwischen als Alternative etabliert und sind vor allem bei Entwicklern mit Frontend-Hintergrund beliebt. Durch Einbindung von populären Frontend-Frameworks wie Angular, Vue oder React können bereits gelernte Sprachen und Prinzipien einfach in die App-Entwicklung übernommen werden und sparen so Zeit und vor allem Geld.

Simon Paesler

-