Optimisations en React Native — Partie 2

1 — Ajustement (redimensionnement et réduction) des tailles d’images en React Native

L’optimisation des images dans les applications React Native est cruciale pour améliorer les performances et l’expérience utilisateur. Voici quelques conseils et techniques pour ajuster efficacement la taille des images :

Utilisation de Formats d’Images Optimisés : Optez pour des formats d’image modernes et efficaces comme WebP ( oui oui le WebP est pris en compte en React Native 🧐, mais il demande quelques ajustement niveau configuration, on en parle dans un autre article) ou JPEG 2000. Ces formats offrent un bon équilibre entre qualité et taille de fichier.

Redimensionnement des Images : Réduisez la taille physique des images. Il est inutile de charger une image de 4000x3000 pixels pour un affichage qui n’en nécessite que 800x600. Utilisez des outils de redimensionnement d’image côté serveur ou intégrez une étape de redimensionnement dans votre pipeline de déploiement.

Compression Sans Perte : Employez la compression sans perte pour réduire la taille des fichiers sans sacrifier la qualité. Des outils comme TinyPNG ou ImageOptim peuvent être utiles.

Chargement Paresseux (Lazy Loading, c’est quand même mieux en anglais**)** : Implémentez le chargement paresseux des images. Cela signifie que les images ne sont chargées que lorsqu’elles entrent dans le viewport de l’utilisateur. En React Native, vous pouvez utiliser des bibliothèques comme react-native-lazy-load-image.

💡 petit tip: Encore une fois il faut prendre en compte que l’utilisation de librairies externes doit être correctement dosé. Il est important de ne pas ré-inventer la roue mais l’usage de dépendances externe est parfois préjudiciable pour le projet.

Cache des Images : Mise en cache des images après leur premier téléchargement. Cela évite de recharger les mêmes images à chaque fois, économisant ainsi des ressources réseau et accélérant le temps de chargement.

Utilisation de Thumbnails : Pour les listes d’images, comme dans une galerie, utilisez des miniatures de petite taille qui peuvent être agrandies à la demande de l’utilisateur.

Surveillance de la Performance : Utilisez des outils comme Flipper ou React Native Performance pour surveiller l’impact de vos images sur les performances de l’application.

En mettant en œuvre ces pratiques, on peut considérablement améliorer les performances de votre application React Native, surtout en ce qui concerne le temps de chargement et la fluidité de l’interface utilisateur.

2 — Mise en Cache des Images Localement en React Native

La mise en cache des images localement est une stratégie importante pour optimiser les performances des applications React Native.

Des bibliothèques 📚 comme react-native-fast-image offrent des fonctionnalités de mise en cache avancées. FastImage remplace le composant d'image standard de React Native et gère le cache des images de manière plus efficace.

Vous pouvez aussi déterminez la stratégie de cache adaptée à votre application. Vous pouvez choisir de mettre en cache jusqu’à un certain seuil de taille ou pendant une durée spécifique avant de rafraîchir le cache.

Le stockage persistant sur l’appareil pour stocker les images est une autre solution. Des options comme AsyncStorage ou des bases de données locales comme Realm ou SQLite peuvent être utilisées pour stocker les métadonnées des images et leur chemin d’accès.

Enfin, il faut surveillez et gérez la taille de votre cache pour éviter une utilisation excessive de l’espace de stockage sur l’appareil. Implémentez une logique pour purger les images les moins fréquemment utilisées du cache.

3 — Planification des Animations avec InteractionManager et LayoutAnimation en React Native ✨

L’utilisation judicieuse de InteractionManager et LayoutAnimation dans React Native peut améliorer significativement les performances des animations. On va en parler un peu plus en détail et j’annonce tout de suite mettre un disclaimer à la suite !

1. InteractionManager :

• InteractionManager permet de différer l'exécution de tâches longues ou intensives en ressources jusqu'à ce que toutes les interactions en cours (comme les animations) soient terminées. Cela aide à éviter les ralentissements et les saccades pendant les animations.
• Enveloppez les tâches gourmandes en ressources avec InteractionManager.runAfterInteractions(() => { /* Votre tâche */ }). Cela garantit que ces tâches ne commencent qu'après la fin des animations ou interactions en cours.
• On peut Utiliser InteractionManager pour des opérations comme le chargement de données, les mises à jour d'état complexes ou le traitement d'images qui pourraient autrement ralentir les animations de l'interface utilisateur.

2. LayoutAnimation :

• LayoutAnimation permet d'animer automatiquement les transitions de mise en page lorsqu'une vue est créée, mise à jour ou supprimée. C'est un moyen simple et puissant de créer des animations fluides sans avoir besoin d'une gestion manuelle complexe.
• Configurez LayoutAnimation au début du cycle de vie du composant ou avant de changer l'état qui entraînera une réorganisation de la mise en page. Par exemple, LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) animera automatiquement les changements de mise en page suivants.
• LayoutAnimation offre plusieurs presets, mais vous pouvez également créer des configurations personnalisées pour contrôler la durée, le type d'animation (spring, linear, easeInEaseOut, etc.), et d'autres paramètres d'animation.

3. Combinaison des Deux :

• Performance Optimale : En combinant InteractionManager et LayoutAnimation, on peut créer des animations fluides tout en s'assurant que les tâches lourdes sont exécutées sans impacter la fluidité de l'interface utilisateur.
• Exemple d’Utilisation : Utilisez LayoutAnimation pour des transitions de mise en page fluides, et InteractionManager pour différer le chargement de données ou d'autres tâches jusqu'à ce que les animations soient terminées.

⚠️ disclaimer: (je l’avais annoncé 😌): L’utilisation de ces deux outils s’adresse principalement à des applications React Native qui ne sont pas sur les dernières versions de R.N. ou qui ont des contextes particuliers. Pour t’éviter des maux de têtes je te sur recommande la librairie reanimated qui est un outil banger à utiliser !

4 — Utilisation du Native Driver avec l’API Animated en React Native

L’intégration du Native Driver dans l’utilisation de l’API Animated est une technique pour optimiser les performances des animations en React Native.

Principe du Native Driver :

• Le Native Driver permet de déléguer l’exécution des animations à la couche native plutôt qu’au thread JavaScript. Cela signifie que les animations peuvent continuer à s’exécuter de manière fluide même si le thread JavaScript est occupé.
• Avantages : Réduction des saccades et amélioration de la fluidité des animations, surtout dans les cas où le thread JavaScript est surchargé.

Application avec l’API Animated :

• Activation du Native Driver : Lors de la création d’une animation avec Animated, activez le Native Driver en définissant useNativeDriver: true dans la configuration de l'animation.
• Exemple : Animated.timing(this.state.animatedValue, { toValue: 1, duration: 500, useNativeDriver: true }).start();

Limitations et Compatibilité :

Actuellement, le Native Driver ne supporte que certaines propriétés d’animation, principalement celles liées à la transformation et à l’opacité.

Si vous avez besoin d’animer d’autres propriétés, évaluez si l’impact sur les performances justifie de ne pas utiliser le Native Driver pour ces cas spécifiques.

Meilleures Pratiques :

Employez le Native Driver pour la plupart des animations, en particulier celles qui sont liées à la réponse de l’utilisateur, comme les animations de défilement ou de toucher.

Intégration avec d’Autres Outils :

Cet outil peut s’utiliser de manière combinée avec InteractionManager et LayoutAnimation et c’est même conseillé.

Conclusion

L’optimisation des performances en React Native, notamment à travers l’ajustement des tailles d’images, la mise en cache locale, l’utilisation de formats d’images à chargement rapide, la planification des animations avec InteractionManager et LayoutAnimation, ainsi que l'utilisation du Native Driver avec l'API Animated, est essentielle pour créer des applications réactives et agréables pour l'utilisateur.

En intégrant ces stratégies, les développeurs peuvent non seulement améliorer les performances mais aussi offrir une expérience utilisateur plus engageante et professionnelle dans les applications React Native.

Votre feedback ou vos commentaires sur ces sujets sont les bienvenus pour enrichir la discussion et explorer de nouvelles perspectives dans le monde du développement React Native.

Une troisième partie sur l’optimisation React Native arrive bientôt !

N’hésites pas à caresser le bouton “like” et “follow” pour voir les nouveaux articles et ça fait toujours plaisir !

Stay tuned ! 📻

Moi, c’est Kévin Bidet, développeur freelance React et React Native, créateur de contenus et apporteur d’affaires à mes heures perdues ! J’accompagne les entreprises pour améliorer et faire grandir leurs apps ! Tu veux plus d’infos ? Contacte-moi via mon site web → kevinbidet.me !