Nous utilisons de plus en plus VueJS avec Drupal 8. La popularité du framework javascript est grandissante dans les communautés de développeurs, et notamment dans celle de Drupal. Nous avons tenté de savoir pourquoi, en illustrant notre position avec nos derniers travaux.
Depuis quelques années, une grande tendance s’est emparée de l’univers Drupal : la séparation du front-end et du back-end. Du point de vue front-end, de nombreux frameworks Javascript sont arrivés tels que Ember.js, React.js, Angular.js et également VueJS, celui-ci fera l’objet de ce billet.
La création d’un site Drupal doté d’une expérience utilisateur riche peut relever du défi, mais nous pensons que cela ne doit pas être le cas. Avec cet article, vous devriez comprendre l’importance et l’opportunité que représente VueJS pour votre projet Drupal.
Revenons à Drupal, le CMS inclut jQuery dans son core, ce qui a pour conséquence de vite limiter le développement d’une interface utilisateur réactive et moderne. Nous suggérons d’essayer VueJS pour améliorer vos éléments d’utilisateur sur Drupal. Pourquoi nous suggérons de prêter attention à VueJS ? Car le choix d’un framework peut affecter grandement le succès d’un projet. Il influencera la capacité qu’aura l’agence web à terminer à temps le projet web et le maintenir dans le futur.
L’expérience avec VueJS
Concernant la mise en pratique, nous avons utilisé VueJS pour de nombreux projet Drupal. Ce framework a su se démarquer dans l’écosystème numérique grâce à ses performances et à la qualité de sa conception.
Pour commencer, sa popularité sur GitHub lui permet d’être supporté par de très nombreux développeurs front-end, ce qui a pour répercussion de permettre de résoudre rapidement vos problèmes. La communauté est présente, et ça se sent. De plus, sa popularité croissante n’est pas seulement sur Github, elle est étendue un peu partout dans le monde du développement web, ce qui implique que de très nombreux tutoriels et communautés de passionnés sont à disposition des développeurs.
Sur Drupal, démarrer avec VueJS s’avère assez intuitif lorsqu'on dispose d'une certaine expérience en développement front-end, son code source est facilement lisible et la documentation sera la seule aide indispensable, elle couvrira (presque) tous les besoins d’un projet. Pour fonctionner, le framework n’a besoin d’aucune librairie externe, ni même de jQuery.
Enfin, même si des plugins existent, VueJS ne dépend aucunement d’eux. Bref, vous démarrez rapidement et simplement sur un framework rapide et efficace, le rêve de tous développeurs en somme.
Si ces raisons ne persuadent pas d’utiliser VueJS, la suite saura se montrer convaincante.
VueJS vs jQuery : La facilité vs la concision
jQuery est très souvent proposé pour démarrer un projet web, pourquoi ? Cela s’explique par la popularité de jQuery au sein des développeurs front-end ayant des années d’expérience. Heureusement, nombre d’entre eux restent en veille et voient émerger de nouveaux frameworks Javascript promettant plus de performances, une plus grande flexibilité, une manière de coder plus intuitive et une meilleure adéquation aux besoins du moments. Les promesses ne manquent pas et ce n’est pas pour rien.
jQuery est facile à prendre en main, mais l’utilisateur n’est pas aiguillé vers une bonne manière de faire les choses et il n’était pas au départ prévu pour la création d’interfaces web riches telles que nous les concevons aujourd’hui. VueJS est plus récent, il intègre certaines fonctionnalités à la base, il sait communiquer avec les autres composantes de votre application, il sait aussi se faire modulaire, là où jQuery faisait tout en bloc.
VueJS vs ReactJS : Un framework JS performant
Sur ce point, les deux frameworks JS s’avèrent assez rapides, cependant, il est nécessaire de noter qu’il est fréquent que VueJS soit deux fois plus rapide que React dans un environnement de test identique.
Toujours dans l’optique de fournir une analyse comparative pertinente, il est possible de constater que ce test de performance mené par un tiers met en lumière un léger plus accordé à VueJS grâce à l’intégration du DOM Virtuel. Ce léger plus qui peut paraître négligeable à petite échelle pourra entraîner de grandes différences avec un grand projet, comme partout, il n’y a pas de petites économies, surtout lorsqu’il est question de temps d'exécution.
En bref :
- VueJS est rapide : Presque deux fois plus rapide que React en matière de rendu.
- Ce framework est réactif : En prenant les meilleures fonctionnalités de React, VueJS propose un DOM Virtuel qui analyse les changements à effectuer et effectue le rendu seulement sur les composants destinés à être mis à jour.
- VueJS dispose de très nombreuses librairies mises à disposition par la communauté qui est de plus en plus active sur la question.
- Contrairement à Angular, VueJS se concentre sur l'essentiel, pas d'outils superflus et de syntaxe difficile à prendre en main, ici, la simplicité est le maître-mot.
La structure de VueJS pensée pour l’optimisation
Toutes les variables de VueJS sont réactive, c’est à dire que lors du changement d’état d’un composant, il est fréquent que les frameworks JS recalculent le rendu de tous les sous-composants découlant du composant. Ceci a pour conséquence d’entraîner une consommation de ressources inutile. Contrairement à d’autres frameworks JS populaires, VueJS recalcule seulement le rendu du composant mis à jour et des sous-composants liés à ce changement.
Avec VueJS, on met à jour que ce qui doit être mis à jour, pas plus.
VueJS répond aux contraintes de React et Angular
Dès le départ, VueJS a été créé en ayant pour but de résoudre les différentes contraintes qu’imposent React et Angular.
- VueJS est plus simple à manier que React en incluant nombre de concepts aimés dans Angular 1 et React.
- Il est possible de le mettre en place sans avoir besoin de système de build, la seule chose à faire est d’inclure les fichiers dans le fichier HTML sur lequel le travail est effectué.
- React est plus gros et plus complexe à prendre en main. Ce qui signifie qu'avec VueJS, la reprise du code par un autre développeur que celui du projet sera plus court.
Drupal 8 et VueJS : Utilisation concrète
La théorie c’est bien, mais la pratique, c’est mieux. Nous allons livrer notre expérience concernant un site internet gérant un très grand nombre de visites quotidien avec lequel nous avons utilisé Drupal 8 en headless en découplant avec VueJS.
Le choix de VueJS concernant ce projet n’a pas été anodin, en effet, comme vu précédemment, VueJS dispose d’un temps d'exécution des requêtes presque deux fois plus court qu’un de ses principaux rivaux : React. Dans la mesure où ce site a un trafic constant assez soutenu mais qui peut connaître des pics de connexion, il était primordial que les milliers d’utilisateurs effectuant une requête au même moment puissent obtenir leur page sans attendre, le tout, avec une interface agréable.
La rapidité du framework JS faisait partie des points capitaux à aborder car rappelez-vous : 3 secondes sont consacrées par l’internaute pour obtenir une page chargée, au-delà, 40% d’entre eux auront quitté le site. Au-delà de 7 secondes, c’est la banqueroute.
Et nous, on trouve que la banqueroute, c’est nul.
En prenant en compte tous les éléments précédemment cités, la théorie voudrait que ce soit le framework JS à la pointe.
Revenons à Drupal : Drupal 8 est une usine à gaz efficace, robuste avec un front… difficile à optimiser ! C’est pour cette raison que nous avons utilisé Drupal pour ce qu’il fait de mieux : la gestion de contenu. En effet, Drupal a eu pour ambition de permettre de “tout faire”. Cependant, en essayant de tout faire, Drupal n’a pas su se démarquer par sa performance, ni par sa capacité à répondre aux contraintes graphiques du “monde d’aujourd’hui” avec jQuery.
Pour remédier à ces problématiques, nous avons mis en place de nombreux dispositifs, ceux-ci ayant pour but commun d’être à la pointe dans chacun de leur domaine. Bref, nous avons rendu Drupal plus qu’headless car sa seule utilité va se limiter à la gestion du contenu, toutes les autres tâches sont dédiées à des technologies externes greffées à Drupal 8.
Un beau combo VueJS - Drupal 8 - Phalcon - Varnish qui verra le jour dans les mois à venir, restez à l’écoute et contactez-nous pour nous parler de votre projet VueJS / Drupal !
- Douichen Sofiane - Ludovic Coullet
