React Native aus der Sicht eines mobilen Entwicklers

Der Artikel richtet sich an iOS- und Android-Entwickler, die sich auf ihrem Gebiet bereits gut auskennen und einen Blick auf React Native werfen.

Als ich zum ersten Mal von React Native erfuhr, nutzte ich die Gelegenheit für Webentwickler, in mein Territorium einzudringen ( absolut unmöglich! ) Und gleichzeitig das gut funktionierende absturzfreie 60-fps-Produkt zu verderben. Und so geschah es. Das Ende. Die wahre Geschichte stellte sich als länger heraus.

Ablehnung

JavaScript in einer mobilen Anwendung? Mir kamen nur ein paar Bibliotheken mit JavaScriptCore unter iOS in den Sinn (diese Bibliotheken machten 90% der Abstürze der Anwendungen aus, in denen sie verwendet wurden) und Hybridanwendungen des „alten Modells“ (na ja, das ist atas).

Hybridanwendungen zeigten Hoffnung, bis Sie sie ausprobieren. Danach laufen Sie kopfüber und so weit wie möglich vor ihnen davon.

Als ich mich an die erfolglosen Versuche erinnerte, Xamarin vor 3 Jahren zu lernen, gab ich die Idee, React Native zu verwenden, schnell auf.

Es ist erwähnenswert, dass ich mich immer über neue Möglichkeiten zum Schreiben nativer Anwendungen gefreut habe (von ObjC bis Swift, von Java bis Kotlin, von Eclipse bis Android Studio). Ich beschäftige mich seit vielen Jahren als Hobby und professionell mit der Entwicklung von iOS und Android. Nach dem Wechsel zu einer neuen Sprache (innerhalb desselben Betriebssystems) oder einer neuen IDE bin ich selten zur vorherigen zurückgekehrt. Es scheint, dass React Native ein logischer nächster Schritt ist, ein weiterer neuer Schritt nach oben. Oder ist es ein Schritt zurück?

Wut

Warum sollte ich eine vereinfachte Version unterrichten, wenn ich bereits weiß, wie man das "echt" macht ?!
Ich musste noch eine Antwort auf diese Frage finden, als das Unternehmen die Aufgabe stellte, eine der Anwendungen (derzeit nur unter iOS verfügbar) komplett neu zu gestalten und auf Android freizugeben.

Wie mache ich zwei Dinge gleichzeitig und schreibe weniger Code? Vorschläge wie: ein Thin Client, C-Bibliotheken mit einem Aufruf von Swift / Kotlin-Code, React Native?

React Native sah sehr vielversprechend aus, da Bibliotheken erstellt und sofort auf drei Plattformen (iOS / Android / Web) verwendet werden konnten.

Bieten

Vielversprechend für jeden, aber nicht für mich. Ich war mit dieser Wendung sicherlich nicht zufrieden. Ich hatte das Gefühl, auf dem Höhepunkt der Fähigkeit zu sein, iOS und Android zu entwickeln, und wurde dann gebeten, all dieses Wissen wegzuwerfen, als wäre ich ein frisch Absolvent und hätte 0. Ich bezweifelte sogar, dass man mit React Native ein Qualitätsprodukt schaffen könnte.

Depression

Zweifel waren vernünftig. Die Hauptprobleme sind:

• eine anständige Menge an Tropfen im Kern von React Native;
• Methoden, die nur auf einer Plattform funktionieren (die Docks zeigen an, dass sie überall funktionieren);
• unvollständige Beschreibung. Schauen Sie sich einfach die Docks des React Native-Sammlers an .

Das versteckte Hauptproblem: der interne Block in meinem Kopf, der mich daran hinderte, die Pluspunkte hinter einer Reihe von Minuspunkten zu sehen.

Akzeptanz

Und natürlich ist React Native nicht nur ein Nachteil. Es gibt viel Gutes, es ist viel einfacher zu schreiben und funktioniert sofort besser als das gleiche auf bestimmten Plattformen.

Wenn wir offensichtliche Probleme wie Abstürze und magere Docks verwerfen, sind hier Beispiele für das, was ich zu bewältigen hatte:

Javascript

Kein Wunder. Dies ist das erste, was durch Blut, Schweiß und Tränen Hand in Hand geht.
Als ich mich an meine früheren Erfahrungen als Frontend-Entwickler erinnerte (ich war vor mobilen Anwendungen an Websites beteiligt), begann ich mit dem vietnamesischen Syndrom: Johnny, JavaScript umgibt uns!

Wenn Sie sich entscheiden, Anwendungen auf React Native zu schreiben, empfehle ich die Teilnahme an einem der neuesten JS-Kurse. Sie müssen nicht React oder React Native sein.

In den letzten Jahren hat sich mit der Veröffentlichung der Standards ES6, ES7 und ES8 die Art und Weise, wie Sie Code schreiben, stark verändert.

Und er wurde sehr persönlich .

Statische Prüfung

In den ersten Monaten fehlt der statische Analysator, der in allen mobilen Muttersprachen verfügbar ist, sehr.

Es gibt verschiedene Dienstprogramme, die das Fehlen von Dienstprogrammen ausgleichen und einen Teil der Funktionen ausführen

Layoutelemente

Die größte Herausforderung wird hier für iOS-Anfänger sein.

Diese Herausforderung ist das Fehlen eines visuellen Schnittstelleneditors.

Alles wird im Code mit JSX- Markup ausgeführt. Technisch gesehen ist dieses Markup optional. Es hilft, die Hierarchie der Komponenten zu sehen. Android-Entwickler werden sich wohl fühlen und die Ähnlichkeiten mit XML bemerken.

Gleichzeitig gibt es eine klare Sicht auf die Ansichten und das Potenzial für die Wiederverwendung.

In iOS gibt es entweder die eine oder die andere, je nachdem, welche Methode ausgewählt werden soll (Layout im Code oder im Interface Builder). Ja, diese beiden Probleme können gelöst werden, aber Sie müssen eine angemessene Menge Code schreiben.

React Native hat dieses Problem nicht.
In Android ist es übrigens auch nicht da.
Android-Experten werden jedoch die Art und Weise zu schätzen wissen, wie Parameter direkt im Markup von externen auf interne Komponenten übertragen werden.

Die Basisansicht hier ist ein Analogon von LinearLayout (Android) und UIStackView (iOS) mit einer Beimischung von Konstanten gleichzeitig. Eine ziemlich einfache Art (im Vergleich zu Konstraten), Elemente zu positionieren.

UIViewController und Aktivität

React Native hat weder das eine noch das andere.
Natürlich sind sie unter der Haube. Direkte Interaktion mit ihnen wird nicht funktionieren. Ja, das ist nicht nötig.

Der Lebenszyklus aller React Native-Komponenten unterscheidet sich grundlegend von iOS und Android. Es ist schwierig, Parallelen zu ziehen. Wenn Sie sich auf die Unterschiede zu nativen Systemen konzentrieren, dann:

• UI-Elemente selbst ändern den Status / das Erscheinungsbild, wenn Eingabeparameter geändert werden.
• Auf Android muss onSaveInstantState nicht jongliert werden . React Native erledigt das alles für uns;
• Unter iOS gibt es keine Methoden, die den Moment, in dem die Anwendungsbildschirme angezeigt / ausgeblendet werden, direkt explizit melden.

Build Time / Live Reload / Hot Reload

Durch die schrittweise Montage wird eine hohe Geschwindigkeit erreicht - nur modifizierte Module werden neu erstellt und nicht das gesamte Bundle.

Alle Änderungen im JS-Code sind sofort im Simulator sichtbar. Beschleunigt die Entwicklung enorm!

Fehlende native Funktionalität in JS

Im JS-Teil von React Native ist nicht alles, was Sie benötigen, sofort einsatzbereit.

Sie können den nativen Teil auf beiden Plattformen schreiben, einen JS-Wrapper erstellen und ihn wie den Rest des Codes aufrufen. Es ist nichts kompliziert.

Es gibt eine große Anzahl vorgefertigter Module, die von Drittentwicklern geschrieben wurden.

Alle Module sind über npm (analog zu CocoaPods für iOS und Gradle für Android) verbunden, die nativen Code mit der erforderlichen Funktionalität haben.

Universelle und tiefe Verbindungen

Die Funktionalität wird von Facebook implementiert.
Es funktioniert gut und konsequent.

Verarbeiten von Absichten Dritter

Als Sonderfall des vorhergehenden Absatzes.

Das größte Problem bei Android ist die Behandlung einer anderen Absicht als eines Deeplinks in einer Anwendung.
Es hängt natürlich von der Absicht ab und was getan werden muss, wenn es empfangen wird.

Sie können einen separaten Artikel zu diesem Thema schreiben. Der Ausgangspunkt ist das Hinzufügen der Methode createReactActivityDelegate zu MainActivity.

Leistung

Es ist ziemlich einfach, 60 FPS zu erhalten, wenn Sie durch lange Listen mit komplexen Zellen scrollen.
Die Leistung von allem anderen (z. B. Drücken einer Taste, Drucken von Text in einem Feld) ist geringer. Dies macht sich während einer animierten Zustandsänderung in einer Vielzahl von Elementen bemerkbar. Dies kann leicht behandelt werden. Ein guter Abschnitt in der Dokumentation Verwenden von Native Driver for Animated .

Und Sie können die Gesten und ihre Zuordnung zur Animation nicht sofort normal steuern.

Instabilität

Oft hört ein Projekt einfach auf zu bauen, zum Beispiel nach:

• Reagieren Sie auf native Kernel-Updates (auch beim Aktualisieren der Nebenversion).
• npm Modul Updates;
• Xcode-Updates;
• CocoaPods-Updates (dauerhafte Probleme damit);
• einfach so. Ja, das passiert auch.

Glücklicherweise sind die meisten dieser Probleme ziemlich schnell behoben. Sie können ein Skript hinzufügen, das alle Caches überall bereinigt und es ausführt, wenn etwas schief geht. Hilft bei der Lösung von 98% der seltsamen Probleme, die aus dem Nichts kommen. Mit Ausnahme von CocoaPods ist alles traurig.

Abhängigkeitsinstabilität von Drittanbietern

Das größte Problem unter iOS war und ist der weit verbreitete Wunsch von npm-Modulen, Methoden-Swizzling zu verwenden .

Viele native Module sind durch Binärdateien verbunden. Es ist nicht so einfach zu verstehen, dass mehrere unabhängige Module dieselbe Methode verwenden.

Die Montage erfolgt in mehreren Schritten und bei jedem von ihnen kann etwas schief gehen.

Instabilität beim Aktualisieren von Abhängigkeiten von Drittanbietern

Einige npm-Module hängen von anderen npm-Modulen ab und so weiter. Wenn zwei Module an unterschiedliche Versionen des dritten Moduls gebunden sind, wird bei der Installation im besten Fall sofort eine Warnung angezeigt. Und im schlimmsten Fall gibt es keine Warnung, aber nichts funktioniert.

Ein ähnliches Problem, wenn npm-Module auf nativen Android-Modulen mit unterschiedlichen Versionen basieren.

Nach dem Bereinigen des Caches können neue Versionen leise geladen werden. Es scheint, dass er nichts getan hat, aber aufgehört hat zu arbeiten.

Unit- und UI-Tests

React Native ist ein sehr einfacher Testmechanismus in der Jest-Bibliothek. Bequeme Analyse der Testabdeckung - zeigt, welche Zeilen in der zu testenden Funktion noch nie aufgerufen wurden.

Es gibt Bibliotheken zum Testen der Benutzeroberfläche. Bisher musste ich es tatsächlich nicht verwenden.

Fazit

Nach 13 Monaten Arbeit mit React Native kann ich zuversichtlich sagen:

• Es ist für die meisten Anwendungen geeignet, in denen Sie nur eine Liste vom Server abrufen, die Liste anzeigen, eine detaillierte Ansicht des Listenelements anzeigen und Änderungen an den Server senden müssen.
• All dies wird mit weniger Code erreicht.
• Dies ist jetzt meine „Standard“ -Wahl für neue Projekte, die mich kontaktieren, da siehe vorherigen Absatz.
• Nicht geeignet für Projekte, die ins Ausland gehen "Anfrage gesendet - Antwort erhalten", einige Beispiele: Bildbearbeitung, Player, Arbeit mit Bluetooth, KI, ML, Soziales. Netzwerk-Messenger;
• Fortgeschrittene Projekte können mit React Native ausgeführt werden, Sie müssen jedoch noch viel nativen Code schreiben, sodass der Punkt nicht mehr gültig ist.
• React Native ist gekommen und wird nirgendwo hingehen, damit muss gerechnet werden;
• Die Nachfrage nach nativen mobilen Entwicklern wird leicht sinken, der Zustrom neuer nativer mobiler Entwickler wird viel stärker sinken. Warum? siehe unten;
• Eine Person folgt normalerweise dem einfachsten Weg, und es besteht keine Notwendigkeit zu versuchen, ob 95% der Anwendungen durchgeführt werden können, indem 20% des Aufwands (im Vergleich zur nativen Entwicklung) für das Studium aufgewendet werden.
• Infolge der vorangegangenen drei Punkte: Die Kluft zwischen Angebot und Nachfrage nativer Mobilentwickler wird noch größer. Diejenigen, die wirklich nicht ohne sie auskommen können, werden es noch schwieriger finden, sie zu finden. Und das ist traurig.

Das letzte Wort für jemanden, der sofort anfing, über React Native zu schreiben und sich aus irgendeinem Grund entschied, diesen Artikel bis zum Ende zu lesen.

Wenn Sie der Meinung sind, dass Sie das Thema verstehen und es Ihnen gut geht, versuchen Sie es bitte als nativer Entwickler.