Adopté dans le monde entier par des entreprises à succès massif comme Facebook, Shopify, Coinbase, Tesla et Discord, React Native offre une solution prometteuse pour ceux qui recherchent un cadre viable sur lequel développer des applications multiplateformes. Pourquoi certaines des plus grandes entreprises du monde passent-elles à React Native ?
- Il offre un code plus concis et plus facile à comprendre qui peut être partagé sur plusieurs plates-formes.
- Il offre une itération rapide sans cycle de compilation.
- Vous pouvez expédier plus rapidement et vous concentrer sur les détails qui comptent vraiment, ce qui donne à votre application une apparence et une sensation fantastiques.
Pour atteindre le véritable potentiel de performance de votre application React Native, l’optimisation est une étape cruciale. Dans cet article, nous décrivons certaines optimisations qui peuvent rendre votre application React Native deux fois plus rapide et beaucoup plus efficace.
Flipper
Flipper est une plateforme de débogage pour les applications Android, iOS et RN. Il a un inspecteur de mise en page et de réseau et affiche les journaux avec une interface utilisateur propre. Flipper s’intègre directement au code natif, de sorte qu’il n’y a pas de différence d’exécution entre les moteurs JS ou qu’il ne nécessite pas de débogage à distance. Nous pouvons suivre les fonctions, les méthodes et de nombreuses choses logiques en installant le plugin Flipper, et il peut être installé directement à partir de l’application de bureau
Images du cache
RN fournit une image en tant que composant principal qui permet aux développeurs d’afficher des images. Cependant, il y a peu de problèmes avec ce composant d’image. Certains d’entre eux incluent le rendu de nombreuses images sur un seul écran, le scintillement des images, les faibles performances de chargement des images et le chargement du cache. Pour résoudre ces problèmes, nous pouvons mettre l’image en cache et utiliser le cache local dans la requête suivante. Cependant, RN prend en charge la mise en cache intégrée uniquement pour iOS et non pour Android.
Use NativeDriver with the Animated API
Developers are using animations in RN apps, and there are many ways to use animations in apps. However, running animations on the JavaScript thread is not a good practice. The best practice is to use an Animated library and the nativeDriver to push the details of the animation over the native bridge before it starts on the screen. We can use the nativeDriver with the Animated library by simply setting useNativeDriver as ‘true.’
Optimize Android App Size
Usually, developers do not bother about app size at the start of the project. Yet, it isn’t easy to make such predictions up to some extent. However, reducing the application size will improve the performance of the application. Therefore, it is vital to use the necessary components and optimize them to reduce the app size. A typical RN app contains resources such as images, fonts, etc. In addition, there’s a JavaScript bundle with business logic and four different sets of binaries compiled for different CPU architectures. We can use proguard to reduce app size, and we can optimize the binary size of the Andriod build by setting the Boolean flag enableProguardInReleaseBuilds to true.
Conclusion
Plusieurs facteurs peuvent affecter les performances d’une application React Native, tels que le contenu de grandes images, des calculs lourds et des appels de rendu inutiles. Du bon côté, nous pouvons éviter de nombreux problèmes de performances courants en suivant les meilleures pratiques et en utilisant des outils comme ceux discutés et recommandés dans cet article.
