C’est une des grandes annonces de la Chain React Conference de cette année : Facebook sort en open source un nouveau moteur JavaScript baptisé Hermes. Déjà adopté par le réseau social, il cible les applications Android développées sous React Native, le framework cross-platform destiné au développement mobile.
Sommaire
Hermes, qu’est-ce que c’est ?
Hermes, c’est le nouveau moteur JavaScript optimisé pour les applications Android développées sous React Native. Rendu open source par Facebook ce mois-ci, il arrive avec une belle promesse : améliorer les performances des applications React Native Android et les rendre plus accessibles pour les smartphones d’entrée de gamme.
Nouvel outil pour les développeurs, il améliore les performances des applications en travaillant trois points clés :
- Réduire le Time to Interaction (TTI), soit le temps qui s’écoule entre le lancement de l’application et le moment où l’on peut réellement l’utiliser ;
- Diminuer la taille de l’application, plus précisément de l’APK sous Android, à savoir le fichier téléchargé puis installé via le store d’applications ;
- Réduire l’utilisation de la mémoire du smartphone.
Il est surtout dédié aux grosses applications notamment très populaires comme Spotify, Uber ou encore Facebook lui-même. De plus en plus conséquentes, celles-ci peuvent parfois poser problème, particulièrement pour les smartphones dont la capacité de stockage et/ou les performances sont limitées.
Si les versions lite semblent se démocratiser, ce moteur JS est aussi un moyen de s’adapter aux smartphones d’entrée de gamme, pourtant bien présents chez les utilisateurs.
Hermes possède son propre compte Twitter ainsi qu’un site web officiel. Son code source est quant à lui disponible sous licence MIT sur le GitHub de Facebook/hermes.
Une annonce à la Chain React Conference & une release le jour-même
Hermes a été dévoilé lors de la Chain React 2019, la conférence consacrée à React Native à Portland (Oregon, USA).
Lors de cette présentation, Marc Horowitz, un ingénieur logiciel de chez Facebook, a notamment montré une vidéo présentant, de manière concrète, l’apport de ce nouveau moteur.
On y constate facilement la différence de temps d’ouverture entre une application utilisant Hermes et un autre moteur classique, soit environ moitié moins de temps (3s contre 6s).
Pour cet exemple (voir ci-dessous), l’application utilisée était Mattermost en version beta, ouverte sur un Google Pixel de 2016. Hermes est utilisé sur la gauche.
Dans le même temps, la nouvelle se rependait sur les réseaux sociaux, notamment Twitter sur la page de React Native :
Traduction : Facebook sort aujourd’hui en open source Hermes, un moteur JavaScript petit et léger, optimisé pour exécuter React Native sur Android. Nous sommes actuellement en train de publier un nouveau patch pour React Native qui contiendra Hermes comme opt-in.
Quelques instants plus tard, React Native sortait en version 0.60.2, incluant le moteur Hermes en tant qu’opt-in. Une documentation fut également mise à disposition pour l’utiliser.
Pourquoi Hermes ?
En analysant les données de performance de ses applications, Facebook s’est rendu compte que le moteur JavaScript utilisé pouvait jouer un rôle important, notamment au niveau du lancement de l’application et de la taille de l’application.
Il se trouve qu’Addy Osmni, un ingénieur manager de chez Google, avait lui aussi fait des observations, sur le moteur JavaScript V8. Selon lui, le V8 passe beaucoup de temps à parser et à compiler le code JavaScript avant de l’exécuter, ce qui aurait tendance à augmenter la durée de lancement des applications mobiles. Il a évalué que ces phases qui précèdent l’exécution d’instructions d’architectures pouvaient être 2,5 fois plus longues sur mobile que sur desktop.
Hermes veut donc pallier à ce problème de lenteur sur mobile, d’autant plus flagrant sur les smartphones d’entrée de gamme, probablement la principale cible du moteur.
« En tant que développeurs, nous avons tendance à avoir les derniers appareils phares. Ce n’est pas le cas pour la plupart des utilisateurs à travers le monde. Les appareils Android les plus couramment utilisés possèdent moins de mémoire et de stockage que les smartphones les plus récents et encore moins qu’un ordinateur. »
– Marc Horowitz, Chain React Conference 2019.
Comment fonctionne Hermes ?
Habituellement, les moteurs JavaScript parsent la source JavaScript après qu’elle soit chargée, générant ainsi du bytecode, ce qui se traduit souvent par un délai dans l’exécution du code JavaScript.
Hermes quant à lui, utilise un compilateur anticipé lors du processus de création de l’application. Ceci permet notamment de gagner du temps lors de l’ouverture de l’application mais aussi de pouvoir obtenir un bytecode plus optimisé en terme de taille et d‘efficacité.
Un autre élément important dans le fonctionnement d’Hermes, c’est qu’il n’utilise pas de compilateur juste-à-temps (JIT), bien qu’ils soient souvent utilisés par les autres moteurs JavaScript. Dans son annonce, Facebook dit avoir fait quelques tests qu’il serait difficile d’obtenir de réel améliorations au niveau de la vitesse sans porter atteinte aux 3 principaux aspects qu’ils ont choisi de travailler (voir les « points clés » dans Hermes, Qu’est-ce que c’est ?).
Enfin, Facebook a choisi de mettre en place un Garbage Collector (ou ramasse-miettes) pour réduire la mémoire et l’adresse virtuelle utilisées par le moteur, qui, si trop importants, peuvent enclencher la fermeture de l’application par le système d’exploitation.
Vous possédez des bases en JavaScript et envisagez de débuter le développement mobile : nous proposons une formation React Native de 4 jours où vous pourrez apprendre à développer des applications mobile avec le framework de Facebook !
Les choix réalisés par Facebook pour construire ce moteur JavaScript semblent effectivement améliorer les performances de l’application, au moins sur son lancement. C’est aussi ce que semblent dire les données communiquées par Facebook sur l’exemple de l’application Mattermost sur un Google Pixel.
Il permettrait dans cet exemple de diminuer le TTI de 2,29s, de réduire la taille de l’application de 19 Mo et enfin d’utiliser 49 Mo de mémoire en moins.
Pour en savoir plus sur la manière de fonctionner de ce moteur, n’hésitez pas à vous rendre sur l’article rédigé par Marc Horowitz ou de consulter directement le code source sur GitHub.
Hermes : Migration et compatibilité
Hermes est disponible pour React Native à partir de la version 0.60.2.
Pour l’activer, il suffit de l’activer via le fichier build.gradle. Pour en savoir plus, rendez-vous sur la documentation officielle (extrait ci-dessous).
Hermes est globalement compatible avec JavaScript ES6 mais pas entièrement : pour que ce moteur reste léger, Facebook a fait le choix de ne pas inclure toutes les fonctionnalités, retirant celles qui ne semblaient pas être communément utilisés dans les applications React Native.
Ainsi, une liste des éléments non supportés et des incompatibilités connus est accessible sur GitHub. Les développeurs sont également sollicités à communiquer toute anomalie ou bug qu’ils pourraient rencontrer.
L’avenir d’Hermes
Afin d’améliorer Hermes, Facebook a déjà annoncé souhaiter intégrer Visual Studio Code, lui permettant de proposer davantage d’outils aux développeur. Egalement dans cette optique, le moteur devrait s’accompagner d’outils de profilage, facilitant ainsi la compréhension et l’amélioration des applications.
Il semblerait cependant qu’Hermes reste dédié aux applications React Native seulement : aucune intégration n’est prévue pour les navigateurs web ou les infrastructures serveurs comme Node.js. Néanmoins, il ne serait pas impossible de voir le moteur évoluer pour s’intégrer aussi sous iOS. Cela viendrait finalement dans la continuité de React Native qui se veut cross-platform.
Pour conclure…
Le moteur JavaScript Hermes est encore très récent mais semble plutôt convaincre ceux l’ayant utilisé. Le projet a pour l’instant réuni plus de 3 000 étoiles sur GitHub et se classait 17ème des dépôts JS à la mi-juillet selon Syndicode.
Néanmoins, ces cas d’utilisation sont plutôt restreints : son succès sera donc étroitement lié à celui de React Native, même si son arrivé pourrait justement encourager à l’utilisation du framework.
Seul l’avenir pourra finalement nous dire si Hermes sera réellement adopté au sein de la communauté. Facebook en est dans tous les cas le premier utilisateur, ce qui pourrait l’amener à évoluer assez régulièrement compte tenu des enjeux de l’entreprise.
Regardez ci-dessous la présentation du moteur JavaScript Hermes à la Chain React Conference (2019) :