Un terrier de lapin dans le développement Web / Blogs / Perficient

Récemment, j’ai découvert un nouveau logiciel Adobe et je suis tombé sur la ligne de code import Theme from "@swc-react/theme". Cela m’a rapidement plongé dans le terrier de l’éducation au développement Web…

• Une recherche rapide me montre que "@swc-react/theme" est Wrappers React pour les composants Web Spectrum.

• Une autre recherche montre que Composants Web Spectrum est une implémentation particulière d’Adobe Spectrum qui utilise Composants Web ouvertsLe générateur de projets de.

• Qu’est-ce que Composants Web ouverts? Eh bien, quoi que ce soit, cela repose sur quelque chose appelé Allumé.

• Qu’est-ce que Allumé? C’est une bibliothèque JavaScript qui s’appuie sur Composants Web.

• Au bout du terrier du lapin, on apprend que Composants Web est un ensemble de fonctionnalités HTML et JavaScript modernes qui permettent la mise en œuvre de « composants », qui sont des éléments modulaires et paramétrables en HTML d’une page Web qui ont leurs propres HTML, JavaScript et CSS associés. Les composants sont généralement implémentés par des frameworks plus lourds tels que React ou Angular.

Bien sûr, peu de détails clarifiants que j’ai ajoutés dans les puces ci-dessus m’étaient clairs lors de mon premier séjour dans le terrier du lapin.

Ce qui suit est un article qui présente le contenu pertinent du terrier du lapin dans une approche plus fondamentale et « ascendante ».

« Composants Web est une suite de différentes technologies [standard to HTML and JavaScript] vous permettant de créer des éléments personnalisés réutilisables – avec leurs fonctionnalités encapsulées du reste de votre code – et de les utiliser dans vos applications Web.

La « suite de différentes technologies » sont constituées de l’API JavaScript des éléments personnalisés, de l’API JavaScript Shadow DOM et de l’API Javascript des éléments personnalisés. <template> et <slot> Éléments HTML.

Éléments personnalisés (API JavaScript)

Le éléments personnalisés L’API JavaScript permet

• extension des éléments HTML intégrés, tels que <p>afin qu’un élément HTML étendu puisse être utilisé en HTML avec du code tel que <p is="word-counter"> . (L’argument de is précise quelle extension de <p> est utilisé.) Ceux-ci sont appelés éléments intégrés personnalisés.

• création de nouveaux éléments HTML portant de nouveaux noms de balises tels que <custom-element>. Ceux-ci sont appelés éléments autonomes (HTML).

Un élément personnalisé est implémenté sous la forme d’une classe qui s’étend soit

• une interface correspondant à un élément HTML, dans le cas d’une extension d’un élément HTML existant

  ou

• HTMLElementdans le cas de la création d’un nouvel élément HTML

La classe devra implémenter plusieurs « fonctions de rappel du cycle de vie ». La classe, disons Clsest ensuite transmis à window.customElementRegistry.define("my-custom-element", Cls).

Shadow DOM (API JavaScript)

Le ombre DOM L’API JavaScript permet des arborescences DOM « cachées », appelées arbres d’ombreà attacher aux éléments de l’arborescence DOM normale. Les arbres d’ombre sont masqués dans le sens où ils ne sont pas sélectionnés par des outils tels que document.querySelectorAll(). Ils permettent l’encapsulation car aucun code contenu dans une arborescence fantôme ne peut affecter la partie de l’arborescence DOM globale qui est son parent.

Les arbres d’ombre sont effectués en utilisant

<template>

Le <template> Élément HTML n’est pas réellement rendu par le navigateur. Au lieu de cela, quand template est le JavaScript Element représentant un <template> élément HTML (par exemple const template = document.querySelectorAll("#some-template")), nous sommes censés rendre manuellement* template.content. Ce rendu manuel se fait en écrivant du code tel que document.body.appendChild(template.content).

Mais quand même, à quoi ça sert ? A ce stade, tout ce que nous savons sur <template> est-ce que son utilisation nécessite le rendu manuel du HTML. Cela semble inutile !

*template.content est du type DocumentFragmentqui est une structure de données qui représente template.innerHTML. Vous pouvez lire des informations sur une situation dans laquelle vous voudriez utiliser DocumentFragment sur innerHTML ici. Je ne comprends pas comment utiliser DocumentFragment est largement supérieur à innerHTML dans ce scénario, mais il y a probablement un petit avantage en termes de performances.

Rainurage

<template> devient très utile lorsqu’il est associé au <slot> élément. Le <slot> L’élément nous permet de définir des parties du <template> HTML interne qui est variable afin que nous puissions ultérieurement « plug-in » du HTML personnalisé dans ces parties du <template> HTML interne.

Afin d’obtenir cette fonctionnalité de <slot>il faut effectivement utiliser <slot> aux côtés des concepts d’éléments personnalisés et de shadow DOM, car c’était ainsi <slot> a été conçu pour être utilisé.

Éléments personnalisés à fente

Nous décrivons maintenant comment <slot> est utilisé avec des éléments personnalisés, le shadow DOM et des modèles pour implémenter un élément personnalisé « à fente ».

1. Incluez du code tel que

<template id = "some-template">
    ...
    <slot name = "some-slot"> default text </slot>
    ...
</template>

dans le HTML.

2. Dans la classe qui définit un élément personnalisé, écrivez un constructeur qui crée une arborescence fantôme en incluant const shadowRoot = this.attachShadow({mode: "open"}) dans le constructeur.

3. Dans le même constructeur, juste après la création de l’arbre fantôme, définissez template.content être le code HTML interne de l’arbre fantôme : shadowRoot.attachChild(template.content.cloneNode(true)).

(Pour voir un exemple de ceci, inspectez cette page Web avec les outils de développement de votre navigateur.)

Nous voyons que les trois concepts d’éléments personnalisés, de shadow DOM et de modèles sont tous impliqués. (1) et (3) concernent les modèles, (2) concernent le shadow DOM et (2) et (3) apparaissent dans le constructeur de l’élément personnalisé !

Mais comment <slot> entrer en jeu ? Eh bien, supposons qu’un élément personnalisé appelé « some-element » soit configuré de la manière ci-dessus. Et puis le HTML

<some-element> </some-element>

est interprété par le navigateur comme étant le HTML interne du modèle avec le code HTML interne du modèle <slot> élément remplaçant le modèle <slot> élément. Ainsi, le navigateur affichera le HTML

...
default text
...

Alternativement, le HTML

<some-element>
    <div slot = "some-slot"> replacement text </div>
</some-element>

est interprété par le navigateur comme étant le HTML interne du modèle avec le code HTML interne du nouveau spécifié <slot> élément remplaçant le modèle <slot> élément. Ainsi, le navigateur affichera le HTML

...
replacement text
...

Le type d’élément personnalisé ci-dessus implémente l’idée d’un composant modernece qui est

• facilement réutilisable

• encapsulé (dans le sens où le code d’un composant est distinct des autres composants et n’affecte pas l’état ou le comportement des autres composants)

• permet le paramétrage du HTML avec <slot>

Nous avons vu que l’écriture du type d’élément personnalisé ci-dessus nécessite beaucoup de passe-partout. Nous pourrions éliminer le passe-partout en écrivant une classe qui implémente les fonctionnalités modernes des composants. Le constructeur de la classe prendrait comme argument le HTML qui doit sous-tendre le composant moderne.*.

* Si <slot> fonctionnalité est utilisée, alors le HTML qui doit sous-tendre le composant moderne contiendra le même type de <slot> élément qui <template> fait ci-dessus.

Allumé

Allumé est une bibliothèque qui fournit une classe, LitElementqui met en œuvre cette notion de composant moderne. Comme le dit la documentation de Lit, l’avantage de cette approche est que, puisque les composants modernes s’appuient sur des API HTML et JavaScript standard, ils sont pris en charge par presque tous les navigateurs Web (c’est-à-dire tous les navigateurs Web prenant en charge les API HTML et JavaScript requises), et ne nécessitent aucun framework tel que Angular ou React pour s’exécuter.

Composants Web ouverts

Composants Web ouverts est un site Web qui « donne un ensemble de recommandations et de valeurs par défaut » sur la façon d’écrire des composants Web modernes ». La page « Mise en route » recommande que pour commencer à développer un composant Web, vous devez utiliser leur package npm en exécutant npm init @open-wcqui génère un exemple de composant Lit.

Composants Web Spectrum est l’implémentation « sans framework » ou « aussi proche que possible de Vanilla JS » d’Adobe Spectrum. Les composants Web Spectrum sont des composants Lit et étendent ainsi LitElement.

Wrappers React pour les composants Web Spectrum

« swc-réagir est une collection de composants wrapper React pour la bibliothèque Spectrum Web Components (SWC), vous permettant d’utiliser facilement SWC dans vos applications React. Il s’appuie sur le package @lit/react pour fournir une intégration transparente entre React et la bibliothèque SWC.

Pourquoi ne pas simplement utiliser les composants React Spectrum ?

Les composants swc-react et React sont deux technologies qui implémentent l’idée d’un composant d’une manière ou d’une autre. Je pense que si nous utilisons React, ne serait-il pas plus naturel d’utiliser simplement les composants React et de ne pas importer une bibliothèque supplémentaire qui rend les composants Lit utilisables dans React ? Bien, Documentation Adobe dit :

Nous vous recommandons d’utiliser swc-réagir sur Réagir au spectre dans vos modules complémentaires basés sur React, car il propose actuellement un ensemble plus complet de composants qui offrent des avantages intégrés comme détaillé ci-dessus dans le Section Composants Web Spectrumet est soutenu plus activement.

Donc je suppose que cela répond à ma question 🙂