Qu'est-ce que React Native ?

Qu'est-ce que React Native ?

React Native est un framework open source, créé chez Meta, pour développer des applications iOS et Android avec JavaScript (ou TypeScript) et React. Vous écrivez vos composants une seule fois, et React Native les affiche sous forme de vues natives propres à chaque plateforme, et non comme une page web dans une enveloppe. La logique de votre application s'exécute dans un moteur JavaScript, Hermes par défaut, et dialogue avec la partie native pour dessiner l'interface et utiliser les fonctions de l'appareil, comme l'appareil photo. C'est pourquoi une application React Native a l'allure et le défilement d'une application native, alors que l'essentiel de son code est partagé entre les plateformes.

Comment fonctionne React Native

• Couche JavaScript. Vos composants, votre état et votre logique métier s'exécutent ici, sur le moteur Hermes. Hermes est le moteur par défaut, et les builds de production précompilent votre JavaScript en bytecode pour accélérer le démarrage.
• Couche native. Les vues et API de la plateforme : UIKit sur iOS, Android Views sur Android.
• JSI. La JavaScript Interface permet à JavaScript de détenir une référence à un objet natif C++ et de l'appeler directement. Elle remplace l'ancien pont asynchrone qui faisait circuler des messages sérialisés entre les deux mondes.
• Fabric et TurboModules. Fabric est le moteur de rendu et les TurboModules sont les modules natifs construits sur JSI. Avec JSI, ils forment la New Architecture, devenue le choix par défaut des nouveaux projets avec React Native 0.76. Elle était disponible en option depuis la 0.68, et les applications existantes peuvent encore la désactiver. L'activer n'accélère pas une application à elle seule, et certains codes doivent être adaptés pour en profiter.
• Modules natifs. Quand le framework n'expose pas une fonction de la plateforme, vous écrivez du Swift, du Kotlin ou du C++ et l'appelez depuis JavaScript, ou vous utilisez une bibliothèque communautaire qui le fait.

React Native et Expo

Vous pouvez utiliser React Native seul, mais la documentation officielle recommande de démarrer une nouvelle application avec un framework, et met en avant Expo. Expo apporte un routage par fichiers, des bibliothèques maintenues et des plugins de configuration qui modifient les projets natifs sans que vous touchiez aux fichiers natifs. Un nouveau projet démarre avec npx create-expo-app@latest. Sans framework, vous assemblez vous-même la navigation, les API natives et la configuration de build. Expo ne remplace pas React Native : votre application reste une application React Native.

Exemple

Une jeune entreprise de livraison de repas, dont l'équipe web travaille en React, construit son application client en React Native. L'équipe réutilise ses modèles TypeScript, son client d'API et sa logique d'état, écrit les écrans avec des composants React Native et publie sur les deux stores. La carte et la feuille de paiement passent par des modules natifs. La semaine du lancement, un afflux de requêtes arrive sur le même backend que celui du site web : le vrai risque se trouve derrière les écrans, dans l'API.

Points forts de React Native

• Un seul code pour deux plateformes. L'essentiel de la logique et de nombreux écrans sont partagés.
• Des équipes qui connaissent déjà React. Composants, hooks et état se transposent depuis React sur le web.
• Itération rapide. Les modifications apparaissent dans l'application en cours d'exécution sans reconstruction native complète.
• Applications produit courantes. Contenu, e-commerce, réseaux sociaux et outils de productivité s'y prêtent bien.

Ses limites

• Graphismes lourds et temps réel. La réalité augmentée, les jeux et les animations exigeantes demandent souvent du code natif.
• Nouvelles fonctions de la plateforme. Les nouvelles API iOS ou Android nécessitent en général un module natif ou la mise à jour d'une bibliothèque avant d'être utilisables en JavaScript.
• Qualité inégale des bibliothèques. Vérifiez qu'un paquet est maintenu et compatible avec la New Architecture avant de vous y fier.
• Débogage entre plusieurs couches. Un plantage peut impliquer JavaScript, la couche native et la plateforme.

React Native, Flutter et natif

• React Native : JavaScript ou TypeScript avec React, affiché avec les vues natives de la plateforme. Un choix naturel pour les équipes React.
• Flutter : Dart, avec son propre moteur de rendu qui dessine l'interface, ce qui donne le même aspect sur les deux plateformes. Voir Flutter.
• Natif (Swift et Kotlin) : deux bases de code, accès complet à chaque fonction de la plateforme dès le premier jour, et le plus de maintenance.

Erreurs fréquentes

• Croire qu'iOS et Android se comportent pareil. Rendu du texte, défilement, autorisations et clavier diffèrent. Testez sur les deux.
• Ne pas tester les builds de production. Les builds de débogage sont bien plus lents et masquent le vrai comportement au démarrage et en mémoire.
• Ajouter des bibliothèques non maintenues. Une dépendance abandonnée peut bloquer une mise à jour.
• Ne pas envoyer les source maps à l'outil de suivi des plantages. Sans elles, les traces sont illisibles.
• Ne tester que l'interface. Des API lentes ou en échec font paraître cassée la meilleure interface.

Tester le backend d'une application React Native

Des outils d'interface comme Detox et Maestro testent l'application elle-même. Le côté réseau est un travail à part. Les clients mobiles réessaient, créent des pics au lancement et tournent sur des connexions lentes, et tous interrogent votre API. La surveillance d'API de LoadFocus vérifie vos endpoints à intervalles réguliers depuis plusieurs emplacements et vous alerte en cas de lenteur ou de panne, la première alerte pour une application dont les utilisateurs accusent l'application. Avant un lancement ou une campagne, les tests de charge montrent le comportement de ce backend avec de nombreux utilisateurs simultanés. Utilisez la surveillance d'API comme contrôle permanent et les tests de charge pour les pics prévus. Pour des exemples concrets (en anglais), lisez l'étude de cas sur les temps de chargement d'applications mobiles et pourquoi les tests de performance comptent pour les entreprises mobile-first.

Questions fréquentes : React Native

React Native, c'est la même chose que React ?

Ils partagent les mêmes idées de base : composants, props, état et hooks. React affiche dans le DOM du navigateur, React Native dans des vues mobiles natives, d'où des éléments de base différents (View et Text au lieu de div et span).

La New Architecture est-elle le choix par défaut ?

Oui, pour les nouveaux projets depuis React Native 0.76. Les applications existantes peuvent encore la désactiver par un réglage dans les fichiers de projet Android et iOS, comme le décrit la documentation de React Native.

Ai-je besoin d'Expo pour utiliser React Native ?

Non, mais la documentation de React Native recommande un framework pour les nouvelles applications et présente Expo. Vous pouvez utiliser React Native sans framework si vous préférez gérer vous-même les projets natifs.

Une application React Native est-elle vraiment native ?

Oui. Le résultat est une application iOS ou Android installable qui affiche des vues natives. Votre JavaScript s'y exécute sur le moteur Hermes.

Puis-je partager du code entre un site React et une application React Native ?

La logique métier, les hooks, les clients d'API et les types se partagent facilement. Les composants d'interface diffèrent en général, car le web et le mobile utilisent des éléments de base différents, sauf si vous utilisez une couche comme React Native Web.