Share
Les outils, les bibliothèques et les services occupent une place importante dans la vie de chaque développeur, quel que soit l'environnement pour lequel vous développez. Et React Native ne fait pas exception. Dans cet article, je vais vous présenter quelques-uns des meilleurs frameworks, bibliothèques, composants, outils de développement et services Web d'interface utilisateur qui feront de vous un développeur React Native plus heureux et plus productif..
Visual Studio Code est un éditeur de texte doté des fonctionnalités intégrées IntelliSense, de débogage et d'intégration Git. Ce qui le rend vraiment bon pour le développement React Native est son extension d’outils React Native. Cela vous permet d'exécuter des commandes React Native à partir de la palette, d'ajouter des API IntelliSense pour React Native et de déboguer du code dans l'éditeur lui-même..
Pour plus d'informations sur la configuration du code Visual Studio pour React Native, consultez cet article de blog: VSCode for React Native.
Si vous utilisez Atom, vous pouvez installer le plugin Nuclide. Ce plugin a été spécialement créé pour travailler avec les projets React Native, Flow et Hack. Il possède un débogueur intégré et un inspecteur d'éléments avec toutes les fonctionnalités auxquelles vous êtes habitué dans les outils de développement Chrome. La prise en charge des flux signifie que vous obtenez des diagnostics prêts à l'emploi, de la complétion automatique, des conseils de type et du code.
Si vous souhaitez explorer plus d'options IDE et d'éditeur, consultez ce billet de blog sur les 10 meilleurs éditeurs pour React Native.
Les outils de développement ont une large portée, je vais donc regrouper chaque outil en fonction de son objectif:
En matière de SDK pour React Native, rien ne vaut Expo. Expo vous permet de prototyper facilement une application sans avoir besoin d'Android Studio ou de Xcode. Il comprend un ensemble de composants et de bibliothèques pour vous aider à accélérer votre développement..
Le flux de travail Expo comprend les éléments suivants:
Il n'est pas nécessaire de connecter votre téléphone à votre ordinateur. Scannez simplement le code QR sur votre terminal à l'aide de l'application client Expo et celui-ci exécutera automatiquement votre application. Si vous utilisez Genymotion, Expo le soutient aussi.
Le seul inconvénient de l'utilisation d'Expo est que vous ne pouvez inclure aucun package personnalisé utilisant les fonctionnalités natives du périphérique. Expo inclut déjà un certain nombre de packages natifs couramment utilisés tels que l'appareil photo, Facebook et Map. Mais si vous devez utiliser un package qu'ils ne supportent pas déjà, vous devrez alors "éjecter" votre application. À ce stade, votre application sera comme si elle avait été créée avec réact-natif init, et vous perdez également la possibilité de l'exécuter à l'aide de l'application client Expo.
Vérifier la qualité de votre code est important, et c’est pourquoi des outils tels que ESLint existent. En résumé, un outil anti-peluches vous permet d'être plus cohérent avec votre code en le comparant à un guide de style. Le Guide de style JavaScript d'Airbnb, qui spécifie les règles sur la manière dont le code JavaScript doit être écrit, constitue un exemple de guide de style. L'outil linting compare ensuite votre code à ces règles pour s'assurer qu'elles ont été suivies. Il y a aussi un guide de style pour les projets React.
Si vous utilisez Sublime Text, voici un bon tutoriel sur la manière de le configurer afin que vous puissiez avoir un retour d'information en temps réel sur la qualité de votre code pendant le codage: Sublime Linting for React et ES6. Si vous utilisez un autre éditeur ou IDE, veillez à rechercher le plug-in correspondant qui utilise ESLint..
Si vous souhaitez ajouter du typage statique à votre projet, vous pouvez utiliser Flow. Flow ajoute du typage statique en plus de JavaScript sans que vous n'ayez à modifier votre base de code existante. En effet, Flow essaie d'inférer le type chaque fois que possible. Pour les nouveaux projets, cependant, il est recommandé de spécifier explicitement le type pour tirer pleinement parti de l'utilisation de Flow..
Pour commencer à utiliser Flow, voici un tutoriel sur la configuration de Flow pour vos projets React Native..
Enzyme est un utilitaire de test pour React qui vous permet d’affirmer, de manipuler et de parcourir la sortie de votre composant. Il fournit des méthodes telles que peu profond() rendre "superficiellement" vos composants, trouver() traverser le composant rendu, et attendre() pour affirmer les accessoires ou le contenu rendu dans le composant.
Vous pouvez suivre ce guide Utilisation de l'enzyme pour tester les composants dans React Native afin de rendre votre application React Native testable avec enzyme. Si vous débutez avec enzyme, vous pouvez lire ce tutoriel sur le test des composants réactifs avec l’enzyme et le moka..
Reactotron est une application de bureau qui vous permet de déboguer les applications natives de React et React. Certaines de ses fonctionnalités clés incluent l'inspection, la modification et l'abonnement à l'état de l'application, le suivi des demandes HTTP effectuées via l'application, l'analyse comparative des performances de l'application et le suivi des erreurs. Si vous utilisez Redux, vous pouvez même envoyer des actions et suivre les sagas depuis Reactotron..
Snowflake est un passe-partout pour le développement natif de React en pile complète. Il comprend tout, du début à la fin de l'application. Donc, si vous voulez juste un outil qui puisse vous aider à démarrer rapidement, alors vous pourriez trouver utile Snowflake. Vous pouvez lire les notes pour plus d’informations sur les paquetages et les outils utilisés pour le mettre en place..
Alternativement, vous pouvez utiliser Ignite. C'est un outil de ligne de commande qui comprend également un standard, des générateurs, un guide de style pour les composants d'interface utilisateur, un outil de test d'API, etc..
React Native est déjà livré avec des composants d'interface utilisateur que vous pouvez utiliser pour les interactions de l'utilisateur. Le problème est qu’ils ne disposent que du style le plus élémentaire pour que chaque composant puisse être distingué pour ce qu’il est (bouton, case à cocher, par exemple). Si vous souhaitez ajouter des styles personnalisés, vous devez écrire votre propre code CSS..
C’est là que NativeBase entre en jeu. Il permet à votre application d’avoir une apparence véritablement native en implémentant le même design que celui utilisé dans les applications natives Android (Material Design) et iOS (Human Interface Guidelines). Dès la sortie de la boîte, vous obtenez des composants personnalisés tels que des boutons d'action flottante, des spiners et, mieux encore, des composants de formulaire.
React Native possède une énorme communauté derrière elle. Vous pouvez donc utiliser un grand nombre de bibliothèques et de composants. Nous pourrions passer toute la journée à en parler, alors pour rester bref, je vais me concentrer sur les domaines suivants:
React Navigation vous permet d’implémenter facilement la navigation dans vos applications React Native grâce à l’utilisation de ses navigateurs intégrés, tels que Stack Navigator, Tab Navigator et Drawer Navigator. Mais ce n’est pas tout: en plus de la navigation dans l’application, il inclut également la liaison en profondeur, l’intégration Redux et l’intégration Web. Cela en fait une bibliothèque vraiment robuste pour implémenter la navigation.
MobX fournit la fonctionnalité permettant de mettre à jour et de gérer l'état de l'application utilisé par React. Ce qui en fait un bon candidat pour la gestion d’états dans React, c’est sa simplicité et sa testabilité. Sa courbe d'apprentissage est également courte, de sorte que des fonctions telles que les fonctions asynchrones et les valeurs calculées sont déjà gérées en arrière-plan..
Redux est toujours recommandé pour les applications plus volumineuses et complexes. En effet, MobX est très libéral, à l'instar de Redux, qui fournit des directives strictes sur la gestion de l'État. C'est donc un choix plus judicieux pour les projets plus importants avec plus de personnes travaillant dessus.
React Native possède déjà une API d'animation intégrée. En fait, il n’ya pas une, mais deux API pour travailler avec l’animation: API animée et LayoutAnimation. Ces deux-là sont très puissants mais peuvent être encombrants, surtout si tout ce que vous voulez faire est d'appliquer des animations de base telles que déplacer un objet de haut en bas ou le faire rebondir. Dans de tels cas, des composants comme Animatable sont utiles.
Voici une liste des composants et des bibliothèques couramment utilisés dans les projets React Native. Ceux-ci sont compatibles avec les appareils Android et iOS:
Vous pouvez créer des applications sans serveur et faciliter le déploiement de vos applications natives React à l'aide de services Web. Il existe une pléthore de services Web, mais je vais me concentrer sur les domaines suivants:
Realm est une base de données en temps réel axée sur les applications mobiles. Il inclut des fonctionnalités telles que la synchronisation de données bidirectionnelle, les fonctionnalités de démarrage hors connexion et la transmission de données. La base de données Realm Mobile est open-source et multiplate-forme, ce qui signifie que vous pouvez héberger le serveur d'objets Realm sur votre propre serveur, puis utiliser gratuitement la bibliothèque Realm JavaScript..
Toutes les fonctionnalités ne sont pas disponibles dans l'édition pour développeurs, mais dans la plupart des cas d'utilisation, vous ne devriez utiliser que l'édition pour développeurs, car elle inclut les fonctionnalités principales telles que la base de données d'objets, la synchronisation en temps réel et l'authentification. Voici une comparaison de ce que vous obtenez pour chaque édition: Produits et prix du domaine.
Si Realm répond trop à vos besoins, vous pouvez toujours vous en tenir à l'API AsyncStorage fournie avec React Native..
Fabric est un service tout-en-un qui vous permet, entre autres choses, d'ajouter des analyses à votre application. Il y a Réponses, qui vous donne des statistiques en temps réel sur l'utilisation de votre application. Cela inclut le nombre d'utilisateurs actifs, la durée de la session et le taux de rétention. Il y a aussi Crashlytics, ce qui vous donne de puissantes capacités de compte rendu de crash. Tout cela se passe en temps réel et vous pouvez le visualiser dans le tableau de bord en temps réel de Fabric. Vous pouvez utiliser la bibliothèque Fabric pour configurer facilement Fabric pour votre application React Native..
Si vous préférez vous en tenir à une solution éprouvée telle que Google Analytics, il existe également une bibliothèque qui vous permet de le faire..
Il n'y a vraiment pas de concurrence lorsqu'il s'agit d'implémenter les notifications push dans les applications. Firebase Cloud Messaging (anciennement Google Cloud Messaging) vous permet d’envoyer des notifications push aux applications Android et iOS. Vous pouvez utiliser le package react-native-fcm pour communiquer avec FCM à partir de votre application..
CodePush vous permet de déployer des mises à jour de code dans des applications mobiles directement sur les appareils des utilisateurs. CodePush agit comme un référentiel central dans lequel vous pouvez déployer les modifications apportées à HTML, CSS, JavaScript et à des actifs tels que des images. Le code CodePush correspondant dans l'application extrairait alors ces modifications. Ceci est idéal pour appliquer des corrections de bogues à l'application sans avoir besoin de la télécharger dans le magasin d'applications et d'attendre que les utilisateurs mettent à jour l'application. Vous pouvez utiliser ce package pour extraire les mises à jour de CodePush dans votre application React Native..
Bitrise est un service de livraison continue pour le développement d'applications mobiles. Il vous permet d'exécuter vos tests, de créer l'application et de la pousser automatiquement sur les appareils de vos utilisateurs chaque fois que vous déployez votre code..
Bitrise s'intègre à un ensemble de services à chaque étape de votre flux de travail de développement. Par exemple, lorsque vous appuyez sur vos branches de publication sur GitHub, Bitrise en est averti. Il commencera ensuite à exécuter les tests. Une fois les tests passés, le processus de construction commence. S'il ne s'agit que d'une "version logicielle" (par exemple, des modifications du code JavaScript), les modifications peuvent être déployées sur les utilisateurs via CodePush. Mais si le code natif a été modifié (par exemple, vous avez ajouté un plugin Camera), Bitrise peut également créer un APK ou IPA fichier et le déployer sur Google Play ou iTunes Connect.
Fastlane est un ensemble d’outils permettant d’automatiser le processus de création et de publication des applications Android et iOS. Pour iOS, il gère des tâches telles que l'exécution de vos tests, la génération de captures d'écran, la signature de code et la publication de l'application sur l'app store. Il comprend également des outils de test bêta tels que Pilot et Boarding. Pilote vous permet de télécharger votre application sur iTunes Connect et de gérer vos bêta-testeurs TestFlight directement à partir de la ligne de commande. Boarding crée une page d'inscription pour les bêta-testeurs TestFlight.
Les outils sont davantage adaptés au déploiement iOS, mais vous pouvez également en bénéficier si vous déployez des applications Android. Actuellement, seuls deux outils sont disponibles pour le déploiement d'Android: Supply et Screengrab..
La fourniture vous permet d'automatiser le téléchargement d'éléments tels que l'icône de l'application, les graphiques promotionnels et les captures d'écran de votre application. Il vous permet également de mettre à jour vos applications existantes sur le Google Play Store..
Screengrab, D'autre part, automatise la génération de captures d'écran pour plusieurs appareils. Chaque capture d'écran peut également être localisée si votre application prend en charge plusieurs langues..
C'est tout! Dans cet article, vous avez découvert certains outils, bibliothèques et services que vous pouvez utiliser lors du développement d'applications natives React. Et vous? Quels sont vos meilleurs outils pour développer des applications dans React Native??
Et pendant que vous êtes ici, consultez certains de nos autres articles sur le développement d'applications React Native.!
Accentsconagua