Qu’est-ce que l’architecture basée sur les composants et pourquoi est-ce important?

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 "Web Components" est en fait un standard Web du W3C et n'a pas besoin d'un framework pour être utile.

Que sont les composants Web?

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 Mozilla Developer Network sur les composants Web .

Ces technologies sont:

• Éléments personnalisés
• Modèles HTML
• Le DOM de l'ombre
• Modules ES

Jetons un coup d'œil à ceux-ci à son tour.

Éléments personnalisés

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 les nommer comme vous le souhaitez.

Modèles HTML

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 de l'ombre

Le DOM est le ciment qui lie ce que vous voyez dans le navigateur au code HTML. Le DOM Shadow fait partie du DOM qui vous permet de séparer le balisage, le style et les fonctionnalités.

En utilisant le DOM shadow, 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 être affectés.

Modules ES

Ce sont les bibliothèques JavaScript spéciales qui permettent aux composants Web de fonctionner.

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 du HTML et du JavaScript simples, ils sont compatibles avec les applications JavaScript vanilla, ainsi qu'avec les frameworks. Vous pouvez en savoir plus sur webcomponents.org .

Composants Web avec un framework

Le moyen le plus simple de commencer à utiliser des composants Web est d'utiliser un framework. Avant même que les composants Web n'existent, Angular.js fournissait une fonctionnalité similaire appelée directives. Ils ont fait 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 facilitent 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

Vue.js est un framework front-end basé sur des composants populaire qui est un favori parmi les développeurs. Vue est facile à apprendre et à programmer. Le cadre facilite également l'ajout de composants simples aux sites Web HTML de base.

En relation: Qu'est-ce que Vue.js?

Réagir

React est un framework front-end 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 regroupant HTML, CSS et JavaScript dans un seul script.

Pour en savoir plus, jetez un œil à notre tour d' horizon de didacticiels pour apprendre à React à créer des applications Web .

Composants Web sans framework

Vous pouvez écrire des composants Web en JavaScript brut. 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.

Polymère

Polymer est la contribution de Google au mouvement des composants Web. C'est une collection de bibliothèques légères qui facilitent la création d'éléments personnalisés qu'avec du JavaScript brut. Il dispose de bibliothèques pour créer des éléments personnalisés ainsi que des modèles.

Polymer a une bibliothèque pour polyfills pour assurer la compatibilité avec les anciens navigateurs. Il existe également une version précoce des composants de conception de matériaux pour ajouter la conception de matériaux au HTML simple.

Svelte

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 shadow.

Pochoir

Le dernier mais non le moindre est l'excellent Stencil, qui vous offre le meilleur des deux mondes. Il est similaire à React et fournit beaucoup des mêmes fonctionnalités. Mais cela vous donne cette fonctionnalité au niveau du cadre sans vous enfermer dans un cadre robuste.

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 bagage supplémentaire.

Composants Web et conception Web

L'un des principaux obstacles à l'utilisation de composants est la perte de cadres de conception, comme Bootstrap . Techniquement, vous pouvez utiliser Bootstrap avec un site Web basé sur des composants. Et il existe un port Bootstrap pour React. Mais si vous souhaitez utiliser quelque chose comme Stencil ou Vue, vous pouvez être mécontent du manque de compatibilité entre vos composants et le framework.

Cadres de conception Web traditionnels

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 mentionné déjà, Polymer de Google propose également des composants Material UI .

La mauvaise nouvelle est que vous ne trouverez pas la même expérience que celle 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.

Qu'est-ce que l'approche du cadre de conception basé sur les composants?

Une technologie différente, comme les composants Web, mérite une approche différente. Tachyons est la meilleure approche. C'est plus facile à utiliser pour les concepteurs, mais cela peut donner aux développeurs une base solide et propre. Tachyons est d'abord mobile et offre une cohérence de conception subtile tout en générant 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:

 <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>

Dans la plupart des cadres de conception, vous donneriez au lien une classe de bouton et une autre classe pour arrondir les coins. Dans Tachyons, vous choisissez votre rembourrage, bordure, couleur, etc. à la volée. Toutes les abréviations peuvent sembler compliquées au début, 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 l'architecture basée sur les composants, vous allez probablement utiliser le même bouton à plusieurs reprises dans toute votre application. Cela signifie que vous ne devez créer ce bouton qu'une seule fois pour l'ensemble de votre site Web.

Penser en composants

Un autre obstacle consiste à amener votre cerveau à passer de la mise en page traditionnelle de sites Web à une structure basée sur des composants. Il existe deux techniques pour vous aider à apprendre à penser en composants.

L'approche atomique

Considérez une page Web comme un organisme. Les parties comme la section des héros, le guide des prix et les critiques 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.

L'approche DRY

Ou vous pouvez simplement oublier tout ce non-sens d'organisme, de cellule et d'atome et le garder SEC . DRY signifie Ne vous répétez pas.

Tout, grand ou petit, peut être un composant. Alors écrivez simplement votre 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.

Devez-vous utiliser des composants Web dans votre prochain projet?

Les principaux points à considérer sont votre équipe et les standards du 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% , afin qu'ils soient sûrs à utiliser. 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 des frameworks ou JavaScript, elle peut 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 c'est une meilleure technologie.