Liens rapides
Dans le monde en constante évolution du développement de sites Web, les développeurs sont constamment à la recherche d'outils et de technologies permettant d'améliorer l'expérience utilisateur et de simplifier l'interaction avec les sites Web. L'un de ces outils modernes et puissants est la bibliothèque htmx, qui offre une approche innovante pour un développement de sites Web plus rapide et plus fluide.
La communauté du développement Web a été très occupée à parler de HTML ces derniers temps, mais quelle est cette nouvelle technologie passionnante ? Il s'avère que c'est beaucoup plus simple que prévu, mais les avantages de HTML peuvent justifier le battage médiatique.
Dans ce contexte, notre nouvel article explique comment utiliser htmlx pour faciliter et améliorer les performances de votre site web. Nous examinerons les fonctionnalités de cette technologie et comment elle peut mieux faciliter l'interaction entre l'utilisateur et le site Web. Nous examinerons les cas d'utilisation pour lesquels htmx est le mieux adapté et comment les développeurs peuvent tirer le meilleur parti de ses capacités pour rendre un site Web plus interactif. Vérifier Améliorer le développement Web avec des éléments HTML créatifs et puissants : conseils pour développer vos compétences.
Qu'est-ce que le HTML ?
htmx est une petite bibliothèque JavaScript avec un objectif précis. Il rend les fonctionnalités JavaScript courantes disponibles via les attributs HTML. Voici un exemple simple :
<a href="/about" hx-get="/about">About</a>
Ce code affiche un attribut HTML Personnalisé, hx-obtenez. Si vous cliquez sur ce lien, la bibliothèque htmx enverra une demande AJAX Chargement de la page cible sans actualiser complètement le navigateur.
htmx a des fonctionnalités supplémentaires qui vous permettent d'envoyer des requêtes :
- D'éléments autres que a et formulaire.
- Dans les événements autres que cliquer et soumettre.
- Utilisez des méthodes HTTP autres que ÉCONOMISEZ et POSTEZ.
- Cela remplace toutes les parties de la page au lieu du tout.
Bien que htmx prenne en charge des technologies telles que les animations CSS et WebSockets, son objectif principal est de simplifier le traitement des requêtes HTTP.
Comment utiliser HTML dans une application Web simple
htmx gère des fonctionnalités spécifiques au sein des applications Web ou des sites Web, plutôt que le comportement de l'ensemble de l'application.
L’un des grands avantages de la bibliothèque est la facilité avec laquelle il est possible de commencer à l’utiliser. Vous pouvez télécharger et installer une copie si vous le souhaitez, mais comme elle n'a pas de dépendances, il vous suffit pour commencer d'ajouter un lien vers le script sur le CDN :
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
Pour le développement et les tests locaux, vous aurez besoin de : Configurer un serveur Web, comme Apache, si aucun serveur n'est déjà en cours d'exécution. C'est une exigence, même si vous n'expérimentez qu'avec des fichiers statiques, car le protocole file: n'autorise pas les requêtes AJAX.
Un exemple simple utilisant le défilement infini
Note: Vous pouvez télécharger cet exemple simple depuis Référentiel GitHub Le sien.
Le défilement infini est une technique courante utilisée par des sites Web comme Twitter dans leur flux. Lorsque vous arrivez au bas de la liste, le défilement infini charge plus d'éléments pour vous permettre de continuer à lire.
Cette fonctionnalité nécessite naturellement JavaScript pour vérifier la position de défilement de la page et charger de nouveaux éléments sans actualiser la page. Mais HTML peut faire tout cela pour vous.
Prenez la balise suivante qui représente une liste de publications, en utilisant une image pour chacune :
<ol>
<li><img src="http://placekitten.com/420/300" /></li>
<li><img src="http://placekitten.com/400/320" /></li>
<li><img src="http://placekitten.com/440/300" /></li>
<li><img src="http://placekitten.com/420/340" /></li>
<li><img src="http://placekitten.com/300/200" /></li>
</ol>
Imaginez que vous ayez ces éléments dans un fichier, Feed1.html, avec d'autres éléments dans Feed2.html, et ainsi de suite. Chaque page affichera alors un petit sous-ensemble d'éléments que vous pourrez parcourir :
Désormais, vous pouvez utiliser les liens Page suivante pour passer d'une page à une autre, mais vous pouvez également facilement implémenter un défilement infini. Remplacez simplement le dernier élément par :
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
L'ajout de ces quatre attributs à l'élément de menu final implémente un défilement infini. Voici ce que signifie chaque attribut :
| Attribut | La valeur | Signification |
|---|---|---|
| déclencheur hx | révélé | Lorsque cet élément apparaît pour la première fois à l'écran... |
| hx-obtenir | flux2.html | … envoyer une demande ÉCONOMISEZ Vers Feed2.html,... |
| hx-sélectionner | li | …sélectionner des éléments li D'après la réponse,... |
| échange hx | fin | ...et ajoutez-le après cet élément. |
En faisant défiler la liste, remarquez comment la page charge automatiquement le nouveau contenu. Vous pouvez le confirmer en observant le curseur et en vérifiant les outils de développement dans votre navigateur :
Notez qu'avec cette configuration de page statique simple, la page Feed2.html inclut un élément final avec l'attribut hx-get défini sur Feed3.html, et ainsi de suite. Notez également comment la bibliothèque htmx a ajouté un écouteur pour l'événement scroll. Vérifier Comment arrêter le défilement infini pour un site Web spécifique.
Autres utilisations possibles pour htmx
Vous pouvez utiliser HTML pour de nombreuses autres interactions courantes, notamment :
- numérotation des pages: Charge et remplace les éléments lorsqu'un visiteur clique sur un lien de pagination.
- Validation du modèle: Lors de la soumission, remplacez le formulaire soit par un message de confirmation, soit par un sous-ensemble du formulaire.
- Barres de progression : Mettez à jour périodiquement la valeur de la barre de progression en fonction de la réponse ping.
- Édition en ligne: Remplacez un élément par une zone de texte contenant la valeur de cet élément.
Chacun de ces exemples peut être créé en utilisant JavaScript standard, mais HTML rend le processus beaucoup plus facile.
Avantages et inconvénients de HTML
Avantages pouvant être obtenus
htmx peut grandement simplifier les interactions courantes, ce qui peut profiter à de nombreuses applications Web, voire à de nombreux sites Web. Il permet aux concepteurs et aux autres personnes travaillant avec des pages Web frontales d'ajouter des fonctionnalités sans avoir à apprendre JavaScript.
En résumant les comportements courants, htmx garantit la cohérence entre et entre vos projets. Le défilement infini se comportera de la même manière d’une page à l’autre, quel que soit celui qui l’a mis en œuvre.
Parce qu'il met l'accent sur une approche déclarative (quoi) plutôt qu'une approche déterministe (comment), la fonctionnalité de htmx est généralement plus facile à comprendre et à raisonner.
Inconvénients pouvant être rencontrés
Bien que HTML puisse vous permettre d’oublier JavaScript dans de nombreux contextes, il ne peut pas résoudre tous les problèmes à votre place ! Vous devrez toujours écrire du code pour gérer une logique métier spécifique et des fonctionnalités de bas niveau.
Étant donné que HTML fait une grande partie du travail à votre place, il y a moins de possibilité de personnaliser le comportement. Il s’agit souvent d’un compromis positif, mais vous devez être prêt à abandonner le contrôle.
HTML peut vous permettre d'éviter d'écrire du JavaScript, mais vous devez toujours être conscient que le code JavaScript s'exécute en arrière-plan. Vous pourriez être tenté d'utiliser l'attribut hx-get sur chaque lien, au lieu de l'attribut href. Mais cela introduit une dépendance à JavaScript ; Si le code ne s'exécute pas pour une raison quelconque, vous vous retrouverez avec un lien qui ne fait rien pour les utilisateurs. Vous devez toujours pratiquer une amélioration progressive pour éviter cela. Vous pouvez maintenant visualiser Qu'est-ce que JavaScript et comment fonctionne-t-il? Avec du code.
