Le développement par composants – Via VueJs

29 octobre 2019

Si vous connaissez des frameworks front-end modernes, tels que React, Angular ou Vue, vous savez peut-être déjà à quoi ressemble une architecture à base de composants. 

Ces infrastructures permettent aux développeurs d’écrire l’ensemble de leur application en JavaScript avec tous les éléments tels que la gestion des états, la prise en charge du routage des pages, etc. Ces frameworks obligent à repenser votre application en termes de composants et d’approche basée sur les données pour créer des interfaces utilisateur interactives.

A travers cet article de Romain Dewil, Frontend Developer chez CrossKnowledge, nous nous intéressons de plus près à Vue.js (communément appelé Vue) qui est un framework JavaScript open-source devenu extrêmement populaire dans la communauté des développeurs ces dernières années.

Le développement par composants

Qu’est ce qu’un composant Vue ?

Pour commencer cet article, nous pouvons revenir à une question plus simple et globale. Qu’est ce qu’un élément HTML ? 

C’est une brique utilisée pour construire une page HTML, en s’associant avec d’autres il nous permet de définir l’architecture et le rendu de celle ci.
Cet élément se compose d’une balise ouvrante, pouvant comporter ou non des attributs, des valeurs, des bindings… Pour finir par une balise fermante.

Peut être que le concept d’élément HTML custom vous parle, ce sont des éléments HTML qui étendent les standards et permettent d’avoir plus d’options lors de leur utilisation. Bien que les éléments Vue leur ressemblent, ils ne sont en rien des éléments HTML custom. Les composants Vue ne se basent pas sur l'implémentation des navigateurs mais sur le moteur de rendu VueJs.

L’utilisation d’un composant Vue se fait de la même façon qu’un élément HTML classique, avec sa balise, ses attributs, valeurs, bindings… Donc pas d'inquiétudes pour vous lancer !

Quels sont les avantages d’un composant Vue ?

Créé par un ancien ingénieur de Google, Evan You, Vue ne cesse de gagner en popularité ces dernières années. Selon le dernier sondage des frameworks les plus appréciés en 2019 par  Stackoverflow, Vue.js se positionne en seconde position juste derrière React. 

C'est le plus jeune membre de la famille Javascript et selon la communauté Vue.js il s’agirait “d’un framework web accessible, polyvalent et performant qui permet d’écrire des applications maintenables et testables”. 

Parmis ces utilisateurs : 9Gag, GitLab ou encore le géant Alibaba. 

Vue.js possède de nombreux avantages aujourd'hui. Flexible et facile à comprendre, il est notamment très approprié pour le développement d'applications légères, permet de s'intégrer facilement aux applications existantes et dispose d'un rendu côté serveur.

Comment créer un composant Vue ?

Un composant Vue se compose de 3 parties: une partie HTML, se basant soit sur des éléments HTML classiques, soit pouvant être composé d’autres composants Vue (nous y reviendrons plus tard lors de l’explication sur les props et la relation parent-enfant entre les éléments). D’une partie JS permettant de gérer l’initialisation, les interactions et autre amenant le composant à évoluer tout au long de son cycle de vie. Et une partie CSS, qui bien sûr nous permet de styler le composant.

composant Vue

Voici un petit exemple:

  • HTML
exemple code html
  • JS
exemple code JS
  • CSS
exemple code CSS

Dans notre exemple, le composant RoundedButton reçoit 3 propriétés lui permettant de se customiser selon les besoins et ainsi de le rendre plus modulable. Il est important de typer ces propriétés ainsi que de mentionner le required en cas de besoin. Attention à ne pas essayer de trop vouloir rendre vos composants trop modulable au risque de se retrouver avec une usine à gaz.
Un découpage voire un extend est souvent privilégié, gardez en tête qu’un composant doit être simple !

Comment gérer les événements ?

Voyons maintenant un peu la gestion des événements, parce que pour l’instant notre composant RoundedButton ne fait rien au click et c’est assez dommage, pour cela nous allons binder un événement et l’envoyer à notre élément parent. 

exemple event

Maintenant que notre composant RoundedButton est défini, autonome et suffisamment robuste nous allons voir comment l’incorporer dans un élément parent et gérer les interactions entre eux.

exemple d'un autre évènement

Dans ce cas très simple l'élément parent ne possède que notre composant. Pour pouvoir s’en servir il faut respecter quelques règles. Dans la partie JS il nous faut importer le composant et aussi le définir en tant que tel dans la section components. On peut attribuer un alias lors de cette définition (exemple: 'monBouton': RoundedButton) selon les besoins.
Une fois importé et référencé, on peut alors l’utiliser dans notre partie HTML. Rien de plus simple il suffit d’utiliser notre composant comme un élément HTML basique, avec ses balises ouvrantes et fermantes et de le nommer en respectant la convention d'écriture (RoundedButton -> rounded-button). Il faut aussi penser à bien renseigner les différents attributs demandés, en cas d’oublie le compilateur se chargera de vous le rappeler (d’où l’importance de bien mettre le type et le required).

Il nous reste plus qu'à gérer les événements envoyés par le composant, dans notre exemple RoundedButton envoie l’emit buttonClicked, on bind le retour sur notre methode myFunction et le tour est joué !

Voici un résumé graphique de ce qui vient d'être expliqué, note: il n’y pas de relation entre un composant grand père et petit enfant. La communication se passe toujours de père à fils.

illustration développement par composant
L'auteur Florian Grandvallet

Co-Founder

Florian Grandvallet
Postuler à l'annonce Postuler à toutes les annonces Ingénieur système linux orienté web
Remplissez le formulaire
C'est tout bon

On vous recontacte au plus vite !
En attendant, vous pouvez toujours consulter nos autres jobs !

rotate screen

Retourner votre tablette pour une meilleure navigation