#development

Flutter: Der schnelle Newcomer in der Cross-Platform App-Entwicklung

Wieso Flutter nicht nur eine von vielen Technologien ist für die Erstellung von mobile Cross-Platform Apps und wieso wir darauf setzen.

Flutter: Der schnelle Newcomer in der Cross-Platform App-Entwicklung
Daniel Lampl
Frontend & App-Development bei Deckweiss

Wir sollen eine App für iOS und Android entwickeln. Die Frage, die sich dabei heutzutage oft stellt, ist: Wie? Es gibt viele unterschiedliche Möglichkeiten, heutzutage, diese kleinen digitalen Helfer zu entwickeln. Cordova, NativeScript, Xamarin, Ionic, Adobe PhoneGap, React Native, NativeScript,… Die Liste ist an möglichen Technologien ist nahezu endlos und alle versprechen sie reibungsloses Entwickeln von Cross-Platform Apps. Dieses Versprechen gab auch Google, als im Mai des Jahres 2017 “Flutter” von ihnen offiziell veröffentlicht wurde.

Viele mögen jetzt vielleicht denken, dass die Veröffentlichung eines neuen Cross-Platform Frameworks nichts besonderes ist. Schließlich gibt es schon einige Technologien, die es ermöglichen, aus nur einer einzigen Code-Basis für iOS und Android Anwendungen zu generieren. Die meisten Cross-Platform Technologien wie Cordova, Ionic oder Xamarin haben jedoch, im Gegensatz zu “Flutter”, einen Schönheitsfehler: sie erzeugen keine nativen mobilen Anwendungen, sondern nur hybride Apps. Doch wo ist hier der Unterschied?

Native vs. Hybrid

Native Apps werden gezielt für eine bestimmte Plattform mit der dafür vorgesehenen Programmiersprache geschrieben — Android Applikationen mit Java bzw. Kotlin und iOS Apps mit Swift bzw. Objective-C. Das hat den Vorteil, dass hier die Programmiersprachen verwendet werden, die vom jeweiligen System am besten verstanden werden und mit der Hardware am besten kommunizieren können. Somit erhält man vollen Zugriff auf die Funktionalitäten des Betriebssystems. Da native Anwendungen jeweils für das bestimmte Betriebssystem eigens entwickelt werden müssen bedeutet das, dass die eine App zwei mal geschrieben werden muss Das führt dann natürlich auch zu doppelter Entwicklungsdauer und doppelten Entwicklungskosten.

Im Gegensatz zu nativen mobilen Anwendungen bestehen hybride Apps nur aus einem nativen Grundgerüst, in welchem Apps dargestellt werden, die auf Webtechnologien basieren. Das hat den Nachteil, dass die native Komponente der hybriden App mit dem Browser kommunizieren muss. Die Business Logik wird meist mit Javascript, welches nicht direkt auf die Hardware und die Funktionen des Betriebssystems zugreifen kann geschrieben. Somit erweisen sich diese Anwendungen, im Vergleich zu nativen Anwendungen, als weniger performant. Hier besteht allerdings der Vorteil, dass für beide Plattformen die App nur einmal geschrieben werden muss, mit Technologien, die in der Softwarewelt weiter verbreitet sind als die nativen Programmiersprachen. Die bekanntesten Vertreter für hybride App-Entwicklung sind Cordova, PhoneGap, Xamarin und Ionic.

Doch was hat das jetzt mit Flutter zu tun?

Obwohl Flutter eine Cross-Platform Technologie darstellt resultieren aus dem geschriebenen Code native Apps, die in den optimierten Sprachen für das jeweilige Betriebssystem kompiliert werden. Das zieht die Vorteile von nativer als auch von hybrider App-Entwicklung mit sich, was sich wiederum in erhöhter Performance und schneller Entwicklungsdauer widerspiegelt. Im Gegensatz zu den meisten Cross-Platform Technologien basieren Flutter Apps nicht auf irgendwelchen Web-Frameworks, sondern werden in der Programmiersprache Dart geschrieben.

https://github.com/flutter/flutter/wiki/The-Engine-architecture

Wieso Dart und was ist das?

Dart ist eine AOT (Ahead-Of-Time) kompilierte Programmiersprache, was bedeutet, dass der Code vor der Ausführung der Anwendung und unabhängig von dieser in nativen Maschinencode umgewandelt wird. Der vorkompilierte Programmcode wird somit schneller und direkt auf dem Endgerät ausgeführt.

Der mit Dart geschriebene Code hat zusätzlich noch den Vorteil, dass dieser auch JIT (Just-In-Time) kompiliert werden kann. Das bedeutet, dass der Programmcode während der Ausführung der Anwendung verwertet wird. Die Möglichkeit den Code auch während der Laufzeit zu kompilieren bringt uns zu einem mächtigen Feature von Flutter, das vor allem Software-Entwicklern gefallen dürfte: Flutter Hot Reload.

Die Hot Reload Funktion ermöglicht es, dass Änderungen im Code während der Entwicklung innerhalb von Millisekunden auf dem zur Entwicklung verwendeten Gerät oder Simulator gelangen und angezeigt werden.

https://cdn-images-1.medium.com/max/1600/1*bYuD5OBj28zyea3-K2bdHQ.gif
Flutter Hot Reload (https://flutter.dev/docs/development/tools/hot-reload)

Die Größe der Änderungen im Code spielt dabei wenig bis gar keine Rolle. Die Änderungen werden sofort in der laufenden Software kompiliert und am Testgerät gezeigt. Dies wiederum erhöht die Entwicklungsgeschwindigkeit und fördert den Spaß und die Freude am Entwickeln. Jeder native App-Entwickler wird verstehen was ich meine. 😏

Dart hat zudem den Vorteil, dass es viele Ähnlichkeiten zu anderen Entwicklungssprache aufweist und somit schnell und zeitnahe erlernbar ist. Zudem muss hier, im Gegensatz zu nativer Entwicklung, nur eine Programmiersprache erlernt werden, was wiederum Zeit, Aufwand und Kosten in der Entwicklung einspart.

Die Konkurrenz schläft nicht (ganz)

Flutter ist nicht die einzige Technologie die uns die gezeigten Vorteile liefert. React Native wurde von Facebook entwickelt und bietet wie Flutter die Möglichkeit native Cross-Platform Apps für iOS und Android zu erstellen.

Da React Native Apps in JavaScript, welches zur Laufzeit — also Just-In-Time — kompiliert wird, geschrieben wird benötigt diese eine JavaScript bridge, die mit den nativen Komponenten kommunizieren muss. Flutter hingegen benötigt diese Brücke nicht, was wiederum höhere Performance bedeutet. Flutter baut auf der C/C++ 2D Rendering Engine Skia auf, die gemeinsam mit dem Programmcode, geschrieben in Dart, in einer plattformspezifischen Shell läuft. Jede Shell beinhaltet die Schnittstellen zu dem jeweiligen Betriebssystem und kommuniziert direkt mit dem diesem. Durch Skia erhält Flutter zusätzlich die Kontrolle über jeden Pixel der sich auf dem Screen des Endgerätes befindet.

Wie der Name bereits verrät baut React Native auf dem JavaScript Framework “React” auf. React bringt, wie jedes Framework, Eigenheiten mit sich. Als React-Entwickler wird man sich hierbei schnell zurecht finden. Beherrscht man dieses Framework jedoch nicht, so wird man einige Zeit mit Einarbeitung benötigen bis man fit für die Implementierung einer React Native App ist. Wer vertraut mit objektorientierten Programmiersprachen wie Java oder C# ist, dem wird das Erlernen von Dart und Flutter leichter fallen. Wer jedoch eher in der Webentwicklung mit JavaScript/TypeScript zu Hause ist und bereits Erfahrungen mit React sammeln konnte der wird eher von React Native überzeugt sein.

Obwohl React Native bereits 3 Jahre vor Flutter veröffentlicht wurde ist die Community hinter den beide Technologien ähnlich groß. Flutter erfuhr in den letzten beiden Jahren einen regelrechten Hype und zog die Aufmerksamkeit vieler Entwickler auf sich. Auch der Support von Libraries wuchs im letzten Jahr enorm an und weist eine Vielzahl an brauchbaren Anbindungen auf. Es gibt nahezu nichts wofür es für Flutter kein package gibt.

Warum verwenden wir also Flutter?

Der Grund warum wir die Entwicklung von mobilen Apps mit Flutter bevorzugen ist, weil es gegenüber den alternativen --Platform Lösungen die Technologie ist, die die schnellste Performance liefert und die beste Development Experience bietet. Mit der enorm schnellen Hot Reload Funktionalität macht auch das Testen am echten Endgerät endlich wieder Spaß. Dadurch dass für beide Plattformen nur ein Code geschrieben werden muss wird die Entwicklungszeit und somit auch die Kosten minimiert. Für uns ergibt Flutter ein rundum stabiles und durchdachtes Gesamtpaket das hält was es verspricht. Wieso also nicht das nächste Projekt mit Flutter starten, um Zeit und Kosten zu sparen und obendrein eine top Performance zu erzielen?

Artikel teilen