){kind=small}
Premiers pas avec les composants Web
Temps de lecture : 10 minutes
Les frameworks et bibliothèques JavaScript, nous sommes tous d'accord pour dire qu'il y en a beaucoup. Angular, React, Vue, Svelte - la liste semble s'allonger chaque année. Mais qu'ont-ils tous en commun ? La réponse est qu'ils sont utilisés pour construire des applications sur le web, et qu'ils offrent la possibilité de créer des composants réutilisables.
Et si vous pouviez créer des composants basés sur les normes web existantes, des composants qui ne dépendent pas du cadre ou de la bibliothèque utilisés pour coller le tout dans une application ? C'est là qu'interviennent les composants Web.
Voici quelques entreprises dont vous avez peut-être entendu parler et qui mettent en œuvre des composants Web :
Logos of companies using Web Components. Google, Salesforce, Electronic Arts, Twitter, YouTube and GitHub
Google : de nombreuses propriétés dont le framework de composants web AMP (source)
Salesforce : Lightning Web Components (source)
Twitter : Tweets intégrés (source)
GitHub : La page "Mis à jour il y a" (source)
YouTube : Le site est construit à l'aide de Web Components (source)
Voyons plus en détail comment Electronic Arts (EA) utilise les composants Web. (source)
EA est l'une des plus grandes sociétés de jeux vidéo, avec plus de 22 studios et 10 000 personnes réparties sur 30 sites dans le monde entier. Inutile de dire qu'ils sortent beaucoup de jeux (NBA Live, Star Wars, Les Sims, Battlefield, etc.).
Au début, l'équipe web a pris l'habitude de concevoir et de développer le site web de chaque jeu indépendamment, un site à la fois. Comme vous pouvez l'imaginer, cela a entraîné un manque de cohérence pour les utilisateurs qui parcouraient tous les jeux proposés par EA. La situation était également difficile pour les concepteurs et les développeurs qui travaillaient sur les sites. Ils passaient 80 % de leur temps sur le "Commodity Web" (c'est-à-dire la navigation, les pieds de page et les galeries de médias) au lieu de créer des expériences personnalisées pour chaque titre de jeu.
Pour inverser ce rapport, le système de conception de réseau (NDS) a été créé. Avec le NDS, ils ont pu prendre les composants du Commodity Web et les ajouter :
Possibilités de création de thèmes
Capacité à s'intégrer dans n'importe quel langage et n'importe quel cadre
Soutien à l'architecture de leur micro-site
Livraison sous forme d'interface utilisateur en tant que service (UIaaS)
Et vous savez qui d'autre a probablement utilisé les composants Web ?
Vous. Vous êtes-vous déjà demandé comment il était possible de définir simplement l'attribut "src" sur un fichier <video> ou <audio> et d'avoir un lecteur entièrement fonctionnel avec des boutons, un contrôle du volume, une barre de progression, un minuteur et d'autres options ? Web Components.
Examinons un exemple tout aussi facile à utiliser, mais qui comporte beaucoup plus d'éléments en coulisses : le composant Web model-viewer développé par Google.
Voici le code nécessaire pour afficher un modèle 3D :
<!-- Import the component -->
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">https://unpkg.com/@google/model-viewer/dist/model-viewer.js</a>
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js</a>
<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>Avec une simple balise HTML, vous pouvez intégrer un modèle 3D sans avoir besoin de connaître WebGL et l'API WebXR.
Voici le composant Web de visualisation de modèle mis en œuvre dans et sans cadre / bibliothèque :
Nous espérons que le fait de voir qui utilise les composants Web et ce qu'il est possible de créer avec eux vous donne envie de savoir comment créer les vôtres.
Comme indiqué précédemment, les composants Web reposent sur des normes Web. Ces API de bas niveau consistent en
Éléments personnalisés
Ombre DOM
Modèles HTML
API des éléments personnalisés : Permet d'enregistrer un élément personnalisé sur la page.
Doit inclure un trait d'union/tiret (majuscule), c'est-à-dire mon-élément-personnalisé. Pas d'éléments à un seul mot pour éviter les conflits de noms.
C'est un objet de classe qui définit son comportement.
Détermine également les éléments intégrés que les éléments personnalisés étendent, le cas échéant, c'est-à-dire l'entrée (HTMLnputElement), le bouton (HTMLButtonElement), etc.
API Shadow DOM : Facilite une méthode pour attacher un DOM séparé à un élément
Il fournit une encapsulation qui permet de séparer le style, la structure et le comportement du code extérieur. Il aide à "...contenir le brut" - Paul Lewis (source)
Permet de remapper les événements, c'est-à-dire de transformer un clic en quelque chose de plus significatif.
API de modèles HTML : Crée un modèle flexible qui sera inséré dans le DOM des éléments personnalisés.
le contenu de l'élément
<template>n'est pas rendu immédiatement. Nous définissons la structure HTML en amont et la clonons au besoin par le biais de JavaScript.Utilisé pour rendre efficacement le HTML et le mettre à jour lorsque l'utilisateur interagit avec notre composant web.
Pour les modèles plus complexes, il peut être plus facile d'utiliser une bibliothèque, un cadre ou un outil.
Voici un exemple de composant Web que j'ai écrit avec des commentaires pour expliquer ce qui se passe.
Si vous vous interrogez sur la prise en charge des navigateurs, sachez que les composants Web sont pris en charge par les navigateurs modernes.
Table showing browser support for Web Components.
Pour les navigateurs plus anciens, vous pouvez utiliser les polyfills : https://www.webcomponents.org/polyfills
Chez Vonage, nous créons des composants Web pour construire un système de conception comme celui d'Electronic Arts mentionné plus haut. Notre objectif est de permettre aux utilisateurs d'assembler facilement des composants pour créer des choses telles que des applications de chat sans avoir à se préoccuper de ce qui se passe dans les coulisses.
Voici quelques ressources pour plus d'informations sur les composants Web :
L'exemple de composant Web que j'ai créé était simple. Au fur et à mesure que la complexité d'un composant augmente, l'utilisation d'un outil peut faciliter le développement. Dans le prochain billet de blog, nous comparerons différents frameworks et outils de création de composants Web.