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, scaffolding our database schema, and creating methods for retrieving, creating, and deleting tasks.

const connect = require("@databases/sqlite");
const { sql } = require("@databases/sqlite");

const db = connect();
const databaseReady = prepareDatabase();

// More code will go here later...

async function prepareDatabase() {
  await db.query(sql`
    CREATE TABLE todo (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      task TEXT
    );
  `);
}

async function createTask(task) {
  await databaseReady;
  await db.query(sql`
    INSERT INTO todo (task) VALUES (${task});
  `);
}

async function getTasks() {
  await databaseReady;
  return await db.query(sql`
    SELECT * FROM todo;
  `);
}

async function deleteTask(id) {
  await databaseReady;
  await db.query(sql`
    DELETE FROM todo WHERE id = ${id};
  `);
}

Most of this code is self-explanatory. We start by getting a database connection. Then, we call a method that will create our…