Oktober 2019 veröffentlichten wir die erste Version der bankz family Web App. Schnell wurde uns jedoch klar, dass sich ein großer Teil unserer Nutzer neben der Webanwendung zusätzlich eine Mobile App wünschte. Diesen Meilenstein erreichten wir im April mit dem Release der neu entwickelten bankz family Mobile App im Google Play Store und Apple App Store.
In diesem Blogbeitrag erfahrt ihr, für welches Framework wir uns entschieden haben und welche Learnings wir aus der Entwicklung ziehen.

bankz family App Mockup iPhone

Welches Framework haben wir ausgewählt?

Die Entwicklung einer Mobile App ist viel Arbeit. Wichtig für uns war es, dass unsere Nutzer die App sowohl auf Android- als auch auf iOS-Smartphones verwenden und in den üblichen Stores herunterladen können. Da das Kern-Entwicklungsteam der App zum Start aus nur zwei Personen bestand, war es nicht realistisch parallel zwei native Apps für jeweils Android und iOS zu entwickeln. Gegenseitige Code-Reviews wären nicht möglich gewesen, da die jeweils andere Person nicht die notwendigen Kenntnisse über die Entwicklung der nativen Anwendung für die jeweils andere Plattform besessen hätte.

Glücklicherweise gibt es für die Mobile-Entwicklung seit einiger Zeit “Cross-Plattform-Frameworks”. Diese ermöglichen, dass man aus einer gemeinsamen Codebasis eine Native Android und iOS App erzeugen kann. Besonders für kleine Teams ist das ein Vorteil, da wir so gemeinsam an derselben Anwendung arbeiten konnten.

Bevor die Entwicklung beginnen konnte, mussten wir das zu verwendende Framework auswählen.

Folgende Optionen kamen für uns in Frage:

Progressive Web App (PWA)

PWA ist zwar an sich kein Framework, trotzdem bietet es die Möglichkeit die eigene Web App schnell als Mobile App auszuliefern. PWAs basieren auf den schon für Smartphones optimierten Web Apps, bieten aber zusätzliche Features, um eine “nativere” Anwendung zu bieten. Leider fehlt der noch jungen Technologie die Unterstützung der Browser oder Betriebssystemhersteller. Mehr Infos hier.

React Native

React Native ist vermutlich das populärste Cross Plattform Framework. Zur Entwicklung von Nativen Android und iOS Apps wird hierbei JavaScript und das Web Framework React verwendet. Bereits existierende React Anwendungen lassen sich einfach mit minimalen Änderungen portieren. Auch für Entwickler ist der Umstieg leichter, da die Technologie bereits aus der Web Entwicklung bekannt ist. Mehr Infos hier.

NativeScript

NativeScript basiert auf einem ähnlichen System wie React Native, als Web Framework wird hierbei aber Angular oder VueJS verwendet. In unserem Fall war das ein großer Pluspunkt für NativeScript, da unsere Web App bereits in Angular geschrieben war. Leider ist NativeScript relativ unbekannt und hatte in unseren Tests einen aufwändigen Migrationsprozess, wodurch wir einen Großteil der App hätten neu schreiben müssen. Mehr Infos hier.

Flutter

Flutter ist aus dieser Auswahl das neueste Cross-Plattform-Framework. Anders als die zuvor genannten Frameworks basiert es nicht auf bekannten Web Frameworks oder Technologien und auch nur wenig auf nativen UI Komponenten. Stattdessen setzt Flutter auf die Programmiersprache Dart und die Grafik Engine Skia. Das deklarative UI Konzept, basierend auf Widgets, ist ähnlich wie das von React, jedoch ohne HTML, JavaScript und CSS. Mehr Infos hier.

Wir haben uns letztendlich für Flutter entscheiden, da wir uns die beste Performance bei dem meisten plattformunabhängigen Code erhofft haben.

Unsere Learnings

1. Schnelle Umsetzung von Designs dank “Hot Reload”

Durch das Design-System und die große Anzahl der UI-Komponenten, die das Framework mitgeliefert hat, konnten wir das Design schnell umsetzen. Hierbei war auch die Kollaboration mit unseren Designern besonders gut, da wir mit ihnen über das “Stateful Hot Reload” Feature schnell Anpassungen am Design vornehmen und diese direkt live in der App ausprobieren konnten.

2. Einfaches Onboarding trotz neuem Framework und unbekannter Programmiersprache

Wir hatten zu Beginn Bedenken zu Flutters Programmiersprache Dart und dem möglicherweise längeren und aufwendigeren Onboarding für neue Teamkollegen. Zum Glück stellte sich bei uns aber relativ schnell das Gegenteil heraus: Unser Entwicklerteam ist mittlerweile auf vier Mitarbeiter gewachsen und das Einarbeiten in Flutter und unseren Code ist niemandem schwergefallen. Dabei hilft besonders die ausführliche Dokumentation des Frameworks, sowie die große Community, welche viele Artikel und Anleitungen veröffentlicht. Auch das Erlernen der Programmiersprache ist einfach, da der Syntax ähnlich wie in anderen bekannten Sprachen wie JavaScript, Java oder C# ist.

3. Unterstützung durch die Community

Das Flutter Framework ist Open-Source, wird aber zu einem großen Teil von Google finanziert und vorangetrieben. Das Framework wird aktiv weiterentwickelt, beispielsweise mit neuen UI Komponenten und Performance Optimierungen. Aktueller Fokus der Entwickler ist besonders die Unterstützung des Frameworks auf mehr Plattformen auszuweiten, wie zum Beispiel auf Web und Desktop. So soll es zukünftig auch möglich sein, über eine einzige Codebasis und ohne großen Aufwand eine App auf jeder relevanten Plattform anbieten zu können. Ein Bedenken hierbei ist aber, dass die Weiterentwicklung von Flutter stoppen könnte, falls Google aussteigen sollte. Das ist jedoch unwahrscheinlich, da Flutter mittlerweile zu einem der populärsten Open Source Projekten weltweit zählt und immer mehr Firmen auf das Framework zurückgreifen.

4. Besucht Meetups

Auch die lokale Community war eine große Hilfe für uns. Der direkte Austausch mit anderen Entwicklern ist super, um von den Ansätzen oder Projekten anderer zu erfahren. Auf Plattformen wie Meetup werden regelmäßig Treffen für verschiedenste Themen organisiert.

5. Unklarer Standard bei Statemanagement

Wie Statemanagement umgesetzt werden sollte, ist wahrscheinlich eine der häufigsten Fragen in der Flutter-Community. Hierfür gibt es mehrere Ansätze; die bekanntesten sind wahrscheinlich Provider, BLoC und Redux. Hier gibt es nicht die eine richtige Lösung. Stattdessen sollte man den Ansatz abhängig von den Projektanforderungen und den Erfahrungen der Entwickler abhängig machen. Wir haben uns letztendlich für Provider entschieden, da es wahrscheinlich der einfachste Weg ist ein simples Statemanagement zu implementieren.

6. Ungewissheiten bei der Implementierung von komplexen Funktionen

Die nativen Funktionen der Smartphones, beispielsweise Authentifizierung durch Fingerabdruck oder Zugriff auf die Kamera, sind nicht Teil des Flutter-Frameworks und werden durch Packages integriert. Dart und Flutter besitzen dafür den eigenen Package-Manager “pub”. Hierüber können Entwickler ihre Packages veröffentlichen und die von anderen importieren. Da das Ökosystem noch relativ jung ist, befinden sich einige dieser Packages aber noch in der Entwicklung und sind daher noch unvollständig, was zu Blockern während der Entwicklung führen kann. Durch die größer werdende Community und wachsende Nachfrage sollten diese jedoch in der nächsten Zeit seltener werden. Mehr Infos hier.

Fazit

Wir merkten bereits relativ schnell, dass Flutter gut zu unserem Projekt und zu uns als Team passt. Einer der größten Vorteile für uns ist die Möglichkeit auch komplexe Designs schnell und effizient umzusetzen. Die wachsende Community und die kontinuierliche Verbesserung des Frameworks durch neue Updates zeigen, dass Flutter für uns die richtige Entscheidung war.

Seit unserem ersten Release haben wir bereits mehrere Updates mit neuen Funktionen veröffentlicht und arbeiten kontinuierlich daran die Mobile App zu verbessern.
bankz family ist kostenlos im App Store und Google Play Store erhältlich. Wir freuen uns, wenn ihr bankz family ausprobiert und uns eure Verbesserungsvorschläge an info@bankz-family.de zukommen lasst.

Hier geht’s zur App: