React Native est un framework open source créé par Facebook pour le développement d'applications mobiles natives à l'aide du langage de programmation JavaScript. Il est utilisé pour développer des applications qui fonctionnent sur différentes plateformes, au lieu de créer des applications distinctes pour chaque système. Le 26 mars dernier, l’équipe derrière le framework a annoncé la disponibilité immédiate de React Native 0.62, malgré la pandémie du coronavirus qui pourrait affecter le travail de nombreux contributeurs. Et ce qui pourrait être une excellente nouvelle pour les développeurs d’applications mobiles qui utilisent React Native, c’est que cette dernière version inclut la prise en charge de l’outil Flipper par défaut.La prise en charge par défaut de Flipper
Flipper est une plateforme de débogage pour les applications mobiles. Avec Flipper, vous pouvez visualiser, inspecter et contrôler vos applications à partir d'une simple interface de bureau. Il est populaire dans les communautés Android et iOS, et dans la mise à jour de l’équipe React Native, la prise en charge par défaut des applications React Native (nouvelles et existantes) a été activée, a écrit Rick Hanlon de l’équipe React Native chez Facebook dans un article de blog. L'intégration entre React Native et Flipper est donc possible dès la version 0.62 du framework.
Flipper offre les fonctionnalités suivantes sans aucune étape de configuration supplémentaire :
Metro Actions : Vous permet de recharger l'application et de déclencher le menu Dev directement depuis la barre d'outils. Il faut noter que vous pouvez désormais fournir un raccourci clavier en utilisant Flipper pour recharger ou afficher le menu Dev, que votre émulateur d'application ait le focus ou non. Ce qui est très pratique lorsque vous utilisez le débogueur Javascript dans Chrome et que vous souhaitez recharger l'application.
Crash Reporter : Vous permet de consulter les rapports de crash des appareils Android et iOS. Certains bogues ne se produisent pas en cours de développement, c'est là que Crash Reporter est utile. Vous obtenez la trace de la pile d'erreurs de lancement dans Flipper si un plantage se produit pendant l'exécution de l'application. De même, si l'une des bibliothèques natives déclenche un plantage, vous obtiendrez le journal dans Flipper.
React DevTools : Vous permet d’utiliser la dernière version de React DevTools en même temps que tous vos autres outils.
Network Inspector : Vous permet d’afficher toutes les requêtes réseau effectuées par les applications de l'appareil. Vous pouvez maintenant, grâce au Network Inspector, déboguer les requêtes réseau qui se produisent, avant de devoir utiliser quelque chose comme Reactotron et l'amorcer dans votre code.
Metro and Device Logs : Vous permet d’afficher, rechercher et filtrer tous les journaux de metro dans React Native ainsi que ceux de l’appareil.
Native Layout Inspector : Vous permet de visualiser et de modifier la mise en page native produite par le moteur de rendu React Native.
Database and Preference Inspectors : Vous permet de visualiser et de modifier les bases de données et les préférences de l'appareil.
L'une des plus grandes qualités de Flipper est son extensibilité. De nombreuses équipes chez Facebook ont déjà écrit leurs propres plugins uniques qui aident à analyser des cas d'utilisation très spécifiques, selon la documentation sur Flipper. L'écriture de plugins pour Flipper ne nécessite aucun code natif, car le SDK de Flipper est directement exposé au JavaScript par le biais du paquet react-native-flipper.
Nouvelles fonctionnalités du Dark mode
L’équipe React Native a ajouté un nouveau module "Apparence" qui permet d'accéder aux préférences de l'utilisateur en matière d'apparence, comme son schéma de couleurs préféré (clair ou foncé). Bien que le schéma de couleurs soit disponible immédiatement, il peut changer - par exemple, un changement de schéma de couleurs prévu au lever ou au coucher du soleil. Tout logique ou style de rendu qui dépend du schéma de couleurs préféré de l'utilisateur devrait essayer d'appeler cette fonction à chaque rendu, plutôt que de mettre la valeur en cache.
React Native 0.62 vient également avec un Hook pour s'abonner aux mises à jour des préférences des utilisateurs. Le Hook useColorScheme de React fournit et s'abonne aux mises à jour des schémas de couleurs du module Appearance. La valeur de retour indique le schéma de couleurs préféré de l'utilisateur actuel.
Nouveau support de mise à niveau
React Native 0.62 vient avec une nouvelle une aide à la mise à niveau plus spécifique. Le support de mise à niveau est un outil de suivi des problèmes GitHub où les utilisateurs peuvent soumettre des problèmes spécifiques à la mise à niveau de leurs projets afin de recevoir l'aide de la communauté. Lors de la sortie de la version 0.61, la communauté avait introduit un outil d'aide à la mise à niveau pour aider les développeurs à passer aux nouvelles versions de React Native. Mais avec cet outil, des problèmes surviennent lors de la mise à niveau, d’après Rick Hanlon.
Autres améliorations dans React Native 0.62
LogBox : Une nouvelle expérience d'erreur et d'avertissement LogBox a été ajoutée au framework en option opt-in. Pour l'activer, vous devez ajouter require('react-native').unstable_enableLogBox() à votre fichier index.js.
React DevTools v4 : Ce changement comprend une mise à niveau vers le dernier React DevTools qui offre des gains de performance significatifs, une meilleure expérience de navigation et une prise en charge complète des React Hooks.
Améliorations de l'accessibilité : Amélioration de l'accessibilité, notamment en ajoutant accessibilityValue, des événements d'accessibilité onSlidingComplete, et en changeant le rôle par défaut du composant Switch de "bouton" à "switch".
Les suppressions dans React Native 0.62
Supprission de PropTypes : le PropTypes des composants du noyau a été supprimé afin de réduire l'impact de la taille des applications du noyau React Native et de favoriser les systèmes de type statique qui vérifient au moment de la compilation plutôt qu'à l'exécution.
Suppression d’accessibilityStates : Les propriétés accessibilityStates dépréciées ont été supprimées en faveur de la nouvelle propriété accessibilityState qui est un moyen plus riche sémantiquement pour les composants de décrire les informations sur leur état aux services d'accessibilité.
Modification de TextInput : OnTextInput de TextInput a été supprimé dans React Native 0.62, car il est peu courant, non conforme au W3C, et difficile à mettre en œuvre dans Fabric, d’après le billet de React Native. Nous avons également supprimé les éléments non documentés inputView et selectionState.
Pour migrer vers React Native 0.62, pour ceux qui n'ont pas encore de projet, il suffit de créer un nouveau react-native CLI et vous obtiendrez la dernière version instantanément. Pour ceux qui utilisent une version 0.61.5 ou inférieure, vous aurez besoin de quelques étapes pour Android et iOS.
Sources : React Native, Flipper
Et vous ?
Que pensez-vous de la dernière version de React Native qui inclut Flipper ? Quels sont les changements qui retiennent votre attention ?Lire aussi
Shopify a décidé de se tourner vers React Native pour le développement de ses applications mobiles, l'équipe d'ingénierie de la plateforme explique ce choix technologique Facebook annonce la réécriture des composants internes de son Framework React Native, pour faciliter son utilisation avec les applications hybrides Flutter, le framework UI de Google, serait-il meilleur que React Native de Facebook, pour le développement d'applications multiplateformes ?