Les Web Component avec Vanilla JS

Les Web Component. Vous en entendez parler partout depuis un moment maintenant et vous ne savez pas ce que c’est ou comment cela fonctionne? Je vous explique dans cet article ce qu’est un Web Component et pourquoi il y a un tel engouement pour cette techno.

Google a largement contribué à leur large utilisation. Néanmoins, les navigateurs actuels ne prennent pas encore tous en chargent cette techno. Alors en quoi consiste un Web Component? Nous allons voir cela tous de suite.

C’est quoi un Web Component?

Pour faire simple, c’est une balise HTML inconnue de votre navigateur. Cette balise est constituée avec plusieurs technologies distinctes permettant de créer une d’interface graphique personnalisés et réutilisables. Pour l’utiliser il vous faut un fichier Javascript qui est fourni avec. Pour faire fonctionner cette custom balise sur tous les navigateurs, vous devrez aussi utiliser un polyfills. Jusque-là rien de compliquer. Alors que vont faire ces balises sorties de null part?? Eh bah cela dépend de votre Component.

Chaque Web Component permet d’implémenter une interface ou fonctionnalité précise. Comme le fait une balise HTML standard. La principale différence est que le Web Component est créé par un développeur. Eh oui. Vous pouvez créer vos propres Web Component et les distribuer sur le web au grand public.

Donc pour faire résumer en super simple, un Web Component est une balise HTML qui permet d’implementer quelque chose dans votre DOM.

Ces custom balise sont conçus avec du Javascript et embarque tout une logic et interface avec elles. Nous allons voir pourquoi et comment dans la suite de cet article.

L’avantage des Web Component

En tant que bon développeur, vous savez à quel point la réutilisation de code est une bonne chose. Cela vous évite des heures de travail qui ont déjà été fournis. Vous m’avez certainement déjà entendu lors de mes formations, prôner la réutilisabilité de votre code ou votre travail. Les Web Component permettent d’aller au bout de cette idée!

En effet, il est très difficile de mettre en place une solution pour distribuer ou partager l’ensemble d’une fonctionnalité incluant le HTML, JS et le CSS. Mis à part une iframe… Nooooon ne me tapper pas dessus!! C’était juste un élément de comparaison je n’utilise jamais les iframe!

Les Web Component permettent de résoudre ce problème. Avec eux, vous pouvez encapsuler dans une balise HTML personnalisée, la totalité d’une fonctionnalité voir même une application complète. Oui monsieur!

Aller on a suffisamment blablaté on passe au code!

Comment créer un Web Component avec Vanilla JS

Donc nous voici réunis pour apprendre à concevoir un Web Component Basic avec Javascript pur. Rien D’autre, pas de librairie externe rien que du Javascript! Aller on y va!

En premier il faut savoir que pour créer un Web Component vous devez absolument être à l’aise avec les classe de ES6. Car tout est basé là-dessus. Donc vous allez vite allé faire vos révisions avant de poursuivre cet article si vous ne maitrisez pas les Classes car sinon vous n’allez rien comprendre.

Donc on va en créer un Component basic pour afficher les détails d’information d’un utilisateur lors du click sur son image par exemple. On l’appellera « UserDetailsCard » et il s’utilisera ainsi:

<user-details-card api-url="https://reqres.in/api/users/1"></user-details-card>

On pourrait faire plus compliqué mais dans cet article je veux juste vous présenter le concept et comment cela fonctionne « sous le capos« . Je vous proposerai une formation dédiée au Web Component pour approfondire le sujet si celui-ci vous intéresse.

En premier nous devons d’abord déclarer une classe pour l’élément personnalisé qui définit le comportement de l’élément. Cette classe doit étendre la class HTMLElement.

Alors on crée un fichier avec notre class:

// créer une class qui extend HTMLElement
class UserDetailsCard extends HTMLElement {
  
  constructor() {
    super();
    // Ajouter un click listener sur notre component
    this.addEventListener('click', e => {
      this.toggleDetails();
    });
  }

  connectedCallback() {
    // get current scoop context
    this.currentDocument = document.currentScript.ownerDocument;
    // Création d'une racine fantôme
    const shadowRoot = this.attachShadow({mode: 'open'});
    // creation du template de base avec une class css pour l'identifié par la suite
    const template = this.currentDocument.createElement('div');
    template.setAttribute('class', 'card__preview');
    // on genere une instance uniqu
    const instance = template.cloneNode(true);
    // et on l'ajout au ShadowDom
    shadowRoot.appendChild(instance);
    // pour finir on peu charger les info user
    this.loadUserData();
  }

  async loadUserData() {
    // on check si l'attribut `api-url` à bien été renseigné
    if(!this.hasAttribute('api-url')) 
      throw new Error('Vous devez implementer le paramettre `api-url` pour faire fonctionner ce component');
    // si oui on récupère l'url et on lance la requête
    const apiUrl = this.getAttribute('api-url');
    // request api to get data
    const {data: user} = await fetch(apiUrl)
      .then(res => res.json())
      .catch((error) => {
          console.error(error);
      });
    // pui on update de ShadowDOM
    this.render(user);
  }

  render(user) {
    // on identifi l'element html à modifier
    const card__preview = this.shadowRoot.querySelector('.card__preview');
    // on ajoute de cpntenu HTML avec les info en provenance de l'api
    card__preview.insertAdjacentHTML('afterbegin', `
      <img class=card__img" src="${user?.avatar}">
      <p class="card__details">
        ${user?.email}<br/>
        ${user?.first_name} ${user?.last_name}
      </p>
    `);
    // on cache le details content
    const card__details = this.shadowRoot.querySelector('.card__details');
    card__details.style.display = 'none';
  }

  toggleDetails() {
    // on identifi la zone à traiter
    const card__details = this.shadowRoot.querySelector('.card__details');
    // get current display mode
    const display = card__details.style.display;
    // switch display mode
    if (display === 'none') {
      card__details.style.display = 'block';
    } else {
      card__details.style.display = 'none';
    }
  }

}

customElements.define('user-details-card', UserDetailsCard);

Dans cet exemple on définit notre élément personnalisé et la logic qui lui est attachée. Cette element est prêt à fonctionner. Il faudra simplement ajouter le polyfills à la page web qui l’utilise pour assurer son bon fonctionnement dans tous les navigateurs.

Voici une petite démo, je vous laisse cliquer sur l’image pour voir la magie opérer:

See the Pen Demo Web Component by fazio (@fazio) on CodePen.

Vous voyez ainsi la force de cette technologie!

Je vous met le lien vers un fichier avec l’exemple final aussi:
https://gist.github.com/FazioNico/cfdf8b3cbbd163d762755ce7523e2f88

Et évidement je vous met aussi le lien de la documentation officiel qui vous aidera à comprendre toutes les subtilité des Web Components: https://developer.mozilla.org/fr/docs/Web/Web_Components/Using_custom_elements

Conclusion

Je n’irai pas plus dans les détails concernant le fonctionnement ou la spécificité des ces élément HTML. Cet article vous permet de comprendre ce que c’est et comment en créer un et l’utiliser simplement. Bien évidemment le sujet est loin d’être couvert complètement. Il y a plein d’autres choses sur lequel je suis passé sans rien dire. Cela aurait été bien trop long pour un simple article de blog de décrypter intégralement le fonctionnement de cette techno.

Si ce sujet vous intéresse ou que vous désirez en savoir plus sur les Web Component, vous pouvez m’écrire je me ferais un plaisir de vous répondre. Sinon il y a une formation que je donne dans le cadre d’une certification en tant que développeur mobile aux Ateliers Nomades qui peuvent vous être utiles. On y apprend à les utiliser et les concevoir avec un Framework de développement pour faciliter la chose.

Voilà, j’espère que cet article vous a plu. N’hésitez pas à aller regarder les autres articles traitant du même sujet dans la section Javascript.

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.