Introduction
Cet article explore les limitations de React Native. Certaines limitations sont présentes tant sur iOS qu’Android, tandis que d’autres ne concernent qu’une plateforme (parfois, les versions iOS et Android d’une même application sont séparées).
React Native doit encore surmonter des défis liés à la performance, comme le multithreading, le traitement parallèle, les animations, les listes déroulantes, etc.
Les limitations de React Native que Facebook ne veut pas que vous sachiez
Dans un monde technologique en constante évolution, il est difficile de rester compétitif sans répondre à la demande croissante d’UI et UX de haute qualité. Si vous souhaitez faire évoluer votre entreprise et la faire croître rapidement, il est essentiel de réévaluer l’utilisation de React Native.
Plutôt que de suivre une approche traditionnelle du développement d’applications, qui pourrait mener à des applications médiocres souffrant de limitations de performance, il convient de considérer que le langage de programmation et le cadre de développement que vous utilisez offrent une alternative solide.
Les limitations de performance de React Native
La réactivité de l’UI est un critère clé de succès pour toute application de tableau de bord. Pour garantir une interface rapide et réactive, il est nécessaire de simplifier au maximum le tableau de bord en affichant le moins de widgets possible.
Les utilisateurs ont du mal à lire de nombreuses colonnes et lignes de texte nécessaires pour afficher toutes les informations d’une application de tableau de bord.
Les widgets sont un excellent moyen d’organiser l’information et de la rendre compréhensible pour les utilisateurs, mais ils peuvent vite devenir écrasants lorsqu’ils sont trop nombreux à l’écran.
À ce stade, on n’affiche qu’une seule vue web. Lorsqu’on procède ainsi, on ne tente pas encore de faire fonctionner cette vue sur plusieurs threads.
Par exemple, si vous développez une application de tableau de bord, en utilisant la classe Page de React Native, cette partie de la page sera rendue simultanément sur plusieurs threads pour garder l’interface réactive.
Mais que se passe-t-il si nous voulons afficher plusieurs widgets, et aussi que cela se fasse en parallèle sur plusieurs threads ?
Le multithreading
Lorsqu’un appareil mobile dispose de plusieurs cœurs, il est possible d’utiliser 4 à 8 cœurs pour traiter un seul bouton sur un écran. Les applications multithreadées sont faciles à gérer, mais ce n’est pas le cas pour les applications mobiles natives. Pour cela, il faut utiliser des bibliothèques en temps réel comme Struts2 ou Apache Thrift.
En utilisant React Native avec deux threads ou plus, React Native peut parfois se bloquer et figer l’application pendant quelques secondes pour améliorer la performance.
Il faudra presque une minute pour se reconnecter à l’application. Si vous avez dix threads, cela pourrait signifier environ 20 blocages, soit près de trente secondes d’interruption. C’est un inconvénient inévitable de React Native. Vous ne pouvez rien y faire.
Sur iOS et Android, vous devez traiter les éléments UI comme un tampon mémoire. Ils peuvent garder les informations temporaires entre les threads et récupérer un nouvel état actif. La durée de vie de la batterie n’est pas épargnée non plus. React Native n’est donc pas idéal pour les appareils haute performance, comme l’iPhone X.
Dépendance aux bibliothèques tierces
React Native est un excellent framework, mais il peut poser des problèmes de performance à cause des bibliothèques tierces. Ces problèmes peuvent pousser les développeurs à se tourner vers le développement natif ou à choisir d’autres frameworks comme PhoneGap ou Ionic. Si votre entreprise dépend de React Native, perdre des clients peut nuire considérablement à vos revenus.
Pour résoudre ce problème, vous pouvez simplement mettre en cache les bibliothèques déjà installées avec le module react-native-library-cache. Le reste de votre application fonctionnera parfaitement, car vous pourrez toujours utiliser les bibliothèques tierces sans rencontrer de problèmes de performance.
Tous les développeurs ne peuvent pas créer une application par eux-mêmes. C’est pourquoi il existe de nombreuses bibliothèques tierces (appelées « view »). Cependant, cela met en lumière la limitation principale de React Native.
Bien que vous puissiez utiliser ces bibliothèques sans modifier le code original, cela entraînera des problèmes de performance.
En plus des limitations du framework, un développeur doit tenir compte des problèmes de timing entre l’application et le monde extérieur. Souvent, il est nécessaire de gérer une ou plusieurs conditions réseau pour améliorer les performances.
Limitations de la couche d’abstraction
La couche d’abstraction de React Native vise à améliorer les performances, mais de nombreux développeurs la trouvent plutôt faible, ce qui conduit souvent à des applications boguées.
En raison des problèmes courants avec ce framework, de nombreuses entreprises hésitent à adopter React Native dans leur portefeuille. JavaScript est une option bien meilleure pour les besoins des applications.
JavaScript est une plateforme de développement cross-platform rapide qui offre des performances, une vitesse, une stabilité et une évolutivité exceptionnelles pour le développement d’applications mobiles. JS améliore la productivité des développeurs en fournissant un code propre et en minimisant la complexité.
En matière de problèmes de performance, la « couche d’abstraction » introduite par les développeurs de React Native a constitué un obstacle majeur pour de nombreux développeurs. Elle fournit un framework simplifié mais avec trop de complexité à gérer.
React Native cache tout pour vous, mais vous vous retrouvez avec des détails d’implémentation très difficiles à comprendre et à déboguer.
Pire encore, React Native masque de nombreux problèmes de performance sans raison apparente. C’est un problème récurrent de React Native d’avoir des facteurs cachés.
Animations
L’un des plus grands problèmes de performance de React Native est parfois l’animation. En utilisant React Native, nous traitons les animations de vue, où la vue est définie comme une fonction.
Mais ce que nous ne pouvons pas faire, c’est l’animation en ligne comme c’est possible avec le code JavaScript, en définissant une fonction qui s’occupe de l’animation. Avec React Native, nous ne pouvons pas définir la vue qui fera l’animation. Nous devons donc gérer plusieurs variantes d’animations « Inline ».
C’est la limitation de l’API d’animations de React Native. Nous avons plusieurs API de vues personnalisées. L’une d’elles (React Native Animations Platform) est lente et difficile à gérer. Par exemple, lorsque nous utilisons un élément UI animé, l’animation est lente. Mais nous en avons encore besoin pour éviter de gérer nous-mêmes les animations.
Temps d’initialisation
Tout code JS doit être analysé et exécuté dans la machine virtuelle JS, ce qui a un coût. Le chargement binaire et les programmes compilés sont toujours plus rapides. Il existe peut-être des moyens d’améliorer cela, comme la mise en cache du bytecode, mais cela semble encore loin.
L’utilisation d’émulateurs et de tutoriels lors de la configuration initiale est connue pour causer des performances faibles. Mais React Native s’améliore constamment.
React propose un assistant de configuration qui génère l’application de base React Native en un seul clic. Cependant, pour réussir avec React Native, il est essentiel d’être conscient de ses défis et limitations.
Dès que vous créez l’application React Native, assurez-vous de vérifier son fonctionnement. Le code est compilé en bytecode par le moteur Google V8. Comme il a été compilé par le navigateur, il ne fonctionnera pas avec des environnements JS classiques comme Webpack ou Browserify.
Cela ne peut donc pas être utilisé pour du code JavaScript minifié/optimisé. En raison de toutes ces limitations, le framework React Native ne semble pas prometteur pour continuer à faire évoluer la manière dont nous devons coder pour iOS et Android.
Listes déroulantes
Les listes déroulantes dans React Native sont à éviter. Bien que de nombreux développeurs essaient de contourner ce problème en créant des solutions de rechange, il est préférable de suivre un système de navigation natif.
La solution consiste à faire défiler l’ensemble des éléments en plein écran et à voir la liste comme suit : (Voir la version agrandie) Ce n’est pas une mauvaise solution, mais elle reste temporaire. Il faut d’abord comprendre le concept derrière ce système de navigation particulier.
Tous les éléments de la liste défilent dans le sens de leur début. Ainsi, si un élément de la liste comporte plusieurs niveaux (comme une vue tableau de bord), le système de navigation doit continuer à faire défiler la liste des éléments dans ces niveaux. Si cela ne se fait pas, chaque niveau devient un élément de liste séparé.
Déploiement Android difficile avec React Native
Contrairement au déploiement iOS, le déploiement Android nécessite des tests avant la mise en production. Pour iOS, il suffit de créer un nouveau projet et de remplir les fichiers depuis Xcode.
Le déploiement Android pose toujours un grand problème et il est complexe et plein d’embûches. Beaucoup de problèmes peuvent survenir lors du déploiement d’applications Android : l’application plante sur le simulateur ou sur l’appareil, il n’y a pas de son sur certains appareils, etc.
Le problème avec Android, c’est que vous n’avez qu’une chance pour bien faire les choses, sinon vos utilisateurs désinstalleront votre application en quelques secondes ! C’est pourquoi vous devez utiliser un émulateur pour les plateformes iOS et Android.
Le déploiement Android n’est pas aussi simple que pour iOS, il est donc essentiel de tester avant le déploiement.
Conclusion
React Native est un framework JavaScript permettant de créer des applications mobiles avec uniquement du JavaScript. C’est
