Mobile App-Entwicklung mit Google Flutter

In einem aktuellen Digitalisierungsprojekt soll der bislang analoge Produktkatalog eines Kunden für dessen Zielgruppe als App aufbereitet werden. Dabei sollen sowohl Android als auch iOS Geräte unterstützt werden. Wie bei jedem Projekt stellt sich die Frage, mit welcher Technologie eine solche App umgesetzt werden soll. Bei der mobilen Entwicklung gibt es drei grundlegende Vorgehensweisen:

• Native Entwicklung
• Hybride- oder Cross-Platform Apps
• Web-Apps basierend auf HTML5, CSS3 und JS

Jede dieser Vorgehensweisen hat ihre eigenen Vor- und Nachteile.

Native Entwicklung

Bei der nativen Entwicklung wird die App hauptsächlich in der plattformspezifischen Sprache geschrieben (hauptsächlich Swift/Objective C bei iOS, Android/Kotlin bei Android) und bietet so bestmögliche Performance auf den Geräten der Endnutzer. Auch die Nutzung von gerätespezifischer Hardware ist so ohne Umwege möglich und Look&Feel ist dank vordefinierter Elemente und gegebenen Entwicklungshilfen leicht umzusetzen.

Der erste Pluspunkt der nativen Entwicklung ist gleichzeitig einer ihrer größten Nachteile. Da die Programmiersprachen zwischen den Plattformen nicht kompatibel sind, müssen zwei Code-Basen geschrieben und gepflegt werden. Außerdem müssen Entwickler im schlechtesten Fall zwei neue Sprachen erlernen und Feature Sets zwischen den Apps auf gleichem Stand halten.

Ein möglicher Ausweg ist die Option Code-Sharing in Teilen mittels C++ umzusetzen.

Beide Plattformen können neben den Primärsprachen auch C++ verarbeiten und ermöglichen so zumindest teilweise das Wiederverwenden von Programmteilen. Dies bietet aber nur bedingt einen Mehrwert wie der Erfahrungsbericht von Eyal Guthmann bei Dropbox zeigt.

Hierbei kommt es stark auf die Erfahrungen und Vorlieben der beteiligten Entwickler an – im schlimmsten Fall müssen neue Mitarbeiter dann in drei Sprachen eingeführt und entsprechend komplexe Entwicklungsumgebungen aufgebaut und gewartet werden.

Für den Fall, dass der Overhead nicht praktikabel ist oder benötigt wird, bieten sich die beiden Alternativen an, bei denen nur eine Codebasis in einer Programmiersprache gepflegt werden muss.

Web-Apps

Das andere Extrem stellen Web-Apps dar. In diesem Fall wird nicht direkt eine Anwendung für mobile Endgeräte programmiert, sondern eine (spezialisierte) Webseite erstellt, die der Browser des Geräts darstellt. Da die Webseite über den Browser angesteuert wird, braucht eine Web-App nicht die Prüfungen des App-Store zu bestehen und kann jederzeit aktualisiert und auch von anderen Geräten wie PCs genutzt werden. Solche Anwendungen können dank Frameworks wie Angular, VueJS oder dergleichen inzwischen auch komplexe Apps abbilden, erlauben aber trotz HTML5 nur vergleichsweise eingeschränkten Zugriff auf Hardware und bieten die schlechteste Performance.

Der Vorteil, den Plattform spezifischen Marktplatz umgehen zu können, kann gleichzeitig auch ein großer Nachteil darstellen. Die Produktseite im Store ist sowohl Werbefläche für den Hersteller/Vertreiber als auch die App selbst. Nutzer können hier die Anwendung deutlich einfacher entdecken und sobald die App auf dem Gerät installiert ist, ist sie direkt für den Anwender sichtbar. Für eine reine Web-App muss zusätzlich Aufwand durch den Hersteller betrieben werden, um Nutzer zur App zu führen und diese müssen zusätzlichen Aufwand betreiben, um die Web-App als Lesezeichen oder auf dem Homescreen zu speichern. Trotz der Vorzüge vermittelt dieses Vorgehen nicht unbedingt die gewünschte Professionalität.

Hybride Apps

Einen Mittelweg bieten sogenannte Hybride- oder Cross-Plattform Apps. Diese sind historisch ähnlich zu Web-Apps z.B. mittels JS programmiert und rendern in einem Web-View auf dem Gerät oder das Framework stellt eine sogenannte Bridge zur Verfügung, die die Kommunikation mit den nativen Elementen des Systems übernimmt. Ähnlich wie bei den reinen Web-Apps kann sich diese Tatsache negativ auf die Performance auswirken und die Unterstützung von Hardware hängt von den Möglichkeiten des Frameworks oder der Verfügbarkeit von Plugins ab, wobei diese inzwischen z.T. technisch sehr ausgereift sind.

Prominente Beispiele für solche Frameworks sind Ionic, React Native oder Xamarin. Ionics Frontend baut auf AngularJS + Cordova auf und es wird aktuell an einer Integration von Vue gearbeitet. Webentwickler mit entsprechender Erfahrung können damit direkt loslegen. Ähnlich steht es um ReactNative, das 2015 aus dem bekannten Web-Development Framework entstanden ist. Xamarin hingegen liegt die Sprache C# zu Grunde, in die sich Entwickler mit Vorkenntnissen in Java, C++ oder Objective-C  schnell einarbeiten können. Es bietet auch die Möglichkeit, Bibliotheken aus all diesen Sprachen einzubinden, benötigt aber entsprechende Einarbeitungszeit.

Ein vergleichsweise neuer Spieler ist Google Flutter. Das 2017 veröffentlichte Framework verspricht die gleichen Vorteile einer Hybriden App – eine Code-Basis in der Sprache Dart mit Verteilung der Apps über die Plattform eigenen Stores – bei besserer Performance. Um dies zu erreichen fungiert Flutter, stark vereinfacht gesprochen, ähnlich zu einer Spiele-Engine: das komplette UI wird direkt von Flutter in 60 oder, wenn vom Gerät unterstützt, 120fps (Frames per Second) gezeichnet. Damit benötigt es von der Plattform lediglich eine Zeichenfläche, in der das Interface dargestellt wird, sowie den Zugriff auf Services und Events. Das bedeutet auch, dass es inzwischen möglich ist Flutter Apps für den Desktop zur Verfügung zu stellen. Dafür wird der Dart-Code durch das Framework in modernes JavaScript übersetzt und in einem HTML Canvas gerendert – solange die verwendeten Erweiterungen den Desktop-Modus bereits unterstützen. Zudem wird davon ausgegangen, dass Flutter-Apps direkt auf Fuchsia – Googles zukünftigen OS – lauffähig sind.

Fazit

Die Wahl der Umsetzung kommt immer auf die gegebenen Umstände an. Welche Vorkenntnisse bringen die Entwickler mit sich, welche Anforderungen stellt der Kunde an die App? Für die konkrete Umsetzung des digitalen Produktkatalogs haben wir uns bei exensio für Flutter entschieden. Das Framework verbindet die Vorzüge Hybrider Apps und verspricht gleichzeitig eine gute Performance. In einem kleinen Team wie unserem ist die Pflege von nur einer Code-Basis ein großer Pluspunkt und der Einstieg in Dart ist bei Vorkenntnis von Sprachen wie Java und JavaScript relativ einfach. Für den Kunden hat die Nutzung des hybriden Frameworks natürlich geringere Kosten zur Folge.

Ein performancekritisches Kundenprojekt, das umfassende Hardware-Unterstützung benötigt würden wir hingegen mit entsprechendem Aufwand als native Entwicklung umsetzen.

Links

• Erfahrungsbericht: https://dropbox.tech/mobile/the-not-so-hidden-cost-of-sharing-code-between-ios-and-android
• Angular: https://angular.io
• VueJS: https://vuejs.org
• Ionic: https://ionicframework.com
• ReactNative: https://reactnative.dev
• Xamarin: https://dotnet.microsoft.com/apps/xamarin
• Flutter: https://flutter.dev
• Dart: https://dart.dev
• "How is Flutter driffrent for app development": https://www.youtube.com/watch?v=l-YO9CmaSUM
• Fuchsia: https://fuchsia.dev

Flutter Reihe:

• Teil 1: Mobile App-Entwicklung mit Google Flutter
• Teil 2: Flutter und Dart im Einsatz für Apps – ein Erfahrungsbericht
• Teil 3: Animationen mit Flutter - das exensio Logo als Ladeanimation
• Teil 4: Flutter for Web mittels Google Cloud Bucket veröffentlichen
• Teil 5: Wie erstellt man Packages mit Google Flutter
• Teil 6: Barcodes Scannen mit Google Flutter
• Teil 7: Wie eine Google Flutter App sprechen lernt
• Teil 8: Flutter meets Video
• Teil 9: Flutter und schimmernde Skelette
• Teil 10: Flutter Design Series: Glas Morphismus
• Teil 11: App State-Management mit Flutter BLoC
• Teil 12: Mit Quick Actions Schnellzugriffe in Flutter Apps umsetzen
• Teil 13: Listen in Listen: Flutter Performance Optimierung