Ich habe dieselbe App mit Flutter, React Native und Ionic entwickelt

• Auf der Suche nach dem optimalen Cross-Platform-Framework für die mobile Entwicklung fielen mir Flutter, React Native und Ionic ins Auge
• Alle drei Frameworks versprechen gute Performance auf mehreren Plattformen mit einer einzigen Codebasis
• Ich habe zum Vergleich eine mobile App in drei Versionen gebaut, die mithilfe einer API grundlegende Daten auf dem Bildschirm anzeigt
  • Anforderungen an die App: Beim Laden des Bildschirms Länderinformationen anzeigen, einen Loading-Spinner, einen Button zum Abrufen eines neuen zufälligen Landes und die Länderliste nur einmal laden

Flutter

• Flutter ist ein 2017 von Google entwickeltes Open-Source-Framework, mit dem sich native Anwendungen für mehrere Plattformen aus einer einzigen Codebasis erstellen lassen. Es basiert auf der Sprache Dart
• Nach einer Stunde Lernen mit der Flutter-Dokumentation und Tutorials begann die Entwicklung
• Das Einrichten der Entwicklungsumgebung und das Starten des Emulators verliefen reibungslos
• In nur 4 Stunden entstand eine App mit den grundlegenden Funktionen
• Die Vorschlagsfunktion von Android Studio war bei der Entwicklung eine große Hilfe
• Mit der Hot-Reload-Funktion lassen sich Änderungen sofort prüfen, was die Entwicklungszeit verkürzt
• Allerdings ist das Konzept „alles ist ein Widget“ wegen der vielen Verschachtelungen und der Vermischung von Stil und Elementen nicht besonders intuitiv

React Native

• Ein 2015 von Meta entwickeltes Open-Source-JavaScript-Framework, mit dem sich native Android- und iOS-Anwendungen bauen lassen
• Es gab bereits Erfahrung mit der React-Bibliothek, und VS Code war schon installiert
• Der Einrichtungsprozess der Entwicklungsumgebung war komplex und verwirrend (man muss den Unterschied zwischen Expo Go und React Native CLI verstehen)
• Die App war in 2,5 Stunden fertig, aber das Beheben von Problemen bei der Bildanzeige war schwierig
• Dank der komponentenbasierten Architektur von React ist der Code kompakt und modular
• Mit JSX lässt sich die UI von Komponenten in HTML-ähnlichem Code schreiben

Ionic

• Ionic ist ein 2012 entstandenes Open-Source-Mobile-UI-Toolkit zum Erstellen moderner und hochwertiger Cross-Platform-Mobile-Apps aus einer einzigen Codebasis
• Entwicklung ist mit React, Vue und Angular möglich
• Bietet viele UI-Komponenten und eine attraktive Benutzeroberfläche
• Nach 30 Minuten mit Ionic-Videos und Guides begann die Entwicklung
• Die App wurde mit der Angular-Version entwickelt, und dank des vertrauten Entwicklungsökosystems ging die Arbeit schnell voran
• Die vielen beim Initial-Setup erzeugten JSON- und TypeScript-Konfigurationsdateien wirkten etwas überladen
• Die App war in 2 Stunden fertig
• Die Umsetzung der UI war einfach, und die Dokumentation ist gut
• Mit HTML-Templates lassen sich UI und Logik trennen
• UI-Komponenten wie Spinner und Floating Action Button erleichtern die Umsetzung der UI

Vergleich: Flutter, React Native, Ionic

• Code-Stil und Sprache
  • Die JavaScript-basierten Frameworks liegen bei Lesbarkeit und Einfachheit des Codes vorn
  • Der verschachtelte Code-Stil von Flutter ist etwas verwirrend und schwer zu lesen
  • Ob man React- oder Angular-Templates bevorzugt, ist Geschmackssache
• Ökosystem
  • Stand April 2024 wurden unter den Top 500 installierten Apps in den USA 12,57 % mit React Native, 5,24 % mit Flutter und 0,52 % mit Ionic erstellt
  • React Native bietet viel Freiheit, kann aber bei Konfiguration und Tooling für Verwirrung sorgen
  • Die Akzeptanz von Flutter nimmt zu, und es gibt viele öffentliche Repositories auf GitHub
• Tools
  • Hot Reload
    • Im Browser laden alle drei Frameworks die App bei Codeänderungen schnell neu
    • Auf Android-Geräten oder im Simulator ist Hot Reload bei Flutter am schnellsten
  • Remote-Debugging
    • Flutter DevTools sind intuitiv und bieten viele Funktionen
    • Ionic lässt sich mit einer Chrome Developer Tools ähnlichen Oberfläche leicht debuggen
    • React Native bietet React DevTools, liegt beim Remote-Debugging aber hinter Flutter und Ionic zurück
• App-Größe
  • Ionic: 3.2MB, Flutter: 18.1MB, React Native: 25.2MB
  • Nach der Installation belegen sie jeweils 9.61MB, 34.66MB und 55.47MB
• Benutzererfahrung
  • Flutter und Ionic bieten zur Plattform passende UI-Komponenten und sorgen so für eine konsistente User Experience
  • React Native ist auf zusätzliche Bibliotheken angewiesen
• Performance
  • Da Flutter zu nativem Code kompiliert wird, ist zu erwarten, dass es schneller ist als React Native
  • Da Ionic in einer WebView läuft, kann die Performance etwas langsamer sein

Fazit

• Ich möchte tiefer in den Code-Stil von Flutter eintauchen, und die Hot-Reload-Funktion, die beim Debugging alles verändern kann, ist attraktiv
• Trotzdem reizt mich Ionic mehr, weil sich vorhandenes Webentwicklungswissen (TypeScript, HTML, CSS) in der Entwicklung mobiler Apps nutzen lässt
• Ich denke, dass der Ausbau meiner Ionic-Fähigkeiten meine Kompetenzen als Mobile- und Webentwickler verbessern wird
• Mit der Weiterentwicklung eines Projekts werden Code-Struktur, Trennung der Verantwortlichkeiten und Wiederverwendbarkeit von Komponenten klarer werden
• Hervorragende Anwendungen lassen sich mit jedem der drei Frameworks bauen
  • Bei der Wahl des Frameworks sollte man die Freude an der Entwicklung nicht übersehen
  • Ich empfehle, verschiedene Frameworks durch die Entwicklung einer experimentellen App auszuprobieren

[firea32]

Da es die einzige Cross-Platform-Bibliothek ist, die native UI verwendet, fällt es schwer, sie aufzugeben…
Wenn es eine Alternative gäbe, würde ich sofort wechseln wollen, aber wenn man sieht, dass im eigentlichen Artikel weder Flutter noch Ionic auf native UI setzen, scheint es keine Zukunft zu haben.

[bus710]

In meinem Fall gefiel mir an Flutter, dass ich alles mit Dart erledigen konnte, ohne HTML/CSS kennen zu müssen.

[superwoou]

Leute, die normalerweise im Web unterwegs waren, sagen meist, dass RN für sie besser passt, und diejenigen, die das nicht waren, finden Flutter bequemer.

[optid77]

Da Cross-Plattform insgesamt eher ein Nischenthema ist, kommt die Entwicklung passender Bibliotheken oft verspätet voran oder bleibt unzureichend.
React Native scheint seine Stärke darin zu haben, einen Teil des React-Ökosystems mitnutzen zu können.

Ich erinnere mich, dass die Produktivität mit RN zuletzt immer weiter gestiegen ist, weil ich bei der Entwicklung vor Kurzem Bibliotheken wie Tailwind, ReactQuery und TRPC nutzen konnte, die auch in React aktiv entwickelt und verwendet werden — im Vergleich zu meiner Entwicklung vor zwei Jahren.

[kaistj]

Aus meiner persönlichen Erfahrung waren bei der App-Entwicklung vor allem State-Management und UI wichtige Punkte.

Bei RN habe ich für das globale Management Redux + Redux-saga verwendet und pro Seite React-query.
Bei Flutter habe ich Riverpod verwendet.

Persönlich fand ich das State-Management auf der React-Seite und die Steuerung der Reihenfolge der Logik etwas leichter verständlich,
und auch die Entwicklung war einfacher. Auf einer webbasierten Plattform ließ sich die Entwicklung etwas leichter umsetzen.

Bei Flutter fiel mir persönlich das Verständnis von Riverpod nicht leicht. (Ich habe allerdings auch etwas weniger Zeit investiert.)
Einfaches State-Management war kein großes Problem, aber vielleicht wegen des Verständnisses der Plattform
gab es bei der Verarbeitung von Zustandsänderungen und bei gemeinsamen Abläufen nach der Verarbeitung von Server-APIs eine gewisse Komplexität bzw. Schwierigkeit in der Umsetzung.

Beim UI waren die Widgets auf der Flutter-Seite in Eigenschaften und Funktionen gut definiert, sodass die Entwicklung reibungslos verlief.
Bei React habe ich die antd-UI-Bibliothek verwendet, und die Nutzungserfahrung war nicht schlecht.

Bei React liegen meine Erfahrungen schon zwei Jahre zurück, daher sind meine Erfahrungen mit Entwicklungsbibliotheken dort etwas älter,
Flutter habe ich hingegen erst vor Kurzem verwendet, allerdings mit wenig investierter Zeit.

Ich hinterlasse auch mal meine Entwicklungserfahrung als Kommentar~
Bitte versteht es einfach in dem Sinne, dass es auch solche Aspekte gibt... ^^

[xguru]

Vielen Dank! Ich glaube, das wird auch für andere hilfreich sein.