Cross Platform App-Entwicklung

Möglichkeiten der Cross-Platform-Entwicklung

Wenn sich ein Unternehmen entscheidet eine neue App zu entwickeln, wird in erster Linie an die native Entwicklung in Objective C oder Swift für Apple-Geräte und Java oder Kotlin für Android-Geräte gedacht. Eine Alternative ist die Cross Platform Entwicklung, welche sich für besondere UseCases gut eignet.

Zum Beispiel möchte ein Startup-Unternehmen mit einem MVP schnell und kostengünstig an den Markt, um das Potenzial der neuen Idee praktisch auszuprobieren und gegebenenfalls Investoren zu finden. Um den „Time-to-Market“ klein zu halten, könnten Cross Platform Frameworks verwendet werden.

Im Folgenden werden verschiedene Cross Platform Frameworks für iOS und Android miteinander verglichen und die Vor- und Nachteile beschrieben. Die Liste ist nicht vollständig, da es viele verschiedene Anbieter in diesem Bereich gibt. Die gängigsten und populärsten Anbieter sind nach Ansicht des Autors enthalten.

Unterschied native Entwicklung gegenüber Cross-Platform/hybrid

Apps, welche nativ entwickelt werden, werden in Swift / Objective C und in Java / Kotlin entwickelt. Pro Betriebssystem muss die ganze Businesslogik, UI und Datenhaltung in separatem Code erstellt und gepflegt werden. Dieses erfordert oftmals verschiedene Entwickler mit dem jeweiligen Fokus auf ihren Plattformen, wenn eine App für die zwei wichtigsten Betriebssysteme veröffentlich werden soll.

Bei der Cross Platform Entwicklung soll eine Codebasis für verschiedene Betriebssysteme/Plattformen diesen Umstand ändern.

Die Cross Platform Entwicklung wird im Folgenden nochmals unterteilt:

Webseite in einer Webview (Hybrid) mittels Webtechnologien
Beispiele: Cordova /  Ionic
Frameworks welche native UI-Elemente verwenden
Beispiele: Xamarin / Cordova
Frameworks welche eigenen Renderer verwenden
Beispiel: Flutter

Besonderheiten für alle Framworks

Um auf native Schnittstellen der Betriebssysteme zuzugreifen, beispielsweise Bluetooth, NFC und Push-Nachrichten, benötigen alle Frameworks eine Verbindung zum Betriebssystem. Diese Brücken können über Dritt-Entwickler-Plugins eingebunden oder selbst erstellt werden.
Wenn betriebssystemspezifische UI-Designprinzipien pro Plattform verwendet werden, wird immer zusätzliche Komplexität ins Projekt gebracht, da unterschieden werden muss, auf welcher Plattform die App sich gerade befindet.
Wenn eine UI für beide Betriebssysteme angewendet wird, sollte ein betriebssystemunabhängiges Design gewählt werden, da sich Benutzer ungerne Designprinzipien anderer Plattformen aufzwängen lassen.

Hybride Apps

Native Apps konnten direkt ab ca. 2010 Internetseiten mittels eines internen Browsers Webseiten darstellen.

Diese Funktion wurde direkt benutzt um Apps mit Hilfe von HTML, CSS und Javascript zu erstellen. Im Folgenden werden die meist verwendeten Frameworks benannt um einen Container für diese Webseiten zur Verfügung zu stellen.

Cordova

Das Open-Source-Framework Cordova von Apache hilft bei der Erstellung von hybriden Apps. Es stellt einen Container zur Verfügung, welche Verbindungen zum Host-Betriebssystem erlaubt und auch die Möglichkeiten Splash-Screens und Icons für die Apps zu definieren.

Die Verknüpfung zwischen Webview und Betriebssystem ist nötig, da sonst nicht auf native Funktionalitäten zugegriffen werden kann.

Phonegap

Bei Phonegap handelt es sich um Cordova mit zusätzlichen Funktionen und Erweiterungen von Adobe. Eine dieser Erweiterungen ist das Kompilieren und Erstellen von hybriden Apps in der Cloud auf Adobe-Servern.

Ionic

Ionic basiert ebenfalls auf Cordova. Mittels Ionic lassen sich hybride Apps schneller entwickeln. Es stellt dafür UI-Elemente zur Verfügung und eigene Module von Dritthersteller, die in einem separaten Store erwerblich sind.

Diese Module können eigene Kalenderansichten, oder ganze Workflows sein.

Die Vorteile von hybriden Apps besteht darin, dass auch Webentwickler ohne Kenntnisse der nativen Programmiersprachen Apps erstellen können, welche im App-Store zur Verfügung gestellt werden können.

Ein weiterer Vorteil ist eine Codebasis, die für iOS und Android und in dem Fall von hybriden Apps sogar für Webseiten benutzt werden kann.

Nachteile sind hier die Geschwindigkeit, da die App in einem Browser läuft und der fehlende Zugang auf native UI-Elemente. Wenn eine Offline-Funktionalität gewünscht ist, muss entweder auf die neue WebStorage-API zugegriffen, oder über eine Schnittstelle mit der nativen Datenhaltung in der App gearbeitet werden.

Framworks mit nativen UI-Elementen

Die im folgenden besprochenen Cross Platform Frameworks benutzen einen anderen Ansatz.

Xamarin, React Native und Appcelerator verwenden für die Businesslogik auf beiden Plattformen eine Codebasis und generieren für die UI native Komponenten.

Xamarin

Xamarin verwendet die Sprache C# um für beide Plattformen die Geschäftslogik und die GUI abzubilden.

Dabei wird pro Betriebssystem in ein anderes Format kompiliert.

bei iOS wird der C#-Code mittels ahead-of-time (AOT) in eine ARM assembly kompiliert.

bei Android wird der C#-Code zu IL (Intermediate Language) kompiliert und mit der MonoVM paketiert. Native Funktionen können über JNI (Java Native Interface) angesprochen werden.

Native GUI-Elemente werden pro Plattform erstellt. Bei iOS kann direkt mit dem Xamarin iOS Designer eine Storyboard-Datei erstellt werden. Bei Android wird per Drag-and-Drop eine .AXML-Datei erstellt. Durch diese Architektur ist eine App nicht unterscheidbar, bezüglich UI und Performance, zwischen der nativen Entwicklung und Xamarin.

Als einziges Cross Platform Framework in diesem Beitrag ist Xamarin nicht komplett kostenlos. Die Community-Version kann für Unternehmen, mit weniger als eine Million Dollar Umsatz pro Jahr, verwendet werden. Die Professional-Version kostet im ersten Jahr 1.199$ und die Enterprise-Version 5.999$. Nach dem ersten Jahr werden die Lizenzen günstiger.

React Native

React Native verwendet auch native GUI-Komponenten, ähnlich wie Xamarin. Bei der Programmiersprache handelt es sich um Javascript.

Ein Vorteil von React Native gegenüber Xamarin ist die Möglichkeit über ein Hot-Reload-Mechanismus beim Entwickeln, schneller die Änderungen angezeigt zu bekommen.

Bei Xamarin beschweren sich die Entwickler über sehr lange Kompilierzeiten.

React Native verwendet eine Bridge zwischen den Javascript-Threads und den nativen Threads des jeweiligen Betriebssystems.

Diese Brücke erlaubt eine asynchrone und bidirektionale Kommunikation zwischen diesen Welten.

Durch diese Asynchronität ist die Geschwindigkeit mit der von nativen Apps gleichgestellt. Die Kommunikation wird auch verwendet, um UI-Elemente über Aufrufe zu generieren. Dabei können diese Elemente, wie bei der nativen Entwicklung bei iOS, im Objektbaum angezeigt werden.

Schon gewusst?

React Native wurde von Facebook entwickelt und wird weiterhin sehr gepflegt. Durch native Module können Funktionen des Betriebssystems oder andere Bibliotheken der JavaScript Ebene zur Verfügung gestellt werden. Es gibt zahlreiche Module von Facebook, aber auch Drittanbieter erkannten Potenzial darin und bieten React Native Module an, um auf ihre nativen Bibliotheken zugreifen zu können.

Frameworks mit eigenen Renderern

Flutter ist ein sehr junges Framework von Google. Die Apps werden mit der Programmiersprache Dart entwickelt wird.

Ähnlich wie React Native ist ein Hot-Reload-Mechanismus vorhanden, welches die Entwicklungszeit verkürzt.

Die Besonderheit bei Flutter liegt in dem graphischen Renderer Skia, welche sich um die UI-Erstellung kümmert. D.h.: Flutter erstellt keine nativen UI-Komponenten wie Xamarin oder React Native, sondern baut die komplette UI über die in C++ geschriebene Skia Bibliothek auf.

Es präferiert hierbei das hauseigene Material-UI, um eine GUI für iOS und Android zu erstellen. Trotzdem gibt es viele Implementierungen von Widgets, welche die nativen iOS-Funktionen nachbauen.

Widgets werden alle Komponenten für die UI in Flutter genannt. Dabei können Widgets einen Zustand speichern oder zustandslos sein. Widgets können auch weitere Widgets beinhalten und damit die UI in einer Baumstruktur aufbauen.

Nicht im Fokus

Nicht im Fokus dieses Beitrages sind Progressive WebApps und Unity, mit welchen auch Dienste dem Benutzer zur Verfügung gestellt werden können und nur aus einer Code-Basis bestehen.

Zusammenfassung

Die Vorteile der Cross Platform Entwicklung sind im Wesentlichen die Benutzung einer Code-Basis und einer Programmiersprache für mehrere Betriebssysteme. Bei kleineren Projekten ohne eine Notwendigkeit für eine native Schnittstelle und nur ein UI-Design für beide Plattformen schrumpft die Entwicklungszeit um ein wesentliches für iOS und Android Geräte. Mittels Hot-Reload-Funktion wie in React-Native oder Flutter kann noch mehr Zeit eingespart werden.

In diesen Projekten entscheiden dann eher andere Faktoren die Auswahl des Frameworks. Beispielsweise lässt sich mit Cordova auch eine Webseite mit der gleichen Businesslogik und UI erstellen.

Wenn im Unternehmen bisher nur für das Web entwickelt wurde, wird die Einarbeitung in Cordova oder React Native wegen der verwendeten Sprache JavaScript deutlich verkürzt.

Soll die App performant sein, dann ist Cordova und Webtechnologie nicht dafür geeignet. Hier wäre React Native und Flutter vom Vorteil.

Als Entscheidungskriterium kann hierbei auch die Verfügbarkeit von Entwicklern gelten. Da Flutter erst im Winter 2018 die Version 1.0 herausgegeben hat, kann es noch keine Entwickler mit mehrjähriger Erfahrung geben.

Die größten Nachteile bei Cross Platform Entwicklung ist die Abhängigkeit der Framework- und Drittanbieterplugin-Entwickler. Wenn eine neue Betriebssystemversion für iOS oder Android erscheint, dann ist oft hier bei den Framework Anbietern Arbeit mit verbunden. Auch Anbieter von Plugins sind nicht immer aktuell oder aktualisieren ihre Software nicht. Beispielsweise kann sich eine interne Schnittstelle ändern und das eingebettete Plugin wird nicht mehr aktualisiert, weil der Entwickler keine Zeit und Interesse mehr hat. Bei diesem Szenario muss das Plugin oftmals selbst angepasst werden, was Expertise in der nativen Programmiersprache voraussetzt. Durch die Verwendung eines Cross Platform Frameworks erhöht sich die Pflege einer App gravierend.

Wenn die jeweiligen nativen UX Paradigmen genutzt werden sollen, fällt zusätzliche Arbeit an und die Komplexität und Wartung steigt. Apps auf Basis von Cordova „fühlen“ sich nicht nativ an und können durch Performanceprobleme die Benutzer verstimmen.

Fazit

Für einen Prototypen mit wenigen Funktionen der in kurzer Zeit erstellt werden muss, eignen sich Cross Platform Frameworks gut. Falls es sich um größere und langlebige Projekte handelt, rät der Autor zu einer nativen Entwicklung. Diese hat die Vorteile, dass es viele Entwickler gibt und geben sollte, das UX für die Benutzer bekannt ist und die Performance stimmt. Der doppelte Programmieraufwand zu Beginn wird bei der Pflege des Produkts egalisiert und es ist für Betriebssystemaktualisierungen gewappnet.