Comment construire votre équipe React Native.

Vous avez décidé d'aller avec React Native. Maintenant quoi?

Récemment, j’ai parlé avec quelques entreprises en croissance qui ont lancé une application React Native ou qui envisagent de la créer. Ils veulent savoir comment constituer une équipe et où aller après cela. Ayant été développeur principal autochtone de React lors de mon dernier emploi, je souhaite partager mes réflexions sur certains aspects techniques et organisationnels de son adoption. Cet article est destiné au fondateur de la startup ou au CTO qui a déjà choisi React Native. Je vais aborder (1) les avantages et les inconvénients, (2) la constitution de votre équipe et (3) la suite de votre projet.

1. Comprendre les avantages et les inconvénients de React Native

Certains de ces points ont été abordés jusqu'à la mort, mais il est bon de les garder à l'esprit lorsque vous prenez des décisions pour votre entreprise.

Les entreprises utilisent React Native pour créer des applications plus rapidement:

  • En soi, React représente un grand changement de paradigme dans la création d'interfaces utilisateur. À l'époque des anciens, les développeurs devaient lier maladroitement des modèles aux contrôleurs et changer impérativement des éléments à l'écran. React vous permet de construire une interface utilisateur de manière déclarative en tant que représentation de l'état de votre application. Cela a probablement semblé très technique, mais cela signifie simplement que lorsque l'état de l'application change, React redessine automatiquement l'interface utilisateur, car celle-ci est 2018.
  • Les itérations en cours de développement sont plus rapides. Autrefois, les développeurs devaient reconstruire l’application pour voir les changements. Dans React Native, vous disposez du rechargement de module à chaud, qui vous permet de modifier l'application en cours d'exécution. Mieux encore, vous pouvez utiliser Storybook pour créer des composants d'interface utilisateur de manière isolée, indépendamment de l'application. Plus besoin de naviguer sur 3 écrans pour voir si vous avez ajusté un bouton correctement.
  • Vous pouvez exploiter votre code Javascript et votre équipe de développement Web existants. Vous n’avez pas besoin d’une équipe de développeurs mobiles spécialisés. Un grand nombre de codes non-UI peuvent être générés et testés dans Node, sans avoir à exécuter l'application.
  • Le langage Javascript est tellement mauvais qu’il est bon. Parce que jadis le Javascript était tellement nul, la transpilation est devenue une partie fondamentale du développement de Javascript moderne. Cela signifie que les développeurs disposent de fonctionnalités linguistiques modernes à un rythme plus rapide que les autres langues.

Mais aller avec React Native est un compromis. Voici les inconvénients que j'ai connus:

  • React Native n’est pas aussi bien pris en charge que les iOS et Android natifs. Ces plates-formes ont des entreprises dont l'activité consiste à soutenir leurs plates-formes. React Native est principalement un outil de développement interne à Facebook qui passe au open source. Facebook ne consacre pas autant de ressources à cette plate-forme qu’Apple et Google. Pour cette raison, vous devez être constamment à la recherche d'informations. Une grande partie de mes connaissances sur les RN provient des articles de blog, des problèmes Github, des tweets et des conversations lors de conférences.
  • Dans le même temps, React Native évolue très rapidement. Les versions mensuelles comportent souvent des modifications de dernière minute. Si elles ne détruisent pas votre application, elles risquent de détruire un outil ou une bibliothèque dont vous dépendez. La mise à niveau de React Native est un peu pénible. Vous pourriez négliger le développement d’une application iOS ou Android pendant 6 mois et cela ne serait pas démodé. Ce n’est pas le cas pour React Native.
  • Si vous avez une équipe mobile existante, l'introduction de React Native constitue un changement de culture. De nombreux développeurs natifs ne sont pas du tout intéressés par le Javascript, et vous en avez peut-être dans votre équipe (je vous regarde, développeur iOS qui pense que Objective-C / Swift est le nectar des dieux).

Si vous disposez déjà d'applications conçues pour les deux plates-formes et d'une équipe de développement existante pour prendre en charge cette fonctionnalité, React Native n'est probablement pas pour vous. Ceci peut être appris par AirBnB. En tant que l’une des équipes d’ingénierie les plus respectées du monde, ils ont parié tôt dans React Native, mais ont dû abandonner leurs efforts en raison des difficultés techniques et culturelles liées au développement de «sites contaminés». Leland Richardson (@intelligibabble) parle de React Native dans la friche industrielle ici. Gabriel Peal (@ gpeal8) écrit à propos de la réactivation de React Native ici.

Cependant, certaines entreprises disposant d'applications existantes choisissent d'en créer une de manière native, une dans React Native. Si vous avez déjà lancé une application iOS et souhaitez créer une application Android, utilisez React Native. Mais ce choix dépend de vos besoins en développement. Erica Cooksey (@EricaCooksey) a une excellente discussion sur le choix du développement natif pour Android tout en utilisant React Native dans iOS.

2. Construire votre équipe

Je commencerais avec quelqu'un qui vient de React Native en tant que développeur natif. React Native attire de nombreux développeurs Web qui souhaitent créer des applications. Mais React Native ne remplace pas le développement natif, cela complique les choses car il faut être compétent à la fois avec React, iOS et Android. Le développement de votre application rencontrera de nombreux obstacles dans la couche native, il est donc bon de commencer par quelqu'un qui dispose de bases solides.

Dans un monde idéal, vous souhaitez avoir un expert iOS et un expert Android dans votre équipe. Si vous ne pouvez vous permettre qu'un seul développeur natif, optez pour Android. React Native sur iOS est plus facile à gérer que sur Android. iOS n'est pas aussi fragmenté et la plupart des techniciens (aux États-Unis) sont des utilisateurs d'iPhone. Ces deux facteurs signifient que le développement natif d'IOS React Native attire beaucoup plus l'attention et qu'il est plus stable. Android va vous donner des problèmes et vous voulez quelqu'un qui comprend cette plate-forme.

iOS vs fragmentation Android, septembre 2018

Une fois que vous avez embauché votre principal développeur Native de React, vous devez embaucher deux personnes supplémentaires qui sont à l'aise dans React. Ils n’ont pas besoin d’avoir une expérience mobile native, ni d’ancienneté spécifique. Mais assurez-vous d’embaucher des personnes qui ont l’idée de créer une application mobile - ne faites pas appel à un développeur Web sceptique. L’expérience des développeurs Natifs de React n’est pas aussi agréable que sur le Web et leur confort leur manquera rapidement.

Je pense qu'une équipe de 3 développeurs dédiés devrait suffire, mais cela dépend évidemment du stade de croissance de votre entreprise. Votre développeur principal passera probablement la moitié de son temps à écrire des fonctionnalités et l'autre moitié à entretenir le projet et à aider les autres développeurs.

En plus de cela, je m'assurerais d'engager un concepteur qui comprend les applications mobiles, au lieu d'essayer de tirer parti des concepteurs spécialisés sur le Web. Peu importe la qualité de votre équipe de développement si vos utilisateurs trouvent l’application difficile à utiliser. Une application doit avoir une UX très différente de la version mobile de votre application Web. Vous ne voulez pas qu’il contienne 10 champs de saisie dans une vue à défilement dans un petit écran. Il est important d'avoir un designer qui comprend cela. React Native vous permet également de faire facilement des choses innovantes avec des gestes et des animations. Obtenez donc un concepteur qui voudra en tirer parti.

Évitez de garder vos développeurs dans une bulle. Je vous recommande de les envoyer à au moins une conférence par an. C’est un très bon moyen de rester au courant et d’établir des relations avec des personnes bien informées. Vos développeurs reviendront au travail avec une tonne de nouvelles connaissances, techniques et informations privilégiées qu’ils voudront appliquer au travail. Je ne suis pas sûr de savoir pourquoi la plupart des entreprises assument la responsabilité de la croissance des développeurs, mais si vous êtes égoïste et souhaitez la meilleure équipe possible, investissez dans leur croissance.

3. Gérer votre projet

Tirez parti de vos développeurs JavaScript et Web existants.

Une fois votre projet et votre équipe configurés, vous pouvez commencer à tirer parti de votre base de code Web existante et de votre équipe de développement Web. Si vous avez déjà écrit du code client d'authentification et d'API pour le Web, divisez-le en son propre projet afin de pouvoir l'utiliser avec votre application. Les développeurs de votre équipe Web seront enthousiastes à l'idée de créer des fonctionnalités pour mobiles, mais ils seront grincheux à cause de problèmes de construction ou de bugs de couche native. Demandez à votre responsable RN d'écrire de très bons guides et d'agir en tant que support technique pour la couche native.

Configurez TypesScript.

Je suis passionné de dactylographie dans ECMAScript depuis l’époque d’ActionScript 3, mais j’ai longtemps résisté à TypeScript car il semblait un peu pénible et instable. Ça a changé. La collectivité a établi tapuscrit que les Typing STANdard: Babel 7 a de première classe de soutien dactylographiée et React autochtones 57 navires avec tapuscrit (battant ̶F̶a̶c̶e̶b̶o̶o̶k̶'̶s̶ FLOW propres) ̶ (Lorenzo Sciandra - @Kelset, l'un des React natif ouvert responsables de la source, précise que les expéditions natives de React avec le support TypeScript ne signifient pas qu’elles sont approuvées, cela signifie simplement que Flow et TS sont tout aussi faciles à intégrer. Merci Lorenzo!) Je sais qu’il existe des puristes Javascript, mais dans deux ans. ça va probablement être bizarre de coder sans TypeScript. Et avoir des types c'est bien quand même. En investissant maintenant dans les types et les tests unitaires, vous éviterez plus tard l'inévitable refactor. Cet article de Microsoft explique comment configurer TypeScript dans React Native.

Construire un système de conception.

Si vous voulez aller à une vitesse ridicule, créez un système de conception pour votre application. Un système de conception est un ensemble de composants réutilisables qui suivent des directives claires. C’est une collaboration entre développeurs et concepteurs qui vise à créer un langage UX partagé et à créer une expérience utilisateur uniforme.

Un système de conception est important pour la rapidité de développement car il permet aux concepteurs et aux développeurs de rester sur la même page (). Parfois, les concepteurs construisent l’écran d’abord plutôt que de faire des composants en premier. Lorsque les concepteurs se concentrent sur des écrans entiers, il peut y avoir des variations d'espacement, de taille de police, de couleurs, etc. Lorsque les développeurs doivent créer des écrans entiers à partir de zéro, ils peuvent être dépassés (ou être paresseux) à propos des détails. Sans système de conception, avec le temps, il devient difficile de mettre à jour les anciens écrans et votre application perd son uniformité.

Les équipes qui travaillent de cette manière ont tendance à reprocher aux développeurs de ne pas être suffisamment attentifs aux détails. Si vous êtes submergé par les détails, réduisez la complexité de vos conceptions. Il est beaucoup plus facile de spécifier des écrans en tant que collections de composants avec des directives bien définies. Avoir un système de conception comme référence simplifie la communication entre vos équipes, garde tout le monde honnête et accélère le développement des fonctionnalités.

Si vous avez déjà une application existante, le démarrage d'un système de conception recréant vos conceptions peut sembler trop laborieux. Faites-moi confiance, arrêtez ce que vous faites et créez-en un maintenant. Vous ne savez pas combien de temps vous avez perdu. Vous pouvez facilement transformer votre système de conception de Sketch en code avec Storybook. Samantha Bretous (@samanthabretous) a beaucoup parlé de la construction d'un kit de composants.

Qu'en est-il des composants universels? React sur le Web et React Native sont très similaires, mais ils présentent des différences essentielles (par exemple, `

` vs ``, CSS vs StyleSheet, différentes capacités de plate-forme). Les composants universels sont des composants React conçus pour fonctionner sur les deux plates-formes. Si vous construisez un produit pour les deux plates-formes, vous pourriez être tenté de suivre cette voie. D'après mon expérience, puisqu'il n'est pas douloureux de créer deux fois un composant React, je n'en ai pas ressenti le besoin. Kurtis Kemple (@kurtiskemple) les a mis en œuvre pendant son séjour à la MLS et vous pouvez lire son expérience ici.

Configurez votre processus de construction.

Vous voudrez que votre responsable RN crée une version bêta et une version de production de l'application. La version bêta pointe vers votre back-end hors production et contient les toutes dernières modifications à essayer par votre équipe. Vous pouvez utiliser Fastlane pour un déploiement automatique dans les magasins d'applications. Gant Laborde (@GantLaborde) a écrit un guide sur la manière de le configurer. Vous pouvez aller encore plus loin en utilisant Github webhooks pour déployer automatiquement l'application bêta chaque fois que la branche principale change et en publiant l'application de production chaque fois qu'une nouvelle version est étiquetée.

Il existe deux manières de gérer les bogues de production: vous pouvez utiliser le correctif après une publication et éviter de les créer. Je préfère ce dernier, mais on sait que la merde frappe l’éventail. Si vous avez publié un bogue pour vos utilisateurs et que vous devez le corriger tout de suite, CodePush est votre ami. React Native fonctionne en exécutant Javascript à partir d'un package fourni dans l'application. CodePush vous permet de sortir directement un nouvel ensemble sans avoir à publier une nouvelle version dans les magasins App / Play. Ceci est limité dans la mesure où il ne peut que corriger les bugs Javascript. Si vous avez un bogue natif, vous aurez besoin d’une version complète.

Si vous souhaitez éviter les problèmes d'expédition dès le départ, investissez dans Detox pour des tests de bout en bout. Les types de bugs les plus courants que j'ai eu à traiter sont les régressions. Les fonctionnalités en cours de développement attirent le plus l’attention du contrôle qualité avant la publication, et parfois les modifications apportées aux nouvelles fonctionnalités peuvent modifier les anciennes. C’est particulièrement grave lorsque les régressions passent inaperçues pendant des mois. Vous pouvez avoir l'esprit tranquille et économiser votre équipe d'assurance qualité en implémentant Detox dans votre processus de construction. Voici une brève explication et démonstration du test E2E avec Detox. Rotem Mizrachi-Meidan (@rotemmiz) a publié un article beaucoup plus complet.

Remarque à propos de CodePush: Si vous automatisiez vos éditions avec FastLane, vous pourriez utiliser un schéma de version semi-version à éditer parfois via CodePush. Une bosse `version mineure` peut indiquer une version complète (vous avez donc des modifications de code natif), et une bosse` version` peut indiquer une version de CodePush. Par exemple, si vous utilisez la version `2.3.1` de votre application, le balisage de la version` 2.3.2` obtient le traitement CodePush, tandis que celui de la version `2.4.0` obtient le traitement du magasin App / Play.

Maintenir l'enfer de votre application.

Comme je l'ai mentionné plus tôt, RN continue d'évoluer très rapidement. C’est comme un cheval sauvage. Vous pouvez y aller et aller vite, mais si vous ne faites pas attention, cela peut vous faire perdre l’arrière et vous laisser derrière. Ainsi, chaque mois, à la sortie de la nouvelle version de React Native, votre équipe doit prendre une décision stratégique concernant le moment de la mise à niveau. Est-ce que la mise à niveau a ce dont vous avez besoin? Cela affecte-t-il vos dépendances de tiers? Quelle est l'ampleur des changements radicaux et comment les équilibrez-vous avec le calendrier de votre projet? La maintenance de la plate-forme est certainement plus importante que sur les applications natives, mais l’avantage de la vitesse compense largement.

J'espère que vous avez trouvé cet article utile pour décider où aller avec React Native. Si vous avez besoin de plus de conseils, vous pouvez m'écrire à l'adresse suivante: [email protected]