Vue JS : comprendre le framework Javascript qui vous veut du bien !

Le 30/06/2021 Par Hugo JAHNKE vuejsjavascriptdéveloppementwebframework

Qu’est-ce que Vue.js ?

Vue.js (aussi appelé plus simplement Vue), est un framework JavaScript open-source utilisé pour construire des interfaces utilisateur et des applications web monopages (SPA). Vue a été créé par Evan You et est maintenu par lui-même, et le reste des membres actifs de l’équipe principale travaillant sur le projet et son écosystème.

Dans cet article, nous allons parler des concepts de base et des avantages qu’offre Vue. C’est parti !

Les concepts de base de Vue.js

Afin de développer des applications avec Vue, nous pouvons nous appuyer sur les fonctionnalités principales du framework.

Rendu déclaratif et réactivité

Pouvant être également trouvé dans d’autres frameworks/libraires, le rendu déclaratif est un système permettant d’insérer de la donnée de façon déclarative au sein du DOM à l’aide d’une syntaxe de template.

<body>
  <div id="compteur">
    Compteur : {{ compteur }}
  </div>

  <script>
    const Compteur = {
      data() {
        return {
          compteur: 0
        }
      }
    }

    Vue.createApp(Compteur).mount(’#compteur’)
  </script>
</body>

Dans cet exemple, on vient injecter la valeur de la propriété compteur au sein d’un élément HTML. Mais ce n’est pas tout, car en arrière-plan Vue a créé un lien entre la propriété compteur et le DOM. Ainsi, dès lors que la valeur de la propriété compteur sera modifiée, le DOM sera rafraîchit, c’est ce qu’on appelle la réactivité.

Le rendu déclaratif n’est cependant pas limité au contenu des éléments HTML, il est également possible de lier des propriétés JavaScript avec les attributs des éléments HTML à l’aide de la directive v-bind :

<body>
  <div id="bind-attribut">
    <a v-bind:href="lien">Axopen</a>
  </div>

  <script>
    const BindAttribut = {
      data() {
        return {
          lien: "https://www.axopen.com"
        }
      }
    }

    Vue.createApp(BindAttribut).mount(’#bind-attribut’)
  </script>
</body>

VueJS propose de nombreuses directives qui permettent de contrôler le comportement du DOM, nous en verrons d’autres plus tard.

En plus d’illustrer le concept de rendu déclaratif et de réactivité, les exemples ci-dessus permettent de présenter la manière de créer une application avec Vue.

En effet, Vue.createApp(Compteur).mount(’#compteur’) et Vue.createApp(BindAttribut).mount(’#bind-attribut’) permettent de créer une instance de Vue à partir des objets Compteur et BindAttribut et de la lier à un élément HTML portant respectivement l’id compteur et bind-attribut.

Interactions utilisateur

Pour permettre aux utilisateurs d’interagir avec notre application, il est possible d’utiliser la directive v-on afin de réagir à différents évènements :

<body>
  <div id="reaction-evenement">
    <p>{{ message }}</p>
    <button v-on:click="inverserMessage">Inverser le message</button>
  </div>

  <script>
    const ReactionEvenement = {
      data() {
        return {
          message: ’Hello Vue.js!}
      },
      methods: {
        inverserMessage() {
          this.message = this.message
            .split(’’)
            .reverse()
            .join(’’)
        }
      }
    }

    Vue.createApp(ReactionEvenement).mount(’#reaction-evenement’)
  </script>
</body>

Dans l’exemple ci-dessus, lorsque l’utilisateur clique sur le bouton, la méthode inverserMessage est appelée afin d’inverser la chaîne de caractères contenue dans la propriété message, et grâce au système de réactivité, le DOM est automatiquement mis à jour sans que nous ayons à faire quoi que ce soit d’autre.

Vue.Js fournit également la directive v-model qui permet de créer une liaison bidirectionnelle (two-way binding) entre une propriété JavaScript et un élément de type input :

<body>
  <div id="two-way-binding">
    <p>{{ message }}</p>
    <input v-model="message" />
  </div>

  <script>
    const TwoWayBinding = {
      data() {
        return {
          message: ’Hello Vue!}
      }
    }

    Vue.createApp(TwoWayBinding).mount(’#two-way-binding’)
  </script>
</body>

Comprenez ici que lorsque l’utilisateur modifie la valeur de l’élément <input v-model="message" />, la valeur de la propriété message est automatiquement mise à jour.

Boucles et conditions

Afin de pouvoir contrôler au mieux la structure du DOM, les directives v-for et v-if permettent respectivement de répéter et d’afficher/masquer des éléments HTML :

<body>
  <div id="boucle">
    <ol>
      <li v-for="todo in todos">
        {{ todo.label }}
      </li>
    </ol>
  </div>

  <script>
    const Boucle = {
      data() {
        return {
          todos: [
            { label: ’Apprendre JavaScript’ },
            { label: ’Apprendre Vue’ },
            { label:Développer une application géniale’ }
          ]
        }
      }
    }

    Vue.createApp(Boucle).mount(’#boucle’)
  </script>
</body>
<body>
  <div id="rendu-conditionnel">
    <p v-if="visible">Vous me voyez</p>
    <button v-on:click="visible = !visible">{{ action }}</button>
  </div>

  <script>
    const RenduContionnel = {
      data() {
        return {
          visible: true
        }
      },
      computed: {
        action() {
          return this.visible ? ’Masquer’ : ’Afficher’
        }
      }
    }

    Vue.createApp(RenduContionnel).mount(’#rendu-conditionnel’)
  </script>
</body>

Les composants en Vue.js

En plus des différentes fonctionnalités présentées précédemment, Vue propose un système de composants qui facilite le développement d’applications de grande envergure et qui permet également de structurer l’interface utilisateur en une arborescence de petits éléments indépendants et réutilisables.

components.png

Un composant n’est ni plus ni moins qu’une instance de Vue avec des options prédéfinies.

Pour créer un composant, il suffit de créer une nouvelle application avec la méthode createApp() puis d’utiliser la méthode component() avant de monter l’application avec la méthode mount() :

<body>
  <div id="app">
    <todo-item />
  </div>

  <script>
    const app = Vue.createApp({})

    app.component(’todo-item’, {
      template: `<li>Apprendre Vue</li>`
    })

    app.mount(’#app’)
  </script>
</body>

Ici, on utilise la méthode component() pour créer un nouveau composant que l’on pourra insérer à n’importe quel endroit de notre arborescence HTML grâce au sélecteur todo-item. Ce dernier sera alors remplacé par le template contenu dans la propriété template du composant.

Néanmoins, à chaque fois que l’on appellera ce composant, il affichera exactement la même chose, ce qui n’est pas très intéressant... Il est donc nécessaire d’apporter quelques modifications à notre composant afin de pouvoir lui transmettre des données :

app.component(’todo-item’, {
  props: [’todo’],
  template: `<li>{{ todo.label }}</li>`
})

Il est désormais possible de passer une propriété todo à tous les composants todo-item à l’aide de la directive v-bind :

<body>
  <div id="app">
    <todo-item
      v-for="todo in todos"
      v-bind:todo="todo"
      v-bind:key="todo.id"
    />
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          todos: [
            { id: 0, label: ’Apprendre JavaScript’ },
            { id: 1, label: ’Apprendre Vue’ },
            { id: 2, label:Développer une application géniale’ }
          ]
        }
      }
    })

    app.component(’todo-item’, {
      props: [’todo’],
      template: `<li>{{ todo.label }}</li>`
    })

    app.mount(’#app’)
  </script>
</body>

En créant le composant todo-item, nous avons été en mesure d’éviter une potentielle redondance dans le code et nous possédons désormais un élément indépendant et réutilisable à n’importe quel endroit de notre application !

VueJS et maintenabilité du code

Les concepts de base présentés précédemment sont rapides à prendre en main et vous permettrons d’apprendre à manipuler le framework. Cependant, si vous souhaitez développer une application de grande envergure vous risquerez d’être confrontés à un problème de maintenabilité du code, notamment dans la cadre d’un projet avec plusieurs autres développeurs.

Prenons l’exemple d’une application permettant de lister les répertoires d’un utilisateur, en ajoutant la possibilité de filtrer les résultats et d’en rechercher à l’aide d’un champ de texte. Notre composant pourrait alors ressembler à ceci :

export default {
  props: {
    utilisateur: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      repertoires: [], // 1
      filtre: { ... }, // 3
      recherche: ’’ // 2
    }
  },
  computed: {
    repertoiresCorresponsantFiltre() { ... }, // 3
    repertoiresCorrespondantRecherche () { ... }, // 2
  },
  watch: {
    utilisateur: ’getRepertoiresUtilisateur’ // 1
  },
  methods: {
    getRepertoiresUtilisateur () { ... }, // 1
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getRepertoiresUtilisateur() // 1
  }
}

Ce composant a alors plusieurs rôles :

  1. Récupérer les répertoires de l’utilisateur
  2. Effectuer une recherche plein texte pour filtrer la liste
  3. Filtrer la liste des répertoires de manière plus précise

En regardant la structure du composant, on peut remarquer que les différents morceaux de code liés à la logique de chacun des rôles du composant s’entremêlent. Cela peut donc rendre des composants difficiles à lire et à comprendre, en particulier pour les personnes qui ne les ont pas écrits.

Heureusement, la version 3 du framework VueJS sortie fin 2020 vient apporter une solution à ce problème : l’API de Composition.

Conclusion : VueJS, une technologie en perpétuelle évolution !

Comme nous avons pu le voir, Vue est simple à prendre en main et très agréable à utiliser. Ce n’est pas un des principaux framework JavaScript pour rien et est un choix complètement viable pour le démarrage d’un nouveau projet ou la migration progressive d’une application existante.

VueJS est une technologie qui ne cesse de s’améliorer en cherchant à combler toutes ses lacunes sans empiéter sur les performances ou l’expérience de développement.

À voir aussi

Tous les articles