Web Component : créer des composants Web autonomes et réutilisables

Formation Professionnelle

2024 - v1.0.0

Votre formateur

Noël Macé

Tour de table

Règles à respecter

  1. Répondez à l’appel et/ou signez la feuille d’émargement pour chaque demi-journée
  2. En cas de retard, attendez la prochaine pause pour rejoindre la salle de cours afin de ne pas perturber la classe
  3. Durant une présentation magistrale :
    1. Levez la main et attendez d’être désigné par le formateur avant d’intervenir / poser une question
    2. Évitez toute discussion et bruit susceptible de perturber la classe
  4. Tout propos ou acte discriminant, violent ou irrespectueux envers toute personne impliquée dans la formation amènera à une exclusion immédiate et automatique du cours et sera reportée à l’organisme de formation

Objectifs de cette formation

Contexte et déroulement

La norme des Web Components

Qu’est-ce qu’un Web Component ?

Standards des Web Components

  1. Custom Elements
    Permet de définir des balises HTML personnalisées.

  2. Shadow DOM
    Fournit un encapsulage des styles et du DOM.

  3. HTML Templates
    Permet de créer des fragments HTML réutilisables.

  4. HTML Imports (obsolète)
    Charge des ressources HTML externes (non recommandé).

Rappels DOM & AJAX

Document Object Model (DOM)

AJAX : Asynchronous JavaScript And XML

Template HTML à chargement différé

Le rôle des templates HTML

<template id="my-template">
  <p>Bonjour, je suis un template !</p>
</template>

Template HTML à chargement différé

Le rôle des templates HTML

Utilisation des templates

  1. Sélectionner le template :

    const template = document.getElementById('my-template');

  2. Cloner son contenu :

    const clone = template.content.cloneNode(true);

  3. Ajouter au DOM :

    document.body.appendChild(clone);

Shadow DOM et CSS : Encapsulation

Le Shadow DOM, c’est quoi ?

Avantages du Shadow DOM

CSS : Le besoin d’encapsulation

Problème des styles globaux

Solution : Shadow DOM + Scoped Styles

class StyledButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
              <style>
                  .btn {
                      color: white;
                      background-color: blue;
                      border: none;
                      padding: 10px;
                      cursor: pointer;
                  }
                  .btn:hover {
                      background-color: darkblue;
                  }
              </style>
              <button class="btn">Cliquez-moi</button>
          `;
  }
}
customElements.define('styled-button', StyledButton);

Résultat attendu

Custom Elements

Qu’est-ce qu’un Custom Element ?

Syntaxe de base

  1. Définir une classe pour l’élément :

    class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<p>Bonjour, Web Component !</p>`;
  }
}

  2. Enregistrer l’élément :

customElements.define('my-element', MyElement);

Exemple d’utilisation

Une fois défini, l’élément peut être utilisé dans une page HTML :

<my-element></my-element>

Méthodes du cycle de vie

Exemple : Cycle de vie en action

class LifecycleElement extends HTMLElement {
  connectedCallback() {
    console.log('Element inséré dans le DOM');
  }

  disconnectedCallback() {
    console.log('Element retiré du DOM');
  }

  static get observedAttributes() {
    return ['data-example'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribut ${name} changé de ${oldValue} à ${newValue}`);
  }
}

// Enregistrement du Custom Element
customElements.define('lifecycle-element', LifecycleElement);

// Exemple d'utilisation dans le DOM
const element = document.createElement('lifecycle-element');
document.body.appendChild(element);

// Modification d'un attribut
element.setAttribute('data-example', 'test-value');

// Suppression de l'élément
document.body.removeChild(element);

Résultat attendu

  1. Lors de l’insertion de l’élément dans le DOM : Element inséré dans le DOM
  2. Lors du changement d’attribut : Attribut data-example changé de null à test-value
  3. Lors du retrait de l’élément du DOM : Element retiré du DOM

Avantages des Web Components

Pourquoi utiliser les Web Components ?

  1. Réutilisabilité :

    • Les composants peuvent être utilisés sur plusieurs projets sans modification.
    • Exemples : boutons, cartes, modales.

  2. Encapsulation :

    • Protection des styles et du comportement.
    • Aucune interférence avec les styles globaux.

  3. Interopérabilité :

    • Fonctionnent avec tous les frameworks JavaScript (React, Angular, Vue, etc.).
    • Compatibles avec du JavaScript natif.

  4. Maintenance facilitée :

    • Code plus modulaire.
    • Séparation claire des responsabilités (HTML, CSS, JS).

Limites actuelles

  1. Performance :

    • Le Shadow DOM peut ajouter une légère surcharge si utilisé massivement.

  2. Compatibilité :

    • Nécessite des polyfills pour certains anciens navigateurs.

  3. Complexité initiale :

    • Courbe d’apprentissage plus élevée pour les débutants.

Étape pratique : Créer un composant simple

Objectif

Créer un composant personnalisable pour afficher un message d’alerte.

Étape 1 : Définir le composant

  1. Code HTML :
<alert-box type="success"> Opération réussie ! </alert-box>
  1. Code JavaScript :
class AlertBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const type = this.getAttribute('type') || 'info';
    const message = this.innerHTML;

    this.shadowRoot.innerHTML = `
            <style>
                .alert {
                    padding: 10px;
                    margin: 5px 0;
                    border-radius: 4px;
                }
                .success { background-color: #d4edda; color: #155724; }
                .error { background-color: #f8d7da; color: #721c24; }
                .info { background-color: #d1ecf1; color: #0c5460; }
            </style>
            <div class="alert ${type}">
                ${message}
            </div>
        `;
  }
}
customElements.define('alert-box', AlertBox);

Étape 2 : Tester dans le navigateur

  1. Ajoutez le script dans une page HTML.
  2. Insérez une balise <alert-box> avec différents types (success, error, info).
  3. Observez le rendu et testez la personnalisation.

Web Components et frameworks JavaScript

Intégration avec des frameworks modernes

  1. React :

    • Utilisez un Custom Element comme une balise standard.

    • Exemple :

      function App() {
  return <my-element />;
}

  2. Vue.js :

    • Utilisez directement les Web Components dans les templates Vue.

    • Exemple :

      <template>
  <my-element></my-element>
</template>

  3. Angular :

    • Activez schemas: [CUSTOM_ELEMENTS_SCHEMA] dans le module Angular.

    • Exemple :

      @NgModule({
    declarations: [...],
    imports: [...],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Bénéfices

Avantages et limites des Web Components

Points forts

  1. Réutilisabilité : Partager des composants entre projets.
  2. Interopérabilité : Fonctionnent avec ou sans framework.
  3. Encapsulation : Protection des styles et comportement.

Limites

  1. Support des anciens navigateurs : Polyfills nécessaires.
  2. Complexité initiale : Apprentissage des nouvelles API.
  3. Performance : Shadow DOM peut entraîner une légère surcharge.

Perspectives

Rôle des développeurs

Rappel des sujets abordés

1. La norme des Web Components

2. Concepts fondamentaux

3. Pratique et cas d’usage

4. Mise en perspective

Questions ?

Merci pour votre attention

N’OUBLIEZ PAS !!!