Angular, React, Vue.JS : Une Comparaison, Pourquoi ?

React, Angular et Vue.JS sont tout les trois des frameworks JavaScript front-end. Ce sont les trois frameworks les plus populaires qui sont les plus utilisés par la communité de développeur web. Ils servent à définir ce que voit les visiteurs lorsqu’il arrive sur le site. Un framework JavaScript est une bibliothèque de fonction pré-écrites en JavaScript facilitant le développement d’application web.

Test de performance

Pour comparer la performance de nos trois frameworks, j’ai réalisé deux tests différents sur chacun d’entre eux afin de calculer leur vitesse d’affichage grâce à l’outil devtools de Chrome.

Exemple de chrome devtools 

TEST 1 – Image

J’ai réalisé sans différence pour chaque framework un algorithme qui affiche un tableau de 100000 images et grâce au devtools de Chrome j’ai pu récupérer le temps d’affichage de mes images. J’ai utilisé la même image et affiché le même nombre d’images pour chaque framework, j’ai fait le processus trois fois pour récupérer trois résultats et en faire une moyenne.

TEST 2 – Tri

Pour chaque framework j’ai conçu un algorithme qui prend 5 caractères au hasard dans un fichier JSON contenant 220 caractères et tout cela 250000 fois afin de trier 1 million de caractères. Grâce au devtools de Chrome j’ai pu récupérer le temps d’affichage de ma liste trier. J’ai utilisé le même fichier JSON et la même fonction qui prend 5 caractères au hasard pour chaque framework et fait le même processus de moyenne que le premier test.

ANGULAR

Angular est un framework front-end écris en JavaScript, développé par Google qui est orientée 100% web. Il est basé sur une architecture de type MVC (Model, View, Controller) et permet donc de séparer les données, le visuel et les actions. Dans le projet de mes tests j’ai utilisé Angular 10.1.2 afin d’avoir le maximum de ces capacités, voici ci-dessous les résultats. Si vous voulez en apprendre plus sur Angular, nous vous invitons à suivre notre formation angular.

Test 1

À première vue on a l’impression qu’Angular vas très vite et pourtant l’affichage de 100000 images n’est que de 72929 ms ce qui est beaucoup plus élevé que ces compagnons React et Vue.JS.

TEST 2

Pour le deuxième test, Angular parvient à trier les 1 million de caractères en 237868 ms, plus du double de ses concurrents React et Vue.js.

REACT

React est un framework (ou par d’autre une bibliothèque) front-end développée par Facebook depuis 2013 qui permet de réaliser des interfaces réutilisable qui s’exécute dans un DOM virtuelle. Ces composants sont généralement écrits en JSX, mélange entre le JavaScript et l’HTML. Dans mon cas pour réaliser mes tests j’ai utilisé spécialement React 16.13.1. Si vous souhaitez maîtriser Reactjs, découvrez notre formation sur React.

TEST 1

React est le framework le plus utilisé par nos développeurs mais malheureusement il n’arrive qu’en 2ᵉ place, il affiche les 100000 images en 34401 ms c’est deux fois le total de Vue.JS.

TEST 2

Après avoir réalisé le test trois fois de suite j’ai obtenu trois résultats différents chacun, j’ai fait une moyenne qui me donne un résultat final de 88433 ms. Et cela permet à React de prendre la première position face à ces concurrents.

VUE.JS

Vue.js est un framework front-end crée par Evan You en 2014 pour créer des interfaces utilisateurs, il est proche du framework React dans son fonctionnement, comme par le fait de passer par le DOM virtuelle. Ce qui est intéressant avec le Vue.JS c’est que tu peux l’intégrer à une application front-end déjà existante et les données et le DOM sont couplés et réactif aux changements. Pour le comparer aux autre framework j’ai utilisé la version 4.5.6, voici ces résultats. Si ce framework vous intéresses vous pouvez vous formez avec nous en Vue.JS.

TEST 1

Voici le framework qui a réussi à afficher les image en seulement 14338 ms ce qui était vraiment peu par rapport à Angular et React.

TEST 2

Malheureusement Vue.JS ne peux pas avoir la première place partout il obtient que 102446 ms au tri de caractère il est loin derrière React.

Conclusion

Pour conclure je peux, grâce à ce graphique visualiser les performances de chaque framework par rapport aux deux tests réalisé. Je remarque que React et Vue.JS prennent les devants par rapport à Angular qui est toujours dernier. Toutes les problématiques du Web sont gérées par le framework lui-même et il n’y a pas besoin de librairies pour les fonctionnalités communes des applications Web du coup pour réaliser tout cela Angular possède beaucoup plus de package à télécharger et se retrouve donc beaucoup plus lourd que les autres frameworks JavaScript. React et Vue.JS on un niveau de performance égale alors qu’Angular possède un niveau moyen qui le rend plus lent.