HTMX vs Vanilla Javascript — My Learning Experience

Photo by Tim Mossholder on Unsplash

A few days ago, I was watching The Primeagen livestream talking about HTMX. I had heard of this library and decided to see what it was all about. To do this, I figured I would perform a similar exercise to what I did here by building a small to-do application using Vanilla Javascript and then doing the same using HTMX.

Screenshot of the todo list I built

VanillaJS — First Pass

Even though I prefer Go, I used NodeJS and Express to prototype my server-side interactions quickly. I also decided to start with the VanillaJS version as a baseline since I am unfamiliar with HTMX. To begin, let’s initialize a new NodeJS app.

mkdir vanillatodo
cd vanillatodo
npm init

Answer all of the questions it asks. As mentioned above, we’ll use the Express library for handling requests, and let’s also use the @databases/sqlite library for storing our tasks.

npm install -s express @databases/sqlite

Now that the prerequisites are out of the way, let’s build our back-end functionality. To begin with, let’s set up an in-memory SQLite database to hold to-do tasks. We’ll do this by establishing a connection…