Cross-Plattform Entwicklung 2020: Flutter, React Native und Xamarin im Vergleich

05.02.2020
Jedes Jahr erscheinen neue Frameworks, mit denen sich Apps effizienter entwickeln lassen. Zudem wechseln sich die beliebtesten Frameworks relativ schnell ab, sodass es für App Entwickler schwierig ist, den Überblick zu behalten, welches die Nase vorne hat, wo die Communities wachsen und wohin die Reise geht.

Wir haben daher den aktuellen Markt der Cross Plattform Frameworks für die App Entwicklung analysiert und erklären im Detail, welche Frameworks die Spitzenreiter sind, wofür sie sich eignen und was die jeweiligen Stärken und Schwächen von React Native, Flutter und Xamarin sind.


Hybrid oder Cross-Plattform: gibt's da einen Unterschied?

Oft werden die Begriffe synonym verwendet, man kann aber eine - wenn auch etwas unscharfe - Linie zwischen hybriden und Cross-Plattform Frameworks ziehen:

Eine hybride App ist eine Mischung aus einer Web-App und einer nativen App - soweit keine Überraschung. Konkret bedeutet das, dass in einer hybriden App eine (mobil optimierte) Website in einen nativen Container eingebettet wird. Dadurch ist es zum beispiel möglich, In-App-Purchases über JavaScript anzusprechen und praktisch alle Funktionalitäten einer nativen App zur Verfügung zu stellen. Dennoch läuft auf dem Endgerät die App 'nur' im Browser und hat damit, wenigstens in der Theorie, mit Leistungseinbußen zu rechnen. Für den Endbenutzer ist in den meisten Fällen allerdings kein Unterschied zwischen "echten" nativen und hybriden Apps festzustellen.

Eine Cross-Plattform-App hingegen wird (in den vorgestellten Frameworks) mit einer eigenen Programmiersprache entwickelt, z.B. Dart und danach durch einen Transpiler in die jeweilige native Sprache übersetzt. Es handelt sich am Ende also um eine waschechte native App.

Begriffsklärung: worum geht es überhaupt bei Cross-Plattform-Frameworks

Früher hatten es Entwickler leicht: man entwickelte Software in C und freute sich, wenn sie auf der einen Zielplattform lief, für die sie entwickelt wurde. Bei der App Entwicklung wird es komplizierter: der Markt ist gespalten zwischen Apple und Google und entsprechend muss jede App für beide Betriebssysteme separat entwickelt werden. Oft will man zusätzlich eine Web-Anwendung mit einem ähnlichen Funktionsumfang, also ist es nötig, den gleichen Inhalt drei mal mit verschiedenen Sprachen umzusetzen, nämlich einmal in Swift für Apples iOS, einmal in Java oder Kotlin für Android und schließlich in HTML, CSS und JavaScript für die Web-Anwendung.

Cross-Plattform Frameworks sollen nun genau dieses Problem beheben und wenigstens die nativen Apps für iOS und Android auf Basis einer einheitlichen Codebasis generieren. Die Idee ist nahe liegend und wird seit vielen Jahren durch immer neue Frameworks aufgegriffen, die es erleichtern sollen, Apps für mehrere Plattformen zu entwickeln.

Vorteile und Probleme von Cross-Plattform Apps und deren Frameworks

Der offensichtlichste Vorteil und Grund der ganzen Entwicklung von Cross-Plattform Frameworks ist, mit einem Code möglichst viele Plattformen bedienen zu können. Dadurch verringert sich die Menge des Codes, der geschrieben und gewartet werden muss erheblich. Das gleiche geschieht mit den Kosten. Allerdings gibt es noch eine Reihe weiterer Vorteile:

Historische Entwicklung der Cross-Plattform Frameworks

Wir haben bereits 2014 unseren ersten Artikel zum Vergleich der Frameworks für die Cross-Plattform Entwicklung geschrieben. Von den damals vorgestellten (hybrid) Frameworks existiert heute nur noch phonegap und appcelerators titanium, die jedoch verglichen mit den jetzigen Platzhirschen ein Schattendasein fristen, obwohl (oder gerade weil) beide von großen großen Softwarehäusern übernommen und gefördert wurden.

Die Geschichte der "echten" Cross-Plattform Frameworks begann wohl ehrst mit Xamarin so richtig. Im Jahr 2011 gegründet (und 2016 von Microsoft übernommen) ist es mittlerweile das Urgestein dieser Frameworks und baut dabei ganz auf Microsofts Visual Studio und C#.

Im Jahr 2015 entstand React Native auf Basis des bereits beliebten Web-Frameworks React, beides Open-Source Entwicklungen von Facebook. Aufgrund der bereits großen User-Base und des relativ einfachen Einstiegs hat sich React Native innerhalb der letzten 5 Jahre zu einem der drei großen Cross-Frameworks entwickelt

Zuletzt reihte sich Ende 2018 mit Flutter auch Google in die Reihe der großen Entwickler ein, die der Community eine Open Source Software anbieten, um Cross-Plattform Apps zu entwickeln. Das Framework hat in kürzester Zeit die Marktführerschaft an sich gerissen.

  • Projekte werden handlicher, weil weniger zwischen verschiedenen nativen Teams koordiniert werden muss
  • Änderungen, die gerade auch häufig noch während der ersten Entwicklung einer App kundenseitig einfließen, müssen nur einmal kommuniziert, umgesetzt (und verkraftet) werden, was den Entwicklungszyklus beschleunigt und die Nerven schont
  • Die Spezialisierung (und der Fachkräftemangel) für die native Entwicklung wird aufgeweicht und personelle Fluktuationen können leichter kompensiert werden
  • Die Apps erhalten automatisch den "Look and Feel" des nativen Betriebssystems, da UI-Elemente in der Regel vom Cross-Plattform-Framework in dessen Stil umgesetzt werden

Cross-Plattform Entwicklung bringt auch Nachteile mit sich, die je nach Projekt schnell auch zum Ausschlusskriterium werden können:

  • Abhängigkeit vom Cross-Plattform Framework: die Qualität der App steht und fällt mit der Qualität des Frameworks
  • Time-Lag: Änderungen in den nativen Betriebssystemen müssen zunächst erst in den Frameworks "nachprogrammiert" werden, danach ist ein update der App notwendig
  • Freiheitseinbußen: Was einerseits als Vorteil gilt, kann sich auch als Problem erweisen, wenn Kunden auf ein eigenständiges Design bestehen. Der Entwickler gibt Freiheitsgrade, insbesondere in der Gestaltung auf: das Framework übernimmt das Rendern der UI Elemente. Individuelle Gestaltung ist für diese nicht oder nur über Umwege möglich
Ob sich der Einsatz eines Frameworks für die Entwicklung einer App lohnt ist also nur im Einzelfall zu entscheiden.Wenn die App Standard UI-Elemente verwenden soll, keine individualisierten Menu-Animationen oder besonderen Sonderwünsche enthält, lässt sich mit React Native, Flutter & Co. eine Menge Zeit sparen. In den Fällen, wo man volle Kontrolle über alle Aspekte des Screengeschehens behalten möchte oder eine absolut zuverlässige Performance benötigt, sind oft die Umwege, die mit Frameworks zu gehen wären ebenso lang wie die Programmierung eines nativen Codes, der dann aber einfach sauberer und stringenter ist.

Marktcheck: was ist das beliebteste Framework für die Cross-Plattform Entwicklung von Apps

Cross-Plattform Frameworks bei Google Trends

Befragt man Google Trends nach den beliebtesten Frameworks (in Deutschland im Jahr 2019) bekommt man eine ganz Interessante Aussage: Flutter hat sich mittlerweile abgesetzt und ist nun mit einigem Vorsprung das am meisten gesuchte Framework für die Cross-Plattform Entwicklung von Apps:

React IconGoogle Trends Vergleich: react native, Flutter, ionic (framework), apache cordova, native script

Der einstige Spitzenreiter React Native befindet sich, wenigstens im direkten Vergleich der Suchhäufigkeit mit Flutter eher auf dem absteigenden Ast. Ebenso ergeht es Xamarin, auch wenn jedes der drei Frameworks seine Stärken und seine Community hat und daher sicherlich nicht so schnell von der Smartphonebildfläche verschwinden wird.

Übersichtshalber haben wir die alten Stars mit dazu genommen: ionic und cordova waren lange Zeit nicht aus der App Entwickler Welt wegzudenken und obwohl diese natürlich noch ihre Berechtigung haben, scheint deren Stern eindeutig zu sinken und wird wohl in nicht allzu ferner Zukunft verglüht sein.

GitHub Stargazers der App Frameworks

React Native Stats GithubFlutter Stats GithubFür Open-Scource Software lässt sich deren Beliebtheit und Entwicklerbeteiligung am Besten durch die Bewertung auf Github, die GitStars oder "Stargazers", also die Anzahl der Entwickler, die das Sternchen gedrückt haben ausdrücken.Naturgemäß finden sich hier für echte Open-Source Frameworks deutlich höhere Zahlen, als für ehemalige (cordova) oder proprietäre (xamarin), die gar nicht auftauchen.
Flutter86000
React Native85000
ionic40000
cordova6000

Im direkten Vergleich liegen aktuell React Native und Flutter gleichauf, wobei React Native natürlich von 3 Jahren Vorsprung profitiert. Altstar ionic liegt mit etwas über 40k Sternen schon nur noch auf halber Strecke.

Stackoverflow Survey 2019 der Kategorie "Frameworks, Libraries, Tools"

Die bisherigen Zahlen waren eher statistischer Natur, ohne wirklich eine Wertung abzugeben, daher werfen wir noch einen Blick auf stackoverflows Ranking, welche Technologie laut Umfrage am beliebtesten ist:

Stackoverflow Vergleich von App Frameworks

In der Kategorie "Frameworks, Libraries, Tools" liegt hier Flutter mit über 75% auf einem beachtlichen dritten Platz. React Native folgt mit 62,5% auf dem 8. Platz. Xamarin ist mit Platz 14 auch noch unter den Top 20 Frameworks zu finden.

Für welches Cross-Plattform Framework soll ich mich entscheiden?

Wenn man gerade vor der Frage steht, in welches der Frameworks man sich einarbeiten soll, gibt es einige Punkte zu beachten:
  • Welche Anforderungen habe ich an das Framework; was will ich damit umsetzen? Wie flexibel ist das Framework
  • Wie ist die Lernkurve und welche Programmiersprachen erwarten mich jeweils?
  • Welches Framework wird sich langfristig durchsetzen?
  • Wichtig ist aber auch der persönliche Geschmack: welche Syntax liegt mir und was tut mir in den Augen weh?
Allgemeine Ratschläge sind hier schwierig zu geben. Tendenziell ist React Native etwas leichter zu erlernen, dafür ist der deklarative Programmierstil sicherlich nicht jedermanns Sache. Xamarin ist vielleicht das ausgereifteste Framework, mit dem du am wenigsten technische Probleme haben wirst, dafür musst du mit .Net und Mircrosoft sympathisieren. Flutter scheint mir persönlich zukunftsweisend, auch wenn man sich dafür in Dart einarbeiten muss.

Von der Performance her müsste Dart - rein theoretisch - die Nase vorne haben, der der Code in nativen ARM code kopmiliert wird. In der Praxis ist der Unerschied allerdings schwer zu bestimmen und letztlich wohl minimal. Auf Basis der Performance lässt sich also kein Favorit bestimmen.

Wollen wir daher zum Abschluss noch einen Blick auf die Vorzüge der drei wichtigsten Cross-Plattform Frameworks werfen.

React Native Icon

React Native

ProgrammierspracheJavaScript, TypeScript, JSX
UI-Komponentenautomatisch/zwangsweise native Komponenten
LizenzOpen Source
EntwicklerFacebook
ReferenzenFacebook, Instagram, Pinterest, Skype, Tesla
React startete 2013 als reines Web-Framework und wurde im Zuge eines Facebook Hackatons zu React Native ausgebaut. Das Framework erlaubt es, in einem deklarativen Code die Seitenelemente zu beschreiben und rendert diese dann mit den nativen Elementen in iOS und android.

Obwohl das Framework mittlerweile stabil läuft ist Anfang 2020 der Versionszähler noch bei 0.61 - Facebook behält sich also den Beta-Status noch immer vor.

Vorteile von React Native

  • Native UI Komponenten werden automatisch gerendert, es kommt also immer ein nativer UI Look heraus
  • Community: es gibt eine immense Auswahl an fix und fertigen Components, mit denen man schnell Funktionalitäten zusammenschieben kann
  • Direkter Zugriff auf native/Hardware Funktionalitäten wie Gyrometer etc.
  • Nativer Code kann ebenfalls eingebunden werden, daher hohe Flexibilität
  • Hot Reload: Preview auch ohne Kompilierung möglich
  • Kostenlos mit guter Unterstützung


React Native und JSX

Dieser Punkt ist wohl Geschmacksache. Viele Entwickler mögen es plakativ, andere nennen es eine Krankheit: Reacts JSX "Sprache", die technisch als JavaScript Erweiterung gilt und so aussieht:react code bespiel jsx

Es sieht aus wie eine Templatesprache, jedoch passiert etwas völlig anderes: React übersetzt den String in ein JavaScript Objekt, in etwa so:

react code bespiel jsx

Und von dort per Transpiler in nativen Code. Am Ende eine saubere Sache, dieses HTML und JS Misch-Masch bis dahin muss man allerdings optisch auch mögen. Entwickler, die gerne Form und Funktion voneinander trennen, finden sich vielleicht eher bei Flutter wieder.

React Native Kritiken

Es gibt einen von den Entwicklern selbst gestarteten Kummerkastenthread, der sehr aufschlussreich aufzeigt, was Entwickler an React Native stört (Dislikes about React Native), hier ein Auszug:
  • Das Update von einer Version auf die nächste ist langwierig
  • Debugging: Im Log wird die Adresse des Exception Managers angezeigt, statt der Fehlerzeile, die dann schwer zu finden ist
  • Hot reloading funktioniert nur bedingt mit Stateless Functional Components


flutter-logo

Flutter

ProgrammierspracheDart
UI-KomponentenProprietäre Rendering-Engine mit vorgegebenen Icons
LizenzOpen-Source
EntwicklerGoogle
ReferenzenGoogle AdWords, Alibaba, Tencent, eBay, BMW
Flutter ist also Googles Antwort auf die Cross-Plattform Bewegung und wie das meiste was der Gigant aus dem Silicon Valley anpackt, ist Flutter sehr durchdacht.

Die erste kleine Hürde stellt Google allerdings mit der Programmiersprache: Flutter wird in Dart programmiert, das Google 2013 veröffentlicht hat. Auf den ersten Blick nervt noch eine weitere Programmiersprache erst Mal, auf den zweiten Blick ist Dart aber durchaus interessant und in Anbetracht der Herkunft und dem enormen Erfolg von Flutter wohl sicher einen Blick wert.

Zunächst macht einem Dart dem Einstieg leicht, weil es verwandt ist mit den C Familie und auch der Sprung von Java nicht allzu groß ist. Es gibt allerdings zwei ganz entscheidende Vorteile zu anderen Programmiersprachen

  1. Es gibt einen Transpiler, der Dart in JavaScript übersetzt und damit die Brücke zur Webanwendung zurückschlägt und damit (ebenso wie React) neben der nativen Multi-Plattform Entwicklung auch die WebApp ermöglicht
  2. Der Quellcode kann just in time kompiliert werden, ermöglicht also ein hot reloading und damit eine deutlich zackigere Entwicklung und Debugging als C# oder Java
Schauen wir uns noch die Vorteile von Flutter insgesamt an:
  • Flutter SDK, Widgets, CLI tools: die Werkzeuge rund um das Framework sind ausgereift und vielfältig
  • Was dem React seine Component ist dem Flutter sein Widget: Fertige Lösungen gibt es in Hunderten von Widgets, die sich aber auch problemlos selber entwickeln und modifizieren lassen
  • Hohe Zuverlässigkeit und hervorragende Dokumentation
  • Dart ist eine sehr erfolgreiche, zukunftsträchtige Sprache, die wahrscheinlich dauerhafter und universeller, wenn auch langwieriger zu erlernen ist als JSX
  • kostenlos & open-source


xamarin-logo

Xamarin

ProgrammierspracheC#
UI-Komponentenautomatisch/zwangsweise native Komponenten
LizenzOpen-source, kostenlos für kleine Teams
EntwicklerMicrosoft
ReferenzenUPS, Insightly, APX, Thermo Fisher
  • Gute Performance, vergleichbar mit React Native und Flutter
  • Xamarin harmoniert besonders gut mit Microsofts viel genutztem Visual Studio und bietet mit C# und .Net ein geschlossenes Ökosystem
  • Beste Unterstützung für die Entwicklung von Windows Apps
  • Deklarativ oder Instruktiv: Xamarin bietet die Wahl
  • Xamarin.Forms bietet eine Fülle von Standardkomponenten, die sich sehr gut recyclen lassen

Dieser Artikel entstand mit freundlicher Beratung durch Lulububu Software GmbH