HTMX y UI progresiva

La interfaz de NexGestión combina navegación de aplicación con actualizaciones parciales. Un módulo debe funcionar tanto al abrir una vista como al sustituir un fragmento dentro de otra pantalla.

Reglas de una vista progresiva

• el HTML inicial contiene la estructura y los estados principales;
• los controles declaran claramente qué fragmento actualizan;
• los formularios muestran validación y resultado sin perder el contexto;
• los scripts no dependen de ejecutarse una sola vez;
• cada fragmento tiene un contenedor estable;
• los eventos se delegan o se registran de forma idempotente.

Ejemplo conceptual:

<section id="reservas-panel">
  <form hx-post="?view=reservas.list&action=reservas.create"
        hx-target="#reservas-panel"
        hx-swap="outerHTML">
    <label>
      Fecha
      <input name="date" type="date" required>
    </label>
    <button type="submit">Crear reserva</button>
  </form>
</section>

La acción sigue validando permisos, CSRF y datos aunque la petición proceda de HTMX. No confíes en que el navegador haya mostrado la pantalla correcta.

JavaScript

Si una interacción necesita JavaScript, inicialízala de forma segura después de una carga inicial y después de un intercambio de fragmento. Evita listeners duplicados y no sobrescribas variables o eventos globales del CRM.

Accesibilidad

Usa etiquetas asociadas a sus campos, foco visible, mensajes de error legibles y estados que puedan entenderse sin color. Una interfaz parcial no debe dejar el foco en un elemento eliminado.