Composants web 

Nous allons voir au travers de cette page une introduction complète aux composants web pour l’année 2023. Aujourd’hui il est très important de connaître les composants web. 

I. C’est quoi un composant web

Un composant web est une unité de code encapsulée et à responsabilité unique, qui peut être réutilisée sur différentes pages. Il permet de créer des fonctionnalités spécifiques, comme la balise HTML <vidéo>, qui offre des contrôles de lecture, de pause, de retour en arrière, d’avance rapide et de réglage du volume grâce à une URL spécifiée.

Les composants web fournissent un style et des fonctionnalités prédéfinis, mais vous pouvez les personnaliser en utilisant divers attributs et appels API JavaScript. Vous pouvez placer autant d’éléments <vidéo> que vous le souhaitez à l’intérieur d’autres balises, sans qu’ils entrent en conflit les uns avec les autres. Mais que faire si vous avez besoin d’une fonctionnalité personnalisée qui n’existe pas encore, comme une balise HTML <wordcount> pour afficher le nombre de mots sur une page ? C’est là que les frameworks tels que React et Vue.js entrent en jeu. Ils permettent aux développeurs de créer des composants web dans un seul fichier JavaScript, où le contenu, le style et la fonctionnalité sont définis. Ces frameworks sont utiles pour résoudre des problèmes de programmation complexes. 

Heureusement, les concepts populaires introduits dans les bibliothèques et les frameworks finissent généralement par être intégrés aux normes web. Bien que cela prenne du temps, les composants web sont désormais une réalité et offrent des avantages considérables pour le développement web.

II. L’histoire des composants web

Après plusieurs essais infructueux liés aux fournisseurs spécifiques, le concept de composants web standard a été introduit en 2011. Deux ans plus tard, la bibliothèque Polymer de Google (un polyfill basé sur les propositions actuelles) a été lancée, mais les premières implémentations n’ont été intégrées à Chrome et Safari qu’en 2016. Les fournisseurs de navigateurs ont pris du temps pour négocier les détails, mais les composants web ont été ajoutés à Firefox en 2018 et à Edge en 2020, lorsque Microsoft a adopté le moteur Chromium.

Il est compréhensible que peu de développeurs aient été prêts ou en mesure d’adopter les composants web, mais nous avons finalement atteint un bon niveau de prise en charge des navigateurs avec des API stables. Bien que tout ne soit pas parfait, les composants web deviennent une alternative de plus en plus viable aux composants basés sur des frameworks. Même si vous n’êtes pas encore prêt à abandonner votre framework préféré, il est important de noter que les composants web sont compatibles avec tous les frameworks existants et que les API correspondantes seront prises en charge pendant de nombreuses années à venir.

III. Comment commencer à utiliser les composants web

Les composants web sont des éléments HTML personnalisés, tels que <Welcome-all></Welcome-all>. Le nom de l’élément doit contenir un tiret pour éviter tout conflit avec les éléments officiellement pris en charge dans la spécification HTML.

Pour contrôler le comportement de l’élément, vous devez définir une classe ES2015. Cette classe peut avoir n’importe quel nom, mais « Welcomeall » est couramment utilisé. Elle doit étendre l’interface HTMLElement, qui représente les propriétés et méthodes par défaut de chaque élément HTML. Pour rendre le composant fonctionnel, la classe doit inclure une méthode appelée connectedCallback() qui est appelée lorsque l’élément est ajouté à un document.

Le navigateur associe maintenant l’élément <Welcome-all> à votre classe Welcomeall lorsque votre fichier JavaScript est chargé (par exemple, <script type= »module » src= »./welcomeall.js »></script>).

Félicitations, vous avez maintenant créé un élément personnalisé ! Pour que l’élément soit reconnu et utilisable, vous devez l’enregistrer auprès du CustomElementRegistry en tant que gestionnaire d’un élément spécifique. 

Ajouts d’attributs :  Ce composant n’est pas très utile car le texte reste le même quoi qu’il arrive. Comme pour tout autre élément, nous pouvons ajouter des attributs HTML :

• <Welcome-all name= »Jean »></Welcome-all>

De cette manière, nous pourrions remplacer le texte affiché par « Welcome Jade! ». Pour y parvenir, vous pouvez ajouter une fonction constructor() à la classe Welcomeall, qui est exécutée chaque fois qu’un objet est créé. Elle doit :

• Appeler la méthode super() pour initialiser le parent HTMLElement, et
• Effectuer d’autres initialisations. Dans ce cas, nous définirons une propriété « name » qui sera par défaut « All » :
  • class Welcomeall extends HTMLElement {
  •   constructor() {
  •     super();
  •     this.name = ‘all’;
  •   }
  •   
  •   // plus de code…
  • }

Votre composant ne se soucie que de l’attribut « name ». Une méthode statique observedAttributes() doit renvoyer un tableau des propriétés à observer :

• • static get observedAttributes() {
  •   return [‘name’];
  • }

Une méthode attributeChangedCallback() est appelée lorsqu’un attribut est défini dans le HTML ou modifié à l’aide de JavaScript. Elle reçoit le nom de la propriété, l’ancienne valeur et la nouvelle valeur :

• • attributeChangedCallback(property, oldValue, newValue) {
  •   if (oldValue === newValue) return;
  •   this[property] = newValue;
  • }

Dans cet exemple, seule la propriété « name » sera mise à jour, mais vous pouvez ajouter d’autres propriétés si nécessaire. Enfin, vous devez modifier le message dans la méthode connectedCallback() :

• • connectedCallback() {
  •   this.textContent = `Welcome${this.name}!`;
  • }

Méthodes du cycle de vie : 

Le navigateur appelle automatiquement six méthodes tout au long du cycle de vie d’un composant web. Voici la liste complète, bien que vous ayez déjà vu les quatre premières dans les exemples précédents :

• constructor()

Cette méthode est appelée lorsque le composant est initialisé pour la première fois. Elle doit appeler super() et peut définir des paramètres par défaut ou effectuer d’autres traitements préliminaires.

• static observedAttributes()

Cette méthode renvoie un tableau d’attributs que le navigateur observera et sur lesquels il appellera attributeChangedCallback() lorsque leur valeur change.

• attributeChangedCallback(propertyName, oldValue, newValue)

Cette méthode est appelée à chaque fois qu’un attribut observé est modifié. Les attributs définis en HTML sont transmis immédiatement, mais ils peuvent également être modifiés via JavaScript. Cette méthode peut nécessiter un nouveau rendu lorsque cela se produit.

• connectedCallback()

Cette méthode est appelée lorsque le composant web est ajouté au DOM (Document Object Model). Elle doit effectuer tout rendu nécessaire pour afficher le composant correctement.

• disconnectedCallback()

Cette méthode est appelée lorsque le composant web est retiré du DOM. Elle peut être utile pour effectuer des tâches de nettoyage, telles que la suppression de l’état stocké ou l’annulation des requêtes Ajax.

• adoptedCallback()

Cette méthode est appelée lorsqu’un composant web est déplacé d’un document à un autre. Bien que son utilité puisse être limitée, elle peut être utilisée dans certains cas particuliers. Ces méthodes permettent de gérer efficacement le cycle de vie d’un composant web et de réagir aux modifications d’attributs ou à son insertion/retrait du DOM.

IV. Comment les composants web interagissent avec les autres éléments

Les composants web interagissent avec les autres éléments en utilisant les fonctionnalités standard du navigateur pour manipuler le DOM (Document Object Model). Ils peuvent ajouter, supprimer ou modifier des éléments, des attributs et des contenus dans le document.

Les composants web peuvent également accéder aux propriétés et aux méthodes des autres éléments grâce à l’API JavaScript. Ils peuvent lire et modifier les valeurs des attributs, appeler des méthodes définies sur d’autres éléments, ou même écouter et réagir aux événements déclenchés par d’autres éléments. Lorsqu’un composant web est imbriqué dans un autre élément, il fonctionne comme n’importe quel autre élément HTML. Il peut être positionné, stylisé et manipulé de la même manière que les autres éléments. Les interactions avec d’autres éléments, tels que les événements de souris ou de clavier, sont également gérées de manière transparente par le navigateur. De plus, les composants web peuvent être utilisés en combinaison avec d’autres frameworks ou bibliothèques JavaScript. Ils peuvent être intégrés dans des applications existantes et interagir avec d’autres composants ou modules de l’application.

En résumé, les composants web sont conçus pour s’intégrer de manière harmonieuse avec les autres éléments HTML et offrir une modularité et une réutilisabilité accrues dans le développement web. Ils utilisent les fonctionnalités standard du navigateur pour interagir avec les autres éléments, manipuler le DOM et réagir aux événements, ce qui permet de créer des interfaces web flexibles et dynamiques.

V. Comment utiliser des composants web dans d’autres frameworks

Tout composant web que vous créez fonctionnera dans tous les frameworks JavaScript, indépendamment de leur connaissance des éléments HTML. Lorsque vous utilisez un composant web personnalisé tel que <Welcome-all>, il sera traité de la même manière qu’un élément standard comme <div> et sera intégré dans le DOM, activant ainsi sa classe.

Sur le site custom-elements-everywhere.com, vous trouverez une liste de frameworks avec des notes sur leur compatibilité avec les composants web. La plupart des frameworks sont entièrement compatibles, bien que React.js présente quelques difficultés. Dans React.js, vous pouvez utiliser <Welcome-all> dans du JSX, mais il y a quelques limitations :

• React ne peut transmettre que des types de données primitifs aux attributs HTML, ce qui signifie que les tableaux ou les objets ne peuvent pas être transmis directement.
• React ne peut pas écouter les événements des composants web, vous devrez donc attacher manuellement vos propres gestionnaires d’événements.

Malgré ces limitations, il est possible d’utiliser des composants web personnalisés dans React.js en prenant en compte ces considérations spécifiques. Cela vous permet de tirer parti de la réutilisabilité des composants web tout en travaillant avec le framework de votre choix.

VI. Les critiques et les problèmes liés aux composants web

Bien que les composants web aient suscité un grand intérêt et une certaine adoption, ils ont également été confrontés à certaines critiques et défis. Tout d’abord, l’adoption des composants web a été relativement lente. Les développeurs ont souvent été réticents à abandonner leurs frameworks et bibliothèques existants au profit des composants web. Un autre défi est la compatibilité entre navigateurs. Bien que les principaux navigateurs prennent en charge les composants web, il peut y avoir des différences d’implémentation qui nécessitent des ajustements pour assurer une expérience cohérente sur tous les navigateurs.

On peut aussi citer le fait que les composants web sont dépendants des navigateurs, ce qui signifie que leur évolution et leur prise en charge dépendent des mises à jour des navigateurs. Cela peut entraîner des retards dans la disponibilité de certaines fonctionnalités ou des problèmes de compatibilité avec d’anciennes versions de navigateurs. La complexité du développement est également un défi associé aux composants web. La création de composants web bien conçus et maintenables nécessite une bonne compréhension des concepts, tels que la gestion des états, la communication entre composants et la gestion des événements. 

Enfin, les problèmes de migration et de rétrocompatibilité peuvent se poser lorsque vous décidez d’adopter les composants web dans un projet existant. Malgré cela, les composants web continuent de progresser et offrent des avantages potentiels en termes de modularité, de réutilisabilité et de facilité de maintenance.

Conclusion sur l’introduction complète aux composants web : 

Si vous lisez ceci, c’est que vous avez lu une introduction complète aux composants web. Vous savez ce que c’est, comment l’utiliser. Vous avez vu leur histoire brièvement. Comment ils interagissent avec les autres éléments, comment les utiliser dans d’autres framework et pour finir vous avez vu les différentes critiques et problèmes liés à ces derniers.