Guide complet pour développer et intégrer avec Vue JS : L’installation et les bases de Vue

Aujourd'hui débute un nouveau dossier qui nous suivra sur de nombreuses semaines : Vue.js. Au programme de cette semaine : installation de Vue et les bases du data-binding.

Si vous êtes intégrateurs et que vous ne connaissez pas Vue, cet article s'adresse à vous ! Que vous ayez ou non des connaissances en Javascript, cet article vous est principalement destiné.

Si vous êtes un développeur et que vous travaillez en équipe avec des intégrateurs, ne partez pas tout de suite. Je vous encourage à lire cet article, et si son contenu ne vous semble pas aberrant ou vraiment trop éloigné de la zone de confort de vos partenaires intégrateurs, essayez de le leur partager. L'objectif de ce dossier est de permettre aux équipes complètes de comprendre au moins une partie de vue et d'envisager pouvoir l'utiliser pour travailler en équipe.

Si vous connaissez déjà Vue ou que vous avez déjà des connaissances en Javascript et que vous ne travaillez pas en équipe, vous ne trouverez pas grand-chose pour vous cette semaine et je m'en excuse. J'ai pris le parti de faire commencer ce dossier au plus bas possible, pour permettre à Vue d'être compris par tous, quel que soit leur niveau. Je vous donne donc rendez-vous dans deux semaines, pour une utilisation plus poussée de Vue !

Je vais essayer de garder les prérequis au minimum tout au long de cette série d'articles. Pour ces premiers articles nous allons rester au plus bas des capacités offertes par Vue (à vrai dire, nous serons même en dessous du minimum nécessaire avant d'envisager l'utiliser), mais il ne sera tout de même pas possible de se pointer "les mains dans les poches".

Pour commencer, je vais partir du principe que vous savez comment fonctionne le HTML : balises, attributs, appel de script ou de feuille de style, etc. Si ce n'est pas votre cas, ne continuez pas plus loin la lecture de cet article, et redirigez-vous vers un cours en ligne, comme par exemple Apprenez à créer votre site web avec HTML5 et CSS3 (openclassroom).

Enfin, cet série d'article vous demandera de faire appel à votre logique, ne serait-ce qu'un petit peu. Je vais expliquer en longueur tous les points de Javascript utilisés, mais je pars du principe que vous savez encore comment fonctionne une addition ou des comparaisons simples (exemple : si x = 5, x est-il plus grand que 4 ?), et que vous avez une idée tres rudimentaire de comment fonctionne le javascript (pour faire un parallèle avec la cuisine ce serait le niveau "cuire des pates")

La mise en place de Vue pour une installation basique est vraiment TRES simple, comme vous pouvez le voir sur le pen ci-dessous.

See the Pen Vue example #1 by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Pour la partie Javascript, il vous faut charger le fichier js de Vue, depuis votre serveur ou depuis un CDN (pour notre exemple https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js), puis initialiser Vue avec le petit bout de javascript que vous pouvez trouver sur le pen.

Enfin, pour le HTML le seul prérequis est de posséder un élément avec l'ID requise dans l'initialisation de Vue. Notre exemple a sur la ligne deux el: '#app', il nous faut donc créer un element <div id="app"></div> dans lequel vue sera actif.

Fin de l'installation !

C'est bien beau d'avoir une library simple a installer, mais si on explique pas comment elle fonctionne on ne va pas aller loin avec.

En quelques mots, Vue fonctionne en liant dynamiquement des portions de HTML à un objet "data" que l'on détermine à l'initialisation. Dans l'exemple précédent, l'objet data ne contenait qu'une seule valeur : message: 'Hello Vue!' .

Note : en Javascript, un objet est une liste de valeurs liés à des clés, qui sont en quelque sorte leur nom.

Il est important de noter que cette liaison est dynamique : si quelque chose (du Javascript ou action de l'utilisateur dans un formulaire) modifie cette donnée, sa valeur change partout dans le HTML, où qu'elle soit : dans un attribut ou dans un corps de texte par exemple.

See the Pen Vue example #2 by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Enfin, il est important de noter qu'il n'y a pas que de simples données que nous sommes capable de lier, il est aussi possible de lier des "methods" et des donnees "computed".

Les methods pour commencer sont des actions que vous liez à des éléments de votre page et qui pourront se déclencher lors de l'action de vos utilisateurs.

Les valeurs computed sont des valeurs qui n'existent pas en l'état dans votre objet de données, mais que vous retravaillez légèrement.

Prenons un dernier exemple pour bien comprendre.

See the Pen Vue example #3 by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Avec tout ça, vous avez une assez bonne vision de ce que propose Vue de manière basique : lier du Javascript et du HTML, le tout de manière super-simple et super dynamique. Sauf que bon, si vos etes intégrateurs dans une équipe, il est très probable que vous ne fassiez pas de Javascript, ou presque pas. Pourquoi s'embêter à lier deux trucs ensemble si on n'en utilise qu'un seul dans ces conditions là ?

Étant la partie "développement" d'un duo développeur/intégrateur, vois personnellement vue comme un fantastique outil pour le travail en équipe.

Les intégrateurs ont très souvent une très bonne idée des interactions qu'ils veulent metre en place, ils ne leur manquent que les compétences en Javascript.

Vue mets ces derniers aux commandes d'une grosse boîte à outils que les développeurs de leur équipe leur ont préparée. Une grosse interration complexe peut avoir été faite ou simplement préparée avec un placeHolder, et il ne leur reste plus qu'à la mettre en place exactement à l'endroit de leur choix avec un @click="grosseInteraction", et c'est la meme chose pour les données dynamiques dont ils peuvent avoir besoin.

Enfin, vous pouvez peut-être être intégrateurs ayant quelques connaissances en Javascript et jQuery et vous débrouillant seuls pour la plupart de vos taches. Dans ces conditions, à quoi pourrait-bien vous servir Vue ?

Sachez tout d'abord que le genre d'interactions que vous pouvez faire avec jquery peut être faites aussi avec vue ! Déplier un menu au clic sur un bouton par exemple est tout à fait faisable avec une méthode sur le bouton qui passe une valeur de true à false, et l'utilisation de cette valeur pour gérer l'affichage d'une classe. L'avantage de Vue sur ce point est que tout votre HTML peut etre tenu au courrant de l'etat du menu !

Note : true et false sont les valeurs "vrai" et "faux" en Javascript, et il est possible de passer de l'une a l'autre avec "!".

See the Pen Vue example #4 by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Notez que le plus gros point positif de vue pour vous ne serez abordé que la semaine prochaine, donc je compte sur vous attendre le prochain article avec impatience !

Nous avons pu voir le fonctionnement "basique" de vue, mais rien de bien impressionnant pour l'instant et surtout rien qui ne vous donne une vraie raison de l'utiliser si vous ne travaillez pas en équipe.

La semaine prochaine nous allons changer la donne avec LA raison pour laquelle les intégrateurs ont tout à gagner à utiliser Vue : la création de nouveaux éléments HTML personnalisés.