Go, Alpine.js & HTMX - Building a Small Todo App ( Golang )

In this video we'll build a small todo app using Go, HTMX and Alpine.js
We'll show how to convert backend data for use in an Alpine component on the client, and will use HTMX to build a small piece of interactivity into the app.
Playlist ▶️: • Go Programming
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugbytes
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
04:22 Return JSON data to Go template
06:07 Creating Alpine component with data
11:42 Add todo form
13:44 Adding handler for form submission
16:32 Returning HTML fragment after form submission
19:49 Adding HTMX to project
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/posts/
👾 Github: github.com/bugbytes-io
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Go html/template package: pkg.go.dev/html/template
HTMX: htmx.org/docs/#installing
Alpine.js: alpinejs.dev/
#golang #webdevelopment #htmx

[@owenwexler7214]

Note: Using Alpine to handle server responses makes the raw response object data visible in the browser inspector as seen in the video and this is not always desirable (e.g. in an information aggregator app that has a lot of copycats for example) - definitely better to have HTMX handle server state in that case and to have HTML/HTMX fragments returned without any object data visible, and use Alpine to handle app state only (turning modals on and off, light mode/dark mode etc.). Very good tutorial other than that.

[@AmoahDevLabs]

Great to watch another Go tutorial from you. Thanks very much.

[@bugbytes3923]

Thanks a lot!

[@nanonkay5669]

There we go, I have been waiting for someone to do this combination

[@bugbytes3923]

Thanks a lot!

[@filipvranesevic5200]

Thanks for the tutorial! Can you do a follow up with adding some client side logic (like a search bar you mentioned at 11:00) and show how we can synchronise the state stored in alpine after HTMX updates the content of the page

[@ltardioli]

Awesome content!!

[@bugbytes3923]

Thanks a lot!

[@Tay74514]

Appreciate you bro!!

[@bugbytes3923]

Thanks a lot!

[@agb2557]

Awesome as always
I'd love to see something on handling auth with go (or fastapi) and htmx (plus maybe alpine?) and how you handle sessions, or jwt etc.
Also, how do you decide when a project already using htmx would benefit from using a proper js framework? I imagine there's a lot of overlap, e.g. I can imagine a todo list being solely htmx based

[@MaxPorPanne]

Thanks for the nice tutorial

[@bugbytes3923]

Thanks for watching!

[@inteliconn995]

Thanks!

[@bugbytes3923]

Thanks for watching!

[@danielvalencia3437]

Great video bro, one question, which do you consider is a better option to work with alpine, alpine ajax or htmx ? Thanks a lot

[@robinskills]

I would love to see a video with Alpine Ajax with Go as well. If it's possible you can combine it with HTMX and an SQLite database.

[@bugbytes3923]

Thanks, I'll have a look at the Alpine-Ajax example!

[@krzysiekkrzysiek9059]

Please consider doing a tutorial on how to make a Django app deploy to an offline server?

[@goldfinger490]

Sorry, I have to complain about this video. This is going to be confusing and misleading for newbies. The x-data you put the json in is out of date when the tr is inserted by the htmx response. This is not a sane way to mix alpine and htmx together.

[@veilovv]

So what can you recommend?

[@filipvranesevic5200]

I was thinking the same, for example, if you want to implement client side search like he suggested in the video, alpine would not be aware of newly added items in the list unless it sends the request to the backend (which is the thing he is trying to avoid in the first place)

[@thuanquoc1231]

Yeah, I don't understand why he didn't just use range and loop through the Todos list.
Why did he have to parse it into JSON and all that stuff? 🤔

[@xarkorrn]

@@veilovv The practical solution would have been to re-load the "Alpine component" as the target with the updated complete data. The reason to mix in Alpine is to control interactivity (filtering short lists, events, etc) and instead this mixed metaphors a bit in a way that isn't intended. I think I understand his intent, but it doesn't show the intended use.