Get best of the week

React Native: un nouveau jalon dans le développement de Shopify Mobile

Ou pourquoi Shopify passe à React Native.

Après de nombreuses années de développement mobile natif, nous avons décidé d'évoluer à toute vapeur vers le développement d'applications mobiles sur React Native. Il sera clair ci-dessous que cette décision n'a pas été facile pour nous.

À la fin de chaque trimestre, nous voyons la même image: la plupart de nos clients effectuent des achats via des appareils mobiles (au troisième trimestre de l'année dernière, leur part était de 71%). Le Black Friday et le Cyber ​​Monday sont les moments les plus chauds pour nos vendeurs, et l'activité des clients de nos jours est hors des charts. Cette année, pendant la période de remise, les partenaires Shopify ont enregistré une augmentation de 3% des commandes d'appareils mobiles, et la part moyenne de ces achats s'est élevée à 69% du nombre total de transactions .

Alors, pourquoi avons-nous décidé de passer à React Native? Et pourquoi maintenant? Qu'adviendra-t-il de notre développement mobile natif maintenant? Vous ne pourrez pas répondre rapidement et brièvement à ces questions. Commençons par l'arrière-plan.

Développement mobile Shopify - 2019


Nous avons développé une pratique spéciale chez Shopify - s'appuyer sur des technologies relativement jeunes qui sont à un stade précoce de développement, ou qui gagnent tout simplement en popularité. Cela nous aide à grandir plus vite.

Habituellement, nous nous concentrons sur plusieurs technologies et nous nous appuyons principalement sur elles dans le développement. Cela donne plusieurs points de croissance:

  • nous formons une expertise unique sur un petit ensemble de technologies (et apportons souvent une contribution importante voire majeure à leur développement);
  • chaque solution technologique a ses goulots d'étranglement, ses subtilités, et nous nous y plongons profondément;
  • , , ;.
  • .

Dans le même temps, de nouvelles technologies font constamment leur apparition qui nous permettent d'augmenter progressivement l'efficacité des ingénieurs ou la productivité de nos produits. Nous expérimentons beaucoup pour ouvrir de nouvelles possibilités et traduire les améliorations quantitatives en améliorations qualitatives, mais, en fin de compte, nous n'introduisons pas toutes nos réalisations dans le processus technique principal.

Lorsque nous introduisons de jeunes technologies, langages ou frameworks, nous essayons de calculer la probabilité de réussite ou d'échec. Au lieu d'éviter les risques, nous étudions, recherchons et évaluons en détail divers risques, en fonction des caractéristiques individuelles de nos projets. Comme cela arrive souvent, des opportunités cachées peuvent être trouvées dans la zone à risque. Et nous réfléchissons principalement à la manière de neutraliser les aspects négatifs du risque:

  • , ?
  • , , ?
  • , () ?

Ruby on Rails était au stade initial de développement et n'a pas encore pris forme en tant que cadre à part entière, quand en 2004 Toby (notre PDG) est devenu le principal participant au projet open source. Pendant de nombreuses années, Ruby on Rails a été considéré comme une solution frivole et inefficace . Mais la sélection et l'étude de cette technologie à un stade aussi précoce de développement ont donné à Shopify un avantage concurrentiel, même si c'était un choix impopulaire. En utilisant Ruby on Rails, l'équipe a pu créer rapidement des produits et attirer des ressources. Après tout, c'était une technologie moderne, avec un niveau d'abstraction plus élevé que les langages de programmation et les cadres traditionnels qui existaient à l'époque. De même, Paul Graham a dit une foissur la façon dont il a décidé d'utiliser Lisp pour créer Viaweb. 6 des 10 entreprises les plus chères Y Combinator utilisent aujourd'hui Ruby on Rails (bien que, encore une fois, le cadre ne soit toujours pas très populaire). D'un autre côté, aucune des 10 sociétés les plus chères de Y Combinator n'utilise Java, qui est considéré comme une solution d'entreprise éprouvée et assez fiable.

De même, il y a 2 ans, Shopify a décidé de passer à Google Cloud.. Encore une fois, il s'agit d'une entreprise assez risquée pour le deuxième plus grand service de commerce électronique aux États-Unis (à partir de 2019) - pour effectuer la migration vers le cloud en dehors de ses propres centres de données pour un produit assez nouveau, Google Kubernetes Engine. Nous avons vu que la courbe de valeur ajoutée nous a poussés à nous concentrer sur ce dans quoi nous sommes vraiment bons (cela aide les entreprises), permettant à d'autres (dans ce cas, Google Cloud) d'assumer le dur travail de maintien des équipements en production état, avec garantie de capacité, de sécurité, avec mise à jour du système d'exploitation, etc.

React Native - qu'est-ce que c'est?


En 2015, Facebook a annoncé et publié le framework open source React Native . Auparavant, il était déjà utilisé en interne pour le développement de ses applications mobiles. React Native est un cadre pour le développement multiplateforme d'applications mobiles affichées en mode natif à l'aide de la bibliothèque React js . Ainsi, il permet d'utiliser la bibliothèque js supérieure pour créer l'interface utilisateur des applications mobiles natives.

Dans Shopify, cette idée (alors, dans un sens, maintenant aussi) était sceptique, mais beaucoup la considéraient comme prometteuse. Donc, le prochain événement Shopify Hackdaysétait entièrement dédié à React Native. Bien que l'équipe ait ensuite apprécié les avantages du framework, nous avons décidé qu'en 2015, nous ne pourrions pas implémenter l'application React Native, dont nous pourrions être fiers plus tard. Cela était principalement dû à des problèmes de performances et au manque de prise en charge complète d'Android OS. Mais nous avons clairement réalisé que nous aimions le paradigme de programmation réactive et GraphQL . De plus, après avoir rencontré React Native, nous avons développé et mis en place un moteur de rendu pour iOS. En 2015, nous avons implémenté ces technologies sur notre pile, mais nous n'avons pas utilisé React Native pour le développement mobile de masse. Nos premières expériences sont détaillées ici .

À ce jour, Shopify a eu le développement mobile natif comme standard. Nous avons créé deux équipes, les outils mobiles et les fondations , qui se sont concentrées sur iOS et Android, et nous ont également aidés à accélérer le processus de développement. Malgré le fait qu'ils ont montré de bons résultats, il nous semble que le développement deviendra plus efficace si nous:

  • Nous utilisons la puissance de JavaScript et d'autres technologies Web dans le développement mobile;
  • introduire le paradigme de programmation réactive dans le développement d'applications clientes;
  • nous combinerons le développement pour iOS et Android sur React Native en une seule pile technologique.

Comment fonctionne React Native?


React Native vous permet de créer des applications mobiles multiplateformes affichées en mode natif à l'aide de JavaScript. React Native est similaire à React: nous créons également de manière déclarative une interface utilisateur dans JS avec une arborescence d'éléments d'interface utilisateur, ou avec un DOM virtuel (VDOM), en termes de ReactJS. Si ReactJS affiche les éléments d'interface dans un navigateur, React Native convertit les objets VDOM en éléments visuels spécifiques à la plate-forme native pour les afficher sur les appareils mobiles à l'aide de liants: les composants natifs sont encapsulés dans React. Nous ne sommes intéressés que par les plates-formes Android et iOS, mais il y a des passionnés qui souhaitent développer React Native pour Windows, macOS et Apple tvOS.


ReactJS interagit avec le navigateur et React Native interagit avec les API mobiles.

Quand n'utilisons-nous pas React Native?


Dans certaines situations, l'équipe Shopify n'utilise pas React Native pour développer des applications mobiles. En particulier, si nous devons:

  • lancement de l'application sur l'ancien matériel (CPU <1,5 GHz);
  • traitement sophistiqué;
  • ultra haute performance;
  • de nombreux threads s'exécutant en arrière-plan.

Remarque: les bibliothèques de bas niveau, y compris divers SDK open source, restent entièrement natives. Nous pouvons créer nos propres modules natifs si nous voulons être en contact plus étroit avec le matériel.

Pourquoi passons-nous maintenant à React Native?


Nous avons 3 raisons principales:

  1. Après l'acquisition du marché Tictail (le service a été développé sur React Native, selon le principe du mobile first) en 2018, nous avons vu quel type de développement React Native a reçu et en 2019 nous avons investi dans trois autres projets.
  2. Shopify utilise activement React dans le développement Web, il est maintenant temps d'appliquer notre savoir-faire dans le développement d'applications mobiles.
  3. Nous avons remarqué que la courbe de performances a grimpé (par exemple, ce qu'elle pouvait auparavant, et maintenant ce que Google Docs peut faire par rapport au bureau Microsoft Office) et avons fait un pari sur React Native à long terme - tout comme nous le croyions autrefois en Ruby sur Rails, Kubernetes et Rich Media.

Développement mobile chez Shopify en 2019


Dans Shopify, les vendeurs et les acheteurs peuvent interagir de plusieurs manières: via des applications Web et mobiles. Tout au long de l'année dernière, nos trois équipes ont expérimenté React Native et, par conséquent, elles ont développé trois applications mobiles: Arrive, Point of Sale et Compass.

Après nos expériences, nous avons tiré les conclusions suivantes:

  • lors de la copie de l'application Arrive vers React Native, l'équipe a constaté que la productivité a doublé par rapport au développement natif, même si vous n'écrivez que pour une seule plateforme;
  • en testant la version Android de l'application Point de vente à faible puissance, nous avons constaté que l'application s'exécute à une fréquence CPU inférieure: 1,5 GHz (écrit en React Native) contre 2 GHz (développement natif);
  • Nous avons provisoirement estimé que la proportion de code indépendant de la plate-forme serait d'environ 80%; et nous avons été surpris quand en réalité il s'est avéré être beaucoup plus élevé: 95% pour Arrive et 99% pour Compass.

Mais cela vaut la peine de faire une réservation: bien que nous ayons décidé d'écrire de nouvelles applications sur React Native, cela ne signifie pas que nous réécrirons toutes nos anciennes applications.

Arrivée


Fin 2018, nous avons décidé de réécrire l'une de nos applications clientes les plus populaires dans React Native, Arrive . Il s'agit d'une application iOS performante et hautement cotée avec des millions de téléchargements. Nous avons choisi Arrive car nous n'avions pas sa version Android. Nous sommes donc allés à la rencontre des utilisateurs d'appareils Android. Désormais, les versions iOS et Android sont écrites en React Native avec une part de 95% du code multiplateforme total.

En cours de réécriture, nous avons obtenu les résultats suivants:

  • lors de l'exécution de la version multiplateforme pour iOS, moins de plantages se produisent que dans la version native;
  • nous avons lancé la version pour Android OS;
  • Les développeurs mobiles et non mobiles ont pu travailler sur le projet.

De plus, l'équipe a pu expérimenter une excellente méthode pour exécuter rapidement des pull-requests «work-in-progress». Scannez simplement le code QR du commentaire Github à l'aide de votre téléphone, et le bundle JS de votre application est mis à jour. Ainsi, à chaque fois, vous pouvez mettre à jour instantanément l'application et utiliser sa version actuelle. Notre station-service a récemment décrit ce processus sur Twitter .

Point de vente


Début 2019, nous avons mené une expérience de 6 semaines sur notre application phare de point de vente (POS) pour voir si elle est un bon candidat pour la réécriture sur React Native. Nous avons beaucoup étudié cette question, car nos détaillants s'attendaient à pouvoir réduire de moitié le temps de réponse de notre application: le processus de service client utilisant notre application devrait être fixé dans la mémoire musclée des vendeurs, et ils ne devraient pas être distraits par cela.

Afin de répondre aux exigences de nos détaillants et de comprendre le développement de React Native pour les terminaux de point de vente en même temps, nous avons décidé de créer une nouvelle application mobile native pour iOS et d'écrire une version pour Android OS sur React Native.

Nous avons affecté deux équipes distinctes à ces tâches, et voici pourquoi:

  1. Nous avions déjà une équipe avec une forte expertise dans iOS, y compris des développeurs d'applications POS natives.
  2. En plus des performances directes de l'application, nous voulions pouvoir tester notre vitesse de développement sur React Native, en comparant tout cela avec notre gold standard, c'est-à-dire avec le développement natif iOS.
  3. Pour répondre aux exigences de performance élevées des vendeurs, nous avons décidé de faire toutes les mises à jour de Facebook pour la ré-architecture de React Native (cependant, il s'est avéré que ce n'est pas essentiel pour les performances). En identifiant des équipes distinctes pour travailler sur deux projets, nous avons réduit les risques associés à la perturbation du plan de publication.

Nous avons annoncé la réécriture du PDV à Unite 2019 . Les deux versions, iOS et Android sur React Native, seront disponibles en 2020.

Boussole


Spotify dispose d'une équipe Start qui aide les clients à démarrer leur propre entreprise. Avant que la société ne prenne la décision fondamentale de développer des applications mobiles sur React Native, cette équipe a étudié en détail Flutter et React Native. Le choix s'est porté sur React Native, et ils ont maintenant des versions bêta des applications iOS et Compass Android . De plus, ~ 99% du code qu'ils ont en commun.

Les premières versions seront publiées dans les trois mois.

Développement mobile dans Shopify 2020 ++


Nous avons préparé beaucoup de choses intéressantes pour 2020.
Allons-nous réécrire nos applications mobiles natives? Non. Bien que cette décision soit prise par chaque équipe de manière indépendante.
Engagerons-nous des développeurs natifs? Oui, beaucoup !
Nous voulons devenir des membres leaders de la communauté React Native, créer des composants spécifiques à la plateforme et continuer à comprendre les subtilités de chaque plateforme. Et cela nécessite une forte expertise. Sonne bien, non?

Collaboration et Open Source


Nous pensons que le développement logiciel est un jeu d'équipe. Nous sommes impliqués dans le développement du web ouvert, de l'open source et d'autres standards ouverts.

Nous contribuons au financement des projets Software Mansion et Krzysztof Magera (co-fondateur de React Native pour Android) liés à React Native.
Nous collaborons avec William Candillon (responsable de Can It Be Done dans React Native sur la chaîne YouTube) pour améliorer l'architecture et les performances.

Nous prévoyons de travailler en étroite collaboration avec l'équipe React Native de Facebook sur l'automatisation, la création de bibliothèques tierces et la supervision de certains modules du projet Lean Core.

En collaboration avec Discord, nous travaillons activement à préparer rapidement une version open source de la bibliothèque FastList for React Native (vous permet de rendre uniquement les éléments de liste qui se trouvent dans la zone visible) et de l'optimiser pour Android OS.

Nos commandes d'outils et de fondations pour React Native


Lorsque vous comptez sur la technologie et que vous y plongez, vous voulez en tirer le maximum d'effets. Afin de fixer rapidement des objectifs et d'atteindre cet objectif, nous avons créé deux types d'équipes qui aident les autres employés de Shopify à être productifs. Le premier type est l'équipe d'outillage, qui aide à la configuration, à l'intégration et au déploiement. Le deuxième type est l'équipe de fondation, qui s'occupe du SDK, de la réutilisation du code et de l'open source. En 2020, les deux équipes ont commencé à évoluer vers React Native.

Notre application Shopify Ping, qui vous permet de discuter avec des centaines de milliers de clients, n'est actuellement disponible que dans la version iOS. En 2020, nous travaillerons sur une version pour Android OS utilisant React Native dans notre succursale de San Francisco, où nous embauchons des employés.

En 2019, Twitter a publié des applications Web mobiles et de bureau utilisant une technologie appelée React Native Web. Le nom peut être un peu déroutant, mais sa principale différence est que cette technologie vous permet d'utiliser la même pile React Native pour développer des applications Web. En conséquence, Facebook a immédiatement poursuivi Nicholas Gallagher , le développeur principal du projet. En 2020, nous, à Shopify, réaliserons également des expériences avec React Native Web .

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles