Comment développer et intégrer avec Vue JS: Création et usages de composants

Aujourd'hui nous allons décortiquer une des options les plus puissantes de Vue : les composants

A qui s'adresse cet article ?

Comme pour l'article précédent, cet article ne rentre pas dans la technique et reste sur une présentation très poussée du vue et ses composants. Si vos etes intégrateurs et que vous n'avez pas vraiment de bases en Javascript, cet article est fait pour vous.

De même, si vous avez du mal à comprendre de concept d'element personnalise, je pense que vous avez beaucoup à gagner à la lecture de cet article, quel que soit votre niveau.

Prérequis

Cet article étant le deuxième d'une série, il sera important pour sa compréhension d'avoir lu l'article précédent, à moins bien sur que vous ne connaissez déjà le fonctionnement de Vue.

Sorti de cela, l'article ne vous demandera que des connaissances simples en HTML et le strict minimum de Javascript

Qu'est-ce qu'un composant Vue ?

La semaine derniere nous nous laissions sur la promesse d'apprendre a utiliser Vue pour creer de nouveaux éléments HTML, et c'est exactement ce que sont les composants Vue.

Pour commencer, qu'est-ce qu'un "élément HTML" ? Ce sont les briques primordiales utilisées pour construire toute page HTML, comme par exemple <p>, <div> ou <video>. Ils sont composés d'une balise ouvrante, d'une balise fermante (sauf exceptions), d'attributs présents dans la balise ouvrante et éventuellement d'un contenu entre les balises ouvrantes et fermantes.

Supposons que nous ayons besoin d'installer un carrousel sur notre site. Pour l'installer, nous pourrions évidemment choisir une ressource Javascript (par exemple Slick), l'initialiser et créer la structure HTML nécessaire à son bon fonctionnement, mais cela ne serait-il pas plus simple de posséder un élément HTML "slick-carousel" et de simplement écrire dans son HTML le code suivant ?

Évidemment, l'exemple ci-dessus est très simple, mais les composants peuvent être bien plus complexes et donc simplifier grandement certaines tâches moins triviales (comme le calendrier ci-dessous), ou bien permettre de gagner beaucoup de temps en évitant de refaire à la main des éléments récurrents.

See the Pen FullCalendar Vue Component by Dieter Frei (@diemah77) on CodePen.

Certains parmi vous ont certainement déjà entendus parler des custom elements et cette description doit leur sembler extrêmement semblable. Les composants Vus remplissent exactement la même fonction et ont une syntaxe très semblable, mais NE SONT PAS des custom elements HTML.

Les composants de Vue, ne se basant pas sur l'implementation des navigateurs mais sur le Javascript de Vue, ont un support bien plus homogène entre les navigateurs, et ne requièrent pas de polyfill (des fichiers Javascript permettant de pimper les navigateurs les plus anciens) pour être supporté jusqu'à IE 9. De plus, les customs éléments sont encore au status de Draft et Seur specs ont tendance à changer très régulièrement, ce qui est (pour moi en tout cas) un très sérieux frein a leur adoption.

Comment utiliser un composant Vue ?

Exactement de la même manière qu'un element HTML normal ! C'est la le plus beau point des composants Vue : ils s'utilisent strictement comme des éléments standard une fois qu'ils ont été initialisé (nous verrons l'initialisation lors de la création). Si vous savez intégrer, vous savez donc utiliser des composants Vue.

Sachez qu'il est possible d'avoir des composants qui ne sont pas globaux, mais qui ne peuvent être utilisé que dans certains autres composants. Ce sujet ne sera traité que dans plusieurs articles, car cela demande d'utiliser un outil de build, et qu'il n'est important que pour les projet d'assez grosse taille.

Création de composants

Bon, après cette très grosse introduction il serait peut-être temps de commencer à coder !

Pour créer un composant, nous allons avoir besoin d'une partie Javascript pour déclarer le composant et ses propriétés, ainsi que d'une partie markup pour gérer son affichage. Cette dernière partie peut exister sous deux formes : directement dans le Javascript sous la forme d'une chaine de texte, ou dans une balise spéciale de votre HTML.

Je vous propose de jeter un oeil au pen ci-dessous, qui vous propose un exemple de chaque, ainsi que le Javascript minimum nécessaire pour la création d'un composant.

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

Maintenant que nous savons créer un composant, il est temps d'apprendre à lui passer des informations ! Nous avons pour cela deux outils à notre disposition : les attributs et le contenu de notre élément.

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

Enfin, il est possible de noter qu'il est possible d'utiliser data, computer et methods de la même manière que pour l'initialisation principale de Vue. La seule petite différence est dans la structure de "data", qui doit obligatoirement être une fonction au lieu d'un objet pour les composants (nous verrons cela la semaine prochaine).

Note pour les curieux : data doit être une fonction car les objets sont passes par référence en Javascript. Avec un objet data, toutes les instances d'un composant partageraient les mêmes valeurs pour data, ce qui serait un énorme handicap !

Tout peut être un composant

Les exemples précédents présentent des composants "visuelles" car c'est ceux que vous croiserez le plus fréquemment, mais n'imaginez pas que les composants ont forcément une part visuelle ! Ils peuvent aussi représenter une fonctionnalité, un comportement, une interaction utilisateur, …

Pour illustrer cela, je vous propose deux exemples. Le premier est un composant que j'ai fait moi autour de la ressource Javascript "Mousetrap", et qui permet de capturer des raccourcis claviers de la part de vos visiteurs. Pour en savoir plus sur ce composant, je vous propose de lire l'article qui lui est dédié : Comment créer des raccourcis claviers très simplement avec Vue.js ?

See the Pen Mousetrap + Vue.js by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Mon second exemple est un composant permettant de rendre n'importe quelle liste d'éléments drag'n dropable : Vue.draggable

Quand et pourquoi créer des composants ?

Arrivé à ce niveau de l'article, vous savez normalement utiliser et créer des composants : dupliquez la structure Javascript que j'ai fournie sur mon premier exemple, changez son nom et sa template et vous voilà avec un nouveau composant. De la même manière, je pense que vous n'avez pas besoin de plus d'explications sûres pourquoi utiliser des composants, ce ne sont finalement que de nouvelles ressources. Mais… pourquoi créer de nouveaux composants ?

J'ai deux raisons à vous fournir : éviter de vous répéter et simplifier le travail en équipe.

Si vous êtes un intégrateur travaillant solo, c'est à vous que revient la charge de comprendre et utiliser les ressources comme le carrousel Slick par exemple, même si vous n'êtes pas développeur JS. Évidemment avec la documentation vous pouvez tout à fait mettre en place votre carrousel, mais la tache sera fastidieuse et désagréable. Pour à peu près le même temps, il aurait été possible de créer un composant permettant de simplifier cette tâche pour TOUS vos prochains projets, alors pourquoi s'en priver ?

De la même manière, si vous avez tendance à utiliser très souvent un menu of-canvas, rien ne vous empêche d'en faire un composant, puis de l'utiliser sur vos prochains projets pour gagner du temps.

Si vous travaillez en équipe, la réponse est à peu près la même, sauf que ce ne sera pas forcément à vous, intégrateur de créer le composant. Vous avez besoin d'une fonctionnalité JS hors de votre portée, et ce de manière récurrente ? Demandez à votre développeur d'en faire un composant ! De cette manière, vous serez autonome sur vos prochains projets, vous gagnerez du temps et lui aussi.

Programme de la semaine prochaine : Un exercice et comment encapsuler ses composants

Nous savons maintenant créer et utiliser des composants, j'ai fait un long plaidoyer pour vous fournir des raisons de les utiliser, vous êtes prêt a commencer !

Seule petite ombre au tableau : passer un composant d'un projet à un autre peut rapidement devenir fastidieux quand il faut copier une template dans la vue, importer les ressources nécessaires, déclarer le composant, … le gain de temps n'est finalement plus si perceptible.

La semaine prochaine, nous allons avoir exceptionnellement deux articles sur Vue.

Mardi nous sortons de la présentation théorique et nous commençons enfin la pratique avec la creation d'un petit jeu multijoueur

Jeudi nous allons donc nous concentrer sur l'encapsulation et la réutilisation de nos composants, avec ou sans Webpack.