SPA

Projet SPA avec React vs Angular vs Vue?

Tout change si vite que nous sommes rapidement confrontés à un choix clivant sur quoi choisir ou quel est le meilleur dans le domaine des frameworks JavaScript.  Dans cet article comme vous l’avez deviné, nous allons comparer trois des technologies les plus populaires en développement Front-end, à savoir Angular 5, ReactJS et Vue. Nous allons effectuer notre comparaison selon le point de vue d’un développeur qui va réaliser un projet et qui devra choisir entre ces trois-là.

Bibliothèque ou Framework

Faisons d’abord le point sur la nature des ces trois choix. Vous le savez peut-être déjà, React n’est pas un framework mais une bibliothèque qui ne gère que l’interface de l’application. Dans le modèle MVC(Modèle-Vue-Contrôleur), React est la vue. De leur côté, Angular et Vue sont des frameworks. Alors, pour espérer choisir entre Angular, React et Vue, nous devons savoir si le projet nécessite une bibliothèque ou un framework.

Les bibliothèques

Les bibliothèques ont été créées pour des opérations assez simples et spécifiques. La configuration des éxecuteurs de tâches et d’autres configurations se feront manuellement. Ainsi, la réalisation d’un projet demande du temps. En plus, Elles utilisent des APIs de bas niveau, ce qui implique également un processus de développement qui traîne dans les temps.

Les bibliothèques comme React dans notre cas sont créés avec diverses bibliothèques, ce qui pose des difficultés pour les développeurs. Mais le point fort est que côté contrôle de l’appli à réaliser, vous êtes le maître à bord.

La bibliothèque ReactJS

Qui dit React dit également bibliothèque, interfaces utilisateur, Composants, DOM virtuel et JSX. ReactJS consiste en des Composants séparés, intégrés à l’application et qu’on peut utiliser pour d’autres parties de l’application considérée. Cette intégration n’impacte cependant pas les autres parties de l’appli. React utilise un flux de données à sens unique.

Ensuite, il y a la JSX. La syntaxe JSX ressemble à du HTML et du XML. Mais il y a d’importantes différences. Elle est notamment utilisée par des transpileurs.

Une chose intéressante chez React est l’existence du State de l’application. Cet Objet  permet de dupliquer l’etat de votre appareil.

La framework Vue

Vue ressemble un peu à React. En effet, la framework Vue Utilise également des composants et des flux de données à sens unique. Cependant, Vue utilise des templates et non pas JSX. Là, vous travaillez avec du HTML pur.

Une bonne chose avec Vue est l’utilisation des Directives, les mixins, les filtres et l’injectionde dépendance.

Les Directives sont très utiles pour la manipulation du DOM, des fonctionnalités supplémentaires et pour avoir une logique claire dans son projet.Par exemple, vous avez des <div> avec du contenu à l’intérieur. Vous savez que ce <div> est juste un élément de type bloc. Il est bien là où il est. Ensuite, Vous lui assignez un attribut « draggable« . Maintenant, il devient un élément déplaçable. La logique de glisser, vous ne la voyez pas car c’est dans la Directive. Vous voyez juste que c’est un élément div déplaçable.

Pour l’injection de dépendance, vous en avez dans chaque module. Vous avez exactement les modules nécessaires. C’est l’une des règles fondamentales de l’encapsulation.  C’est vraiment essentiel dans les applications complexes.

La framework Angular

Avec Angular, nous avons les mêmes composants, un flux de données à sens unique, du HTML, des templates, des filtres ou les pipes, des directives, des injections de dépendance. En plus de tout cela, nous avons des modules et des services.

Les modules sont constitués de composants, de services, de directives, etc. Ils sont plus généraux et servent en grande partie à apporter quelques fonctionnalités utiles.

Les services ont été élaborés pour réaliser des tâches spécifiques. C’est là que doit être écrite la principale logique métier.

Prenons un petit exemple :

Nous allons écrire sur un rendu DOM. Là, sur la section qui va suivre, nous avons deux modules de rendu DOM.

D’un côté, React et Vue emploient Virtual DOM. De l’autre côté, Angular utilise un système de rendu DOM direct.

Voyons un peu le DOM virtuel. Admettons que dans un projet, vous ayez une liste de 10 éléments.

En y pensant, vous devez modifier la première ligne à cause d’une quelconque raison. Vous effectuez donc la modification. Pour beaucoup des frameworks, elles vont reconstruire toute la liste et la restituer ensuite. C’est 10 fois plus de travail. En effet, seulement la mise à jour de la première ligne est nécessaire.

Maintenant, que fera le DOM virtuel dans notre cas ?

De prime abord, le DOM virtuel  crée la copie de DOM et travaille avec cette copie. Travailler avec des objets JavaScript qu’avec DOM S’avère être plus rapide. En effet, avec des objets JS, l’écran est nickel. Rien ne s’y interfère.

Une fois modifié et mis à jour, le DOM virtuel se compare à la version avant la modification. Cette ancienne version a été capturée avant la mise à jour. Le DOM virtuel recherche alors les éléments qui doivent être mis à jour. Tout ce processus est appelé le « diffing« . Dans le DOM réel après une vérification de la différence, les parties modifiées uniquement sont mises à jour.

C’est ainsi que les rendus DOM de React et de Vue sont gérés. Mais qu’en est-il de celui d’Angular.

Pour Angular, il utilise d’une part la zone d’interface utilisateur du navigateur et d’autre part le zone de travail du service. Ce dernier est responsable de la construction et de la compilation des directives, des services, des filtres et amorce le code.

Le rendu DOM est géré par la zone d’interface utilisateur. Cela ressemble si vous voulez au processeur de l’ordinateur et la carte graphique. La zone de travail est le processeur et l’interface utilisateur est la carte graphique.

Il est à noter qu’Angular, React et Vue supportent le rendu du côté serveur. A l’époque, Angular 1.x avait bien besoin de cette fonctionnalité. De nos jours, bon nombre de sites Web sont écrits par des logiques de rendu côté serveur. Avec cela, le SEO ou le référencement pour les moteurs de recherches ne représente pas un problème.

Voici comment cela fonctionne.

Pour chaque framework ou bibliothèque, Des packages qui peuvent rendre votre code tel qu’il fonctionne dans le navigateur et renvoyer la page déjà rendue existent. Le meilleur dans tout cela ? Vous n’avez plus à réécrire l’application. Cela est fait de façon automatique.

Comme c’est évident en ces temps du numérique, les mobiles trouvent également leurs places dans la course technologique. Et parlant de tech mobile, Angular, React et Vue peuvent être de bons outils pour programmer des applications mobiles. Beaucoup de composants d’Angular sont écrits pour Ionic directement. React a quant à elle ReactNative et Vue a Framework 7.

Du point de vue du développeur ou l’architecte du projet et de l’entreprise elle-même, la courbe d’apprentissage est très importante. C’est comme si vous aviez une équipe, que vos employés pourraient démissionner et que d’autres pourraient s’ intégrer.

Encore une fois, entamons par React. React est assez simple. Ce qui importe,c’est la façon de travailler avec les composants, la gestion des états et JSX. Mais pour créer des applications qui fonctionnent parfaitement, l’apprentissage de diverses bibliothèques en plus est nécessaire.

Le principal avantage des applications React est que beaucoup de solutions existent pour chaque besoin. Ces solutions varient d’un projet à l’autre. Donc, pour les nouveaux employés, c’est assez compliqué de s’y retrouver.

Avec Vue, la framework est déjà fonctionnelle et intégrer d’autres bibliothèques est inutile. Mais si vous en avez quand même besoin, leur utilisation n’a pas d’impact sur l’architecture de l’application.

En outre, Vue a déjà aussi plus de composants que vous devez connaître ou apprendre comme les directives, les mixins, l’injection de dépendances, etc.

Avec Angular, le courbe d’apprentissage est beaucoup plus long. Et le principal problème et la principale fonctionnalité, est TypeScript.

Il est vrai que vous pouvez utiliser Angular sans TypeScript. Et des personnes de la communauté AngularJS estiment que si vous n’utilisez pas TypeScript, vous n’avez peut-être pas besoin d’Angular. Mais cela dépend entièrement de vous.

Si l’on s’en tient à la courbe d’apprentissage, nous vous ordonnerions donc ces technologies selon l’ordre qui suit :

  1. Vue
  2. React
  3. Angular

A chacun ses besoins et ses convictions

Selon vos besoins dans votre projet, vous pouvez choisir librement que ce soit ReactJS, AngularJS ou Vue.

  • Par exemple, React se trouve être en meilleure position si vous avez besoin d’une solution personnalisée ou pour les applications moins logiques ou pour certains problèmes.
  • Vue fera l’affaire si votre application assez petite et nécessitant un développement rapide.

Angular est meilleure si votre projet est assez grande qui doit utiliser un code source très pointilleux.

Catégorie : SPA
Posts created 3

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Commencez à saisir votre recherche ci-dessus et pressez Entrée pour rechercher. ESC pour annuler.

Retour en haut