Actuellement, et depuis un certain temps déjà, la plupart des développements se font sous l’égide d’un framework. Si nous nous concentrons sur le front-end et JavaScript, nous pouvons trouver des dizaines de frameworks. Il est difficile de réutiliser des éléments d’interface graphique comme des boutons ou d’autres composants lorsque vous le souhaitez, car chacun d’eux a des qualités distinctives.
Que sont les composants Web ?
Les composants Web sont un ensemble d’éléments provenant de différentes technologies standardisées, telles que HTML, CSS et JavaScript, qui forment une structure qui leur permet d’être utilisés dans d’autres sites Web ou applications. Ces technologies permettent la création d’éléments personnalisés à la fois en termes de fonctionnalité et d’apparence. L’un de leurs points forts est qu’ils sont indépendants du framework, ils peuvent donc être utilisés dans n’importe quel framework JavaScript. Cela permet d’avoir une bibliothèque de composants partagés tout en ayant diverses plateformes et technologies. Il peut être très utile pour unifier et entretenir une image de marque de manière plus simple.
Le World Wide Web Consortium (W3C), également connu comme l’organisation qui a fondé Internet tel que nous le connaissons aujourd’hui, a développé cette méthode en 2012 pour normaliser toutes les technologies fondamentales du Web.
Pourquoi utiliser des composants Web ?
La plupart des développements Web sont effectués dans un cadre JavaScript tel que Angular, Vue ou des bibliothèques bien connues telles que React JS. Tous ces frameworks et bibliothèques sont très utiles pour les développeurs, car ils leur fournissent une série d’outils qui rendent le développement plus rapide et plus fiable.
Cependant, ce ne sont pas toutes de bonnes nouvelles car les développeurs ont souvent besoin d’utiliser les mêmes composants dans différents projets utilisant différents frameworks ou bibliothèques. Ils sont par conséquent obligés de réécrire ces parties avec du code en double. Cela pose une difficulté en termes de maintenabilité car le développeur doit effectuer ces modifications autant de fois que le composant a été répliqué afin de traiter d’éventuels problèmes et intégrer de nouvelles fonctionnalités ou ajustements.
Cela peut être résolu en utilisant des composants Web, qui permettent le développement de composants individualisés utilisant HTML, CSS et JavaScript qui ne dépendent pas de frameworks ou de bibliothèques. En d’autres termes, cela signifie que le développeur n’a besoin de les construire qu’une seule fois pour les utiliser dans tous les projets.
Il existe également un autre cas où l’utilisation de composants web peut être intéressante. Disons qu’une entreprise a une image corporative forte mais utilise des plateformes ou des outils web différents. Il peut être difficile d’unifier le style des boutons ou d’autres éléments avec le même design. Avec l’approche des composants Web, les concepteurs peuvent créer une collection de pièces qui correspondent à l’image de l’entreprise, et les développeurs n’ont qu’à l’implémenter une seule fois, grâce au catalogue partagé de pièces.
Spécifications des composants Web
Les composants Web reposent sur quatre spécifications principales, comme expliqué ci-dessous :
Éléments personnalisés
Les éléments personnalisés sont un ensemble d’API qui permettent au développeur de créer de nouvelles balises HTML. Vous pouvez définir le comportement et la manière dont il doit être créé au niveau visuel. Il existe deux types d’éléments personnalisés :
- Éléments personnalisés autonomes : utilisé pour créer des éléments HTML complètement nouveaux.
- Élément intégré personnalisé : utilisé pour étendre des éléments HTML existants ou d’autres composants Web.
DOM fantôme
L’API shadow DOM vous permet d’isoler des fragments du DOM d’origine, de sorte que vous pouvez masquer les éléments internes qui composent un élément plus grand affiché dans le DOM. Le comportement interne est similaire à celui d’une iframe, ce qui permet d’isoler son contenu du reste du document, mais il a une différence : avec le shadow DOM, le contrôle total sur le contenu interne est conservé. Ce processus d’isolement des éléments de leur environnement s’appelle encapsulation et empêche le code CSS et JavaScript de fuir dans d’autres éléments personnalisés.
Modules SE
Avant l’existence des modules ES, JavaScript n’avait pas de système de modules comme les autres langages. Afin d’injecter du code JavaScript dans les applications, des balises telles que <script/> ont été utilisés, et plus tard d’autres façons de définir des modules sont apparues, comme CommonJS, mais aucune d’entre elles n’a été normalisée.
Les modules ES semblaient fournir une solution standard à ce problème. Maintenant, nous l’avons inclus dans JavaScript ES6, et cela nous permet de regrouper certaines fonctionnalités dans une bibliothèque et de les réutiliser dans d’autres fichiers JavaScript.
Modèles HTML
Ces modèles HTML vous permettent de créer des extraits de code réutilisables en tant que HTML mais qui ne sont pas rendus immédiatement au chargement de la page. Les modèles peuvent être insérés au moment de l’exécution dans le document principal à l’aide de JavaScript, et les ressources internes ne sont exécutées qu’au moment où les éléments sont insérés dans le document. Peu importe le nombre de fois qu’un modèle est utilisé, il n’est lu qu’une seule fois, ce qui garantit de bonnes performances.
Ce système crée initialement un modèle vide afin qu’il n’interfère pas avec le reste de l’application et n’affiche le contenu de ce modèle que lorsque cela est nécessaire, garantissant ainsi à nouveau de bonnes performances.
Compatibilité
La compatibilité des composants Web est très large. Tous les navigateurs Evergreen (Chrome, Firefox et Edge) le prennent en charge sans aucun problème. Ils prennent en charge toutes les API (éléments personnalisés, modèles HTML, shadow DOM et modules ES).
Bien que la compatibilité soit large, il existe quelques exceptions, comme Internet Explorer et Safari. Dans le cas d’Internet Explorer, l’incompatibilité est due à sa fermeture par Microsoft, qui supprimera l’accès le 14 février 2023. Comme pour Safari, il y a certaines fonctionnalités qui sont compatibles et d’autres qui ne le sont pas. Les éléments personnalisés autonomes qui ont été expliqués ci-dessus sont 100% compatibles avec Safari. Cependant, le DOM fantôme n’a pas encore été implémenté, et après un débat en 2013 entre les ingénieurs de Google et d’Apple, il a été décidé que les éléments intégrés personnalisés n’allaient pas non plus être implémentés.
Défis des composants Web
Les composants Web ont dû faire face à différents défis pour trouver leur place et rendre leur implémentation intéressante. Ils ont beaucoup évolué; cependant, il y a encore place à l’amélioration.
Intégration avec les styles généraux
La gestion de l’écrasement des styles généraux dans l’application est l’un des défis auxquels les composants Web ont été confrontés et pour lequel ils disposent actuellement de solutions quelque peu complexes. Pour cela, il existe plusieurs options :
- N’utilisez pas Shadow DOM : Vous pouvez ajouter les styles directement à l’élément personnalisé, bien que cela laisse le code ouvert à certains scripts pour le modifier accidentellement ou par malveillance.
- Utilisez la : classe d’hôte : Cette classe vous permet de sélectionner un élément personnalisé dans le DOM fantôme et de le styliser d’une manière spécifique.
- Utilisation des propriétés personnalisées CSS : Les propriétés ou variables personnalisées sont connectées en cascade dans les composants Web, donc si votre élément utilise une variable, vous pouvez la définir à l’intérieur:racine et il pourra être utilisé sans problème.
- Utilisation des parties d’ombre : Avec le nouveau :partie sélecteur, vous pouvez accéder à une partie d’un arbre fantôme. Par conséquent, cette nouvelle méthode vous permet de styliser une partie spécifique d’un élément personnalisé.
- Passer les styles sous forme de chaîne : Les styles peuvent être passés en tant que paramètre à appliquer à l’intérieur du bloc