Vielmehr ist dies eine andere Geschichte darüber, wie ich zu einem neuen Framework gewechselt bin.) Das
Material impliziert nicht die ultimative Wahrheit. Hier werden nur die Lösungen beschrieben, die ich für mich selbst ausgewählt habe und die für mich mit einem großen Hintergrund in der Entwicklung von React & React Native am einfachsten waren, mich für ein reales Projekt zu bewerben.
Kontext
Zunächst werde ich sozusagen den Kontext beschreiben. Es wurde der Auftrag erteilt, eine kleine (ca. 15 Bildschirme) plattformübergreifende mobile Anwendung zu schreiben. Natürlich habe ich es aus Gewohnheit in React Native angefangen. In zwei Wochen wurde die Anwendung zu ca. 80% implementiert.
Am Wochenende las ich einen weiteren Artikel von Surf mit den Ergebnissen der Umfrage zu Habré . Und der Gedanke kam, warum nicht versuchen? Kann ich wiederholen, was für mich bereits über ein neues Framework geschrieben wurde? Es wurde beschlossen, das Wochenende damit zu verbringen, dies zu versuchen. Infolgedessen wurden in der nächsten Woche nicht nur die 80% zuvor, sondern auch die restlichen 20% neu geschrieben. Die Entwicklungszeit wurde um mehr als die Hälfte reduziert!
Profis
Der Vorteil ist vor allem die Geschwindigkeit des Layouts. Bildschirme nieten SEHR schnell. Lineare Farbverläufe, SVG, GIF - so ziemlich alles sofort einsatzbereit. Überlappende Komponenten ( Position: absolut ) - überhaupt kein Problem. Alles, was in React Native Schmerzen verursacht hat, wird mit einem Fingerschnipp erledigt. Animationen sind in der Regel ein Märchen! Mit ständig animierten Komponenten mit Flutter wurde viel weniger Zeit auf demselben Bildschirm mit ständig animierten Komponenten verbracht.
Minuspunkte
Es gibt zwei greifbare Nachteile. Der erste ist die Dokumentation. Sehr wenig auf Russisch. Offizielles Englisch ist nicht sehr gut strukturiert, ja, es enthält viele nützliche Codebeispiele, aber es ist schwierig, etwas Sinnvolles aus der allgemeinen Architektur der Anwendung zu verstehen.
Der zweite Nachteil sind die Pakete. Es gibt dort immer noch ein komplettes Durcheinander. Die Auswahl eines wirklich guten Pakets für das gewünschte ist keine triviale Aufgabe. Irgendwo funktioniert eine Funktion nicht, woanders. Für die Auswahl wird viel Zeit aufgewendet. Als Option - fügen Sie selbst etwas hinzu, aber dann werde ich mich daran gewöhnen.
Erfahrung: Haken
Meine Bekanntschaft mit React geht auf die Tage zurück, als gerade normale Klassen darin erschienen waren. Jetzt kann ich ihn mir nicht ohne Haken vorstellen und habe den Unterricht schon vergessen. Für Flutter gibt es eine wunderbare flutter_hooks- Bibliothek , mit der Sie vertraute Hooks in Ihr Projekt einbringen können. Für mich hat es StatefulWidget komplett ersetzt . Es gibt viele Hooks, die Sie selbst schreiben können, aber meistens werden in meinem Code useEffect , useState und useMemoized verwendet . Verwenden Sie für AnimationenAnimationController .
Vielleicht ist dies nicht die beste Lösung (ich bin bereit, die Nachteile in den Kommentaren zu lesen), aber Sie können den Hintergrund von React in einem neuen Framework für sich selbst verwenden. Ich sehe nicht einmal einen Grund, Beispiele mit Code zu nennen - alle React-Entwickler kennen dies als "unseren Vater"!
Erfahrung: Staatsmanagement
Zu einer Zeit musste ich mit Redux , Mobx und sogar mit Exoten wie Storeon arbeiten . Es scheint, dass es (Redux / Mobx) auch unter Flutter ist, aber ehrlich gesagt habe ich es nicht gemeistert). Meiner Meinung nach ist dort im Vergleich zu React alles zu kompliziert. Sie können natürlich mehr Zeit verbringen und es herausfinden, aber warum, als ich eine bessere Lösung gefunden habe: Riverpod .
Eine Bibliothek von Remi Rousselet , Autor von flutter_hooks - natürlich funktionieren beide gut). In der Tat ist es ein modifizierter Anbieter . Fügen Sie einfach Ihre runApp hinzu ( ProviderScope (...))Wrapper über alles andere und erhalten den globalen Bereich in der gesamten Anwendung, auf den von jedem Widget aus zugegriffen werden kann. Es reicht aus, useProvider ( providerName ) in die Erstellungsmethode von HookWidget zu schreiben, und wir haben verfügbare Daten vom angegebenen Anbieter.
Es gibt viele Anbieteroptionen in der Bibliothek, aber die grundlegendsten sind ChangeNotifyProvider und StateNotifyProvider . Die gesamte Geschäftslogik kann sicher aus Widgets entfernt und an diese Anbieter übertragen werden. Darüber hinaus sind sie perfekt miteinander kombiniert und es wird nicht schwierig sein, von einem Zugriff auf die Methoden und Daten des anderen zu gelangen.
Das Muster ist Redux-Enten sehr ähnlichDer Ansatz, der für mich persönlich der engste in der Welt von React geworden ist. Nur "Enten" sind kleiner. Das Wichtigste dabei ist, dass es besser ist, viele kleine Anbieter zu haben, die in verschiedenen Widgets verwendet werden, als einen großen für sie, da die tatsächlich geänderten Widgets neu gezeichnet werden.
Enttäuschung: Web
Nach einem (für mich) überwältigenden Erfolg bei der Entwicklung einer mobilen Anwendung entschied ich mich, wie jeder Full Stack mit Selbstachtung, Flutter für das Web zu berühren. Wiederum das Umschreiben einer der wirklich funktionierenden Unternehmensanwendungen.
Natürlich befindet sich Flutter Web noch in der Beta und alles, was unten beschrieben wird, gilt speziell für die Beta-Version. Ich hoffe wirklich, dass sich mit der Veröffentlichung viel zum Besseren ändert. Trotzdem hat mich Flutter hier enttäuscht.
Das erste, was Sie über Flutter Web wissen müssen, sind nicht Websites, sondern Anwendungen! Jene. Es ist notwendig, auf die gleiche Weise wie für mobile zu schreiben. Alle Widgets sind gleich. Sie können kein JS von Drittanbietern in Ihrem Code verwenden. Greifen Sie nur über dart: js darauf zu . Zugriff auf HTML auch über Dart: HTML... Dies schneidet fast alles, was bereits in der Web-Welt getan wurde, auf einmal ab. Wenn Sie eine coole Animation wünschen, die bereits irgendwo in css + js implementiert wurde, sollten Sie ein Analogon zum Flattern schreiben oder dart: js verwenden, was nicht immer einfach ist. Es ist unmöglich, eine vorgefertigte JS / CSS-Bibliothek schmerzlos zu verwenden.
Das zweite Minus sind wieder die Pakete! Obwohl auf pub.dev das meiste davon als Unterstützung für Web, Android und iOS gekennzeichnet ist, funktioniert normalerweise entweder das eine oder das andere. Jene. Sie können keinen vollständig plattformübergreifenden Code erstellen.
Webpakete sind normalerweise ein Wrapper über ihre js-Gegenstücke. Aber fast immer halten sie nicht mit der Version des Pakets Schritt, das sie verpacken.
Beispiel:
Die Aufgabe besteht darin, eine Autorisierung über MS vorzunehmen und Benutzerdaten zu erhalten.
Im guten alten JS ist alles einfach: Nehmen Sie msal undMicrosoft/ microsoft-graph-client - und genießen Sie das Ergebnis. Suchen Sie msal_flutter in
Flutter , verbinden Sie es ... und es stellt sich heraus, dass das Webpaket es nicht unterstützt. Okay, wir finden msal_js - dies ist ein Wrapper über dem üblichen msal, daher müssen Sie ihn über das gute alte Skript-Tag in index.html aufnehmen. Wenn msal jedoch bereits auf 1.4.2 aktualisiert wurde, unterstützt dieses Paket maximal 1.3.0!
Nun, nun, wir haben den Token vor Kummer halbiert. Was ist mit den Benutzerdaten? Es gibt ein Paket microsoft_graph - keine Dokumentation dazu. Um die erforderliche Methode zu finden, müssen Sie in den Paketcode gehen und dort herumstöbern. Und am Ende stellen Sie fest, dass nur einige von ihnen dort für die Arbeit mit Aufgaben implementiert sind! Finde einen anderen msgraph- damit generell die einzige Methode unterstützt!
Glücklicherweise ist das Protokoll selbst nicht sehr kompliziert , da und man kann schnell etwas schreiben von Ihren eigenen , wenn Sie brauchen , um Arbeit und nicht die Bibliotheken schreiben)
Umgebung
Der dritte und größte Nachteil ist die Unmöglichkeit, die Umwelt einzurichten. Flutter Web wird entweder in einem Browser oder als Webserver ausgeführt. Sie können den Port, an dem er ausgeführt wird, weiterhin über die Befehlszeilenparameter festlegen (was auch nicht sehr praktisch ist, wo sich die Konfiguration befindet ?!). Aber wie kann ich ihn als https mit einem selbstsignierten Zertifikat ausführen? Damit gleichzeitig die Hot Load funktioniert und Debugging und andere Chips, die normalerweise funktionieren? Hallo! Leute, 2k20 endet und du hast noch http? Ja wirklich?!
Fazit
Auf jeden Fall reißt Flutter als Framework für die plattformübergreifende mobile Entwicklung React Native an allen Fronten in Stücke. Ich bin zufrieden, der Kunde freut sich auch - was brauchen Sie noch?
Als Werkzeug zum Schreiben von Webanwendungen ist es jedoch immer noch feucht und zu mühsam. Machen Sie sich bereit, wenn Sie in wenigen Sekunden ein js-Paket eines Drittanbieters angeschlossen haben. Hier schreiben Sie für ein paar Tage einen Wrapper dafür oder sogar Ihr eigenes Analogon zu Flutter.
PS
Ich werde es noch einmal wiederholen für diejenigen, die vom Anfang des Artikels vergessen haben. Die angewandten Lösungen und Schlussfolgerungen, die ich beschrieben habe, sind die Schlussfolgerungen einer Person mit einem 1-wöchigen Hintergrund in Flutter und einem 3-jährigen Hintergrund in React. Nehmen Sie sie also nicht für die ultimative Wahrheit. Ich bin bereit, in den Kommentaren mit dem Guru zu besprechen, was ich falsch gemacht habe.