Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.
React Native 0.70 est sorti et Hermes est le nouveau moteur JavaScript par défaut livré avec cette mise à jour. Voici à quoi s'attendre d'Hermès et de certaines des fonctionnalités qui affecteront les performances de votre application React Native.
Qu'est-ce qu'Hermès ?
Hermes est un moteur JavaScript open source qui optimise les performances sous iOS et Android l'application se lance en pré-compilant le code JavaScript en un bytecode efficace et en réduisant l'application utilisation de la mémoire.
Mise à jour des anciennes versions natives de React pour prendre en charge Hermes
Les applications React Native exécutées sur 0.70 auront Hermes activé par défaut. Pour les anciennes applications React Native, une version Hermes est livrée avec chaque version React Native à partir de la version 0.60.4 pour les versions Android et la version 0.64.0 pour iOS. Les versions correspondantes éliminent le risque d'incompatibilité de dépendance dans votre application React Native.
Pour activer Hermes dans ces anciennes versions de React Native, vous devrez ajouter une configuration à vos applications Android et iOS.
Sur Android, modifiez votre android/app/build.gradle déposer:
projet.ext.react = [
entréeFichier: "index.js",
activerHermès: vrai// nettoyer et reconstruire si changement
]
Sur iOS, vous apportez les modifications suivantes à votre ios/Podfile:
use_react_native! (
:chemin => config[:reactNativePath],
:hermès_enabled => vrai
)
iOS vous oblige à installer les pods Hermes après avoir configuré les paramètres.
Exécutez la commande suivante pour installer les pods :
cd ios && installation du module
Activer Hermès avec Expo
Vous pouvez également utiliser le moteur Hermes pour les applications React Native créées ou exécutées à l'aide d'Expo. La bibliothèque Expo prend en charge Hermes à partir de la version 42 du SDK sur Android et de la version 43 du SDK sur iOS jusqu'à la version actuelle 0.70. Il est important de noter que les applications autonomes ne peuvent pas exécuter Hermes à moins d'être construites à l'aide de la construction Expo Application Services.
Pour activer Hermes dans une application React Native, modifiez votre app.json déposer:
{
"expo": {
"jsEngine": "Hermès"
}
}
Désormais, votre application créée avec Expo Application Services aura Hermes activé comme moteur JavaScript.
Optimisation des performances Hermes pour les applications natives React
La plupart des moteurs JavaScript analysent tout le code source JavaScript à l'aide d'un système de compilation JIT (Just in Time). Le système JIT ralentit l'exécution car votre appareil doit attendre la fin du processus de compilation. Hermes utilise une approche de compilation anticipée (AOT), transférant la plupart des travaux lourds du moteur JavaScript au temps de construction.
Hermes affecte principalement trois métriques de performances applicatives: l'application TTI (Time to Interactive), la taille binaire et l'utilisation de la mémoire.
Temps d'interactivité
Le TTI est le temps qu'il faut à une application pour charger et prendre en charge l'interaction de l'utilisateur comme le défilement ou la saisie. Hermes améliore le TTI moyen des applications React Native par rapport aux autres moteurs JavaScript.
Cette réduction de TTI est due au fait qu'Hermes n'exécute pas de compilateur JIT.
Taille binaire
La taille binaire est la taille de l'application React Native fournie. Les applications Android utilisent le Format de fichier APK, tandis que les applications iOS utilisent un format qu'Apple appelle IPA. L'utilisation d'Hermes réduit considérablement la taille de l'application sur les appareils Android.
Utilisation de la mémoire
L'utilisation de la mémoire est une autre mesure critique à optimiser dans les applications. L'expérience utilisateur d'une application serait affectée négativement si elle utilise trop de mémoire. Hermes implémente un système Garbage Collector qui régule l'utilisation de la mémoire à la demande, garantissant qu'une application n'utilise que l'espace mémoire nécessaire pendant son exécution.
Hermes propose une nouvelle expérience de débogage des applications React Native exécutées sur un émulateur, un simulateur ou un appareil physique utilisant Expo. Hermes prend en charge le débogage des applications React Native à l'aide du protocole Inspector de Chrome DevTools. Il ne faut pas confondre cela avec le traditionnel Débogage JavaScript à l'aide de la console du navigateur.
Pour configurer Chrome pour déboguer les applications Hermès, procédez comme suit.
- Aller vers chrome://inspecter dans votre navigateur Chrome.
- Clique sur le Configurer bouton.
- À l'intérieur du modal à l'écran, entrez l'adresse du serveur pour le groupeur de métro exécutant votre application React Native et cliquez sur Fait.
Vous pouvez maintenant déboguer votre application React Native à l'aide du lien d'inspection de la cible Hermes.
Pourquoi Hermes est optimisé pour React Native uniquement
Les performances optimales d'Hermes en tant que moteur React Native JavaScript sont en partie dues à son environnement d'exécution. Dans React Native, vous regroupez tout le code JavaScript dans l'environnement de l'application. Ce système rend le bytecode d'expédition efficace.
Un autre facteur à prendre en compte est la quantité de travail effectué lors de la compilation JavaScript. Hermes gère l'interaction utilisateur fréquente anticipée des applications mobiles tout en évitant une optimisation agressive du bytecode. Un moteur JavaScript de compilateur JIT n'effectuerait pas les tâches de cette façon.
