Lors de la mise en place d’un projet, une question se pose très souvent : quel outillage frontend utiliser pour développer ?  La question finit souvent par se poser entre les 2 plus « gros » du marché actuel, React vs Angular. La question est légitime car ces deux technologies offrent toutes les deux une très bonne expérience développeur. Je vais essayer, avec mon humble expérience, de vous aider à choisir parmi ces ressources puissantes, mais ayant chacune des caractéristiques propres avec leurs avantages et leurs inconvénients.

Dans les deux cas, le langage sera compilé pour le navigateur en HTML et Javascript. Donc, l’un des éléments les plus important ici sera l’expérience développeur.

React ou ReactJS est une bibliothèque JavaScript développée par Facebook en 2013 et en open source.

React est orienté composant, cela permet un découpage de l’écran en morceaux qui peuvent facilement s’imbriquer et être réutiliser. Il y aura alors des éléments graphiques qui seront réutilisable à plusieurs endroits.

React possède une communauté très active qui propose des évolutions intéressantes. Il en est de même pour les librairies annexes qui sont les briques qui permettent de s’ajouter à React.  Ces librairies annexes sont souvent sous le format de composants à intégrer comme on intégrerait un de ses propres composants. Il est aussi possible de rajouter tout type de bibliothèque Javascript.

A l’utilisation de React, vous pourrez développer en Javascript ou Typescript. Nous recommandons d’utiliser Typescript pour l’évolutivité et les cibles multinavigateurs.

La grosse particularité de React va être sa manipulation d’un DOM virtuel. C’est un concept qui permet de manipuler le DOM de l’application. Il s’agit d’une action qui est lente dans le cas d’un DOM réel. Sa bibliothèque ReactDOM permet de comparer le DOM virtuel précédent et suivant, et ainsi de mettre à jour uniquement la partie du DOM qui nous intéresse. Cette étape s’appelle la réconciliation. Cela permet de créer des applications rapides.

La bibliothèque React propose de créer un projet avec la commande npx create-react-app my-project
avec nodeJS par exemple. Il crée alors un projet avec l’arborescence dont vous avez besoin pour commencer à développer.

Pour chacun de vos composants, commencez à créer un fichier .tsx comme cela.

On travaille ici avec une fonction qui retourne le HTML dans un composant TSX ayant un paramètre d’entrée obligatoire déclaré au niveau d’une interface BookListProps jouant le rôle de typage dans le typescript (idéal quand on a plusieurs paramètres d’entrée).

Cette fonction est exportée et donc appelable dans le HTML d’un composant parent sous la forme d’une balise avec le paramètre d’entrée obligatoire qui lui est injecté.

React a une liaison de données unidirectionnelle, ce qui signifie que la donnée passe du parent à l’enfant. Il permet cependant de passer des composants JSX/TSX dans les paramètres d’un composant, facilitant ainsi l’imbrication de multiples composants.

Angular, crée en 2016 et qui succède à AngularJS (bibliothèque Javascript comme React crée en 2010) est un Framework complet (pas seulement une bibliothèque) prêt à l’usage avec tous les éléments nécessaires pour démarrer. Il s’agit ici d’un Framework développé par Google. Il a une grande communauté d’adeptes mais beaucoup moins de librairies tierces proposés. Les librairies sont très dépendantes de la version d’Angular que vous utilisez. C’est plutôt Google qui mène la danse ici et propose les évolutions majeures incluses dans le framework lors d’événements de présentation dédiés aux développeurs. Cela ne l’empêche pas d’avoir de très bonnes bibliothèques tierces. Il est cependant impossible de rajouter une quelconque librairie Javascript. Il ne fonctionne qu’en Typescript.

Il repose sur la même logique de composants que React.

La particularité la plus flagrante d’Angular est la séparation du HTML et du Typescript. On va avoir un découpage très clair avec dans chaque composant, son fichier .html, son ficher .ts et le fichier .css/.scss/.sass pour les styles (en fonction de ce que vous avez choisi lors de la commande de création du projet).

Vous pouvez utiliser la commande ng generate component  pour créer directement tous les fichiers du composant et les déclarer automatiquement dans les modules.

La commande de génération propose aussi de générer le fichier de test unitaire du composant mais son usage est encore une pratique très peu répandue dans le monde du développement frontend.

Ces fichiers ensemble constituent ce qui est appelé ‘composant’.

Les composants sont déclarés dans le fichier de gestion de module app.module.ts.

La gestion des modules est essentielle dans la gestion de l’application. Il faut prévoir des sous-modules au module principal. Cela permet de regrouper les composants selon la logique que vous souhaitez. Cela permet une meilleure gestion du code a posteriori.

Vous devez mettre « l’intelligence » du composant en Typescript dans un fichier .ts comme suit :

Et le récupérer dans votre fichier HTML comme cela :

Le composant peut avoir des paramètres d’entrées appelables dans la partie HTML via la balise au nom du « selector » déclarée dans la partie Typescript du composant.

A la différence du React, Angular a une liaison de données bidirectionnelle qui permet au composant enfant de renvoyer des données au composant parent. C’est très puissant comme fonctionnalité mais c’est souvent considéré comme contre-intuitif, ce qui ne facilite pas son usage. Nous parlerons de « Two-way binding ».

Lorsqu’il s’agit de choisir entre React et Angular pour le développement d’une application web, de nombreuses considérations entrent en jeu. Les différences clés entre ces deux frameworks JavaScript sont multiples, allant de la facilité d’apprentissage à la structure, en passant par les besoins spécifiques des projets. Dans ce tableau comparatif, nous explorerons ces différences et vous aiderons à avoir à disposition les éléments nécessaires pour une décision éclairée .
Cependant, il est essentiel de garder à l’esprit que la sélection entre React et Angular ne repose pas uniquement sur des critères techniques, mais également sur les besoins précis du projet, le niveau d’expérience de l’équipe de développement et les préférences individuelles.