Wie mich meine Einstellung zur Webentwicklung in React Native in die Irre geführt hat

Als ich meine erste React Native-App erstellte, hatte ich bereits Erfahrung in der Webentwicklung. Die Verwendung von React für iOS und Android schien eine natürliche Erweiterung meiner Fähigkeiten zu sein.

Aber ich habe schnell herausgefunden – auf die harte Tour –, dass sich die Denkweise eines Webentwicklers nicht immer gut auf die Entwicklung nativer Apps übertragen lässt.

Nehmen Sie zum Beispiel die Navigation. Im Web erstellt jede Website normalerweise ihr eigenes, einzigartiges Seitenlayout. Kopf-, Seiten- und Fußzeilen sind alle individuell gestaltet. Sie könnten mit einem einfachen Element beginnen, aber es ist nur eine leere Leinwand. Sie müssen JavaScript und CSS verwenden, um es funktional und optisch ansprechend zu gestalten.

Diese Individualisierung wird Teil Ihrer Markenidentität. Wenn Ihr Header wie der einer anderen Website aussieht, fühlt er sich allgemein an.

Als ich zur nativen App-Entwicklung überging, brachte ich dieselbe Einstellung mit.

Ich habe für alles sorgfältig maßgeschneiderte Komponenten entworfen. Ich habe meinen eigenen Header mit einem Zurück-Button und einem Titel erstellt. Ich habe benutzerdefinierte Bildschirmübergänge und Animationen erstellt. Ich habe den sicheren Bereich sogar selbst verwaltet und die Bildschirmausrichtung verfolgt, um Übergänge zu animieren. Ich habe benutzerdefinierte untere Registerkarten erstellt – alles, um sicherzustellen, dass meine App nicht wie die aller anderen aussieht.

Es dauerte nicht lange, bis mir klar wurde, dass das ein Fehler war.

Benutzer nativer Apps erwarten konsistente Muster in allen Apps. Sie haben auch hohe Erwartungen an die Qualität grundlegender UI-Elemente wie der Navigation. Unter iOS erwarten Benutzer beispielsweise, dass sie die Zurück-Taste lange drücken müssen, um mehrere Bildschirme zurück zu navigieren. Wenn das fehlt, fühlt sich das Erlebnis unvollständig an.

Warum also das Rad neu erfinden? Native Komponenten sind bereits für die Plattform optimiert. Anstatt einen benutzerdefinierten Header von Grund auf zu erstellen, hätte ich einfach den nativen verwenden und seine Farben anpassen können. Besser noch, ich hätte auf die Anpassung ganz verzichten und UIKit-Komponenten direkt verwenden können. Weit davon entfernt, sich „einfach“ zu fühlen, hätten die Benutzer vielmehr geschätzt, wie natürlich sich die App in das iOS-Ökosystem einfügt.

Nehmen Sie den Erfolg von Apps wie Apollo für Reddit. Den Leuten gefiel es, weil es die native Designsprache von iOS übernommen hat und dadurch wie eine natürliche Erweiterung der Plattform wirkt.

Dies steht in krassem Gegensatz zur Webentwicklung. Im Web beginnen Sie mit einer leeren Leinwand und erstellen alles selbst. Out-of-the-box-Grundelemente sind oft klobig und unattraktiv. Knöpfe sind grau. Eingaben haben harte Umrisse. Sie benötigen sogar einen CSS-Reset, um eine konsistente Grundlinie zu erhalten.

Es gibt Web-UI-Bibliotheken, um diese Frustrationen zu lindern, aber sie sind eine Patchwork-Lösung. Im Vergleich dazu verfügen native Plattformen wie iOS über zusammenhängende, wunderschön gestaltete Designgrundelemente. Navigation, Animationen, Menüs, Typografie, Farben und Symbole wurden sorgfältig von Experten entworfen, um ein nahtloses Benutzererlebnis zu schaffen. Dies sind nicht nur Werkzeuge – es ist ein Designsystem, das durch jahrzehntelange Verfeinerung geprägt ist.

Es hat viel zu lange gedauert, bis ich das verstanden habe. Ich habe mir anfangs nicht einmal die Mühe gemacht, die Human Interface Guidelines von Apple zu lesen.

Im Jahr 2019 fühlten sich React Native-Apps oft wie hochwertige Nachahmungen nativer Apps an. Sie sahen so aus, spürten es aber nicht ganz. Die Philosophie von React Native bestand schon immer darin, sich an die zugrunde liegende Plattform anzupassen, aber in der Praxis verließen sich viele Bibliotheken auf JavaScript-basierte Komponenten, die native Komponenten nachahmten, anstatt das Original zu verwenden.

Zum Beispiel verwendeten React Native-Apps auf Android häufig Material Design-Header, diese wurden jedoch in JavaScript implementiert, anstatt die eigentlichen nativen Header-Komponenten zu nutzen.

Als Webentwickler fand ich diese Abstraktion reizvoll. Es gab mir die vollständige Kontrolle über die Anpassung. Dieser Ansatz führte jedoch häufig zu subtilen Inkonsistenzen, die das Benutzererlebnis beeinträchtigten.

React Native-Entwickler waren nicht allein schuld. Damals war die Arbeit mit nativem Code umständlich, insbesondere wenn man Expo nutzte. Das Hinzufügen nativer Funktionen erforderte oft den Verzicht auf Expo und die Neukonfiguration Ihres gesamten Stacks. Bibliotheken mit nativem Code waren häufig nicht mehr mit React Native-Updates synchronisiert, sodass sich Entwickler mit Objective-C- oder Java-Dateien herumschlagen mussten, die sie nicht vollständig verstanden.

„JS-basiert“ wurde sogar zu einem Verkaufsargument für Bibliotheken und versprach Entwicklern, dass sie sich nicht mit nativen Abhängigkeiten auseinandersetzen müssten.

Diese Kluft zwischen JavaScript und nativem Code hat meine Web-First-Denkweise bestärkt. Warum nicht bei allem bei JavaScript bleiben?

Zum Glück hat sich das React Native-Ökosystem weiterentwickelt. Heute können Sie native Module mit Swift und Kotlin mit weitaus weniger Konfigurationsaufwand schreiben. Noch besser: Expo unterstützt jetzt nativen Code. Diese Verbesserungen haben die Native-First-Entwicklung leichter zugänglich gemacht und Bibliotheken dazu ermutigt, native Primitive zu nutzen.

React Navigation hat sich beispielsweise auf die Verwendung nativer Komponenten verlagert und legt dabei Wert auf ein nahtloses Benutzererlebnis gegenüber umfassender Entwickleranpassung.

Dieser Wandel signalisiert eine bessere Zukunft für React Native. Da native Tools immer einfacher zu verwenden sind, können wir Apps erstellen, die so aussehen und sich anfühlen, als gehörten sie zu ihren Plattformen.

Also lerne aus meinen Fehlern. Nutzen Sie die Tools der Plattform und machen Sie sich ihre Designphilosophie zu eigen. Und vor allem: Beherrschen Sie die Regeln, bevor Sie sich dazu entschließen, sie zu brechen.

Das obige ist der detaillierte Inhalt vonWie mich meine Einstellung zur Webentwicklung in React Native in die Irre geführt hat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!