Immer mehr Unternehmen möchten ihre App individuell nach ihren Wünschen entwickeln und gestalten lassen. Sind die Anforderungen klar, steht man als Entwickler vor der Wahl der geeigneten Technologie. Möchte der Kunde eine App, die prozessorlastige Rechenoperationen oder aufwendige Grafiken berechnen muss, kommt nur die native App in Frage. Ist dies aber nicht der Fall, hat man dank unzähligen Frameworks die Qual der Wahl.
Java, Flutter und Ionic – native, hybride und webbasierte Frameworks zur App-Entwicklung
Im Wesentlichen lassen sich drei Gruppen unterscheiden: die native, die hybride und die webbasierte Entwicklung. Für den Laien ist anhand des Ergebnisses am Ende nicht mehr ersichtlich, mit welcher Technologie die App entwickelt wurde. Dank UI-Frameworks wie z.B. Material UI ist es möglich, die App-Oberfläche nativ aussehen zu lassen. Dadurch können die Design-Guidelines auch im nicht-nativen Ansatz gut eingehalten werden.
Letztlich stellt sich also die Frage, mit welchem Ansatz eine App am effizientesten umgesetzt werden kann. Werden Faktoren wie persönliche Präferenzen einmal außer Acht gelassen und wird davon ausgegangen, dass keinerlei Vorkenntnisse bestehen, lassen sich die Methoden anhand von drei Vertretern gut miteinander vergleichen.
Native Apps am Beispiel von Java
Sie sind die ursprüngliche Form der App und speziell angepasste Anwendungen, die für das Betriebssystem des jeweiligen Endgerätes entwickelt wurden. Vorteile von nativen Apps sind u.a. die Performance, da App und Betriebssystem dank angepasster Schnittstellen schnell miteinander kommunizieren können. Ein gravierender Nachteil der nativen App ist, dass sie nur auf dem Betriebssystem funktioniert, für das sie entwickelt wurde.
Mit Java bietet Android Entwicklern die Möglichkeit native Apps zu entwickeln. Die objektorientierte Programmiersprache ist in Verbindung mit der Entwicklungsumgebung Android Studio ein mächtiges Werkzeug, um hoch performante Apps zu entwickeln.
Progressive Webapps am Beispiel von Ionic
Webapps werden in der Regel auf Basis von HTML, JavaScript und CSS programmiert. Im Gegensatz zu nativen Anwendungen laufen sie nicht direkt auf dem Betriebssystem, sondern in einer Browser-Umgebung. Sie funktionieren nach dem Client-Server Modell und können so auf allen internetfähigen Geräten mit Browser genutzt werden.
Ionic ist ein Open-Source Framework für Apps basierend auf Webtechnologien. Es ermöglicht die Integration zahlreicher Frontendframeworks wie Angular, React oder Vue und ist deshalb bei Frontendentwicklern sehr beliebt. Eine Vielzahl vorgefertigter UI-Komponenten und Themes erleichtern das Styling enorm. Durch native API’s kann Ionic, wie native Apps, auf eine Vielzahl von Gerätefunktionen zurückgreifen, wie beispielsweise Kamera und GPS.
Hybride Apps am Beispiel von Flutter
Hybride Apps sind eine Kombination aus nativen Apps und Webapps. Wie webbasierte Anwendungen können auch sie auf HTML, JavaScript und CSS basieren, müssen es aber nicht zwangsweise. Der gravierende Unterschied zu reinen Webapps ist, dass sie nicht im Browser selbst, sondern in einem nativen Container laufen, welcher die Browser-Engine des Gerätes nutzt.
Flutter ist ein von Google entwickeltes User-Interface Toolkit, mit dessen Hilfe Apps für alle Plattformen entwickelt werden können. Laut Google Trends ist Flutter 2020 nach React Native die zweitpopulärste Sprache für die Cross-Platform Entwicklung. Es wird in der Programmiersprache Dart geschrieben. Mithilfe von Dart’s nativen Compilern erfolgt eine Kompilierung zu nativem Maschinencode, wodurch nahezu eine native Performance erreicht werden kann.
Als Entscheidungshilfe für einen der drei Ansätze zur App-Entwicklung können unterschiedliche Faktoren herangezogen werden, wie beispielsweise Komplexität der Sprachen, Dokumentationen und Designerstellung.
Unterschiede in der Komplexität der Programmiersprachen
Java ist für viele Programmierer die erste Sprache, die sie erlernen. Als objektorientierte Sprache bietet sie einen guten Einstieg in die App-Entwicklung. Durch Typisierung ist sie mit etwas Mehraufwand verbunden, der sich aber spätestens dann auszahlt, wenn unnötige Runtime-Exceptions vermieden werden und Kollegen den Code besser lesen können. Diesen Vorteil der guten Lesbarkeit verliert die Sprache häufig wieder durch zu viel ”Boilerplate”-Code. Teilweise muss so unnötig viel Code geschrieben werden.
Ionic hingegen basiert auf HTML, CSS und JavaScript. Es kann aber wahlweise auch mit TypeScript benutzt werden, um den schwer lesbaren JavaScript Code zu typisieren. Entwickler, die ihren Fokus auf den Bereich Frontend legen, werden sich hier schnell zurechtfinden. JavaScript glänzt vor allem mit unzähligen Möglichkeiten wie zum Beispiel UI-Animationen. Praktisch alles was auf Webseiten funktioniert, kann über JavaScript auch in Webapps eingebunden werden. Die Entwickler haben zudem die Möglichkeit zu wählen, ob sie objektorientiert oder funktional programmieren möchten.
Die bei Flutter genutzte Programmiersprache Dart bietet, ähnlich wie Java, sowohl Möglichkeiten zur Objektorientierung als auch zur funktionalen Programmierung. In Verbindung mit Flutter wird es aber hauptsächlich objektorientiert verwendet. Die Dart Syntax ist leicht verständlich und nicht sonderlich kompliziert.
Wie sich die drei Programmiersprachen in Bezug auf Code-Übersichtlichkeit und Umfang unterscheiden, zeigt das Beispiel der Erstellung einer einfachen Liste von Namen.
Java
In der Android-Entwicklung mit Java wird jede App-Page in eine Java- und eine XML-Datei unterteilt, die den Aufbau der UI bestimmt. In der linken Abbildung ist in Zeile acht zu sehen, wie die Java-Klasse die rechts abgebildete XML-Datei lädt und der Liste den Adapter hinzufügt.
Für die Liste wird noch eine extra Adapter Klasse benötigt, die festlegt wie jedes Element der Liste gerendert werden soll. Sie ist in der folgenden Abbildung zu sehen. Für die Reihe in der Liste wird ebenfalls eine eigene XML-Datei benötigt. Insgesamt müssen also für eine einzige Liste vier Dateien erstellt werden. Der Ansatz mit List Adaptern bietet zwar viele Möglichkeiten zur Individualisierung, ist aber doch meistens etwas umständlich, vor allem wenn die Liste keine weiteren Funktionen wie zum Beispiel eine Suche, Sortierung etc. bietet.
Flutter
Flutter hat dieses Problem etwas eleganter und vor allem mit deutlich weniger Code gelöst. Es lässt als einzige der drei Varianten einen Zusammenschluss von UI und Logik innerhalb einer Datei zu, was für eine gute Übersichtlichkeit und wenig Code sorgt. Mithilfe von Builder-Methoden können Widgets gebaut werden, die dann zur Laufzeit als das entsprechende UI-Element gerendert werden.
Da dieses Prinzip dem Grundsatz der ”Separation of Concerns” (dem Trennen von UI und Businesslogik) widerspricht, muss bei diesem Ansatz auf jeden Fall auf Modularisierung des Codes geachtet werden, da sonst schnell sehr große Dateien entstehen können.
Ionic
Ionic wählt einen Mittelweg und trennt UI von der Logik, benötigt aber keine weiteren Dateien für die Liste. In der TypeScript-Datei wird die Logik positioniert, wohingegen die HTML-Datei allein für die Darstellung verantwortlich ist. Per Databinding werden die Elemente der Liste direkt unten im Template gerendert und müssen nicht manuell auf das entsprechende UI-Element gesetzt werden, wie bei Java.
Es lässt sich erkennen, dass mit der nativen Option meist mehr Code nötig ist als mit den nicht-nativen. Außerdem ist ersichtlich, dass “einfache“ Tasks wie eine Liste mit Flutter oder TypeScript (Ionic) deutlich einfacher zu realisieren sind. Der bereits angesprochene “Boilerplate-Code“ erhöht den Code-Umfang bei Java hier doch deutlich. Schlussendlich müssen Entwickler abwägen, ob der Code durch das Trennen von Dateien für sie besser lesbar ist. Bei komplexerer Businesslogik ist eine höhere Modularisierung für eine bessere Übersicht aber durchaus zu empfehlen.
Fortsetzung folgt in Teil 2
Im zweiten Teil dieses Beitrages erfolgt die Gegenüberstellung der drei Ansätze zur App-Entwicklung in Bezug auf Funktionsumfang und unterstützte Bibliotheken, UI und Design-Erstellung, Dokumentation und Beispiele sowie Workflow-Effizienz.
