Learnings from GoTTH Stack development

5-minute read
DevOps
HTMX • Golang • Templ

I’ve been working on a web app with HTMX, Golang, TailwindCSS, and Templ, the so-called “GoTTH Stack”. I’ve learned a lot about the different parts of the stack and how to use them together. (See my previous blog for some info on AI-powered PR request tools I’ve used to help me along.)

HTMX Link to heading

HTMX is a library that allows you to create dynamic HTML without needing to reload the page. It’s a great way to create a more responsive and interactive web app without(too much) dreaded JavaScript.

Golang Link to heading

Go is a great language for building server-side web apps. It’s statically typed, compiled, has a great standard library, and some great tooling & frameworks to help get started and build robust applications(I used echo for routing and gorm for database interactions).

Templ Link to heading

Templ is a templating engine for Go that allows you to create dynamic HTML templates. It works very well with HTMX and Golang, well, it’s a templating engine for Go. HTMX can be a bit tougher to integrate.

TailwindCSS Link to heading

TailwindCSS is a CSS framework that allows you to create responsive web apps with less CSS. It’s great for bootstrapping a basic UI, and I combined it with DaisyUI to get a good looking UI quickly.

The Project Link to heading

I’m building a web app centered around helping people with their mental health during grief and loss, currently focused on mood tracking as I build out its features. Before I started, I had a few goals in mind, drew up a quick PRD and Jira board(for just myself, hey, I’m like that), and started building. Along the way, I’ve had a good experience with this stack, and I’ve learned a lot about integrating the different parts of the stack. However, I’ve also had some challenges, and I’d like to pass on some of the learnings to help others who are just starting out with this stack.

The Challenges Link to heading

Overall, I’d say the high-level challenges were -

  • HTMX is a bit tricky to get the hang of. It’s a bit different from traditional JavaScript frameworks, and from HTML at the same time. It’s a different paradigm, one I like but had some difficulty adjusting to.
  • Golang can be a bit verbose, formulaic and dry, but it’s a favorite language for building…most anything I can in it at this point.
  • Templ provided some stumbling blocks, but I’m sure I’ll get the hang of it eventually.
  • TailwindCSS is a great tool for quickly getting a basic UI up and running, but how cluttered it can get with all the classes was tough until I started using DaisyUI.
  • Of course, the important work of integrating all these parts together.
  • I started with a simple CRUD app, and realized swiftly that I needed to be very intentional and thoughtful upfront about design decisions like the API structure, how to handle logging, standardizing whatever I could upfront while being open to iterating if something didn’t work out. Everything still lives in one route handler .go file for mood tracker entries, for example, and I’m regretting that now with plans to refactor.

The Learnings Link to heading

Then there’s the smaller things that I learned from the experience -

  • HTMX wants a 200 status code for deleting and swapping out a target element, while convention to my understanding is 204, so I had to add a NoContent to my route handlers, which felt a bit odd at first.
  • Working with modals was a relative nightmare, and I ended up being stubborn about not wanting to make a custom modal component(probably the best way) and doing it in the template & server side code.
  • One thing that bugged me about that was that templ doesn’t allow you to pass an arbitrary Go string to JS event handlers(with the error not being terribly clear, and improvements having been made to allow you to do it through specific methods, see here.)
  • HTMX DOM manipulation can be surprisingly complex, and getting down the conventions and your options, how they work, takes some work. I’ve spent a lot of time tweaking UX/UI that I’d rather spend on backend development or DevOps work, to be honest.

The Good Link to heading

  • HTMX is so much better than writing JavaScript to do the same thing.
  • Golang is the GOat of server-side languages as ever, and I’m glad I’m getting to use it more.
  • Templ works well as a templater and has some fun tooling, such as integrating with air for live reloads.
  • The big surprise for me was DaisyUI, which I’d never used before. I’m a big fan of it for simplicity, rapid prototyping, and the fact that it’s a component library that’s easy to integrate with TailwindCSS.

The Future Link to heading

I’m going to keep with this stack for this project, which I hope will bear some fruit. It’s a good stack for a small project that feels like it can grow. Solace will surely pose a lot of technical challenges, especially around auth(a not totally solved problem currently, and important for something with a lot of personal data), and I’m sure I’ll have to learn a lot about the whole stack as I go. I’ll keep this blog updated to the best of my ability to help others who are just starting out with this stack.