Go, templ & HTMX

I have been wanting to experiment with go, htmx and tmpl. This had me wondering, what would be the best way to learn and play around with this specific blend of tools without doing the classic todo app. I decided perhaps it was time to build a personal site.

Goals

Aim	Ideas
go, htmx & tmpl	Build something fun
Minimal DevOps	Use local yaml files, io.Reader

1package main
2
3import (
4	"fmt"
5)
6
7func main() {
8	fmt.Println("Let us begin!")
9}

Go, templ and htmx

htmx

htmx has been around for a couple of years now, the initial commit landed in May of 2020. Finishing second on the rising stars front-end frameworks. I enjoy the component driven paradigm of the React ecosystem, and htmx sparked my curiosity. htmx is small ~14kb gzipped, is dependency-free and allows you to access features of modern browser from html and not javascript. As an example illustrates:

1<button hx-post="/clicked"
2    hx-trigger="click"
3    hx-target="#parent-div"
4    hx-swap="outerHTML"
5>
6    Click Me!
7</button>

Deconstructing this piece of html code and what it does. When this button is clicked, an HTTP POST request is fired off to ‘/clicked’ the content from the response will be used to replace the element with the id parent-div in the DOM.

How cool is that?

One of the benefits of JS frameworks out there today, is it provides a wide variety of tools to build beautiful and immersive UX. React specifically utilises a virtual DOM, to trigger re-renders of the DOM giving the feeling that the whole page is not re-fetched from a server somewhere.

With htmx, you can have the benefits that server-side rendering of the past brings without the downside of re-rendering the entire DOM each time a user would click on a button somewhere.

In short, htmx could provide the similar tools which modern JS frameworks provide today to build beautiful and immersive UX.

Notice how navigating through this site that the URL has not changed, “routing” is being mimicked by replacing html fragments with htmx

Thank you htmx!

Go and templ

I have long been using go and really enjoy how easy it is to be productive, write readable simplistic code and have fun while doing it!

go does have an impressive standard library, which does include a package implementing data-driven templates for generating HTML.

Why did I end up not using this?

The syntax feels a bit clunky and strays away from the go like syntax that I have become so accustomed to. Wanting the best of both worlds, I found this package called templ, which allowed me to build all the html fragments while feeling right at home with go like syntax. Pretty sweet combination!

In summary

Why is all of this interesting?

• go is fast and with templ makes building html templates feel more at home.
• htmx provides fascinating tools to give an immersive client side feel, while fetching and replacing html fragments from responses from API queries to a server.
• The entire stack is pure go, with a bit of html and htmx … could this be the rise of pure full-stack with go and no javascript?

All in all, htmx is an exciting new tool on the block and will be interesting to see how the tool and its community evolves.

Wrapping up

Aim	Outcomes
go, htmx & tmpl	Fun, minimalistic tools which brings a refreshing perspective
Minimal DevOps	No DB, no problem! Local files are fast and latency is weighted by the filesystem, which is pretty fast!