web3 sur la plateforme de votre choix — un aperçu de l’approche multiplateforme de Coinbase Wallet | par Coinbase | juin 2022

Tl;dr : La refonte de l’application mobile de Coinbase Wallet reflète notre engagement à améliorer l’accès au Web3. Dans ce blog, nous expliquons pourquoi la transition vers React Native marque un tournant critique pour nos utilisateurs et nos équipes techniques.

Par Chintan Turakhia, directeur de Coinbase Wallet Engineering, et Dan Coffman, Coinbase Wallet React Native Lead

GM

Cette semaine, nous avons annoncé le lancement des nouvelles applications mobiles iOS et Android de Coinbase Wallet construites à l’aide de React Native. Ce lancement marque un point d’inflexion critique pour Coinbase Wallet et ses utilisateurs, et nous aimerions faire la lumière sur la motivation et le parcours pour en arriver là.

Notre objectif avec Coinbase Wallet est d’être la passerelle par défaut vers l’écosystème web3. Nous avons lancé une application mobile sur iOS et Android en 2017 pour rendre les avantages de la cryptographie, de l’auto-garde et de l’écosystème dapp naissant accessibles à tous, quel que soit le réseau ou la blockchain, le pays ou la devise, le connaisseur en crypto ou le débutant en crypto.

En 2021, nous avons constaté une augmentation de l’engagement Web3 via le bureau, principalement grâce aux NFT et aux dapps DeFi. Cela nous a amenés à lancer une extension de navigateur Coinbase Wallet à l’aide de React, offrant aux utilisateurs la possibilité de s’engager dans l’économie cryptographique sur une plate-forme de bureau. Cela a également donné à nos équipes de produits, d’ingénierie et de conception l’occasion de repenser entièrement l’apparence et la convivialité d’un produit en libre-service pour les utilisateurs expérimentés ainsi que pour les nouveaux venus sur le web3.

Malheureusement, le lancement de l’extension de navigateur signifiait que nos équipes d’ingénieurs devaient désormais coder les mêmes fonctionnalités pour trois plates-formes différentes, car l’extension de navigateur de Wallet, les applications iOS et Android exploitaient différentes bases de code. Et par conséquent, notre vitesse d’expédition sur l’extension a largement dépassé notre rythme sur mobile. Nous savions que ce n’était pas une solution viable à long terme pour suivre l’innovation du web3. Afin de maximiser l’efficacité de nos développeurs et concepteurs ainsi que d’expédier un portefeuille multichaîne fiable, sûr et simple sur toutes les plateformes, nous aurions besoin de migrer nos produits mobiles dans un cadre commun.

Entrez React Native.

Nous adoptons le mantra de construire une fois et expédier partout. La replateforme des applications mobiles de Coinbase Wallet vers React Native signifie que nous pouvons plus facilement envoyer de nouvelles fonctionnalités à l’extension de navigateur de Wallet, aux applications iOS et Android en tandem, rationalisant les flux de travail et nous permettant d’offrir la même expérience utilisateur exceptionnelle sur les ordinateurs de bureau et mobiles.

En 2020, l’application Coinbase est passée avec succès du mobile natif à React Native, un cadre logiciel qui nous permet d’expédier le même code TypeScript et l’interface utilisateur React sur iOS et Android. Depuis lors, notre objectif était simple : tirer parti de ces routes pavées pour livrer une application mobile hautement performante tout en offrant aux utilisateurs une expérience de conception cohérente à l’aide du Coinbase Design System (CDS). Nous avons pu exploiter rapidement les routes pavées, y compris la navigation réactive, les liens profonds et la configuration dans le code.

En unifiant notre application mobile Coinbase Wallet et notre extension de navigateur en une seule couche de données qui gère toute la logique métier, nous pouvons continuer à expédier rapidement des produits sur trois plates-formes. Nous nous sommes éloignés de RxJS basé sur les classes et sommes passés à des référentiels fonctionnels basés sur le contexte pour permettre une plus grande exploitation des bibliothèques principales de React. Le défi supplémentaire consistait à migrer la couche de données tout en continuant à créer et à livrer des fonctionnalités sur l’extension. Web3 s’arrête pour personne, et nous avons donc soigneusement orchestré le remplacement de l’ensemble de notre moteur Wallet tout en continuant à voler.

Wallet sera également en mesure de commercialiser de nouvelles fonctionnalités en un temps record. Un exemple récent en est notre portefeuille DeFi, qui a mis deux mois à se construire pour l’extension de navigateur Wallet et seulement cinq jours à porter sur notre nouvelle application mobile React Native. La majorité de la logique complexe résidait dans la couche de données, et comme celles-ci sont désormais partagées entre toutes les plates-formes, nous avons pu la construire une fois et l’expédier à toutes les plates-formes. Il ne restait que l’interface utilisateur client pour mobile et, heureusement, avec un CDS commun, le portage des éléments de l’interface utilisateur sur mobile était simple. Grâce à ces types d’efficacités, nous nous attendons à voir la vitesse à laquelle Wallet lance de nouveaux produits continuer à augmenter dans les mois à venir.

Non seulement les utilisateurs bénéficieront des fonctionnalités de Wallet plus rapidement, mais l’expérience mobile dans son ensemble sera plus rapide, plus réactive et plus fiable.

Plusieurs des fonctionnalités que nous avons publiées au cours de l’année écoulée ont été conçues pour l’extension Wallet et n’ont pas encore été introduites dans l’application mobile Wallet. Avec notre migration vers React Native, nous lançons maintenant prêts à lancer plusieurs fonctionnalités intéressantes dans l’application mobile pour la première fois, y compris la prise en charge du stockage, de l’envoi et de la réception de jetons Solana et SPL, des graphiques de prix en temps réel, un in- navigateur app dapp, gestion des jetons et vue du portefeuille DeFi.

Comment portez-vous plus de 110 fonctionnalités sur une nouvelle pile technologique React Native, tout en ajoutant de nouvelles fonctionnalités à la plate-forme d’extension Chrome existante tout en conservant le produit mobile Native existant ? La couche de données commune était un multiplicateur de force qui a permis à l’équipe de continuer à créer des fonctionnalités d’extension qui se portaient de manière transparente sur RN mobile. Nous avons également donné la priorité à la parité des fonctionnalités de notre produit mobile existant tout en maintenant la barre haute en matière de qualité et de performances grâce à l’analyse comparative.

L’équipe a jeté les bases d’un système de surveillance des performances évolutif et extensible pour mesurer les performances côté client de la nouvelle application, y compris le chargement de la page, le temps de blocage des threads de l’interface utilisateur et la réactivité de l’application pour chaque validation. Nous avons optimisé les temps de chargement et de rendu d’écran à l’aide d’une solution de rendu incrémentielle sur mesure, en mémorisant les composants et en optimisant les calculs de crochet coûteux. Nous avons également apporté d’innombrables améliorations à la couche de données grâce à des mises à jour d’état par lots et à l’optimisation des stratégies de mise en cache, ce qui a profité au chargement des ressources et NFT sur la nouvelle application et l’extension natives de réaction.

Si vous avez remarqué la nouvelle apparence de l’application mobile, elle reflète bien plus qu’une nouvelle couche de peinture. Coinbase Wallet fait désormais partie intégrante du Coinbase Design System.

Le système de conception de Coinbase est une architecture robuste de composants de conception et de mouvement réutilisables intégrés à React. Nous avons constaté que le CDS permet à nos équipes de produits, d’ingénierie et de conception de se concentrer sur la création d’expériences de produits de haute qualité tout en garantissant une expérience cohérente pour les utilisateurs des produits Coinbase. De beaux éléments de conception, comme le « bienvenue chaleureux » axé sur le mouvement qui accueille les nouveaux utilisateurs, ne sont qu’un petit aperçu de la façon dont nous offrons une expérience visuellement riche à un public mondial.

Étant donné que l’extension de navigateur de Coinbase Wallet a été créée à l’aide de ce système de conception, les utilisateurs de bureau bénéficieront désormais d’une expérience plus cohérente dans l’application mobile de Wallet. En prime de cette approche cohérente, les utilisateurs qui connaissent l’application phare de Coinbase se sentiront immédiatement à l’aise dans la nouvelle expérience mobile de Coinbase Wallet.

Un autre résultat passionnant de ce travail est que les utilisateurs de Wallet ont désormais la possibilité de personnaliser leur expérience mobile. Nos recherches ont montré que les utilisateurs préfèrent le mode sombre, donc l’application mobile s’ouvrira en mode sombre par défaut. Nous ajoutons également la possibilité de sélectionner une couleur de thème pour Coinbase Wallet, qui peut être sélectionnée dans l’onglet Paramètres.

La nouvelle application mobile Coinbase Wallet a commencé à être déployée à l’échelle mondiale sur iOS et Android cette semaine, et nous prévoyons que le déploiement sera terminé au cours des prochaines semaines. Assurez-vous que votre application est à jour en visitant l’App Store sur iOS ou Google Play sur Android, et suivez @CoinbaseWallet sur Twitter pour les dernières nouvelles et mises à jour.