Vue.js : Je suis venu. J’ai Vue. J’ai vaincu.

Depuis maintenant 3 mois, nous développons chez Malt notre propre CRM (Customer Relationship Management). Après avoir hésité à se reposer sur un produit existant (ex : Salesforce), nous avons choisi de bâtir le nôtre en partant de zéro. Plus besoin de s’adapter à une API externe, et exit la dette technique (Malt est un très bon produit mais nous allons également souffler notre 5ème bougie). Nous avions donc les coudées franches pour développer le meilleur outil pour nos équipes commerciales.

Chez Malt, nous n’avons pas l’habitude de nous reposer sur un framework côté front. Nous avons eu un peu d’Angular et de Backbone mais beaucoup de nos pages (search, profil) ont un besoin SEO de premier rendu côté serveur et une durée de vie très courte : nous sommes sur du rendu statique amélioré par des modules javascript.

Pour ce CRM, nous étions tous d’accord sur le fait de créer une single-page app, alimentée entièrement par une API dédiée.

Inévitablement la question du choix d’un framework est venue très vite, la réponse est venue non moins rapidement : nous avons décidé de nous reposer sur VueJS.

Moi au moment du choix de la stack.

Dans la cour des frameworks JS actuels, VueJS peut faire office de petit nouveau. « Pouvait » est aujourd’hui plus juste. 3 ans après sa première release, VueJS est aujourd’hui un framework mature, avec une forte communauté, qui a sa propre conférence annuelle et quelque 8000 packages sur npm… Bref, VueJS rassure.

Notre CRM (le choix du nom prendra je pense, plus de temps que son développement) est encore en pleine construction mais 3 mois et une centaine de composants plus tard, nous pouvons sans peine dresser un premier bilan — spoiler alert — positif de notre utilisation de VueJS.

“Shall we begin ?”

Premier point le guide d’utilisation de Vue est bien. Très bien même. Je n’irai pas jusqu’à dire surprenant, mais pendant la première semaine de dev, il a constitué un bon livre de chevet. Clair et illustré d’exemples qui donnent vraiment envie de s’en servir (prends ça Hello world). Et au final, moyennant quelques heures de lecture, ce guide donne toutes les bases théoriques pour attaquer un projet concret.

Parlons du démarrage justement. La CLI disponible pour Vue est plutôt bien faite elle aussi. Que vous partiez sur une PWA, avec webpack ou non, ou sur un projet très simple, elle donne la possibilité de s’adapter à plusieurs configurations. Plutôt agréable d’attaquer le dev sans avoir à passer trop de temps sur de la conf.

De notre côté il a “juste” fallu assurer un bon déploiement des ressources liées à cette web app CRM en bonne coordination avec notre architecture.

La vue et rien d’autre

La philosophie de VueJS est de donner l’ensemble des outils nécessaires pour se concentrer sur … l’aspect vue dans une app. Evan You, son créateur a bien bossé le naming. Afin de bien appréhender cet aspect, un exemple de notre implémentation sera plus parlant.

Imaginons un composant pour lequel nous avons besoin d’afficher un recap de l’utilisateur courant sur notre CRM.

Voici l’architecture choisie :

Et un aperçu de ce que serait ce composant en se basant sur cette architecture :

Nous avons donc choisi de totalement décorréler la logique d’application et la vue et de laisser à VueJS la responsabilité de ce qu’il sait faire le mieux : générer, manipuler et rafraîchir le DOM. Tout ce qui ne concerne pas cette vue est donc écrit en javascript natif (ES6, babel étant intégré à la configuration de base).

A noter que le fichier UserResource.js vu au dessus permet d’ajouter certaines méthodes / attributs aux données reçues depuis l’API. Cela permet encore une fois de déplacer les responsabilités de logique applicative en dehors du composant Vue.

Plusieurs avantages :

  • Éviter d’avoir des composants dont les responsabilités sont trop grandes
  • Rendre disponibles des logiques d’API à plusieurs composants sans duplication
  • Courbe d’apprentissage plus facile pour les futurs arrivant sur le projet avec une logique organisationnelle claire.
  • La partie Vue flavored concerne uniquement la vue, tout le reste est en JS natif.

Développer en jouant aux Lego

L’un des autres aspects fort de VueJS (qu’il partage / emprunte fortement à React ceci-dit) est le développement par composants.

L’exemple de notre composant utilisateur vu au-dessus est donc, une fois réalisé, testé, recetté, prêt à être utilisé à n’importe quel endroit de l’appli.

Single file component

Un composant VueJS est tout simplement un fichier, auto-porteur de tout ce dont le composant a besoin :

  • Son template
  • Sa logique
  • Son style

Deux choses intéressantes à mentionner concernant ce trio.

  • Le template est en HTML pur (hors directives et attributs custom). La CLI permet également d’écrire vos templates en Pug (anciennement Jade). Pas besoin d’apprendre un nouveau langage de templating donc.
  • Le style peut être écrit en SASS directement, contrairement à React qui dans la plupart des cas passe par des voies détournées telles que le CSS-in-JS.

Par ailleurs, moyennant quelques lignes supplémentaires dans la conf, il est possible de partager le tronc commun de votre style (variables, mixins, functions…) à l’ensemble de vos composants !

Quelques modifications dans utils.js fourni par la CLI de Vue

Toolbox

Enfin, je vais parler aux utilisateurs des IDE JetBrains (IntelliJ, PhpStorm…) en évoquant le plugin Vue qui très agréable à utiliser. Les principaux avantages :

  • Colorisation des différentes parties (HTML, JS, CSS) d’un fichier .vue
  • Autocomplétion lors de l’ajout d’un composant et import auto

Ajoutez un snippet pour la base de votre composant et sa création / utilisation devient vraiment facilité !

“ Ok mais une fois que je suis dans le browser, t’es bien gentil mais mes composants je ne les vois plus…”

Extension VueJS dev tools disponible sur Chrome. Un must have.

Voilà.

“Je pense que là je vais conclure.”

Vous l’aurez deviné, pour le moment (et il y a peu de chances que ça change) notre bilan d’utilisation de VueJS est complètement positif. Pour rappel les points forts :

  • Courbe d’apprentissage très rapide
  • Communauté importante et réactive
  • Single file component (template, logique et style dans le même fichier)
  • Logique de l’application décorrélée de la vue
  • Compatibilité SASS
  • Vue dev tools
  • API d’animations / transitions sur les composants intégrée à Vue (non évoquée dans cet article, l’API étant tellement agréable à utiliser que je pourrais y consacrer un autre article complet… Teasing…)

S’il fallait lister quelques regrets / manques :

  • Besoin de renseigner l’ensemble des propriétés que l’on veut réactives sur un composants à la création de celui-ci. Plus d’infos ici

Je ne suis pas en train de dire que VueJS est LE framework front du moment, je pense que nous aurions bien entendu pu arriver à faire ce que nous avons fait avec React ou Angular.

Cependant, si dans un futur proche nous devions refaire la partie compte utilisateur de Malt et que la question du choix d’un framework se pose, notre argumentaire est déjà solide :)

Et n’oubliez pas, que vous soyez féru de VueJS ou non, on recrute toujours !

Like what you read? Give Pierre Mériau a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.