Les composants Web vous permettent de créer des éléments HTML personnalisés. Vous trouverez les composants Web les plus fréquemment utilisés dans les frameworks JavaScript frontaux modernes. Mais les "composants Web" sont en fait une norme Web du W3C et n'ont pas besoin d'un framework pour être utiles.
Les composants Web fonctionnent comme Lego pour HTML. Il s'agit d'un ensemble de technologies qui contribuent à rendre HTML plus utile et réutilisable. Pour plus d'informations, consultez la spécification des composants Web W3 et la page du réseau de développeurs Mozilla sur les composants Web.
Ces technologies sont :
Examinons-les tour à tour.
Les éléments personnalisés sont des éléments HTML spéciaux que JavaScript rend plus fonctionnels. Ils sont mieux utilisés pour afficher des données toujours à jour sans rappels. Vous pouvez également leur donner le nom que vous voulez.
Les modèles sont des morceaux réutilisables de HTML. Ils sont parfaits pour les éléments qui se trouvent à plusieurs endroits ou sur plusieurs pages, comme les en-têtes, les pieds de page et les menus.
Le DOM est le ciment qui lie ce que vous voyez dans le navigateur au code HTML. Le DOM fantôme est une partie du DOM qui vous permet de séparer le balisage, le style et les fonctionnalités.
En utilisant le DOM fantôme, chaque élément personnalisé peut obtenir son propre DOM. Cela empêche le style et les fonctions JavaScript de modifier les éléments que vous ne voulez pas voir affectés.
Ce sont les bibliothèques JavaScript spéciales qui font fonctionner les composants Web.
L'un des principaux avantages des composants Web est que vous pouvez réutiliser votre code HTML personnalisé n'importe où. Étant donné que les composants Web sont en HTML et JavaScript simples, ils sont compatibles avec les applications JavaScript vanille, ainsi qu'avec les frameworks. Vous pouvez en savoir plus sur webcomponents.org.
Le moyen le plus simple de commencer à utiliser des composants Web consiste à utiliser un framework. Avant même que les composants Web n'existent, Angular.js fournissait une fonctionnalité similaire appelée directives. Ils effectuaient une grande partie du même travail que les composants, avant que les composants ne deviennent une norme.
Maintenant que les composants sont un standard, il existe d'autres frameworks qui s'appuient sur le concept de composant Web. Ils simplifient et rationalisent l'utilisation des composants Web, tout en éliminant une grande partie de la complexité de l'utilisation de JavaScript de bas niveau.
Vue.js est un framework frontal basé sur des composants populaire qui est un favori parmi les développeurs. Vue est facile à apprendre et facile à programmer. Le cadre facilite également l'ajout de composants simples aux sites Web HTML de base.
React est un framework frontal qui a été largement adopté commercialement. Ce framework est également un favori parmi les développeurs. React est surtout connu pour simplifier le développement Web en mettant HTML, CSS et JavaScript dans un seul script.
Pour en savoir plus, consultez notre liste de didacticiels pour apprendre React à créer des applications Web.
Vous pouvez écrire des composants Web en JavaScript simple. Mais c'est difficile à faire, surtout pour les débutants. Il existe cependant des bibliothèques légères que vous pouvez ajouter à votre code existant. Ils vous offrent la facilité des pratiques JavaScript modernes sans les frais généraux élevés d'un framework complet.
Polymer est la contribution de Google au mouvement des composants Web. Il s'agit d'une collection de bibliothèques légères qui facilitent la création d'éléments personnalisés par rapport à du JavaScript simple. Il dispose de bibliothèques pour créer des éléments personnalisés ainsi que des modèles.
Polymer dispose d'une bibliothèque de polyfills pour assurer la compatibilité avec les anciens navigateurs. Il existe également une version anticipée des composants de conception matérielle pour ajouter la conception matérielle au HTML brut.
Une autre option est Slim.js, une bibliothèque tout-en-un qui facilite l'ajout à un site Web simple. Il rationalise le processus de création d'éléments personnalisés et fournit un accès direct au DOM fantôme.
Le dernier mais non le moindre est l'excellent Stencil, qui vous offre le meilleur des deux mondes. Il est similaire à React et fournit une grande partie des mêmes fonctionnalités. Mais il vous offre cette fonctionnalité au niveau du framework sans vous enfermer dans un framework lourd.
Stencil pré-compile également vos composants, ce qui les rend plus légers. En revanche, des frameworks comme React chargent l'ensemble du framework dans le navigateur et compilent les composants à la volée. Au moment où les composants Stencil arrivent dans le navigateur, ils ne sont que du JavaScript et du HTML vanille sans bagages supplémentaires.
L'un des principaux obstacles à l'utilisation des composants est la perte de frameworks de conception, comme Bootstrap. Techniquement, vous pouvez utiliser Bootstrap avec un site Web basé sur des composants. Et il y a un port Bootstrap pour React. Mais si vous souhaitez utiliser quelque chose comme Stencil ou Vue, vous serez peut-être mécontent du manque de compatibilité entre vos composants et le framework.
La bonne nouvelle est qu'il existe plusieurs cadres de conception parmi lesquels choisir. Vaadin fournit de beaux composants. Pour une saveur d'entreprise, il y a OpenUI5. Et comme déjà mentionné, Polymer de Google propose également des composants d'interface utilisateur Material.
La mauvaise nouvelle est que vous ne trouverez pas la même expérience que vous obtenez de Bootstrap dans aucun de ces frameworks. Et il leur manque de nombreux éléments que vous voyez dans la plupart des cadres de conception, comme la typographie.
Une technologie différente, comme les composants Web, mérite une approche différente. Tachyons est la meilleure approche. Il est plus facile à utiliser pour les concepteurs, mais il peut donner aux développeurs une base solide et propre. Tachyons est d'abord mobile et offre une cohérence de conception qui est subtile mais génère de beaux résultats.
Tachyons décompose les classes CSS à la plus petite utilisation possible. Par exemple, voici comment créer un bouton en l'utilisant :
Texte du bouton
Dans la plupart des frameworks de conception, vous donneriez au lien une classe de bouton et une autre classe pour arrondir les angles. Dans Tachyons, vous choisissez votre rembourrage, bordure, couleur, etc. à la volée. Toutes les abréviations peuvent sembler compliquées au premier abord, mais elles suivent un modèle de dénomination cohérent et facile à apprendre.
La plus petite classe possible est une approche qui ne fonctionne pas pour les sites Web traditionnels car elle obstrue vos classes HTML. Mais avec une architecture basée sur des composants, vous allez probablement utiliser ce même bouton encore et encore dans votre application. Cela signifie que vous n'avez besoin de créer ce bouton qu'une seule fois pour l'ensemble de votre site Web.
Un autre obstacle est de faire en sorte que votre cerveau passe de la mise en page traditionnelle des sites Web à la structure basée sur les composants. Il existe deux techniques pour vous aider à apprendre à penser en composants.
Considérez une page Web comme un organisme. Les parties comme la section des héros, le guide des prix et les avis des utilisateurs sont comme les cellules de l'organisme. Ce sont des pièces que vous pouvez déplacer en toute sécurité vers leurs propres composants, que vous les réutilisiez ou non.
Les boutons, les en-têtes et les guillemets sont comme des atomes. Les atomes sont la plus petite partie possible. Quand cela n'a pas de sens de décomposer davantage un composant, c'est un atome. Ce sont généralement des composants que vous utiliserez encore et encore tout au long de votre projet et éventuellement entre les projets.
Ou vous pouvez simplement oublier toutes ces absurdités d'organismes, de cellules et d'atomes et les garder au SEC. DRY signifie Ne vous répétez pas.
Tout, grand ou petit, peut être un composant. Alors écrivez simplement votre code HTML comme d'habitude. Lorsque vous trouvez quelque chose que vous souhaitez réutiliser, comme une galerie ou un pied de page, divisez-le en son propre composant.
Les principaux points à prendre en compte sont votre équipe et les normes Web.
Tous les principaux navigateurs ont adopté des composants Web. CanIUse évalue les composants personnalisés à un taux d'adoption de 93 % et les modèles à 95 %, de sorte qu'ils peuvent être utilisés en toute sécurité. Et il existe des polyfills pour les quelques retardataires qui ne prennent pas en charge les composants Web. Cela signifie que la conformité n'est pas un problème.
Si vous avez une équipe sans expérience dans les frameworks ou JavaScript, ils peuvent avoir du mal à adopter cette nouvelle technologie. Mais ils auraient probablement du mal à adopter une nouvelle technologie si tel était le cas. Et si vous êtes seul, foncez ! C'est toujours une bonne idée de développer vos compétences.
Les aspects les plus difficiles de l'adoption de composants Web sont la pénurie de cadres de conception et l'apprentissage de la réflexion en termes de composants. Mais nous avons couvert les deux. Les composants Web existent depuis 2014, ils ne sont donc pas une nouvelle technologie. Mais ils sont une meilleure technologie.