¿Que es HTMX?

Ha decir verdad, yo hace unos meses tampoco conocía htmx, gracias a los youtubers que sigo, como fireship, primeagen, entre otros. Conocí htmx y decidí probarlo.

Primer proyecto prueba.

Básicamente, htmx añade atributos a HTML mediante JavaScript, lo que permite que cualquier etiqueta HTML realice solicitudes al servidor. Además, posibilita la inserción de contenido HTML proveniente de estas solicitudes en la página web sin requerir una recarga completa de la misma.

El proyecto es una simple todo app, comenzamos con un proyecto de expressJS, el cual expone un archivo index.html en la ruta raiz.

// index.js

const express = require("express");
const { resolve } = require("path");

const app = express();
const port = 3010;

app.use(express.static("static"));

app.get("/", (req, res) => {
  res.sendFile(resolve(__dirname, "pages/index.html"));
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

<!-- pages/index.html -->

<!doctype html>
<html lang="en">
  <head>
    <title>Hello Express!</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h1>Express app!</h1>
  </body>
</html>

Ahora necesitamos importar la librería de htmx, se puede importar a través de un script tag.

<!-- pages/index.html -->

<!doctype html>
<html lang="en">
  <head>
    <title>Hello Express!</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="./style.css" />
    <script
      src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <h1>Express app!</h1>
  </body>
</html>

Para seguir necesitamos crear un endpoint que retorne una lista de todos

// index.js

const express = require("express");
const { resolve } = require("path");

const app = express();
const port = 3010;

const todo = [{ name: "example", id: 1 }];

app.use(express.static("static"));
app.use(express.urlencoded()); // <--- Para obtener el body de la petición POST

app.get("/", (req, res) => {
  res.sendFile(resolve(__dirname, "pages/index.html"));
});

app.post("/addTodo", (req, res) => {
  // obtenemos el campo 'name' del body
  const name = req.body.name;
  // si tenemos el nombre, lo añadimos a la lista.
  if (name) {
    todo.push({ name, id: Math.random() });
  }
  // si no tenemos el nombre, devolvemos un string de <li> tags con los todos
  res.status(200).send(todo.map(d => `<li>${d.name}</li>`).join(""));
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

Ahora en el html debemos añadir lo siguiente

<!doctype html>
<html lang="en">
  <head>
    <title>Hello Express!</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="./style.css" />
    <script
      src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <!--lista no ordenada para mostrar los todos-->
    <ul id="postList" hx-post="/addPost" hx-trigger="load">
      loading...
    </ul>

    <!-- Formulario para enviar el nombre y agregar el todo -->
    <form hx-post="/addPost" hx-target="#postList">
      <label for="name">name</label>
      <input name="name" type="text" />
      <button>Add post</button>
    </form>
  </body>
</html>

Describire para que sirve cada atributo de htmx.

hx-post: Realiza una petición desde un tag html y realiza un append a este reemplazando el child por defecto, esto se puede cambiar usando el atributo hx-target.
hx-trigger: Indica cuando se debe accionar la petición, en el caso de la lista al cargar el tag <ul> realizará la consulta ya que sólo se le indica eso.
hx-target: Tambien sirve para designar un objetivo en el cual se realizara el append de la data obtenida por la petición, como se puede ver en el trigger del formulario estamos designando como objetivo la lista con id #postList. Si no se indica, usará el mismo tag como objetivo por defecto.

Así es cómo puedes crear una sencilla aplicación de tareas con htmx.

En este proyecto, he comprendido los conceptos básicos de htmx, sinceramente, no es mucho más complejo que esto. Es importante destacar que se puede llevar a un nivel superior, incorporando JSX, autorización, una base de datos, entre otros aspectos, para crear aplicaciones más elaboradas y funcionales.

Estoy entusiasmado por continuar explorando el mundo de htmx y desarrollar una aplicación más sofisticada.

A continuación, te comparto algunos enlaces de interés:

Sitio web oficial de htmx: Puedes encontrar la documentación oficial, ejemplos y más información en el sitio web oficial de htmx.

htmx.org
Repositorio de GitHub de htmx: Para seguir de cerca el desarrollo y contribuir al proyecto, visita su repositorio en GitHub.

github.org/htmx

Descubriendo htmx

¿Que es HTMX?

Primer proyecto prueba.