HTMX est le successeur d'intercooler.js, car il est utilisé pour étendre le HTML avec des commandes HTTP sans avoir besoin d'écrire une API. Maintenant, je sais qu'au début, j'ai dit que je supprimais les couches d'abstraction, mais je suis plutôt un programmeur de systèmes/outils, donc j'ai encore besoin de quelques abstractions jusqu'à ce que j'aie une idée de ce qui se passe réellement en dessous.

Concept de base

HTMX déploie des commandes AJAX pour modifier un élément. Ceci est similaire au fonctionnement de ReactJs. ReactJs permet de mettre à jour le contenu, et HTMX le fait pour HTML.

Importer du HTML

Une simple doublure est ajoutée à l'élément ./internal/views/layout.templ

.
&&&] Ceci était déjà inclus dans le dépôt, mais il a été mis à jour pour vérifier le script.

Utiliser HTML

HTMX est livré avec tous vos mots-clés préférés suivis de hx-.

# Le format général est hx-[verb] hx-get # HTTP OBTENIR hx-post # HTTP POST hx-put # HTTP PUT hx-patch # HTTP PATCH hx-delete # HTTP SUPPRIMER hx-swap # mettre à jour le contenu d'un élément hx-target # spécifie l'élément à affecter hx-trigger # action qui exécute la fonction

# General format is hx-[verb]
hx-get        # HTTP GET
hx-post       # HTTP POST
hx-put        # HTTP PUT
hx-patch      # HTTP PATCH
hx-delete     # HTTP DELETE
hx-swap       # update content of an element
hx-target     # specify element to affect
hx-trigger    # action that executes function

Il y en a d'autres, mais ce sont les principaux utilisés dans ce projet.

Pour un test simple, dans ./internal/views/components/logo.templ, à l'intérieur de la balise d'ouverture , nous allons ajouter hx-get="/" et hx-trigger="click ".

Ouvrez votre terminal et exécutez :

modèle générer allez exécuter ./cmd/server/main.go

# General format is hx-[verb]
hx-get        # HTTP GET
hx-post       # HTTP POST
hx-put        # HTTP PUT
hx-patch      # HTTP PATCH
hx-delete     # HTTP DELETE
hx-swap       # update content of an element
hx-target     # specify element to affect
hx-trigger    # action that executes function

Maintenant, allez dans votre navigateur et accédez à localhost :[VOTRE PORT]/. Cliquez sur Gopher, et vous devriez voir... eh bien, c'est arrivé si vite que vous ne l'avez probablement pas remarqué. C'est bon. Ouvrez les outils de développement et accédez à l'onglet Inspecteur. Cliquez à nouveau sur le Gopher. Vous devriez remarquer la mise à jour dans le code HTML dans l'onglet inspecteur.

HX-SWAP

C'est le pain et le beurre de HTMX. C'est ce qui nous donne l'UI/UX réactif que nous recherchons. Désormais, hx-swap, bien que simple dans son nom, nécessite un examen attentif de son emplacement. Je veux dire par là, ne le placez pas là où il interférera avec d'autres éléments.

Exemple:

// conteneur de fin

# General format is hx-[verb]
hx-get        # HTTP GET
hx-post       # HTTP POST
hx-put        # HTTP PUT
hx-patch      # HTTP PATCH
hx-delete     # HTTP DELETE
hx-swap       # update content of an element
hx-target     # specify element to affect
hx-trigger    # action that executes function

Placer tout le contrôle sur le bouton, entraînera tout effacer et empêchera l'affichage d'un bouton, de mise à jour. Cependant, si nous déplaçons une partie du travail vers le conteneur :

// conteneur de fin

# General format is hx-[verb]
hx-get        # HTTP GET
hx-post       # HTTP POST
hx-put        # HTTP PUT
hx-patch      # HTTP PATCH
hx-delete     # HTTP DELETE
hx-swap       # update content of an element
hx-target     # specify element to affect
hx-trigger    # action that executes function

Maintenant, lorsque nous cliquons sur le bouton, seules les données À L'INTÉRIEUR du conteneur sont modifiées, sauf qu'il existe désormais un bouton pour une édition ultérieure.

Addenda

Je m'arrête ici pour deux (2) raisons.

Tout d’abord, vous pouvez utiliser HTML et personnaliser votre site tel quel. Deuxièmement, nous pouvons renvoyer du code HTML avec une http.Reponse. Par extension, nous pouvons également transmettre des composants templ. Voyez-vous où cela mène ?

À venir

Une restructuration complète et un déplacement des fonctionnalités vers go handlerFunc()s.