Comment mon état d'esprit de développement Web m'a égaré dans React Native

Lorsque j'ai créé ma première application React Native, j'avais une certaine expérience en développement Web. Utiliser React pour iOS et Android m'a semblé être une extension naturelle de mes compétences.

Mais j'ai rapidement découvert – à mes dépens – qu'un état d'esprit de développeur Web ne se traduit pas toujours bien par le développement d'applications natives.

Prenons la navigation, par exemple. Sur le Web, chaque site crée généralement sa propre mise en page. Les en-têtes, les barres latérales et les pieds de page sont tous personnalisés. Vous pouvez commencer avec un élément simple, mais ce n'est qu'une toile vierge. Vous devez utiliser JavaScript et CSS pour le rendre fonctionnel et visuellement attrayant.

Cette personnalisation devient une partie de votre identité de marque. Si votre en-tête ressemble à celui d’un autre site, il semble générique.

Lorsque je suis passé au développement d'applications natives, j'ai apporté le même état d'esprit avec moi.

J'ai méticuleusement conçu des composants personnalisés pour tout. J'ai construit mon propre en-tête avec un bouton de retour et un titre. J'ai créé des transitions d'écran et des animations personnalisées. J'ai même géré moi-même la zone de sécurité et suivi l'orientation de l'écran pour animer les transitions. J'ai créé des onglets inférieurs personnalisés pour garantir que mon application ne ressemble pas à celle des autres.

Il n’a pas fallu longtemps pour réaliser que c’était une erreur.

Les utilisateurs d'applications natives s'attendent à des modèles cohérents entre les applications. Ils ont également des attentes élevées quant à la qualité des éléments de base de l’interface utilisateur, comme la navigation. Par exemple, sur iOS, les utilisateurs s'attendent à appuyer longuement sur le bouton de retour pour revenir en arrière sur plusieurs écrans. Si cela manque, l’expérience semble incomplète.

Alors pourquoi réinventer la roue ? Les composants natifs sont déjà optimisés pour la plateforme. Au lieu de créer un en-tête personnalisé à partir de zéro, j'aurais pu simplement utiliser l'en-tête natif et modifier ses couleurs. Mieux encore, j'aurais pu ignorer complètement la personnalisation et utiliser directement les composants UIKit. Loin de se sentir « basique », les utilisateurs auraient apprécié la façon dont l'application s'intègre naturellement dans l'écosystème iOS.

Prenons le succès d'applications comme Apollo pour Reddit. Les gens l'ont adoré car il adoptait le langage de conception natif d'iOS, ce qui en faisait une extension naturelle de la plateforme.

Cela contraste fortement avec le développement Web. Sur le Web, vous partez d’une toile vierge et vous construisez tout vous-même. Les primitives prêtes à l'emploi sont souvent maladroites et peu attrayantes. Les boutons sont gris. Les entrées ont des contours durs. Vous avez même besoin d'une réinitialisation CSS juste pour obtenir une ligne de base cohérente.

Les bibliothèques d’interface utilisateur Web existent pour atténuer ces frustrations, mais elles constituent une solution patchwork. En comparaison, les plates-formes natives comme iOS sont dotées de primitives de conception cohérentes et magnifiquement conçues. La navigation, les animations, les menus, la typographie, les couleurs et les icônes sont tous soigneusement conçus par des experts pour créer des expériences utilisateur fluides. Ce ne sont pas seulement des outils : c'est un système de conception façonné par des décennies de raffinement.

Il m'a fallu beaucoup trop de temps pour apprécier cela. Au début, je n’ai même pas pris la peine de lire les directives d’interface humaine d’Apple.

En 2019, les applications React Native ressemblaient souvent à des imitations de haute qualité des applications natives. Ils avaient l’air du rôle mais ne le sentaient pas vraiment. La philosophie de React Native a toujours été de correspondre à la plate-forme sous-jacente, mais dans la pratique, de nombreuses bibliothèques s'appuyaient sur des composants basés sur JavaScript qui imitent les composants natifs au lieu d'utiliser les composants réels.

Par exemple, les applications React Native sur Android utilisaient souvent des en-têtes Material Design, mais elles étaient implémentées en JavaScript plutôt que d'exploiter les composants d'en-tête natifs réels.

En tant que développeur Web, j'ai trouvé cette abstraction attrayante. Cela m'a donné un contrôle total sur la personnalisation. Mais cette approche conduisait souvent à des incohérences subtiles qui diminuaient l'expérience utilisateur.

Les développeurs de React Native n’étaient pas entièrement responsables. À l’époque, travailler avec du code natif était fastidieux, surtout si vous utilisiez Expo. L'ajout de fonctionnalités natives nécessitait souvent d'abandonner Expo et de reconfigurer l'intégralité de votre pile. Les bibliothèques avec du code natif n'étaient souvent pas synchronisées avec les mises à jour de React Native, laissant les développeurs aux prises avec des fichiers Objective-C ou Java qu'ils ne comprenaient pas complètement.

« Basé sur JS » est même devenu un argument de vente pour les bibliothèques, promettant aux développeurs qu'ils n'auraient pas à gérer de dépendances natives.

Cette fracture entre JavaScript et le code natif a renforcé mon état d'esprit axé sur le Web. Pourquoi ne pas s'en tenir à JavaScript pour tout ?

Heureusement, l'écosystème React Native a évolué. Aujourd'hui, vous pouvez écrire des modules natifs à l'aide de Swift et Kotlin avec beaucoup moins de configuration. Mieux encore, Expo prend désormais en charge le code natif. Ces améliorations ont rendu le développement natif plus accessible, encourageant les bibliothèques à adopter les primitives natives.

React Navigation, par exemple, a évolué vers l'utilisation de composants natifs, privilégiant une expérience utilisateur transparente plutôt qu'une personnalisation approfondie par les développeurs.

Ce changement annonce un avenir meilleur pour React Native. Les outils natifs devenant plus faciles à utiliser, nous pouvons créer des applications qui semblent appartenir à leurs plates-formes.

Alors, apprenez de mes erreurs. Utilisez les outils de la plateforme et adoptez sa philosophie de conception. Et surtout, maîtrisez les règles avant de décider de les enfreindre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!