Flutter vs React Native – Was ist besser für 2024?

Cross-Platform Entwicklung – So wird mit React Native und Flutter entwickelt

Frameworks wie Flutter und React Native ermöglichen die sogenannte Cross-Platform Entwicklung, bei der mit einer Code Basis plattformübergreifend beinahe native Apps entwickelt werden können. Der Vorteil? Cross-Platform Apps minimieren Entwicklungsaufwand und -kosten durch eine gemeinsame Code Basis und fühlen sich dabei wie native Apps an. Flutter und React sind mit 42 % bzw. 38 % die meist genutzten Cross-Platform mobile Frameworks weltweit.

App Anwendungen, welche stark auf die Kernfunktionen von Betriebssystemen zugreifen, auf mehreren Plattformen zugänglich zu machen, geht in der nativen App Entwicklung mit hohem Entwicklungsaufwand einher – die App muss dann nämlich für jedes gewünschte Betriebssystem eigenständig entwickelt werden. Abhilfe konnten auch die hybride Entwicklung oder Web Apps schaffen, dort kann ein einzelner Code auf mehreren Betriebssystemen wie iOS, Android oder Desktop ausgespielt werden. Beide App Formen können jedoch nur begrenzt auf die nativen Funktionen zugreifen und schneiden schlechter in puncto Performance ab. Das kann beispielsweise für einfache Infomationsapps genügen, entspricht aber nicht dem Anspruch an eine komplexe App.

Was ist Flutter?

Flutter wurde 2018 veröffentlicht und ist ein von Google entwickeltes Open Source mobile UI Framework. Es basiert auf Dart, eine Programmiersprache, die 2010 als Alternative für JavaScript veröffentlicht wurde. Das Besondere: Dart kann in JavaScript kompiliert, also übersetzt, werden. Kompilierung ist auch genau der Ansatz, den Flutter verfolgt:

Flutter Apps sind sogenannte Cross (X)-kompilierte Apps, die in einer Programmiersprache (Dart) erstellt werden, welche dann mittels eines Native Compilers in die jeweils nativen Sprachen übersetzt wird – somit kommuniziert die App nativ und weist entscheidende Vorteile bei komplexeren Anwendungen auf.

Flutter basiert auf der 2D Graphic Datenbank Skia. Hier wird also nicht auf systemeigene Komponenten zurückgegriffen, stattdessen werden Komponenten, die man mit Flutter baut, gezeichnet und gerendert. Damit sehen alle gezeichneten Komponenten plattformübergreifend gleich aus.

Als vollwertiges Tool-Kit verfügt das Framework Flutter über eine Komponentenbibliothek mit gebrauchsfertigen Widgets, aus denen eine App mit Leichtigkeit entwickelt werden kann. Das vereinfacht die Entwicklung, hat aber auch zur Folge, dass die Designmöglichkeiten eingeschränkt sind. Das ist Vor- und Nachteil zugleich. Flutter Entwickler haben so zwar weniger Spielraum, jedoch weist Google über erprobtes UX Design auf, wodurch die App weniger anfällig für Probleme in der Nutzererfahrung wird.

Bekannte Flutter Apps: Xianyu (Alibaba), Google Ads, Phillips Hue

Was ist React Native?

React Native ist eine 2015 von Meta Inc. (damals: Facebook) veröffentlichte Open Source Java Script Bibliothek bzw. Framework und bildet den mobilen Ableger von React, welches zur Erstellung browserbasierter Apps genutzt wird. React Native nutzt jedoch keinen Browser, um Objekte zu rendern, sondern die nativen Schnittstellen des jeweiligen Systems. Die Kommunikation zwischen React Native und den nativen Komponenten wird durch eine JavaScript Brücke ermöglicht. So sind zwar die erstellten UI-Komponenten nativ, die Kommunikation wird allerdings nicht als nativ bezeichnet. Geschrieben wird der Code in React.

Die React Native Bibliothek verfügt nur über wenige einsatzbereite Widgets als Flutter, wodurch mehr Zeit in die Entwicklung gesteckt werden muss, es aber auch deutlich mehr Freiheiten im Design gibt, als das bei Flutter der Fall ist.

Die Weiterentwicklung wird von einigen großen Unternehmen wie Meta, Microsoft, Discord und Shopify unterstützt, was React Native zu einem zuverlässigen Tool für die Web und App Entwicklung macht.

Bekannte React Native Apps: Facebook, Instagram, Tesla, Wix, Skype, Uber Eats

Die neue Systemarchitektur von React Native - Veränderung zum richtigen Zeitpunkt?

Innerhalb der letzten 3 Jahre hat Meta stark an der Weiterentwicklung von React Native gearbeitet, was in einer neuen Systemarchitektur resultiert hat. Facebook basiert mittlerweile vollständig auf der neuen Architektur. Durch die Änderungen wird vollständig auf die JavaScript Brücke verzichtet, wodurch die Einbußen in der Performance, welche React Native Gegensatz zu Flutter aufweisen könnte, behoben werden. Das ganze funktioniert über eine C++ Implementierung, durch welche der React Code direkt mit den nativen Systemkomponenten kommunizieren kann.

Weiterhin ist die Hermes Engine Teil der neuen React Native Software Architektur. Die konventionelle JavaScript Engine war ein Just-in-Time-Compiler – Parsen und Kompilierung findet direkt bei Befehlseingabe statt, was eine höhere Reaktionszeit (Time-to-React) und größeren Speicherbedarf verursacht. Mit Hermes werden beide Schritte vorgelagert. Dadurch konnten App Größe und Arbeitsspeicher-Verbrauch von React Native Apps signifikant reduziert werden, die Reaktionsgeschwindigkeit konnte beinahe halbiert werden.

Dank einer Weiterentwicklung durch die Entwickler von Shopify ist es nun auch möglich, die Skia Bibliothek in React Native zu nutzen. Dadurch ist es ebenso einfach wie in Flutter, 2D Designs zu erstellen.

Flutter oder React Native – Womit soll ich meine App entwickeln lassen?

Um Ihnen Anhaltspunkte für die Beantwortung der Frage zu geben, mit welchem Framework Sie Ihre App entwickeln lassen sollten, geben wir Ihnen im folgenden Teil des Artikels einige Kriterien zur Hand, die Sie bei der Entscheidung berücksichtigen sollten.

Welches Framework bedient mehr Betriebssysteme?

Beide Frameworks sind bzgl. der Verfügbarkeit ungefähr gleich aufgestellt, wobei Flutter aktuell die Nase vorn zu haben scheint.

Seit dem Release von Flutter 2 Anfang 2021 kann Flutter den Dart Code an 5 Betriebssysteme ausliefern: Android, iOS, MacOs, Windows und Linux. Darüber hinaus werden Browser unterstützt, welche Web Erfahrung in den Fokus nehmen. Dazu gehören unter anderen Chrome, Safari, Firefox und Edge. Darüber hinaus kann Flutter in Autos, Smart Home Applikationen und Fernseher eingebunden werden.

React Native liefert Lösungen für iOS und Android. Darüber hinaus können über Bibliotheken von Drittanbietern Web Apps und Lösungen für MacOS, Windows und Linux entwickelt werden. Mittlerweile ist auch die Programmierung von tvOS Lösungen möglich. Damit ist noch unsicher, inwiefern die Unterstützung von weiteren Smart-Home und IoT-Geräten aussieht. Praktisch sind den Möglichkeiten jedoch kaum Grenzen gesetzt, was sich in dem ständigen Ausbau durch Partner und Community zeigt.

Betriebssysteme

Der Plattformverfügbarkeit scheint bei React Native & Flutter gleichermaßen kaum Grenzen zu kennen. Dennoch unterstützt Flutter aktuell mehr Betriebssysteme.

Performance und Leistung - Welches Framework hat die Nase vorn?

Flutter Apps schneiden durch die direkte und vor allem schnelle Kompilierung des Dart Codes in nativen Code in Sachen Performance im Vergleich zu React Native Apps sehr gut ab. Dort wurde mit der Zeit kritisiert, dass React Native Apps besonders auf älteren Geräten eine schlechte Performance aufweisen und sehr viel Akku benötigen. Dadurch, dass die JavaScript Brücke entfällt, ist die CPU-Nutzung bei Flutter beinahe so gering wie bei nativ entwickelten Apps. Dafür verbrauchen Flutter Apps mehr Arbeitsspeicher als native bzw. React Native Applikationen.

Durch immer leistungsstärkere Geräte sind die Performance Einbußen von React Native Apps kaum noch spürbar. Problematisch kann es bei komplexeren Animationen werden, bei welchen es durch die JavaScript Brücke bei React Nativ zu Rucklern kommen kann. Vergleicht man Flutter mit der alten Systemarchitektur, liegt es dennoch in Punkten Leistung und Performance leicht vorne.

Performance & Leistung

Indem React Native in Zukunft jedoch auf die JavaScript Brücke verzichtet und die Möglichkeit gibt, SKIA und C++ Technologien wie die Hermes Engine zu implementieren, sollten beide Flutter und React Native in diesem Feld gleich auf sein..

Designmöglichkeiten - Wer macht das bessere Design?

Flutter ist mit einer Vielzahl an fertigen Widgets ausgestattet, aus denen mobile Anwendungen entwickelt werden können. Das kann die Entwicklungszeit beschleunigen, macht die Entwickler aber auch abhängig beim UI und UX App Design, da die Widgets den Richtlinien von Google folgen. Googles Widgets sind jedoch UX erprobt, wodurch schnell Applikationen mit herausragender Nutzererfahrung entwickelt werden können. Das Skia Rendering ermöglicht es zwar, einfach Komponenten zu zeichnen, macht aus dem Endprodukt jedoch eine Flutter App – das Gefühl einer nativen App kann schnell verloren gehen, da die App plattformübergreifend gleich aussieht.

React Native dagegen ist eine JavaScript Bibliothek, die stark auf Bibliotheken Drittanbieter setzt. Es verfügt über weniger und kleinere Komponenten (= Widgets bei Flutter), wodurch mehr Zeit in die Entwicklung investiert werden muss. Dafür sind den Designmöglichkeiten so gut wie keine Grenzen ersetzt. Wer einen Fokus auf individuelles UI- & UX-Design legt, sollte also dazu tendieren, die mobile App via React Native entwickelt zu lassen – wichtig ist es jedoch, die Entwicklung in die Hände erfahrener Entwickler zu geben, damit ein Endprodukt mit optimaler Nutzererfahrung garantiert werden kann. Die Nutzung systemeigener Komponenten steigert zusätzlich das Nutzerempfinden, eine native App zu bedienen.

Design

React Native nutzt systemeigene Komponenten und ermöglicht so natives Look & Feel mit maximaler Designfreiheit. Flutter Apps sind durch fertige Google Widgets schnell einsatzbereit, bieten aber wenig individualität im UX-Design. Mit der Skia Engine können Flutter Apps plattformübergreifend exakt gleich aussehen.

UI (User Interface) – Wie sind die Apps aufgebaut?

Mit der Skia Engine als Basis sehen Flutter Apps plattformübergreifend gleich aus und verhalten sich auch gleich. Flutter besteht jedoch aus zwei Arten von Komponenten: Material Design Widgets von Google in entsprechendem Design sowie Cuptertino Widgets, welche iOS Design imitieren. Indem die nativen Komponenten imitiert werden, sehen Flutter Apps wie native Apps aus und verhalten sich auch so. Mit der Skia Engine ist es jedoch auch möglich, Apps zu erstellen, welche plattformübergreifend gleich aussehen.

React Native dagegen nutzt native Komponenten direkt, d.h. die Android Version besteht aus Buttons von Android, die Buttons der iOS Version sind von iOS. Im Falle eines Updates sollte die UI automatisch an das neue Design angepasst sein, was i.d.R. ein Vorteil ist, in seltenen Fällen jedoch Probleme mit der UI verursachen kann. Derartige Probleme müssen dann mit einem App Update behoben werden. Wenn die App plattformübergreifend die gleiche UI haben soll, können Bibliotheken von Drittanbietern genutzt werden, um Material Designs anstelle der native Designs nutzen zu können – beispielsweise mit Skia.

Entwicklerverfügbarkeit und Produktivität – Wofür finde ich besser Entwickler?

JavaScript ist eine weit verbreitete Programmiersprache, weshalb es einerseits mehr Entwickler gibt, andererseits mehr Texteditoren und integrierte Entwicklungsumgebungen (IDEs) zur Verfügung stehen. Dart hingegen ist eine weniger genutzte Sprache, wodurch bisher weniger Programmierer zur Verfügung stehen.

React Native bietet aufgrund der Popularität von JavaScript und React deutlich mehr Entwickler.

Dennoch verzeichnet Flutter einen starken Wachstumstrend und könnte in puncto Nutzerzahlen, sofern der Hype um dieses Framework bestehen bleibt, bald aufholen.

Beide Frameworks verfügen über eine "Hot Reload" Funktion ("Fast Refresh" bei React Native), wodurch UI-Änderungen direkt getestet werden können. Das spart viel Zeit bei der Entwicklung, was zu einer kürzeren Markteinführungszeit (Time-to-Market) und geringeren Entwicklungskosten führt. Mit DevOps- und CI/CD Unterstzützung eignen sich beide Frameworks für agile Entwicklungsarten, durch welche mobile Applikationen kundennah in kürzester Zeit entwickelt werden können.

Entwicklerverfügbarkeit

React Native verzeichnet deutlich mehr Entwickler. Dank seiner großen Beliebtheit wächst die Zahl der Flutter Entwickler sehr schnell.

Entwicklungszeit und -kosten: Wer ist der Preis-Leistungs-Sieger?

Die Entwicklungskosten richten sich, wie bei jedem digitalen Produkt, stark nach Umfang, Komplexität und damit der Entwicklungszeit der Lösung. Die Tagessätze von Agenturen können teils sehr unterschiedlich ausfallen – die gleichen Unterschiede existieren jedoch gleichwertig für Qualität und Geschwindigkeit der Entwicklung.

Für native, plattformübergreifende Lösungen bietet die Entwicklung mit React Native oder Flutter entscheidende Vorteile, da der Großteil der App (je nach Lösung und Notwendigkeit zusätzlicher nativer Entwicklung) nur ein mal entwickelt werden muss. Im Vergleich dazu muss eine nativ für zwei Betriebssysteme entwickelte App auch zweimal entwickelt werden. Das führt zu einer teilweise enormen Zeit- und Kostenersparnis bei der Cross-Platform Entwicklung via React Native und Flutter.

Aufgrund der umfassenden Ausstattung einsatzbereiter Widgets ist es schnell möglich, funktionale Flutter Apps mit wenig individuellem Design auf den Markt zu bringen. Daher eignet sich Flutter besonders für die Entwicklung von MVPs. Wer eine derartige Lösung bevorzugt, kann bei der Entwicklung mit dem Framework von Google teils deutlich an Entwicklungskosten sparen.

Sie wollen mehr über die Entwicklungskosten von Apps erfahren und die verschiedenen Entwicklungsarten genauer vergleichen? Dann empfehlen wir Ihnen unseren folgenden Ratgeber dazu zu lesen: "App entwickeln lassen – So viel kostet es"

Da bei der Entwicklung komplexerer UI-Elemente mit Flutter separate iOS- und Android Code-Dateien hinzugefügt werden müssen, die wiederum mittels der Programmiersprache Dart angepasst werden müssen, schneidet Flutter in puncto Entwicklungszeit für komplexere Apps etwas schlechter ab. Der Mehraufwand bei der Entwicklung schlägt sich entsprechend auf die Entwicklungskosten nieder.

Das durchschnittliche Gehalt eines React Native Entwicklers in Deutschland liegt bei ca. 55.000 € jährlich, bei einem Flutter Entwickler bei ca. 54.000 € jährlich. Unter diesem Anhaltspunkt gibt es keinen nennenswerten Unterschied zwischen den beiden Frameworks.

Entwicklungszeit & -kosten

Kleinere Produkte wie MVPs werden schnell und effizient mit Flutter gebaut. Komplexere Projekte sind effizienter mit React Native umzusetzen. Mit welchem Framework Projektkosten gespart werden können, hängt im Einzelnen vom User Case ab.

Fazit: App entwickeln lassen, mit Flutter oder React Native?

Bei Flutter und React Native handelt es sich um leistungsstarke Technologien, um Apps plattformübergreifend zu entwickeln. Die Ergebnisse sind moderne Apps mit nativem Look & Feel, welche, im Gegensatz zur hybriden Entwicklung, auf die meisten nativen Funktionen des Endgerätes zugreifen können.

Während React Native Apps durch die Kommunikation über eine JavaScript Brücke in Sachen Leistung und Performance etwas schlechter abschneiden als Flutter Apps, lassen sich React Native Apps individueller gestalten und bieten den Vorteil, native Komponenten des Endgerätes direkt zu benutzen. Allerdings sind die Leistungseinbußen von React Native in den meisten Fällen nicht relevant und gehören dank der neuen Systemarchitektur und Möglichkeiten der Skia-Anbindung wohl schon bald der Vergangenheit an.

Funktionale, wenig individualisierte Apps lassen sich schneller mit Flutter entwickeln, während komplexere UI-Elemente besser mit React Native umgesetzt werden – was nicht zuletzt auch an der größeren Community liegt, die React Native als gut zwei Jahre älteres Framework vorweisen kann. Insgesamt bietet sich Flutter stark für die schnelle Entwicklung kleinerer Apps und MVPs zur Produktvalidierung an, während React Native als zuverlässige Technologie für größere und langfristige Projekte gesehen werden kann.

Welches Framework eignet sich nun besser für Ihr Projekt?

Die Antwort darauf lautet, wie so oft: das kommt darauf an. Beide Frameworks erfordern es, Kompromisse einzugehen. Es kommt also darauf an, welche Kompromisse Sie in Ihrem Projekt eher eingehen können und eingehen möchten.

Um das Beste aus Ihrem App Projekt herauszuholen, beraten wir Sie gerne unabhängig und kostenlos zu Ihrem Vorhaben. Durch unser Netzwerk aus geprüften App Entwicklungsteams und App Agenturen finden wir den passenden Partner für Ihr Projekt und stellen Ihnen unverbindlich 3 Angebote von technisch führenden Entwicklern. Senden Sie uns in nur 3 Minuten Ihre persönliche Anfrage oder nutzen Sie das Kontaktformular.