vue js logo interface utilisateur java script

Développer facilement une interface utilisateur avec Vue.js !

Par Thomas V-G le 5 décembre 2019

 Lecture 6 minutes

Vue.js est un framework javascript au même titre que React ou Angular. Il permet de créer des interfaces utilisateur performantes et maintenables très rapidement. Voici une petite liste des avantages de Vue.js et pourquoi il est intéressant de l’utiliser !

Accessibilité de Vue.js

Vue.js est un framework très simple à mettre en place. Quelques minutes suffisent pour créer une application et à commencer développer. Sa grande force ? Son accessibilité et sa facilité d'utilisation. Voici quelques avantages : 

  • Une documentation reconnue pour sa clarté et son exhaustivité permet de prendre en main Vue en un temps record (et traduite en français !)
  • Une interface de commande en ligne permet d’initialiser un projet et de le configurer (dispose même d’un mode graphique)
  • Des librairies de tests unitaires et fonctionnels peuvent êtres ajoutés à l’initialisation
  • Possibilité de sélectionner parmi de nombreuses librairies “npm”, ce qui aide à réaliser un projet
  • Une simple commande fait tourner le projet avec une compilation à la volée du code et du style
  • Une commande permet de compiler tout le projet et d’en faire des fichiers .js et .css. Il ne restera plus qu’à ajouter une “div” dans laquelle intégrer le projet, et à intégrer les scripts et les styles
  • Sans doute le framework js le plus simple à prendre en main pour des développeurs back-end qui souhaitent monter en compétences dessus, de part la nature “objet” de ses composants et sa syntaxe de template basée sur le HTML.

Vue.js ecran librairie interface utilisateur javascript

Versatilité

Décrit par son auteur comme un framework évolutif, l’une des forces de Vue réside dans sa capacité à s’adapter à différents contextes : 

  • Il peut être ajouté à un projet existant pour étendre ou remplacer un module de manière incrémentale, en ajoutant simplement Vue via import ou CDN, à la jquery. Pour créer un widget par exemple. (vue-heidi-editor)
  • Il peut être utilisé pour créer une Single Page application complète. Vue met à disposition un utilitaire en ligne de commande et des librairies standards pour gérer le routage, les états, etc. (ex: vue-louboutin-wms, vue-portail-qlik)

Environnements

Vue.js propose nativement de mettre en place des configurations en fonction des environnements. Les environnements natifs sont production, développement et test. Cela permet, par exemple, de définir des urls d’API, des niveaux de log ou des chemins d’uploads.

Simplicité avec Vue.js

Vue.js permet d’organiser un projet en composants qui communiquent et qui s’appellent entre eux. Cela permet d’avoir des éléments simples avec une seule fonction. On peut très simplement se baser sur une architecture Modèle-Vue-Contrôleur. Cela permet d’avoir une application maintenable et facilement évolutive. Certaines librairies comme VueX mettent en place des systèmes de singletons qui rendent des projets plus lisibles. De nombreux autres packages rendent le travail plus rapide et sûr.

Vue.js ecran theme interface utilisateur javascript

Robustesse

Un des inconvénients de javascript est son grand laxisme sur les conventions de codage. Pas de typage de variable, concept de classe très flou, conventions de styles souvent absentes. Vue.js permet d’y remédier. 

  • La librairie vue-types (entre autres) permet de typer les variables et permet d’afficher des alertes à la compilation en cas de transgression
  • Les composants Vue fonctionnent comme les classes que l’on peut utiliser dans d’autres composants ou servir de classe parente pour utiliser l’héritage.
  • Le code peuvent avoir des conventions de style. Elles sont proposées dès l’initialisation d’un projet.

Modularité

Vue.js utilise des modules via des packages NPM. Mais il est aussi possible de faire une architecture de projet en créant différents modules (ex: appel API, tableau, formulaire, ...). Si un développement peut être utile dans d’autres projets, il est possible d’en faire un projet git à part et le réutiliser ailleurs. De plus, il est possible de les personnaliser dans chaque projet à l’aide du système d’héritage.

L’expérience Synolia avec Vue.js

Synolia a déjà utilisé Vue.js dans plusieurs projets. Nous avons donc une bonne expérience sur cette technologie. Grâce à cela, nous pouvons désormais faire des estimations précises. Nous connaissons également déjà plusieurs librairies, ce qui nous fait gagner beaucoup de temps, et avons aussi une grande documentation des bonnes pratiques Vue.js. Plusieurs de nos développeurs front développent des applications Vue.js et sont capables de former de nouveaux développeurs en cas de besoin.

vue js interface utilisateur javascript

Interaction Front-end/Back-end

Vue.js permet d’avoir une collaboration efficace entre les développeurs front et back puisque la seule interaction se passe via des endpoints d’API. Pour établir la communication, il suffit de définir 3 points : 

  • Les données dont a besoin de front pour afficher 
  • Les données dont a besoin le back pour effectuer des actions métier 
  • L’url que devra appeler le front

PWA

L’un des objectifs annoncés par Synolia est de prendre le train de la PWA, ces applications web qui utilisent les dernières technologies de nos navigateurs pour proposer une expérience utilisateur égale ou supérieure aux applications natives mobiles. Vue propose un support officiel pour PWA via un plugin.

Écosystème

Il est important pour un développeur de pouvoir se reposer sur un écosystème riche et solide pour faciliter le développement de nouvelles fonctionnalités (pas besoin de réinventer la roue, si quelqu’un l’a déjà fait on peut le reprendre ou au moins s’en inspirer) et la correction de bugs. Vue.js est le 3ème projet le plus suivi sur Github et dispose de l’une des plus grandes communautés parmi tous les frameworks. Tous les jours de nouveaux projets Vue naissent produits par de petits développeurs ou des géants du web, comme Gitlab ou Alibaba : https://madewithvuejs.com/ Il est également très apprécié de la communauté php. Des acteurs comme Laravel (Framework PHP concurrent de Symfony) l’ont choisi pour être le framework front end par défaut. 

vue js interface utilisateur

Où utiliser Vue.js ?

On a vu ici que Vue.js possède de nombreux avantages. Mais serait-ce intelligent de refaire tout Magento en Vue pour cela ? Non ! Néanmoins, certaines interfaces seraient plus simples à développer en maintenir avec ce framework, comme notamment les outils de création de patron ou de personnalisation du module Heidi. Un tunnel de commande pourrait être fait avec Vue.js afin de remplacer le phtml, less, knockout, jquery, et javascript vanilla par un module en Vue.js qui n’aura besoin que d’html, css et Vue.js. Pour Symfony, puisque les bundles Symfony  ne sont souvent que des services back-end, l’interface pourrait souvent être faite entièrement en Vue.js. On pourrait par exemple éviter les configurations de formulaires en .yaml qui sont souvent laborieuses. Et pour lesquelles on ne sait jamais si c’est le travail d’un développeur front ou back. 

Twitter LinkedIn Facebook E-mail
GIF