Adding HTMX to GO

HTMX is the successor to intercooler.js, as is used to extend HTML with HTTP commands without needing to write an API. Now, I know in the beginning I said I was removing abstraction layers, however I'm more of systems/tooling programmer, so I still need some abstractions until I have a grasp of what is actually happening underneath.

Basic Concept

HTMX deploys AJAX commands to modify an element. This is similar to how ReactJs works. ReactJs allows for updating content, and HTMX is fulfilling that for HTML.

Import HTMX

A simple one liner is added to ./internal/views/layout.templ element.

This was already included in the repo, however it has been updated to verify the script.

Using HTMX

HTMX comes with all of your favorite keywords appended with hx-.

# 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

There are more, however these are the main ones used in this project.

For a simple test, in ./internal/views/components/logo.templ, inside of the opening tag, we're going to add hx-get="/" and hx-trigger="click".

Open your terminal and run:

templ generate
go run ./cmd/server/main.go

Now go to your browser and go to localhost:[YOUR PORT]/. Click on Gopher, and you should see... well, it happened so fast, you probably didn't notice. That's okay. Open the developer tools, and go to the inspector tab. Click the Gopher again. You should notice the update in the HTML in the inspector tab.

HX-SWAP

This is the bread and butter of HTMX. This is what gives us the responsive UI/UX we're looking for. Now, hx-swap, while simple in name, needs careful consideration on it's location. By this, I mean, do not put it where it will interfere with other elements.
Example:

<div > // container
    <button hx-delete="[endpoint]"
        hx-target="nearest [element]" hx-swap="outerHTML" hx-get="[endpoint]" hx-target="this"> // actor
    </button> // end actor
</div // end-container

Placing all of the control on the button, will cause everything to be erased and prevent a button, for updating, being displayed. However, if we move some of the work to the container:

<div  hx-get="[endpoint]" hx-target="this"> // container
    <li>
        <button hx-delete="[endpoint]"
            hx-target="nearest [element]" hx-swap="outerHTML"> // actor
        </button> // end actor
    </li>
</div // end-container

Now, when we click the button, only the data INSIDE of the container is changed, except now a button exists for further editing.

Addendum

I'm stopping here for two (2) reasons.
First, you can use htmx and customize your site with it as it is. Second, we can return html code with a http.Reponse. By extension, we can pass templ components as well. Do you see where this is going?

Coming Soon

An entire restructure and moving functionality into go handlerFunc()s.

The above is the detailed content of Adding HTMX to GO. For more information, please follow other related articles on the PHP Chinese website!