Flutter: Googles Antwort auf Cross-Platform

Flutter ist ein SDK für mobile Apps, das im Kern darauf abzielt, jedem die Erstellung schöner mobiler Apps zu ermöglichen. Egal, ob Sie aus der Welt der Webentwicklung oder der nativen mobilen Entwicklung kommen, Flutter erleichtert die Erstellung mobiler Apps auf vertraute, vereinfachte Weise, ohne die Kontrolle an das Framework abzugeben.

Zum Zeitpunkt des Schreibens verwenden sowohl Google AdWords als auch Alibaba Flutter in der Produktion. Weitere Beispiele dafür, wer Flutter nutzt (einschließlich der App, an der ich gearbeitet habe), finden Sie auf der Website von Flutter auf der Showcase-Seite.

Zurzeit gibt es viel Aufregung um Flutter. Die Frage, die ich am häufigsten sehe, ist: „Flutter oder React Native… welches soll ich verwenden?“ Wie bei allen Dingen in der Programmierung geht es um die Kompromisse, die Sie eingehen möchten.

Ich werde versuchen, Sie davon zu überzeugen, dass Flutter die beste Option für die Entwicklung mobiler Apps ist. Ich glaube, es ist besser als jedes andere Cross-Platform-Framework, und es ist möglicherweise besser als die native Entwicklung – aber dazu später mehr.

Zuvor werde ich Ihnen (schnell) erläutern, was Flutter ist und was nicht, beginnend mit der Programmiersprache Dart.

Was ist Dart?

Dart ist eine von Google entwickelte Programmiersprache, die zum Schreiben von Flutter verwendet wurde. Dart wurde mehr oder weniger entwickelt, weil Google eine Sprache wollte, die „besser“ als JavaScript zum Schreiben von serverseitigem und front-end-Code ist. Soweit ich weiß, war das Hauptproblem mit JavaScript, wie langsam es mit neuen Funktionen aktualisiert wird, da es auf einem riesigen Komitee für Genehmigungen und mehreren Browserherstellern zur Implementierung angewiesen ist.

Nach einer Reihe von Entscheidungen, ob JavaScript direkt angegangen werden soll oder nicht, entschied sich Google dafür, eine Sprache zu entwickeln, die semantisch in JavaScript passt. Mit anderen Worten, jedes einzelne Element, das Sie in Dart schreiben, kann zu JavaScript kompiliert werden. Deshalb haben sie nicht einfach Java verwendet – es ist semantisch riesig.

Hier ist eine geleakte E-Mail-Kette von Google aus dem Jahr 2010. Es ist der „Coming to Jesus“-Moment, in dem sie beschlossen, dass sie etwas gegen JavaScript unternehmen mussten.

Die Grundlagen von Dart sind denen aller High-Level-Sprachen ähnlich. Das gesagt, Programmiersprachen sind, wie sich herausstellt, schwer zu lernen.

Es gibt jedoch gute Nachrichten. Dart zeichnet sich als „sichere“ Sprache zum Lernen aus. Google hat nicht versucht, mit Dart etwas Innovatives zu schaffen. Sie wollten eine Sprache entwickeln, die einfach und produktiv ist und zu JavaScript kompiliert werden kann.

Es gibt nichts Besonderes an seiner Syntax und keine speziellen Operatoren, die Sie durcheinanderbringen. In Dart (im Gegensatz zu JavaScript) gibt es einen Weg, true zu sagen: True. Es gibt einen Weg, false zu sagen: False.

In JavaScript wird dies zu True koerziert

if (3) { ... }

In Dart würde dies Ihr Programm zum Absturz bringen. Dart ist im Wesentlichen eine produktive, vorhersagbare und einfache Sprache.

Das ist wichtig, denn eine App in Flutter zu schreiben, ist einfach nur Dart zu schreiben. Flutter ist im Grunde eine Bibliothek von Dart-Klassen. Es gibt keine Auszeichnungssprache oder JSX-ähnliche hybride Sprache. Jeder Teil des Front-End-Codes wird in Dart geschrieben. Kein HTML. Kein CSS.

Warum verwendet Flutter Dart?

Wenn Sie aus einem beliebigen anderen Hintergrund kommen (und wie ich sind), haben Sie sich wahrscheinlich darüber beschwert, dass Flutter Dart und nicht JavaScript verwendet. (Entwickler sind, ob Sie es glauben oder nicht, meinungsstark.)

Und es gibt Gründe, dieser Wahl skeptisch gegenüberzustehen. Es ist keine der angesagten Sprachen von heute. Es ist nicht einmal eine der Top 25 am häufigsten verwendeten Sprachen. Was soll das? Nutzt Google es nur, weil es ihre Sprache ist? Ich stelle mir vor, dass das eine Rolle gespielt hat, aber es gibt auch praktische Gründe.

• Dart unterstützt sowohl Just-In-Time (JIT) als auch Ahead-of-Time (AOT) Kompilierung.
  • Der AOT-Compiler wandelt Dart in effizienten nativen Code um. Das macht Flutter schnell (ein Gewinn für Benutzer und Entwickler), bedeutet aber auch, dass fast das gesamte Framework in Dart geschrieben ist. Für Sie als Entwickler bedeutet das, dass Sie alles anpassen können.
  • Die optionale JIT-Kompilierung von Dart ermöglicht Hot-Reloading. Schnelle Entwicklung und Iteration ist ein Schlüssel zur Freude an der Nutzung von Flutter. Wenn Sie Code in Ihrem Texteditor speichern, wird Ihre App in weniger als einer Sekunde in Ihrem Simulator aktualisiert.

Dart ist objektorientiert. Das macht es einfach, visuelle Benutzererlebnisse ausschließlich mit Dart zu schreiben, ohne dass eine Auszeichnungssprache erforderlich ist.

• Dart ist eine produktive und vorhersagbare Sprache. Sie ist leicht zu lernen und fühlt sich vertraut an. Egal, ob Sie aus einer dynamischen oder einer statischen Sprache kommen, Sie können sich problemlos zurechtfinden.
• Und ja, ich stelle mir vor, dass es äußerst attraktiv ist, eine Sprache desselben Unternehmens zu verwenden, da das Flutter-Team eng mit dem Dart-Team zusammenarbeiten könnte, um neue erforderliche Funktionen zu implementieren.

Flutter vs. React Native (und andere Optionen)

Bevor ich meine unerbetenen Meinungen zu Ihren anderen Optionen abgebe, möchte ich eines ganz klarstellen: Flutter ist nicht immer die Antwort. Es ist ein Werkzeug, und wir sollten das richtige Werkzeug für die jeweilige Aufgabe wählen. Dennoch würde ich argumentieren, dass es etwas ist, das Sie in Zukunft ernsthaft in Betracht ziehen sollten.

Native Entwicklung (iOS und Android)

Ihre erste Wahl ist es, native Apps für iOS und Android zu schreiben. Dies gibt Ihnen maximale Kontrolle, Debugging-Tools und (potenziell) eine sehr leistungsstarke App. In einem Unternehmen bedeutet dies wahrscheinlich, dass Sie alles zweimal schreiben müssen; einmal für jede Plattform. Sie benötigen wahrscheinlich unterschiedliche Entwickler in verschiedenen Teams mit unterschiedlichen Fähigkeiten, die sich nicht leicht gegenseitig helfen können.

React Native, WebViews und andere Cross-Platform-JavaScript-Optionen

Ihre zweite Option: Cross-Platform-Tools auf JavaScript-Basis wie WebViews und React Native. Das sind keine schlechten Optionen. Die Probleme, die Sie bei der nativen Entwicklung haben, verschwinden. Jeder Frontend-Webentwickler in Ihrem Team kann mithelfen – alles, was er braucht, sind einige moderne JavaScript-Kenntnisse. Genau deshalb haben große Unternehmen wie AirBnb, Facebook und Twitter React Native für Kernprodukte verwendet. (AirBnb hat kürzlich angekündigt, dass es die Verwendung von React Native aufgrund einiger der unten beschriebenen Probleme einstellen wird.)

Die ersten „mobilen Apps“, die Cross-Platform entwickelt wurden, sind einfach WebViews, die auf WebKit (einer Browser-Rendering-Engine) laufen. Dies sind buchstäblich nur eingebettete Webseiten. Das Problem dabei ist, dass die Manipulation des DOM sehr teuer ist und nicht gut genug performt, um ein großartiges mobiles Erlebnis zu schaffen.

Einige Plattformen haben dieses Problem gelöst, indem sie die „JavaScript-Bridge“ entwickelt haben. Diese Bridge ermöglicht es JavaScript, direkt mit nativen Widgets zu kommunizieren.

Dies ist weitaus performanter als WebViews, da Sie das DOM aus der Gleichung eliminieren, aber es ist immer noch nicht ideal. Jedes Mal, wenn Ihre App direkt mit der Rendering-Engine kommunizieren muss, muss sie in nativen Code kompiliert werden, um „die Brücke zu überqueren“. Bei einer einzigen Interaktion muss die Brücke *zweimal* überquert werden: einmal von der Plattform zur App und dann wieder von der App zur Plattform.

Flutter unterscheidet sich, da es seine eigene Rendering-Engine, Skia, verwendet, die gleiche Rendering-Engine, die auch in Chrome verwendet wird. Skia kann mit Flutter-Apps kommunizieren. Infolgedessen akzeptiert Flutter lokale Ereignisse *direkt*, anstatt sie zuerst in JavaScript kompilieren zu müssen. Dies ist im Wesentlichen möglich, weil *Flutter zu nativem ARM-Code kompiliert*. Das ist das Geheimnis seines Erfolgs. Wenn Ihre App auf dem Gerät eines Benutzers gestartet wird, läuft sie vollständig in der Sprache, die das Betriebssystem des Geräts erwartet.

Die JavaScript-Bridge ist zweifellos ein Wunder moderner Programmierung, aber sie birgt drei große Probleme.

Das erste Problem ist, dass das Debugging schwierig ist. Wenn es einen Fehler im Laufzeitcompiler gibt, muss dieser Fehler über die JavaScript-Bridge zurückverfolgt und im JavaScript-Code gefunden werden. Er kann auch in Markup oder CSS-ähnlicher Syntax vorliegen. Der Debugger selbst funktioniert möglicherweise nicht so gut, wie wir es uns wünschen würden.

Ein zweites, größeres Problem ist jedoch die Leistung. Die JavaScript-Bridge ist sehr kostspielig. Jedes Mal, wenn etwas in der App angetippt wird, muss dieses Ereignis über die Bridge an Ihre JavaScript-App gesendet werden. Das Ergebnis, mangels eines besseren Begriffs, ist *Ruckeln*.

Das dritte große Problem, laut AirBnb, ist, dass sie sich öfter als gewünscht mit nativem Code auseinandersetzen mussten, was ein Problem für ihre Teams war, die hauptsächlich aus JavaScript-Entwicklern bestanden. (Bei Flutter ist das Urteil zu diesem Thema noch nicht gesprochen, aber ich kann sagen, dass ich in meinem Job noch nie versucht habe, nativen Code zu schreiben. Einige Mitglieder meines Teams haben Plugins in Objective-C und Java erstellt.)

Die unmittelbaren Vorteile von Flutter

Es ist wahrscheinlich, dass Sie, da Sie diesen Artikel lesen, an Flutter interessiert sind… aber vielleicht skeptisch sind. Ich bewundere, wie gründlich Sie Technologien prüfen.

Ihre Gründe für Skepsis sind berechtigt. Es ist eine neue Technologie. Das bedeutet API-Breaking Changes. Es bedeutet fehlende Unterstützung für wichtige Funktionen (wie Google Maps). Es scheint möglich, dass Google es eines Tages aufgeben könnte.

Und obwohl Sie Dart für eine großartige Sprache halten, ändert das nichts daran, dass Dart nicht weit verbreitet ist und viele Drittanbieterbibliotheken, die Sie sich wünschen, möglicherweise nicht existieren.

Ich würde jedoch all diesen Punkten widersprechen. Die API wird sich wahrscheinlich nicht ändern, da Google Flutter intern für wichtige umsatzgenerierende Apps verwendet, einschließlich Google AdWords. Dart ist kürzlich in Version 2 übergegangen, was bedeutet, dass es wahrscheinlich eine Weile dauern wird, bis es sich stark ändert. Es wird wahrscheinlich Jahre dauern, bis Breaking Changes eingeführt werden, was in der Computerwelt praktisch für immer ist.

Ja, es fehlen tatsächlich Funktionen, aber Flutter gibt Ihnen die vollständige Kontrolle, um Ihre eigenen nativen Plugins hinzuzufügen. Tatsächlich existieren bereits viele der wichtigsten Betriebssystem-Plugins wie ein Karten-Plugin, Kamera, Standortdienste und Gerätespeicher. Das Dart- und Flutter-Ökosystem und die Community existieren bereits. Es ist natürlich viel kleiner als die JavaScript-Community, aber ich würde sagen, es ist prägnant. Ich sehe jeden Tag Leute, die zu bestehenden Paketen beitragen, anstatt neue zu erstellen.

Lassen Sie uns nun über die spezifischen Vorteile von Flutter sprechen.

Keine JavaScript-Bridge

Dies ist ein Hauptengpass in der Entwicklung und in der Leistung Ihrer Anwendung. Wiederum führt es zu *Ruckeln*. Das Scrollen ist nicht flüssig, nicht immer performant und schwer zu debuggen.

Flutter kompiliert zu echtem nativen Code und wird mit Skia gerendert. Die App selbst läuft nativ, daher gibt es keinen Grund, Dart in Native umzuwandeln. Das bedeutet, dass sie keine Leistung oder Produktivität verliert, wenn sie auf dem Gerät eines Benutzers läuft.

Kompilierzeit

Wenn Sie aus der nativen Entwicklung kommen, ist einer Ihrer größten Schmerzpunkte der Entwicklungszyklus. iOS ist berüchtigt für seine wahnsinnigen Kompilierzeiten. In Flutter dauert eine vollständige Kompilierung in der Regel weniger als 30 Sekunden, und inkrementelle Kompilierungen dauern dank Hot-Reload weniger als eine Sekunde. In meinem Hauptjob entwickeln wir zuerst Features für unseren mobilen Client, weil uns der Entwicklungszyklus von Flutter so schnell arbeiten lässt. Erst wenn wir uns unserer Implementierung sicher sind, schreiben wir diese Features für den Webclient.

Einmal schreiben, einmal testen, überall bereitstellen

Nicht nur schreiben Sie Ihre App einmal und stellen sie für iOS und Android bereit, Sie müssen auch nur einmal testen. Dart Unit-Tests sind ziemlich einfach, und Flutter enthält eine Bibliothek zum Testen von Widgets.

Code-Sharing

Ich werde hier fair sein: Ich nehme an, das ist technisch auch in JavaScript möglich. Aber in der nativen Entwicklung ist es sicherlich nicht möglich. Mit Flutter und Dart können Ihre Web- und Mobile-Apps den gesamten Code teilen, außer den Ansichten jedes Clients. (Natürlich nur, wenn Sie Dart für Ihre Web-Apps verwenden.) Sie können mit Dependency Injection ganz einfach eine AngularDart-App und eine Flutter-App mit denselben Modellen und Controllern ausführen.

Und natürlich, auch wenn Sie keinen Code zwischen Ihrer Web-App und Ihrer Mobile-App teilen möchten, teilen Sie Ihren gesamten Code zwischen den iOS- und Android-Apps.

In der Praxis bedeutet dies, dass Sie sehr produktiv sind. Ich erwähnte, dass wir in meinem Hauptjob zuerst unsere mobilen Features entwickeln. Da wir die Geschäftslogik zwischen Web und Mobile teilen, müssen wir, sobald das mobile Feature implementiert ist, nur noch Ansichten schreiben, die die gleichen Controller-Daten erwarten.

Produktivität und Zusammenarbeit

Vorbei sind die Zeiten getrennter Teams für iOS und Android. Tatsächlich sind, unabhängig davon, ob Sie Dart oder JavaScript in Ihren Web-Apps verwenden, die Flutter-Entwicklung so vertraut, dass all Ihre Teams vereint sein werden. Es ist keineswegs eine Übertreibung zu erwarten, dass ein JavaScript-Webentwickler auch effektiv in Flutter und Dart entwickeln kann. Wenn Sie mir hier glauben, dann folgt daraus, dass Ihr neues, vereinigtes Team dreimal produktiver sein wird.

Code-Wartung

Nichts ist befriedigender, als einen Fehler einmal zu beheben und ihn auf allen Ihren Clients korrigiert zu haben. Nur in sehr spezifischen Fällen gibt es einen Fehler in einer mit Flutter erstellten iOS-App, der nicht auch in der Android-Version (und umgekehrt) vorhanden ist. In 100 % dieser Fälle sind diese Fehler keine Fehler, sondern kosmetische Probleme, da Flutter die Designsysteme des Gerätebetriebssystems in seinen integrierten Widgets befolgt. Da es sich um Probleme wie Textgröße oder Ausrichtung handelt, sind sie im Kontext der Nutzung von Ingenieurzeit zur Fehlerbehebung trivial.

Flutter für JavaScript-Entwickler

Da Sie CSS-Tricks lesen, wette ich, dass Sie ein Webentwickler sind. Wenn Sie eines der derzeit angesagtesten Frameworks (z. B. React, Angular, Vue usw.) verwendet haben, werden Sie sich freuen zu erfahren, dass das Erlernen von Flutter *einfach* ist.

Flutter ist vollständig reaktiv, sodass die gleiche Denkweise und das gleiche Paradigma, das Sie von React kennen, auf Flutter übertragen werden. Sie erstellen im Wesentlichen eine Menge kleiner, wiederverwendbarer Komponenten (Widgets genannt in Flutter) genau wie bei React. Diese Widgets sind vollständig mit Lifecycle-Methoden und in Klassen geschrieben. Wenn Sie diese Syntax in React verwendet haben

const MyComponent extends React.Component {
  //...
  render(){}
}

…dann werden Sie Flutter problemlos verstehen. So machen Sie dasselbe in Flutter

class MyWidget extends StatelessWidget {
  //...
  build(){}
}

Und genau wie React bevorzugt Flutter Komposition gegenüber Vererbung. Wenn Sie beispielsweise einen speziellen `AddToCartButton` in React erstellen möchten, erstellen Sie eine Schaltfläche mit speziellen Funktionen und Stilen in JSX. Genau so machen Sie das in Flutter (abzüglich des JSX).

Schließlich ähnelt das Layoutsystem in Flutter CSS-Regeln, die wir kennen, wie Flexbox und absolute Positionierung.

Hier liegt jedoch auch ein großer Unterschied bei der Erstellung von Ansichten in Flutter. In Flutter ist buchstäblich *alles* ein Widget. Es gibt einige offensichtliche, konkrete Widgets wie `Text`, `Button` und `AppBar`. Aber auch Animationen und Layout-Deklarationen sind Widgets. Um Text zu zentrieren, umschließen Sie ein `Text`-Widget mit einem `Center`-Widget. Um Abstand hinzuzufügen, gibt es ein `Padding`-Widget.

Stellen Sie sich vor, Sie brechen eine React-App in die kleinsten, wiederverwendbaren Komponenten zerlegen, die Sie machen können. Was wäre zum Beispiel, wenn Sie eine übergeordnete React-Komponente erstellen würden, die einfach nur eine Prop „padding“ entgegennimmt und alles, was darin verschachtelt ist, um diesen Betrag auffüllt? So funktioniert Flutter, da es kein CSS oder Markup gibt.

In diesem Beispielbild sehen Sie *einige* Layout-Widgets, die Sie verwenden könnten, die der Benutzer jedoch nicht „sehen“ kann

Das mag nach viel eintöniger Arbeit klingen, aber Flutter kommt mit vielen, vielen Widgets, die direkt integriert sind (wie `Padding` und `Center`), sodass Sie keine Zeit mit der eigenen Erstellung verschwenden müssen.

Dies sind einige der gängigsten Widgets

• Layout – `Row`, `Column`, `Scaffold`, `Stack`
• Strukturen – `Button`, `Toast`, `MenuDrawer`
• Text – `TextStyle`, `Color`
• Animationen – `FadeInPhoto`, Transformationen
• Styling – `Center`, `Padding`

Schlussbemerkung

TL;DR: Sollten Sie Flutter ausprobieren?

Wenn Sie butterweiche mobile Apps im vertrauten Stil erstellen möchten, dann ja! Die Leistung und die Entwicklererfahrung bleiben bei Flutter vollständig erhalten. Seine Animationen laufen mit 60 Bildern pro Sekunde, und es verfügt über eine Fülle von integrierten Widgets im Cupertino- und Material-Design-Stil. Oder, kurz gesagt: Es ist *unglaublich*, wie schnell Sie mit Flutter produktiv sein können, ohne die native Leistung zu opfern.

Wenn Sie Flutter noch heute ausprobieren möchten, hier sind ein paar großartige Anlaufstellen

• Flutter Docs – Erste Schritte
• Flutter für Webentwickler (HTML/CSS-Äquivalente)
• Flutter by Example

Die Flutter-Dokumentation ist wirklich eine der besten, die ich je gesehen habe, und sie wird Ihnen alles beibringen, was Sie wissen müssen.