A quick look at Go and HTMX with Gowebly

I took a look at Go and HTMX using a web generation tool, Gowebly.

A next-generation CLI tool for building amazing web apps. Go, htmx & hyperscript, modern CSS frameworks!

The Good

Gowebly generates the start of web projects using a number of popular projects for the backend and frontent.

It get's the project started quickly! I started with Fiber, Templ, and TailwindCSS. Templ is new to be, but I like the idea. Basically JSX for Go. Write HTML & Go together and that get compiled to actual Go.

Gowebly provides a runner to run the compilation step in the background. It also runs a watch script with Node or Bun. TailwindCSS is compiled through that.

The only really opinionated aspect is the use of HTMX and HyperScript. I wanted to checkout HTMX, so that was a perfect fit.

The Bad

Not bad, but room for improvements?

The runner does recompile the CSS and Templ files, but doesn't hot reload the Go application. A restart is still needed to see any updated changes outside of CSS.

It would be cool to be able to generate more parts of the application. Maybe a new handler, which would scaffold the handler code and Templ files?

Learning

Templ is pretty cool, once I got the LSP and syntax setup in Vim. Couldn't find string interpolation, which would be nice, but also didn't need it too much.

Example Templ for a podcast list item.

templ PodcastItem(p api.Podcast) {
  <li class="flex flex-col md:flex-row gap-4">
    <div class="flex-1 min-w-32">
      <img class="w-full" src={ p.Images.Thumbnail } alt={ fmt.Sprintf("%s cover image", p.Title) }/>
    </div>
    <div class="flex flex-col gap-4">
      <h2 class="text-lg font-medium">{ p.Title }</h2>
      <div class="flex flex-row gap-4 text-gray-600">
	<span>{ p.PublisherName }</span><span>{ p.CategoryName }</span>
      </div>
      <p class="text-gray-800">{ p.Description }</p>
    </div>
  </li>
}

I like HTMX so far. It was super easy to get lazy loading, instant search, and paging setup. I'd like to read a larger project that's using a lot of HTMX to see how it scales.

Example HTMX for the next page button.

<button
	hx-get="/api/podcasts?page=2"
	hx-target="#podcasts"
	hx-swap="innerHTML show:top"
	class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>Next</button>

Didn't do anything with HyperScript. Looks a little like AlpineJS, maybe?

I really wanted hot reloading, so I setup a project called Air, that is made specifically for that. And combined that with Overmind, since I use that already. I didn't get it configured perfectly, but it did the job. Templ and JS have there own watchers, so those ran as Overmind jobs, with Air being the third.

Air setup for hot reloading.

Procfile.dev

web: air
templ: templ generate --watch
frontend: npm run watch

# .air.toml
root = "."
tmp_dir = "tmp"
[build]
  cmd = "go build -o ./tmp/main"
  bin = "./tmp/main"
  delay = 1000 # ms
  exclude_dir = ["assets", "tmp", "vendor", "node_modules"]
  include_ext = ["go", "tpl", "tmpl", "html"]
  exclude_regex = ["_test\\.go"]

Go is fast and I like coding in Go. Not sure it's the best for web applications, unless of course, speed is super important.

Another cool advantage, you could compile in the generated CSS and have a single executable web app.

As I've said before, I think HTMX and similar libraries will become the norm.

Check out the code: https://github.com/candland/gowebly-podcast-example