Une introduction à HTMX, la bibliothèque dynamique d'interface utilisateur axée sur le HTML

Les utilisateurs Web modernes s'attendent à une expérience d'application à une seule page (SPA) fluide et dynamique. Cependant, la création d'un spa nécessite souvent des cadres complexes comme React et Angular, et l'apprentissage et les utiliser peuvent être complexes. HTMX a vu le jour - c'est une bibliothèque qui offre une nouvelle perspective pour créer des expériences Web dynamiques en tirant parti des fonctionnalités telles que les transitions AJAX et CSS directement dans HTML.

Ce guide explorera les capacités de HTMX, comment elle simplifie le développement Web dynamique et comment il peut tirer parti de son potentiel pour améliorer votre processus de développement Web.

points clés

• HTMX Basics: HTMX réduit la complexité qui est généralement associée au SPA à forte intensité de javascript en tirant parti de HTML pour réaliser des expériences Web dynamiques.
• Installation facile: HTMX peut être facilement intégré dans le projet via CDN, ce qui facilite l'intégration rapidement sans paramètres compliqués.
• Simplifier Ajax: cette bibliothèque permet des demandes AJAX simples directement à partir d'éléments HTML en utilisant des propriétés spécifiques, améliorant l'interaction utilisateur sans avoir besoin de beaucoup de code JavaScript.
• Chargement dynamique du contenu: HTMX prend en charge les mises à jour de contenu pour des éléments spécifiques et fournit plusieurs façons d'insérer un nouveau contenu, ce qui rend la page Web plus interactive.
• Expérience utilisateur améliorée: HTMX possède des API de transition CSS et de vue expérimentale intégrée qui permettent des effets visuels en douceur lors de la mise à jour du contenu.
• Traitement et vérification de formulaire: HTMX s'intègre à la vérification HTML5 pour garantir que les formulaires s'exécutent comme prévu, améliorant l'utilisabilité et la fonctionnalité.

Qu'est-ce que HTMX? Comment ça marche?

Les développeurs ont traditionnellement deux principales options lors de la création d'expériences Web interactives, chacune avec ses propres compromis. D'une part, il existe des applications de plusieurs pages (AMP) qui actualisent la page entière chaque fois que l'utilisateur interagit avec lui. Cette approche garantit que le serveur contrôle l'état d'application et que le client l'exprime fidèlement. Cependant, le rechargement complet de la page entraîne une expérience utilisateur lente et maladroite.

En revanche, les applications à page unique (SPAS) s'appuient sur JavaScript en cours d'exécution dans le navigateur pour gérer l'état d'application. Ils communiquent avec le serveur à l'aide d'appels API, qui renvoient les données, généralement au format JSON. Le SPA utilise ensuite ces données pour mettre à jour l'interface utilisateur sans actualisation de la page, offrant une expérience utilisateur plus fluide, quelque peu similaire aux applications de bureau ou mobiles natives. Cependant, cette approche n'est pas parfaite non plus. Les frais généraux de calcul sont généralement plus élevés en raison du traitement des clients importants;

HTMX fournit un compromis pour les deux situations extrêmes. Il offre l'avantage de l'expérience utilisateur de Spa - sans rechargement complet de page - tout en maintenant la simplicité du côté serveur de l'AMP. Dans ce modèle, le serveur ne renvoie pas les données que le client doit interpréter et rendre, mais mais un fragment HTML . Ensuite, HTMX remplace simplement ces extraits pour mettre à jour l'interface utilisateur.

Cette approche simplifie le processus de développement en minimisant la complexité du client et le grand nombre de dépendances JavaScript couramment utilisées par les spas. Il ne nécessite aucune configuration compliquée et offre une expérience utilisateur fluide et réactive.

Installation htmx

Il existe plusieurs façons d'inclure HTMX dans votre projet. Vous pouvez le télécharger directement à partir de la page GitHub de votre projet, ou si vous utilisez Node.js, vous pouvez l'installer via NPM à l'aide de la commande NPM installer htmx.org.

Cependant, le moyen le plus simple (celui qui sera utilisé dans ce guide) est de l'inclure via un réseau de livraison de contenu (CDN). Cela nous permet de commencer à utiliser HTMX sans aucun processus de configuration ou d'installation. Incluez simplement la balise de script suivante dans votre fichier html:

<🎜>

Cette balise de script pointe vers la version 1.9.4, mais si une version plus récente est disponible, vous pouvez remplacer "1.9.4" par la dernière version.

htmx est très léger, avec une version minimale et gzip pesant environ ~ 14 Ko. Il n'a pas de dépendances et est compatible avec tous les principaux navigateurs, y compris IE11.

Après avoir ajouté HTMX à votre projet, vous voudrez peut-être vérifier si cela fonctionne correctement. Vous pouvez le tester avec l'exemple simple suivant:

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

En cliquant sur le bouton, si HTMX fonctionne correctement, il enverra une demande GET à l'API de blague et la remplacera par la réponse du serveur. Contenu des balises

.

Demande ajax: méthode htmx

L'un des principaux arguments de vente de HTMX est qu'il permet aux développeurs d'envoyer des demandes AJAX directement à partir d'éléments HTML en tirant parti d'un ensemble différent d'attributs. Chaque attribut représente une méthode de demande HTTP différente:

hx-get: fait une demande de GET à l'URL spécifiée.
HX-POST: Post Demande à l'URL spécifiée.
HX-PUT: Publiez une demande de vente à l'URL spécifiée.
HX-Patch: Spécifiez une demande de patch à l'URL spécifiée.
HX-Delete: Spécifiez une demande de suppression à l'URL spécifiée.

Ces attributs acceptent une URL à laquelle ils enverront une demande AJAX. Par défaut, une demande Ajax est déclenchée par un événement "naturel" d'un élément HTML (par exemple, un événement de clic dans le cas d'un bouton, ou un événement de modification dans le cas d'un champ de saisie).

Considérez ce qui suit:

<button hx-get="/api/resource">Load Data</button>

Dans l'exemple ci-dessus, l'élément bouton se voit attribuer une propriété HX-GET. Après avoir cliqué sur le bouton, une demande de GET est faite à l'URL / API / RESSOURCE.

Que se passe-t-il après que le serveur renvoie les données? Par défaut, HTMX injectera cette réponse directement dans l'élément de démarrage - dans notre exemple, un bouton. Cependant, HTMX n'est pas limité à ce comportement et offre la possibilité de spécifier les données de réponse comme élément cible. Nous explorerons cette fonctionnalité plus approfondie dans les sections suivantes.

Déclencher la demande avec htmx

HTMX initie une demande AJAX en réponse à des événements spécifiques se produisant sur un élément spécifique:

• Pour les éléments d'entrée, de textarea et de sélection, il s'agit de l'événement de changement.
• Pour les éléments de formulaire, il s'agit de l'événement de soumission.
• Pour tous les autres éléments, c'est l'événement de clic.

Démoussons cela en étendant l'exemple de blague ci-dessus, permettant à l'utilisateur de rechercher des blagues contenant des mots spécifiques:

<🎜>

Pour déclencher une recherche, nous devons déclencher un événement de changement. Pour les éléments <input>, cela se produit lorsque la valeur de l'élément change et perd la focalisation. Donc, tapez quelque chose dans la case (comme "bar"), cliquez ailleurs sur la page, et la blague apparaîtra dans l'élément <div>. C'est bien, mais généralement les utilisateurs veulent mettre à jour leurs résultats de recherche au fur et à mesure qu'ils tapent. Pour ce faire, nous pouvons ajouter l'attribut de déclenchement HTMX à notre élément <input>:

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

Les résultats seront désormais mis à jour immédiatement. C'est bien, mais il introduit un nouveau problème: nous utilisons maintenant les appels API avec chaque presse de touches. Pour éviter cela, nous pouvons utiliser des modificateurs pour modifier le comportement du déclencheur. HTMX fournit les éléments suivants:

• Une fois: utilisez ce modificateur si vous souhaitez effectuer une demande une seule fois.
• Modifié: ce modificateur garantit que la demande n'est faite que si la valeur de l'élément a changé.
• retard: : Ce modificateur définit le temps d'attente (par exemple, 1 seconde) avant de faire la demande. Si l'événement est à nouveau déclenché pendant cette période d'attente, le compte à rebours sera réinitialisé.
• Throttle: : Avec ce modificateur, vous pouvez également définir un temps d'attente (par exemple 1 seconde) avant de faire une demande. Cependant, contrairement au retard, si un nouvel événement est déclenché dans un délai défini, l'événement est ignoré, garantissant que la demande n'est déclenchée qu'après la période définie.
• De: : Ce modificateur vous permet d'écouter des événements sur différents éléments, pas les éléments d'origine.

Dans ce cas, nous semblons avoir besoin de retard:

<button hx-get="/api/resource">Load Data</button>

Maintenant, lorsque vous tapez quelque chose dans la case (essayant d'utiliser un mot plus long, tel que "développeur"), la demande ne sera déclenchée que si vous faites une pause ou terminez la frappe.

Comme vous pouvez le voir, cela nous permet d'implémenter le modèle de boîte de recherche actif avec seulement quelques lignes de code client.

Indicateur de demande

Dans le développement du Web, les commentaires des utilisateurs sont cruciaux, en particulier dans les opérations qui peuvent prendre beaucoup de temps à compléter (comme la publication de demandes de réseau). Une façon courante de fournir cette rétroaction est par un indicateur de demande - une invite visuelle indiquant que l'opération est en cours.

HTMX intègre la prise en charge des indicateurs de demande, nous permettant de fournir ces commentaires aux utilisateurs. Il utilise la classe HX-Indicator pour spécifier l'élément utilisé comme indicateur de demande. L'opacité de tout élément avec cette classe est par défaut à 0, ce qui le rend invisible mais présent dans le DOM.

Lorsque HTMX fait une demande AJAX, il applique la classe HTMX-Request à l'élément de démarrage. La classe HTMX-Request provoquera la transition de l'élément (ou de tout élément enfant avec la classe HTMX-Indicator) vers une opacité de 1.

Par exemple, considérez un élément qui utilise un spinner de charge comme indicateur de demande:

<🎜>

Lorsqu'un bouton avec l'attribut HX-Get est cliqué et que la demande est initiée, le bouton reçoit la classe HTMX-Request. Cela entraîne l'affichage de l'image jusqu'à la fin de la demande et que la classe soit supprimée.

Vous pouvez également utiliser la propriété HTMX-Indicator pour indiquer quel élément doit recevoir la classe HTMX-Request.

Démontons cela avec notre exemple de la blague API:

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

Remarque: nous pouvons obtenir le style CSS du fileur du chargeur CSS et du fileur. Il y en a beaucoup à choisir; Recevoir HTML et CSS en un seul clic.

Cela fera apparaître le spinner de charge lorsque la demande est en cours.

Si notre réseau est rapide, le spinner ne clignote que brièvement lorsque la demande sera faite. Si nous voulons nous assurer qu'il existe, nous pouvons utiliser les outils de développement du navigateur pour limiter notre vitesse de connexion réseau.

ou, juste pour le plaisir (c'est-à-dire ne pas le faire dans les applications réelles), nous pouvons configurer HTMX pour simuler une latence du réseau:

<button hx-get="/api/resource">Load Data</button>

Cela tire parti du système d'événements de HTMX, que nous pouvons utiliser pour modifier et améliorer son comportement. Ici, nous utilisons l'événement HTMX: AfterOnload, qui tire une fois qu'Ajax Onload s'est terminé. J'ai également utilisé une fonction de sommeil à partir de l'article SitePoint sur le même sujet.

Il s'agit d'une démo finie. Tapez quelque chose dans la case (telle que "JavaScript"), puis observez l'indicateur de charge après le début de la demande.

Comme vous pouvez le voir, cela nous permet d'implémenter le modèle de boîte de recherche actif avec seulement quelques lignes de code client.

Éléments cibles et échange de contenu

Dans certains cas, nous voulons peut-être mettre à jour un élément différent de celui qui initie la demande. HTMX nous permet d'utiliser l'attribut HX-Target pour localiser des éléments spécifiques pour la réponse AJAX. Cette propriété peut prendre un sélecteur CSS, que HTMX utilisera pour trouver les éléments à mettre à jour. Par exemple, si nous avons un formulaire qui publie de nouveaux commentaires sur notre blog, nous voulons peut-être joindre de nouveaux commentaires à la liste de commentaires au lieu de mettre à jour le formulaire lui-même.

Nous avons vu cela dans le premier exemple:

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

Le bouton

ne remplace pas son propre contenu, mais la propriété HX-Target déclare que la réponse doit remplacer le contenu de l'élément par un "container de blague".

Sélecteur CSS étendu

HTMX fournit également des méthodes plus avancées pour sélectionner des éléments auxquels le contenu doit être chargé. Ceux-ci incluent cela, le plus proche, suivant, précédent et recherche.

• Ce mot clé spécifie que les éléments avec l'attribut HX-cible sont la cible réelle.
• Le mot-clé le plus proche trouve l'ancêtre le plus proche de l'élément source qui correspond au sélecteur CSS donné.
• Les mots clés suivants et précédents recherchent des éléments ultérieurs ou de préambule dans le DOM qui correspondent au sélecteur CSS donné.
• Find Keyword trouve le premier élément enfant qui correspond au sélecteur CSS donné.

En référence à notre exemple précédent, nous pouvons également écrire HX-Target = "Next P" pour éviter de spécifier l'ID.

Échange de contenu

Par défaut, HTMX remplacera le contenu de l'élément cible par une réponse AJAX. Mais que se passe-t-il si nous voulons attacher un nouveau contenu au lieu de le remplacer? C'est là que l'attribut HX-Swap entre en jeu. Cette propriété nous permet de spécifier comment le nouveau contenu est inséré dans l'élément cible. Les valeurs possibles sont OUTERHTML, innerHTML, avant Ebingin, Afterbegin, Beforeend et Afterend. Par exemple, l'utilisation de HX-Swap = "AVANT" ajoutera un nouveau contenu à la fin de l'élément cible, qui est parfait pour notre nouveau scénario de commentaire.

transition CSS dans HTMX

La transition CSS permet au style d'un élément de changer en douceur d'un état à un autre sans utiliser JavaScript. Ces transitions peuvent être aussi simples que des changements de couleur ou aussi complexes qu'une transformation 3D complète.

htmx facilite l'utilisation de CSS dans notre code: nous avons juste besoin de maintenir des ID d'élément cohérents dans les demandes HTTP.

Considérez ce contenu HTML:

<🎜>

Après avoir fait une demande HTMX AJAX à / nouveau contenu, le serveur renvoie les éléments suivants:

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

Bien que le contenu ait changé, <div> maintient le même ID. Cependant, la classe Fadein a été ajoutée au nouveau contenu. Nous pouvons maintenant créer une transition CSS qui passe en douceur de l'état initial vers le nouvel état:

<button hx-get="/api/resource">Load Data</button>

Lorsque HTMX charge de nouveau contenu, il déclenche la transition CSS, créant une progression visuelle fluide vers l'état mis à jour.

Utiliser API API API TRANSITION

L'API de transition de la nouvelle vue fournit un moyen d'animer entre différents états d'un élément DOM. Contrairement aux transitions CSS, qui impliquent la modification des propriétés CSS d'un élément, les transitions de vue visent à animer le contenu d'un élément.

L'API de transition de vue est une nouvelle caractéristique expérimentale qui est actuellement en développement actif. Au moment de la rédaction du moment de la rédaction, cette API est mise en œuvre dans Chrome 111 et d'autres navigateurs devraient ajouter un support à l'avenir (vous pouvez vérifier leur support sur Caniuse). HTMX fournit une interface pour utiliser l'API de transition de vue et se calmer vers un mécanisme de non-transition dans les navigateurs qui ne prennent pas en charge les API.

Dans HTMX, il existe deux façons d'utiliser l'API de transition View:

• Définissez la variable de configuration htmx.config.globalViewTransitions sur true. Cela utilisera des transitions pour tous les échanges.
• Utilisez l'option Transition: True dans la propriété HX-Swap.

Les transitions de vue peuvent être définies et configurées à l'aide de CSS. Voici un exemple de transition "rebond" où le contenu ancien rebondit et que le nouveau contenu rebondit dans:

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

Dans le code HTMX, nous utilisons l'option Transition: True dans la propriété HX-Swap et appliquons la classe Bounce-it à ce que nous voulons l'animer:

...
hx-trigger="keyup"
...

Dans cet exemple, lorsque le contenu de <div> est mis à jour, l'ancien contenu rebondira et que le nouveau contenu rebondira, créant un effet visuel agréable et engageant.

N'oubliez pas que pour le moment, cette démo n'est disponible que pour les navigateurs à base de chrome.

Vérification du formulaire

HTMX s'intègre bien à l'API de vérification HTML5 et empêchera les demandes de formulaire d'être envoyées si la vérification de l'entrée utilisateur échoue.

Par exemple, lorsqu'un utilisateur clique sur Soumettre, une demande de poste est envoyée à / contact uniquement si le champ de saisie contient une adresse e-mail valide:

<🎜>

Si nous voulons aller plus loin, nous pouvons ajouter une vérification côté serveur pour nous assurer que seul gmail.com est accepté:

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

Ici, nous ajoutons un élément parent (div # wrapper) qui se déclare comme le destinataire de la demande (en utilisant ce mot-clé) et utilise la politique d'échange OUTERHTML. Cela signifie que l'ensemble <div> sera remplacé par la réponse du serveur, même si ce n'est pas l'élément qui déclenche réellement la demande. Nous avons également ajouté HX-Post = "/ Contact / Email" dans le champ de saisie, ce qui signifie que chaque fois que ce champ est flou, il envoie une demande de poste au point de terminaison / Contact / Email. Cette demande contiendra la valeur de notre champ.

Du côté du serveur (IN / Contact / Email), nous pouvons utiliser PHP pour vérifier:

<button hx-get="/api/resource">Load Data</button>

Comme vous pouvez le voir, HTMX s'attend à ce que le serveur renvoie HTML ( pas JSON) et l'insérez dans l'emplacement spécifié dans la page.

Si nous exécutons le code ci-dessus, saisissez une adresse non gmail.com dans l'entrée, puis faisons perdre la mise au point de l'entrée, un message d'erreur apparaîtra sous le champ indiquant "Seules les adresses Gmail acceptées!"

Remarque: Lors de l'insertion de contenu dynamiquement dans le DOM, nous devons également considérer comment le lecteur d'écran interprète ce contenu. Dans l'exemple ci-dessus, le message d'erreur se trouve à l'intérieur de notre balise, donc le lecteur d'écran lira le champ la prochaine fois qu'il sera concentré. Si le message d'erreur est inséré ailleurs, nous devons l'associer au champ correct à l'aide de la propriété Aria-DescriptedBy.

Il convient également de noter que HTMX déclenche un ensemble d'événements pendant le processus de vérification, que nous pouvons utiliser pour ajouter notre propre logique de vérification et méthodes de traitement des erreurs. Par exemple, si nous voulons implémenter la vérification des e-mails dans le code JavaScript, nous pouvons le faire:

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

Ici, nous utilisons le HTMX: Validation: Valider l'événement de HTMX, qui est appelé avant que la méthode CheckValidity () de l'élément ne soit appelée.

Maintenant, lorsque nous essayons de soumettre le formulaire avec une adresse non gmail.com, nous verrons le même message d'erreur.

que peut faire d'autre HTMX?

HTMX est un outil polyvalent, léger et facile à utiliser. Il combine avec succès la simplicité HTML avec des fonctionnalités dynamiques souvent associées à des bibliothèques JavaScript complexes, fournissant une alternative convaincante à la création d'applications Web interactives.

Cependant, ce n'est pas une solution universelle. Pour des applications plus complexes, vous pouvez toujours avoir besoin du cadre JavaScript. Mais si votre objectif est de créer des applications Web rapides, interactives et conviviales sans ajouter trop de complexité, HTMX vaut vraiment la peine d'être envisagé.

Alors que le développement Web continue d'évoluer, des outils tels que HTMX offrent de nouvelles façons passionnantes de créer une meilleure expérience utilisateur. Pourquoi ne pas l'essayer dans de futurs projets et voir ce que HTMX peut faire pour vous?

FAQ sur HTMX (FAQ)

Qu'est-ce que HTMX et en quoi est-il différent des autres outils de conception de l'interface utilisateur?

HTMX est une extension HTML moderne et légère pour AJAX, transitions CSS, webockets et événements d'envoi de serveurs. Il vous permet d'accéder à des fonctionnalités de navigateur modernes directement à partir de HTML sans javascript ni jQuery. Cela le rend différent des autres outils de conception de l'interface utilisateur, qui reposent souvent fortement sur JavaScript. HTMX est facile à intégrer à n'importe quel backend et ne vous oblige pas à réécrire le code existant. Il s'agit d'un outil puissant pour améliorer l'interface utilisateur tout en gardant le code simple et facile à maintenir.

Comment démarrer avec HTMX?

Il est très facile de commencer avec HTMX. Il vous suffit d'inclure le script HTML dans le fichier HTML. Une fois que vous avez fait cela, vous pouvez commencer à utiliser les propriétés HTMX dans des balises HTML pour activer Ajax, WebSockets et autres fonctionnalités. Le site Web HTMX fournit des guides et des exemples complets pour vous aider à démarrer.

peut-on utiliser HTMX avec n'importe quel backend?

Oui, l'un des principaux avantages de HTMX est ses caractéristiques indépendantes du backend. Il peut être utilisé avec n'importe quelle langue ou cadre côté serveur. Cela en fait un outil universel pour les développeurs travaillant dans différents environnements.

Quels sont les cas d'utilisation courants pour HTMX?

HTMX peut être utilisé dans une variété de scénarios où vous souhaitez améliorer l'interface utilisateur sans compter sur JavaScript. Cela inclut la soumission de formulaire, la recherche en temps réel, le défilement illimité, les mises à jour en temps réel, etc. Il s'agit d'un outil puissant pour créer des applications Web dynamiques et interactives.

Comment HTMX gère-t-il les transitions CSS?

HTMX a une prise en charge intégrée pour les transitions CSS. Vous pouvez utiliser l'attribut "HX-Swap" pour spécifier comment les éléments doivent être échangés et sortis lorsqu'une demande est faite. Cela vous permet de créer des transitions lisses et visuellement attrayantes sans écrire de JavaScript.

HTMX est-il compatible avec tous les navigateurs?

HTMX est conçu pour être compatible avec tous les navigateurs modernes. Cependant, comme il utilise certaines fonctionnalités de navigateur plus récentes, elle peut ne pas fonctionner parfaitement dans les navigateurs plus anciens ou moins courants. Il est toujours recommandé de tester votre application dans les navigateurs que les utilisateurs peuvent utiliser.

Comment HTMX améliore-t-il les performances des applications Web?

HTMX peut réduire considérablement la quantité de JavaScript que vous devez écrire en vous permettant d'accéder aux fonctionnalités de navigateur modernes directement à partir de HTML. Cela peut entraîner des temps de chargement plus rapides et des performances plus élevées, en particulier sur les appareils mobiles, où JavaScript peut être particulièrement lent sur les appareils mobiles.

Puis-je utiliser HTML et CSS avec mon HTML et CSS existants?

Oui, HTML est conçu pour fonctionner avec votre HTML et CSS existants. Vous n'avez pas à réécrire votre code ou à apprendre une nouvelle langue pour commencer avec HTMX. Cela en fait un excellent choix pour améliorer les applications existantes.

Quel type de support HTMX fournit-il?

HTMX est un projet open source et a une communauté de développeurs dynamique à utiliser et à y contribuer. Vous pouvez trouver de l'aide et des conseils sur le site Web HTMX, GitHub et divers forums en ligne.

Comment contribuer aux projets HTMX?

En tant que projet open source, HTMX accueille les contributions de la communauté. Vous pouvez contribuer de diverses manières, en rapportant des bogues et en suggérant de nouvelles fonctionnalités à l'écriture de code et en améliorant la documentation. Consultez la page HTMX GitHub pour apprendre à vous impliquer.

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!