Share
On parle actuellement avec enthousiasme des composants Web comme d'un "changement tectonique pour le développement Web" avec la promesse d'une refonte permanente du paysage de la conception Web. Les grands acteurs vont de l'avant pour intégrer les composants Web à la réalité. Google et Mozilla sont déjà en train de déployer progressivement le support de navigateur natif.
Quels sont les composants Web que vous demandez? En un mot, les composants Web vous permettent de créer vos propres éléments HTML personnalisés, capables de faire à peu près tout ce dont vous avez besoin. Au lieu de charger vos sites avec un balisage détaillé, de longs scripts et du code répétitif, vous intégrez le tout dans de petits éléments HTML personnalisés, soignés et agréables..
Le moyen le plus simple de comprendre comment les composants Web autorisent les éléments HTML personnalisés consiste tout d'abord à examiner un élément existant déjà connu de HTML5: étiquette. En utilisant cet élément, vous pouvez placer une vidéo avec seulement quelques lignes de code, par exemple:
Vous voyez peut-être seulement quelques lignes de code HTML ci-dessus, mais voici ce que le element ressemble vraiment dans les coulisses:
Par défaut, le navigateur masque tout ce code prolixe. Vous n'avez donc pas besoin de le voir ni de l'écrire lorsque vous souhaitez placer une vidéo. Vous venez de frapper dans votre et
Auparavant, seuls les éditeurs de navigateurs pouvaient créer des éléments de cette manière. Mais imaginez si vous pouviez utiliser cette même approche vous-même avec d'autres types de contenu?
Prenez un diaporama d'images par exemple. En règle générale, vous aurez besoin de quelques tours de divs imbriquées portant des noms de classes spécifiques pour gérer le diaporama, les diapositives et l'ajout de légendes et de vignettes. Vous devez également définir les options de diaporama globales pour des choses telles que les effets de transition entre diapositives via des scripts jQuery / JavaScript en ligne..
Et si vous pouviez ignorer tout cela et utiliser à la place:
Avec les composants Web, c'est exactement ce que vous pouvez faire..
Si vous souhaitez fournir une méthode concise, facile à utiliser avec une méthode de placement de contenu qui serait autrement gonflé et difficile à manier, vous pouvez créer votre propre composant Web..
Les composants Web peuvent également être facilement partagés. Par conséquent, il est fort à parier que les développeurs s’approprient un composant Web prédéfini pour répondre aux besoins les plus courants du projet. Nous voyons déjà apparaître des composants librement partagés pour tout, de la reconnaissance vocale…
aux constructeurs de présentations…
à la génération de code QR.
Voyons ce qu'il y a derrière le rideau des composants Web.
Les composants Web, tels qu'ils existent actuellement, sont composés de quatre éléments:
Les éléments personnalisés ressemblent exactement à ce qu’ils ressemblent: des éléments qui peuvent être nommés comme vous le souhaitez et fonctionnent comme vous le souhaitez. Et quand je dis n'importe quoi, de toute façon, je le pense vraiment. Par exemple, je présente le
Démo en direct - survolez le barLes éléments personnalisés sont déclarés, dans leur forme la plus simple, comme suit:
…
Lorsque vous créez un élément personnalisé, vous pouvez le faire complètement à partir de zéro ou étendre un élément HTML existant, tel que par exemple, et donnez-lui la fonctionnalité ou la présentation modifiée dont vous avez besoin.
…
Remarque: il convient de souligner que le
Le DOM Shadow est l’aspect essentiel du fonctionnement des composants Web. Plus tôt, nous avons examiné le HTML5 élément et a montré comment, même si on ne voit que quelques lignes de code, il y a en réalité un peu de code caché par défaut. L'emplacement de ce code caché s'appelle le "DOM Shadow"..
Les fournisseurs de navigateurs utilisent ce DOM fantôme depuis des années pour implémenter de manière native des éléments tels que l’entrée, l’audio, la vidéo, etc. Grâce aux composants Web, il peut maintenant être utilisé par tout développeur..
L'idée générale est que vous prenez tout le code qui n'a pas vraiment besoin d'être vu pendant le placement du balisage et que vous l'observez dans le DOM Shadow afin qu'il ne vous gêne pas. Cela vous laisse n’avoir à traiter que les informations pertinentes, par exemple la hauteur, la largeur et l’emplacement du fichier source lors de l’utilisation de élément.
L'un des aspects les plus intéressants du travail avec le DOM Shadow est que chaque instance est son propre petit monde autonome. Ainsi, si l'élément et les scripts contiennent des styles et des scripts, ils ne fuiront pas accidentellement et n'auront aucune incidence sur la page..
Inversement, les CSS et JavaScript situés ailleurs sur la page n'affecteront pas votre composant Web, à l'exception des crochets de style que vous pourriez créer spécifiquement pour permettre le ciblage CSS externe. Tout cela signifie que vous n'avez plus à vous soucier d'espacer les noms de votre identifiant et de vos noms de classe pour éviter les conflits.
Si vous voulez voir à quoi ressemble le DOM fantôme, rien de plus simple. Assurez-vous que vous exécutez une installation de Chrome à jour, ouvrez les outils de développement, cliquez sur l'icône représentant une roue dentée pour ouvrir les paramètres et cochez la case intitulée Afficher le DOM shadow de l'agent utilisateur:
Ensuite, lorsque vous inspectez un élément avec un DOM fantôme, vous voyez son code complet. Essayez-le en inspectant le
Pour un récapitulatif complet sur le shadow DOM, consultez: Intro to Shadow DOM
Nous avons déjà expliqué comment des éléments personnalisés permettent uniquement de se concentrer sur les informations pertinentes, alors que tout le code restant est masqué dans le DOM fantôme. Un modèle dans un composant Web est ce qui contient tous les éléments de présentation de ce code restant..
Dans le cadre du code qui définit le composant Web, les balises … sont placés, et entre ces balises, tout code HTML et CSS dont le composant a besoin est inclus.
Par exemple, regardez le code qui a créé le la balise est sur la ligne 4 et sa fermeture La balise est en ligne 201. Entre ces balises, vous verrez tous les CSS responsables de la création du positionnement et de l'animation, ainsi que le code HTML qui place chacune des images impliquées..
Les importations HTML vous permettent de prendre tout ce qui est décrit ci-dessus et de le faire fonctionner sur votre page. Les composants Web sont définis dans un fichier HTML externe. Ce fichier doit donc être importé pour qu'un élément personnalisé puisse fonctionner. Les importations HTML gèrent cela via un balise, que vous serez familiarisé avec l'importation de fichiers CSS externes.
Par exemple, avant de pouvoir utiliser le
Les possibilités offertes par les composants Web font que l’idée de plonger tête la première pour les utiliser est très attrayante, mais pour le moment, la prise en charge du navigateur n’est pas encore opérationnelle. L'état actuel du support ressemble à ceci:
http://jonrimmer.github.io/are-we-componentized-yet/Le support natif est en cours d'implémentation pour Chrome, Opera et Firefox mais n'est pas encore complet. IE et Safari n'ont pas encore communiqué leurs plans. Cependant, étant donné que la majorité des navigateurs prendront en charge les composants Web, les autres navigateurs feront probablement de même..
À l'heure actuelle, si vous souhaitez commencer à utiliser des composants Web, vous devez utiliser l'un des polyfill disponibles. La bonne nouvelle est que deux des solutions les plus populaires sont créées par Google et Mozilla. Nous pouvons donc nous attendre à une certaine cohérence avec le fonctionnement final du support natif..
Il est difficile de ne pas vouloir utiliser Polymer, car Chrome est maintenant le navigateur le plus utilisé. Vous pouvez en déduire que le développement du code du composant Web sera pris en compte par Google..
Polymer est livré avec une bibliothèque complète de composants Web prédéfinis. Il comprend les "éléments de polymère" qui sont orientés de manière fonctionnelle, et les "éléments de papier" qui sont orientés conception.
Lors de la création d'éléments personnalisés avec Polymer, au lieu d'utiliser le format
Polymer se décrit lui-même comme étant dans "l'aperçu du développeur" plutôt que comme étant tout à fait prêt pour la production, mais ils disent aussi
… Malgré le label, beaucoup de gens ont déjà réussi à utiliser Polymer en production.
Si vous devez prendre en charge IE9, qui devrait représenter environ 1,9% à 5,11% du marché, vous n’avez malheureusement pas de chance avec Polymer. Cependant, vous pouvez toujours utiliser les balises X de Mozilla.
X-Tags est une bibliothèque JavaScript créée par Mozilla qui présente actuellement un avantage sur Polymer en ce sens que la prise en charge de son navigateur est plus étendue. Si c'est une considération majeure pour vous, les X-Tags peuvent être votre préférence.
À l'heure actuelle, si vous devez prendre en charge IE8, les composants Web ne sont malheureusement pas susceptibles de vous intéresser, car les polyfills disponibles prennent en charge IE9 +. Selon les estimations, les utilisateurs d'IE8 se situeraient entre 2,1% et 3,82%, mais bien sûr, si vos propres statistiques disent différemment, vous devrez faire appel à votre jugement pour déterminer jusqu'où le support de votre navigateur devrait s'étirer.
Une façon possible de vous préparer à utiliser des composants Web consiste à utiliser Ember.js ou AngularJS pour le moment. Tous deux ont leurs propres systèmes de création de composants et promettent de passer à l'utilisation du code de composant Web natif dès qu'il sera pleinement disponible..
J'espère que vous avez apprécié la lecture de ce résumé des composants Web et des raisons pour lesquelles vous devriez vous en soucier! Il y a beaucoup plus à approfondir, mais avec ces principes fondamentaux couverts, nous avons beaucoup de possibilités pour des tutoriels sur la création de composants Web personnalisés. Qu'est-ce que tu penses? Dans quelles circonstances pourriez-vous vous voir les utiliser?
Accentsconagua