Pourquoi ?
En plongeant dans la préparation d’une présentation sur SolidJS, je me suis retrouvé à explorer les performances de ce framework ( car c’est un de ses atouts majeurs ) tout en le comparant aux mastodontes React, Angular et Vue. Je suis ainsi retombé sur le site https://github.com/krausest/js-framework-benchmark dont je m’étais servi pour une précédente présentation sur Svelte. Je me suis donc amusé à comparer les principaux frameworks avec leurs déclinaisons les plus utilisées et fait un petit flash-back sur 2021 lorsqu’on avait fait cette présentation Svelte. On va ainsi pouvoir apprécier dans cet article comment les différents frameworks ont évolué en terme de performance.
Le but ici n’est pas de dire quel est le meilleur framework mais de parler de performances brutes sur des gestions lourdes comme un tableau de 1000 lignes (chose qu’on évite de faire, préférant lazy-loader). S’il est clair que les différents frameworks cités dans cet article sont tous capables de le réaliser rapidement, il s’agit ici d’apprécier comment ils optimisent ces rendus un peu plus lourds. Mais soyons certains que la majorité de vos utilisateurs ne fera aucune différence sur l’appréciation de votre application si ce tableau en React met “100ms” de plus à rendre que le même composant sur Svelte. Les problèmes de performances sont bien plus souvent liés à un transfert excessif de données, une mauvaise gestion de la mémoire, une gestion de votre base de données inefficace et bien d’autres facteurs…
Back to 2021
Cette année là, la 17ème version de React est déjà loin devant en terme d’utilisation. Angular a commencé sa petite révolution ( la V12 qui arrive au milieu de cette année là avec l’intégration de la nouvelle génération de compilateur et de runtime Ivy ), Vue vient de sortir la surpuissante V3 ( Composition API ), et Svelte commence à faire parler de lui.
Les performances
Pour avoir une idée précise des performances, je vous ai sélectionné quelques indicateurs intéressants issus du site krausest. Ici il s’agit surtout de comparer le temps de rendu (en ms) d’un tableau avec différentes opérations.
On s’aperçoit que SolidJS fait presque aussi bien que du VanillaJS, Svelte suit de très près. Des gros frameworks, sans surprise, c’est bien Vue 3 qui domine avec un facteur de 1.5 (par rapport à VanillaJS) sur la moyenne géométrique pondérée (weighted geometric mean) qui résume les résultats de l’ensemble du tableau. Un an auparavant en 2.6, Vue était bien moins à l’aise dans ce classement.
On note des résultats semblables entre Angular et React et aucun ne semble se détacher même si l’ensemble React + Redux semble un peu à la peine sur ses gestions de tableaux.
Autres données intéressantes, c’est l’utilisation de la mémoire lors des lourdes opérations, ici il s’agit aussi de la gestion de tableau avec des opérations coûteuses comme la création et destruction de 1000 lignes. On s’aperçoit ici que Vue est plus proche des gros frameworks avec une utilisation mémoire quasi équivalente à Angular, encore une fois Solid et Svelte se montrent peu gourmands alors que React allié à Redux, sans surprise, dévore la RAM.
Quid de 2024 ?
C’est ici que ça devient intéressant, comment les frameworks ont évolué lors de ces trois années, sont-ils plus gourmands, sont-ils plus efficaces? C’est ce que nous allons voir.
Quoi de neuf ?
En 2024, React V18 (sorti en 2022), offre peu de nouveautés (Suspense, Transitions…) Mais les autres Frameworks ont bien évolué, Angular en V17 (Signals, Control-flow), SolidJS en V1.8.0 qui amorce la prochaine V2 (https://github.com/solidjs/solid/releases), Vue3.4 (Faster parser, define model) évolue plus discrètement alors qu’enfin Svelte en V4.2 se cherche un peu en essayant de donner plus de clarté sur sa réactivité avec les runes.
Les performances en 2024
Les calculs sur ce graphique sont identiques à ceux effectués en 2021, mais sur un hardware différent et une version de chrome plus récente (120). Ainsi, la comparaison tient en l’évolution des performances entre les frameworks plus que sur leurs indicateurs actuels versus leur version précédente.
J’ai volontairement ici rajouté quelques colonnes pour avoir des éléments de comparaison ainsi, si React s’utilise très souvent avec redux ou zustdand en tant que state manager, ( à noter que c’est avec Jotai que React s’en sort le mieux en terme de performance dans le combo react-state manager) il me fallait aussi rajouter vue et pinia très largement utilisé par les développeurs Vue. J’ai aussi volontairement laissé 3 configurations d’Angular pour pouvoir apprécier du gain en performance des dernières innovations notamment les Signals(angular-cf-signals) et le Control-flow (angular-cf-V17).
Observations
On peut s’apercevoir que le classement est globalement respecté versus celui de 2021. Mais une chose m’a frappé à la vue de ses résultats :
Angular passe devant Vue sur la majorité des opérations
React décroche de ses concurrents sur ce tableau tandis qu’en tête du classement, Svelte a tendance à reprendre son retard sur SolidJS.
Les performances globalement se sont améliorées pour tous les frameworks par rapport à l’index donné par du VanillaJS mais tout cela a un coût, comme nous allons le voir maintenant sur le tableau d’utilisation de la mémoire. On peut s’apercevoir que la majorité des frameworks se montrent plus gourmands qu’il y a trois ans.
Pour conclure
Les performances des frameworks ont globalement bien progressé, mais avec des disparités. Car si React était bon dernier en 2021, il le reste en 2024 mais parait même bien plus loin du peloton. Gageons pour les équipes de Meta que le “On ne change pas une équipe qui gagne” soit un dicton payant. Mais l’histoire nous enseigne toujours que l’adaptation reste l’atout majeur pour rester maître de son destin et la sortie de la V19 cette année devrait relancer les dés.
Svelte se rapproche des performances de SolidJS et devient un sérieux concurrent au trio (React, Angular, Vue)
Vue 3, arrivé en 2021, a “tué le game” et a placé Vue en tête des performances des gros Frameworks depuis. Mais on s’aperçoit désormais qu’Angular est tout aussi performant (avec certes un coût mémoire supérieur) et que le framework de Google est bien celui qui a le plus évolué ces trois dernières années. Angular ne paye plus sa robustesse par des performances exécrables comme on pouvait le dire il y a encore quelques années. On se penchera plus spécifiquement sur les dernières évolutions du framework dans un prochain article.
