Framework JavaScript : Angular, React ou Vue.js ?

Table des matières

Framework JavaScript : Angular, React ou Vue.js ?

À l’heure où j’écris ses lignes, JavaScript est le langage de programmation web le plus populaire 🔗 et l’un des plus polyvalents qui existe. Du simple site Internet en passant par l’application Web très complexe, et en passant par le développement d’application mobile et des applications desktop, il est partout.

Et vous utilisez certainement plusieurs applications codées en JavaScript sans vous en rendre compte.

Javascript, un langage qui a su s’imposer comme une référence avec le temps

Ce langage a su s’imposer avec une communauté talentueuse et toujours aussi grandissante dans les outils et naturellement, les Frameworks ont commencé à fleurir. Et cela peut être un problème pour certains d’entre vous, le fait qu’il y a beaucoup de Frameworks sur le marché.

Alors on commence à se poser des questions parce qu’on ne sait pas lequel choisir, quel est le meilleur Framework du moment, quel est le plus populaire, etc.

J’ai connu l’époque où l’on codait en JavaScript natif et j’ai longtemps utilisé les premières librairies du moment à savoir MooTools et jQuery.

Source : https://www.commitstrip.com/fr/2015/09/16/how-to-choose-the-right-javascript-framework/ 🔗

Et le moins que l’on puisse dire, c’est que c’était bien différent des Frameworks d’aujourd’hui parce qu’ils ont radicalement changé la conception des applications web en les rendant plus fluides, plus interactive et plus moderne.

Dans cet article, je vais juste me consacrer à parler des 3 Frameworks Front End les plus populaires à l’heure d’aujourd’hui à savoir :

• Angular 🔗
• React 🔗
• Vue.js 🔗

Parce qu’ils ont des grosses communautés derrière et qu’ils sont les plus utilisés en JavaScript, mais surtout parce qu’ils sont intégrés dans d’autres Frameworks populaires pour faire du développement mobile par exemple comme Ionic 🔗 ou NativeScript 🔗.

Je vais donc faire une brève description de chacun d’eux en vous expliquant leurs principaux concepts et dans quel cas de figure il est judicieux de les utiliser.

Vue.js, pour créer un front rapidement et en toute simplicité

Vue.js 🔗 a été lancé en 2015 et c’est un framework permettant de construire des interfaces utilisateur. Il est donc orienté « Front » et il correspondra très bien pour un développeur FrontEnd.

Comme il est très axé sur les vues, il a l’avantage de pouvoir se greffer sur des projets existants et même de collaborer facilement avec d’autres librairies. Vous faites donc du JavaScript et du HTML.

Vous définissez dans votre HTML les parties qui seront en interaction avec votre code JavaScript pour permettre la mise à jour des données.

Tout simplement!

Même si vous pouvez uniquement faire des vues, vous pouvez quand même faire de très belles applications web, car il est possible de le coupler avec les bonnes bibliothèques 🔗 et avec des outils modernes 🔗 qui fonctionnent très bien avec l’écosystème de Vue.js.

C’est un gros avantage pour un framework de pouvoir se greffer facilement dans des projets existants pour gérer des petites parties ou la totalité des fonctionnalités.

Le concept est basé sur la réalisation de vue sous forme de composants afin d’obtenir un code bien découpé, lisible, maintenable et surtout réutilisable.

La bonne pratique est donc de découper votre application sous forme de composant : le header de votre application est un composant, le footer de votre application est un composant, la page d’authentification est un composant, etc…

Vue.js fonctionne de manière réactive, ce qui veut dire que si vous changez une valeur dans votre code JavaScript Vue, sa valeur va automatiquement changer dans le DOM (et donc sur votre écran).

C’est une sorte de programmation réactive en quelque sorte. Cela veut dire que vous n’avez pas à vous soucier de rafraîchir votre DOM, c’est Vue.js qui va le faire pour vous.

Dans quel cas peut-on utiliser Vue.js ?

Je pense que si vous devez uniquement produire une interface Front de manière simple et efficace baser sur une API ou non, alors c’est le parfait candidat. Même s’il peut se greffer sur des architectures plus complexes, je ne le conseillerais pas pour la simple et bonne raison que d’autres frameworks pourront mieux répondre à ce besoin.

React, pour des fronts plus robuste et plus rapide

React a été lancé en 2013 par Facebook. Comme il est créé par un mastodonte et que beaucoup de mastodontes ont migré leur interface utilisateur vers ce framework, il est devenu très populaire et il s’est fait une grosse réputation en termes de fiabilité et de performance.

Il est, contrairement à Vue.js, un peu plus difficile à prendre en main et l’on peut être déstabilisé au premier abord.

Le framework de base se concentre uniquement sur l’interface utilisateur au départ, mais il est possible de l’agrémenter avec solutions complémentaires pour réaliser des applications web complètes.

On y trouve 2 particularités intéressantes pour React : il utilise un VirtualDOM et tout se code exclusivement en JavaScript.

En quoi consiste le VirtualDOM ? Il agit comme un genre de tampon entre le vrai DOM (celui affiché dans le navigateur et votre code JavaScript).

Suivant les changements qu’il va se passer dans votre application, ils se répercuteront d’abord sur le VirtualDOM qui lui même fera une comparaison avec le DOM actuel et il effectuera les changements en conséquence de manière optimisée.

Cela peut être difficile à comprendre sans avoir mis le nez dedans, mais retenez juste que ce concept permet de produire des applications ultrarapides.

Ensuite vous codez exclusivement en JavaScript. Vous vous demandez comment c’est possible de faire du front sans HTML ?  React utilise sa propre syntaxe pour décrire comment doit ressembler l’interface utilisateur. Cette syntaxe s’appelle JSX.

Comme Vue.js, il prône la création de composants pour mieux structurer son code.

Une chose importante à savoir : React fait les choses de manière explicite et on doit lui dire ce qu’il doit vraiment faire ou si une valeur a changé par exemple.

Cela peut être contraignant de prime abord  si l’on compare à Vue.js, mais cela vous donne un meilleur contrôle des événements et des données au niveau de votre application.

Dans quel cas peut-on utiliser React ?

Étant un peu plus complet et très robuste, il est idéal pour commencer une nouvelle interface utilisateur. Vous pouvez partir sur une interface très simple et la faire évoluer vers quelque chose de plus complexe et de plus poussé.

Angular, la boîte à outils pour faire des applications très complètes

Angular est créée à la base par des gars de Google (AngularJS) et qui a été réellement le premier Framework JavaScript. Depuis la version 2 d’Angular (qui n’a plus rien à voir avec AngularJS, car il a subi une grosse refonte), Angular a complètement écrit en TypeScript 🔗.

Si vous ne savez ce qu’est TypeScript, on va dire que c’est une surcouche de JavaScript permettant de coder de manière plus sécurisée (avec le typage par exemple) et de prévenir d’éventuelles erreurs de syntaxe et compilation au préalable (puisque Typescript va compiler votre code en JavaScript).

C’est donc un gage de qualité supplémentaire pour votre code JavaScript au final.

Mais cela peut être déstabilisant, car la syntaxe TypeScript est différente de JavaScript. D’ailleurs, j’ai lu partout qu’il était plus difficile d’apprendre à utiliser Angular par rapport à React. Pour mon cas, c’est plutôt le contraire.

Je trouve plus facile Angular par rapport à React, qui je trouve, est plus difficile à prendre en main et plus verbeux au niveau du code ainsi qu’à sa lecture (certainement parce que je ne suis pas séduit par React personnellement).

Son fondement est basé sur les composants qui sont complètement indépendants des uns des autres. Ce qui veut dire que chaque composant possède sa propre logique en Typescript et son propre code HTML.

Un composant ne peut pas modifier directement la vue HTML d’un autre composant. Mais un composant peut appeler un autre composant pour travailler avec.

Chaque fonctionnalité est ainsi séparée. Le code est ainsi plus lisible et la maintenabilité est plus simple au sein d’un projet.

L’autre avantage qu’il a c’est qu’il est très complet. Là où Vue.js et React ne produisent que des Interfaces Utilisateurs (de base bien entendue, car ils peuvent être très complets si l’on rajoute beaucoup d’autres composants).

Angular fait beaucoup plus que cela nativement. Il intègre nativement par exemple un système de Router, un système d’injection de dépendances ou encore des composants UI.

C’est un avantage, car cela permet d’avoir un écosystème où tout ce petit monde fonctionne très bien ensemble.

Comme Vue.js il fonctionne de manière réactive. C’est-à-dire que si votre donnée évolue dans votre code Typescript, elle changera automatiquement dans votre HTML où vous l’utilisez.

Dans quel cas peut-on utiliser Angular ?

Si le TypeScript ne vous fait pas peur, que vous commencez un nouveau projet et que vous voulez créer une application très complète qui intégrera des mécanismes déjà éprouvés, alors Angular pourra tout à fait vous convenir.

C’est au passage celui qu’on utilise le plus dans nos projets clients où je travaille.

Mais au final, avez-vous vraiment besoin d’un Framework JS pour votre projet ?

Même si ces outils sont tous simplement géniaux et nous simplifient la plupart du temps la vie, il est toujours bon de se demander si un framework JS est vraiment utile dans votre projet.

Car il est devenu très facile d’en abuser facilement par fainéantise bien souvent.

Si vous comptez utiliser un framework uniquement pour une seule de ses possibilités alors il n’est peut-être judicieux d’en implémenter un.

Je vous conseille de regarder cette vidéo 🔗 qui est une conférence que j’ai assistée l’année dernière pour vous montrer qu’il n’est pas obligatoire de choisir l’un de ses Frameworks pour produire une application Front en JavaScript.

Bilan

Il n’y a pas de meilleurs Framework par rapport à un autre. Cela va surtout dépendre de votre contexte et du projet sur lequel vous allez bosser.

Posez-vous les bonnes questions, étudiez les besoins de votre projet pour savoir le Framework le plus adapté.

Si vous avez besoin d’arguments supplémentaires pour faire votre choix, vous pouvez lire ce comparatif 🔗 que Vue à réaliser.