Technologies Web

Introduction à VueJS

Avant de commencer

Après un moment de blanc sur le blog, je me suis dit qu’il était intéressant de faire une suite d’articles sur VueJS en suivant le programme suivant :

  1. Introduction à VueJS
  2. POI et boilerplate : la puissance de webpack et d’un projet bien rangé
  3. Mes premiers composants
  4. Vue Router et conteneurs
  5. Vuex : gérer les données communes à plusieurs vues.
  6. Demo simple d’hackernews

Il est possible que selon l’avancée des articles, ce planning soit modifié.

Si j’ai décidé de faire cette suite d’articles, c’est que depuis plusieurs mois, au sein de Goomeo, nous testons et migrons vers différentes technologies. Et, il se trouve que VueJS est l’une de ces technologies pour nos parties front. J’ai justement trouvé intéressant de vous faire partager ce que j’ai appris durant ces quelques mois.

Présentation

VueJS est un framework progressif javascript ressemblant pour beaucoup à ReactJS et AngularJS mais étant pour sa part plus léger et ayant un apprentissage relativement facile. Si je me suis tourné vers cette solution et pas une autre, c’est tout d’abord pour sa syntaxe qui reste très simple. Pas de couche typescript ou jsx de base par rapport à ReactJS et un cloisonnement plus simple dans les fichiers de vue par rapport aux fichiers Angular.

En outre, il ne faudrait pas croire que, parce qu’il est simple, il n’impose pas une structuration importante de son application. Au contraire. Depuis sa création, un écosystème s’est créé autour de lui. Qui plus est, de nombreux exemples de boilerplate, d’outils de build tout en un et de libraries de composants ont vues le jour et sa communauté est toujours grandissante, ce qui participe à sa pérennité.

Du point de vue technique, son moteur de rendu utilise le Virtual DOM et compile le template par rapport à son contenu. De plus, il ne modifie juste les parties impactées par le changement grâce à l’utilisation de watchers sur les différentes propriétés de votre composant ce qui contribue grandement à ses performances.

Les projets VueJS sont, la plupart du temps, compilés avec l’aide de browserify ou de webpack (pour ne citer qu’eux) et, vous pouvez selon vos préférences, coder le projet en utilisant les modules ES6 en lieu et place du commonJS. (dans tous les cas, il est nécessaire de transpiler le code à l’aide de Babel pour le rendre compatible avec les anciens navigateurs). Il existe de nombreux outils tout en un vous simplifiant cette partie (nuxt.js, poi, vue-cli, …). Nous reviendrons sur cette partie dans le prochain article.

Pour finir, je vous renvoie vers la documentation officielle du projet afin que vous puissiez voir par vous même tout ce que je vous ai dit et tout ce que j’ai pu oublier de dire.

Fonctionnement

L’une des fonctionnalités majeure de VueJS est de pouvoir composer son projet grâce à vos propres composants. Au lieu de composer votre projet en un seul bloc, vous allez le découper en différents blocs modulaires indépendant qui vont s’imbriquer les uns avec les autres. Ce qui revient à dire que votre interface peut être transcrite en arbres de composants.

Un composant est tout bonnement une instance de Vue réutilisable au sein d’autres composants ou de votre instance principale :

Vue.component('todo-item', {
  template: '<li>This is a todo</li>',
});

Maintenant, vous pouvez facilement utiliser ce composant dans le templace d’une de vos vues/composants :

<ol>
  <!-- Créée une instance du composant todo-item -->
  <todo-item></todo-item>
</ol>

Mais, avec cet exemple, votre composant ne sera jamais différent, peu importe où vous l’appelez. Dans le cas où vous voulez modifier facilement son contenu par rapport à des paramètres, vous devrez passer par le couple props et attributs.

Les props sont les paramètres disponibles au sein de votre composant. Ils sont modifiables par l’appelant mais le composant ne peut les modifier ce qui permet de garder le contrôle sur ce qu’il se passe. Nous rentrerons en détail sur ce fonctionnement dans un prochain article. Les props se définissent comme ceci dans votre composant :

Vue.component('todo-item', {
  // Maintenant notre composant accèpte la prop `todo`
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

Maintenant que votre composant a sa prop, vous pouvez passer le paramètre comme ceci dans l’appel de votre template :

<ol>
  <!-- Créée une instance du composant todo-item -->
  <todo-item v-bind:todo="todo"></todo-item>
</ol>

Ici, on utilise un attribut todo pour passer un objet à notre composant. La partir v-bind: veut dire que l’on passe l’une des variables de notre vue à notre composant. En règle générale, ça permet aussi de passer des paramètre typés autre que String. À noter qu’au lieux de taper v-bind:todo="toto", vous pouvez tout aussi bien taper :todo="todo". la notation simple avec les : permet de se passer du v-bind.

Fichiers .vue

Pour simplifier votre projet et avoir quelque-chose de lisible et de structuré à la manière de React, il est tout à fait possible de définir un fichier par composant que vous créez. Ces fichiers sont des fichiers .vue et sont structurés de la manière suivante :

<template>
    
</template>

<script>
    export default {

    };
</script>

<style>

</style>

Comme vous pouvez le voir, le fichier est séparé en 3 parties :

  • template : C’est ici que vous allez mettre le code HTML de votre composant
  • script : Contient le code javascript de votre composant. Le export default {} correspond à l’objet Vue de votre composant.
  • style : Contient le style de votre composant. Selon les attributs de celui-ci, vous pouvez utiliser du CSS, Less, SASS, …

Afin de montrer la structuration d’une vue par l’exemple, nous allons voir ceci en introduisant les événements Javascript. Vous pouvez facilement rajouter un événement sur un de vos éléments HTML assez facilement via les attributs

v-on:[evenement]="votreFonction"

Ce qui donnera, si vous voulez rajouter un événement click sur un bouton le code suivant dans votre composant :

<template>
    <button v-on:click="clickAction">Cliquez ici</button>
</template>
<script>
    export default {
        name    : 'test',
        methods : {
            clickAction() {
                // action à effectuer au click         
            }, 
        },
    };
</script>

Comme vous pouvez le voir, la méthode appelée au click est définie dans l’objet methods. Chose à savoir, il se peut que dans certains autres articles, vous voyez @click au lieu de v-on:click. Les deux sont correct, le @ remplace ici le v-on:.

Il y aurait encore beaucoup de choses à dire sur le fonctionnement de Vue mais cet article ne sert qu’à faire une brève introduction de VueJS et non de tout lister. Pour ceci, la documentation remplit parfaitement son rôle.