Il y a quelques années, j'ai commencé à entendre beaucoup sur les composants Web. Je suis devenu assez excité, puis je les ai totalement oubliés alors que le bruit s'installait. Il s'avère qu'il y a eu un bon mouvement et que le soutien commence à augmenter. Les composants Web réactifs, en particulier, sont définis pour simplifier vraiment la façon dont nous abordons la conception réactive. Aussi prometteur que cela puisse paraître, il y a quatre questions que de nombreux développeurs voudront savoir avant de commencer à les utiliser aujourd'hui:
Vont-ils…
Dans cet article, nous explorerons les réponses à chacune de ces questions!
Essentiellement, ce sont une spécification W3 qui vous permet de créer vos propres éléments HTML. Si vous ne savez littéralement rien à leur sujet, cela peut être utile de les lire rapidement car certains des termes que j'utilise dans l'article nécessitent une compréhension de base.
Un bon exemple du moment où vous voudrez peut-être utiliser les composants Web serait lorsque vous construisez une interface utilisateur qui n'existe pas nativement dans le navigateur - des éléments tels que des cueilleurs de couleurs, des carrousels, des accordéons ou des types de dactylographie. Alternativement, vous avez probablement des composants que vous utilisez tout le temps sur divers sites que vous en avez assez de reconstruire à chaque fois. Ce sont des choses comme les boutons sociaux, l'abonnement des formulaires ou des notifications. Avec les composants Web, vous pouvez regrouper votre balisage, vos styles et vos scripts dans des modules encapsulés à l'aide de balises HTML comme
Les composants Web vous permettent de construire des pièces d'interface utilisateur une fois et de les utiliser partout. Ceci est idéal pour des projets comme A Living StyleGuide où vous souhaitez construire une bibliothèque avec une seule source de vérité pour chacun de vos composants. Cette approche signifie répéter moins de code et avoir des composants portables que vous ou votre équipe pouvez simplement déposer des références dans votre interface.
Un autre gros avantage de l'utilisation de composants Web est la possibilité de réacturer ces composants et de les partager avec d'autres développeurs ou propriétaires de sites Web. Essentiellement, le consommateur peut mettre une déclaration d'importation dans sa page Web telle que:
<span><span><span><link</span> rel<span>="import"</span> </span></span><span> <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>
Ensuite, utilisez la balise d'élément personnalisée que vous avez définie dans ce composant. Avec cela importé dans leur page Web, ils peuvent avoir autant d'instances du composant personnalisé sur leur page qu'ils le souhaitent. Dans l'exemple de formulaire d'abonnement, nous pourrions utiliser la balise
Je pense que la meilleure façon de démontrer est par l'exemple, donc je vais continuer avec le formulaire d'abonnement qui est un élément d'interface utilisateur courant qui ne change pas beaucoup entre différents sites et implémentations.
En voici un que j'ai fait plus tôt:
À l'intérieur de mon modèle de composant Web, j'ai un balisage de base pour le formulaire.
<span><span><span><ul</span> class<span>="form"</span>></span> </span> <span><span><span><li</span> class<span>="form__item"</span>></span> </span> <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span> </span> <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span> </span> <span><span><span></li</span>></span> </span> <span><span><span><li</span> class<span>="form__item"</span>></span> </span> <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span> </span> <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span> </span> <span><span><span></li</span>></span> </span><span><span><span></ul</span>></span></span>
Mon balisage et CSS sont cachés à l'intérieur de mon composant en utilisant la partie Shadow Dom de la spécification. Cela me donne l'encapsulation, me permettant d'utiliser librement les sélecteurs d'étiquette et d'entrée dans mon code sans souci que d'autres styles saignent ou que la mine saigne dans le site parent.
Pour plus de clarté et de brièveté, je ne vais pas écrire les styles autres que ceux utilisés pour la mise en page. J'ai utilisé une combinaison de float: gauche et affichage: table pour réaliser cette disposition pour empêcher la rupture dans toutes les largeurs.
<span><span>.form__item</span> {
</span> <span>display: table;
</span> <span>float: left;
</span> <span>width: 50%;
</span><span>}
</span>
<span>label {
</span> <span>display: table-cell;
</span> <span>width: auto;
</span><span>}
</span>
<span>input {
</span> <span>display: table-cell;
</span> <span>width: 100%;
</span><span>}</span>J'utiliserai des importations HTML pour la tirer dans le site de point de point comme démonstration:
Maintenant, nous sommes tous mis en place, regardons certaines techniques réactives.
L'approche classique que nous connaissons et que nous aimons est toujours bien vivante et à l'intérieur des composants Web réactifs. Ceux-ci peuvent être appliqués à l'intérieur de votre modèle lorsque vous codez votre composant si vous souhaitez cuire dans certains points d'arrêt, ou si vous pouvez appliquer un crochet (par exemple, en utilisant une classe) au conteneur si vous souhaitez laisser cette décision à votre consommateur. Dans ce cas, tout ce que nous devons faire est de dépouiller les flotteurs et de les ajuster pour être pleine largeur.
<span><span><span><link</span> rel<span>="import"</span> </span></span><span> <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>
Cependant, les requêtes médiatiques ne seront pas suffisantes pour nous sauver cette fois.
Je suis satisfait de mes styles de formulaire d'inscription et cela fonctionne bien dans le corps, mais que se passe-t-il lorsque l'auteur du site Web veut le jeter dans leur barre latérale? Soudain, ma forme semble écrasée et n'est pas vraiment utilisable.
C'est parce que le composant n'est pas au courant de ses limites - il n'a pas de contexte.
Le point entier des composants Web est que vous pouvez les laisser tomber n'importe où et ils fonctionneront juste? Donc, évidemment, cela ne fera pas, mais il existe quelques techniques que vous pouvez utiliser pour vous assurer que vos composants sont réactifs et contextuels.
Si vous envisagez d'utiliser des composants Web, il y a de fortes chances que vous ne preniez que les navigateurs modernes et que vous ne vous inquiétez pas de IE9, auquel cas, un peu de magie Flexbox pourrait être parfait pour vous pour les transformer en composants Web réactifs. Ceci est mon approche préférée car elle ne nécessite aucun javascript supplémentaire.
Encore une fois, l'échantillon de code ici montre purement les styles de mise en page que j'ai utilisés:
<span><span><span><ul</span> class<span>="form"</span>></span> </span> <span><span><span><li</span> class<span>="form__item"</span>></span> </span> <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span> </span> <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span> </span> <span><span><span></li</span>></span> </span> <span><span><span><li</span> class<span>="form__item"</span>></span> </span> <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span> </span> <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span> </span> <span><span><span></li</span>></span> </span><span><span><span></ul</span>></span></span>
en définissant le conteneur pour afficher: flex; Flex-wrap: enveloppement, les éléments .form__item apparaîtront côte à côte, mais nous devons toujours faire quelques ajustements de sorte que lorsque le récipient devient trop petit, ils s'empileront bien.
À l'intérieur du .form__item, j'ai utilisé le raccourci flex de Flex: 1 0 320px; ce qui se traduit en termes flexibles en - grandir d'une, un rétrécissement flexible de zéro et une base flexible de 320 pixels. Le fait d'avoir un jeu de flexion pour envelopper signifie qu'il ne sera pas plus petit que la base que nous définissons (320px) mais la définir pour flexion signifie qu'elle prendra le reste de l'espace disponible.
J'ai donné un traitement similaire à l'étiquette et aux éléments d'entrée. Leurs valeurs flexibles combinées totalisent 320, ce qui signifie qu'ils se comporteront comme souhaité à des tailles de conteneurs plus petites.
Avec ces ajustements en place, jetons un coup d'œil à la même forme dans la barre latérale de SitePoint:
beaucoup mieux! Cependant, il y a plus d'une façon de peau un chat.
L'idée des requêtes d'élément est que vous pouvez imiter la fonctionnalité de type de requête multimédia mais au niveau des composants - très pratique pour les composants Web réactifs. Essentiellement, imaginez pouvoir écrire quelque chose comme ça dans votre CSS:
<span><span>.form__item</span> {
</span> <span>display: table;
</span> <span>float: left;
</span> <span>width: 50%;
</span><span>}
</span>
<span>label {
</span> <span>display: table-cell;
</span> <span>width: auto;
</span><span>}
</span>
<span>input {
</span> <span>display: table-cell;
</span> <span>width: 100%;
</span><span>}</span>avec des requêtes d'élément, c'est exactement ce que nous pouvons faire. Assez puissant non?
Malheureusement, cette technique n'est pas disponible nativement en raison des fournisseurs de navigateur concernant le potentiel de provoquer des boucles infinies. Cependant, certaines personnes intelligentes ont des plugins écrits pour permettre cette fonctionnalité.
Dans mon exemple, j'ai utilisé des requêtes d'élément CSS par Marc J Schmidt qui est une très belle implémentation. Il existe également les projets similaires suivants:
Essentiellement, ce qu'ils font est d'utiliser JavaScript pour détecter la largeur du composant et modifier un attribut afin que vous puissiez le coiffer dans CSS. Certains sont motivés par des événements et certains basés sur le redimensionnement.
<span><span><span><link</span> rel<span>="import"</span> </span></span><span> <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>
Avec la combinaison de l'un de ces plugins et un petit extrait de code similaire à celle ci-dessus, nous pouvons obtenir exactement le même résultat que l'implémentation Flexbox dans la barre latérale.
L'une des choses intéressantes que nous pouvons offrir aux consommateurs de nos composants Web réactifs est une API via des attributs. Par exemple, vous pouvez configurer un attribut appelé Layout et avoir des tailles de «petite» et «grande». Notre consommateur du composant pourrait alors l'utiliser comme suit:
<span><span><span><ul</span> class<span>="form"</span>></span> </span> <span><span><span><li</span> class<span>="form__item"</span>></span> </span> <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span> </span> <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span> </span> <span><span><span></li</span>></span> </span> <span><span><span><li</span> class<span>="form__item"</span>></span> </span> <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span> </span> <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span> </span> <span><span><span></li</span>></span> </span><span><span><span></ul</span>></span></span>
Cela déclencherait les styles de la petite implémentation.
Dans l'ombre DOM, l'élément contenant est connu sous le nom de: hôte. Un exemple pourrait ressembler à:
<span><span>.form__item</span> {
</span> <span>display: table;
</span> <span>float: left;
</span> <span>width: 50%;
</span><span>}
</span>
<span>label {
</span> <span>display: table-cell;
</span> <span>width: auto;
</span><span>}
</span>
<span>input {
</span> <span>display: table-cell;
</span> <span>width: 100%;
</span><span>}</span>Cela permettrait alors au consommateur des composants d'écrire un JavaScript simple à basculer entre les différentes tailles que vous leur avez fournies. Cela signifie qu'au lieu de charger des JavaScript supplémentaires à l'intérieur de votre module, vous pouvez laisser le consommateur à décider comment il veut s'accrocher. Cela permet à votre composant de devenir une preuve plus future.
Si vous souhaitez voir la version Flexbox à laquelle je me réfère dans cette démo en action sur votre propre machine, vous pouvez effectuer ce qui suit dans Chrome:
<span><span>@media (max-width: 30em)</span> {
</span> <span><span>.form__item</span> {
</span> <span>float: none;
</span> <span>width: 100%;
</span> <span>}
</span><span>}</span><span><span>.form</span> {
</span> <span>display: flex;
</span> <span>flex-wrap: wrap;
</span><span>}
</span>
<span><span>.form__item</span> {
</span> <span>align-items: center;
</span> <span>display: flex;
</span> <span>flex: 1 0 320px;
</span> <span>flex-wrap: wrap;
</span> <span>max-width: 100%;
</span><span>}
</span>
<span>label {
</span> <span>flex: 1 0 90px;
</span><span>}
</span>
<span>input {
</span> <span>flex: 1 0 230px;
</span> <span>width: 100%;
</span><span>}</span>Les approches ci-dessus peuvent en fait être utilisées pour tout développement de l'interface utilisateur, mais elles se prêtent particulièrement bien aux composants Web réactifs en raison de leur nature réutilisable et partageable.
Si vous n'avez pas encore vérifié les composants Web, je vous encourage fortement à le faire. Alors que la spécification complète n'est actuellement disponible que nativement dans Chrome et l'opéra, les autres fournisseurs de navigateurs ne sont pas loin derrière.
Si vous êtes intéressant pour en savoir plus sur la conception Web réactive, consultez notre nouveau livre, Jump Start Reactive Web Design, écrit par Chris Ward.Un composant Web réactif bien conçu devrait être flexible, adaptable et efficace. Il devrait avoir un système de grille fluide qui permet à la disposition de s'ajuster en fonction de la taille de l'écran. Il devrait également avoir des images flexibles et des supports qui peuvent redimensionner pour s'adapter à l'écran. De plus, il devrait avoir des requêtes multimédias qui permettent au site Web d'utiliser différentes règles de style CSS pour différents appareils en fonction de caractéristiques telles que la taille de l'écran, la résolution et l'orientation. Enfin, il devrait être efficace en termes de chargement de temps et de performances.
Les requêtes de conteneur CSS, également appelées requêtes d'élément, permettent aux styles d'être appliqué en fonction de la taille d'un conteneur parent plutôt que de la fenêtre. Cela signifie qu'un composant peut adapter sa disposition en fonction de sa propre taille, ce qui le rend vraiment réactif. Ceci est particulièrement utile pour les composants qui sont réutilisés dans différents contextes et doivent s'adapter à leur environnement.
JavaScript joue un rôle crucial dans Création de composants Web réactifs. Il peut être utilisé pour manipuler le DOM, gérer les événements et créer du contenu dynamique. Il peut également être utilisé en conjonction avec les requêtes multimédias CSS pour créer des comportements réactifs plus complexes. Par exemple, JavaScript peut être utilisé pour charger différents scripts ou contenu en fonction de la taille de l'écran ou des capacités de périphérique.
L'accessibilité devrait être une accessibilité à une considération clé lors de la conception de composants Web réactifs. Cela comprend la garantie que le texte est lisible à toutes les tailles d'écran, que les éléments interactifs sont suffisamment grands pour être facilement exploités sur des écrans tactiles, et que le site est navigable avec un clavier pour ceux qui ne peuvent pas utiliser de souris. De plus, vous devez utiliser le HTML sémantique pour fournir un contexte et un sens aux lecteurs d'écran, et vous assurer que le contraste des couleurs est suffisant pour ceux qui souffrent de déficiences visuelles.
Certains défis courants incluent le traitement de différentes tailles d'écran et résolutions, assurant une compatibilité avec différents navigateurs et appareils, et optimiser les performances. Ceux-ci peuvent être surmontés en utilisant une approche mobile-axée, en testant sur une variété d'appareils, en utilisant la détection des fonctionnalités pour assurer la compatibilité et l'optimisation des images et des scripts pour les performances.
Les composants Web réactifs peuvent avoir un impact positif sur le référencement. Les algorithmes de Google favorisent les sites Web qui sont adaptés aux mobiles, et la conception réactive en est un aspect clé. De plus, avoir un seul site réactif plutôt que des versions de bureau et mobiles séparées évite les problèmes de contenu en double, ce qui peut avoir un impact négatif sur le référence sont plusieurs outils et techniques pour tester la réactivité des composants Web. Il s'agit notamment de redimensionner la fenêtre de votre navigateur pour voir comment la mise en page s'adapte, en utilisant les fonctionnalités d'émulation de l'appareil dans des outils de développeur de navigateur et en utilisant des outils en ligne comme le test convivial de Google.
L'avenir des composants Web réactifs est susceptible d'impliquer des techniques et des technologies plus avancées. Cela pourrait inclure des choses comme les requêtes de conteneurs, qui sont actuellement en cours de développement, ainsi que plus d'utilisation de l'IA et de l'apprentissage automatique pour adapter les dispositions en fonction du comportement et des préférences de l'utilisateur.
Il existe de nombreuses ressources disponibles pour apprendre les composants Web réactifs. Il s'agit notamment de tutoriels et de cours en ligne, de livres et de forums communautaires. De plus, expérimenter la création de vos propres composants réactifs et étudier le code des autres peut être un excellent moyen d'apprendre.
Oui, là-bas sont de nombreux frameworks et bibliothèques disponibles qui peuvent vous aider à créer des composants Web réactifs. Il s'agit notamment de Bootstrap, Foundation et React, entre autres. Ces outils fournissent des composants et des dispositions pré-conçus qui sont déjà réactifs, ce qui vous fait gagner du temps et des efforts. Cependant, il est toujours important de comprendre les principes sous-jacents de la conception réactive afin d'utiliser efficacement ces outils.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Pourquoi le stockage local échoue-t-il si rapidement ?
La différence entre une demande d'obtention et une demande de publication
Logiciel de base de données couramment utilisé
python configurer les variables d'environnement
Explication détaillée de l'opérateur de déplacement Java
Application de plateforme de trading Ouyi
FIL vaut-il la peine d'être détenu à long terme ?
Qu'est-ce qu'une fonction en ligne
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
