htmx es Pro-JavaScript

Hola, mi nombre es Carson Gross y voy a dar una charla sobre HTMX. Soy el creador de HTMX, que es una especie de biblioteca alternativa de front-end escrita en JavaScript. El título de esta charla es que HTMX es pro JavaScript. Lo que voy a hablar es qué es HTMX y luego hablaré sobre cómo creo que puede ser una biblioteca JavaScript profesional, a pesar de lo que algunas personas dicen al respecto.

Así que solo un poco de información sobre mí. Tengo una empresa de consultoría llamada Big Sky Software, y eso es principalmente para trabajo de código abierto. Tengo algunos proyectos como HTMX. Probablemente sea el más grande. Y luego un par de otros, HyperScript. Tengo una página algo divertida sobre desarrollo llamada Gregbrain.dev. Y luego tengo un libro sobre HTMX que te mostraré. Si esta charla te interesa, puedes consultar Hypermedia Systems. Está disponible en línea de forma gratuita, o puedes comprar una copia impresa o una versión Kindle si quieres.

¿Qué vamos a hacer en esta charla? Bueno, voy a echar un vistazo rápido a HTMX. Daré a conocer a las personas que no lo conocen, o tal vez solo hayan oído hablar de él de pasada, una descripción general de qué es. Y veremos la relación entre HTMX y JavaScript. Luego mostraré una demostración de HTMX. Y luego, después de esa demostración, quiero reflexionar un poco sobre cómo HTMX y JavaScript interactúan. Y tal vez, nuevamente, intentar cambiar la forma en que las personas hablan sobre HTMX y JavaScript. Entonces, ¿qué es esta cosa HTMX? Bueno, es lo que llamo una biblioteca de front-end orientada a Hypermedia. Lo que hace es similar a muchas bibliotecas de JavaScript con las que las personas están familiarizadas hoy en día, como React y demás, es que tienden a reemplazar HTML. Entonces, no se utilizan enlaces y formularios de la manera tradicional que se solía hacer con HTML. En su lugar, tienes una base de código de front-end bastante elaborada que funciona con una API JSON. Y luego React o lo que sea actualiza reactivamente la interfaz de usuario. Y HTMX es un poco diferente en el sentido de que realmente intenta extender HTML y vivir en el mundo Hypermedia que HTML nos brinda. Entonces, con una aplicación basada en HTMX, normalmente no estás escribiendo una tonelada de JavaScript tú mismo. HTMX en sí está escrito en JavaScript. Lo enfatizaré nuevamente un par de veces. Pero tú, como desarrollador de HTMX, a menudo no necesitas escribir una tonelada de JavaScript.

En cambio, lo que haces con HTMX es colocar atributos en tu HTML, y esos atributos impulsan lo que yo llamo intercambios de Hypermedia. Y lo que hace HTMX es una biblioteca de JavaScript que busca esas cosas y luego se conecta a los comportamientos, que es el mecanismo estándar de controlador de eventos para eso. Entonces, a nivel conceptual, HTMX se basa en esta idea de controles de Hypermedia. Y los controles de Hypermedia, nuevamente, no están muy orientados a JavaScript, pero permíteme darte un poco de contexto sobre esto.

Los controles de Hypermedia son cosas como enlaces y formularios. Este es el enlace en HTML. Este es el control de Hypermedia canónico. Este fue el control de Hypermedia original. Y lo que hace que esto sea un control de Hypermedia en particular es este pequeño atributo, este href, que efectivamente le dice al navegador que, cuando alguien hace clic en este enlace, obtenga esta página. Y esto permite lo que se llama ramificación no lineal. Entonces, ¿qué era Hypermedia? Nuevamente, solo una breve historia aquí. Hypermedia, la idea con ella, lo que la hizo interesante en comparación con los medios antiguos, como libros o películas o lo que sea, era que el usuario podía navegar a través de ella de manera no lineal. Y nuevamente, este es el aspecto fundamental de la World Wide Web. Probablemente todos estén muy familiarizados con esto. Ahora hay otro control de Hypermedia importante, al menos en cuanto a la interactividad del usuario, en HTML, y ese es el etiqueta de formulario. Las etiquetas de formulario son un poco más sofisticadas que los enlaces. No entraré en los detalles, excepto para señalar que la etiqueta de formulario con este atributo de método le da a los autores de HTML más control sobre la forma de la solicitud que se emite. Entonces, los enlaces emiten solicitudes GET y eso es todo lo que pueden hacer. Los formularios pueden emitir solicitudes GET y POST. Y también tienen una relación más complicada con las etiquetas dentro de ellos. Para entender lo que HTMX está tratando de hacer, centrémonos en lo que significa esta etiqueta de ancla. ¿Qué significa esto? Nuevamente, lo siento. Me disculpo si solo estás interesado en JavaScript, pero vamos a hablar un poco sobre HTML aquí.

Entonces, ¿qué significa realmente esto para un navegador? Bueno, lo que le dice al navegador es: `ok, renderiza este fragmento de texto en la página y probablemente muéstralo de alguna manera con una indicación visual de que se puede hacer clic en él`. Y luego, cuando un usuario hace clic en eso, lo que va a hacer es emitir un HTTP get a esta URL de about, y obtendrá una respuesta de HTML, típicamente. Y lo que esa respuesta de HTML hará es reemplazar toda la vista del navegador.

Entonces, eso es lo que hacen los enlaces, desde un punto de vista mecánico de hypermedia, eso es lo que hacen los enlaces. Entonces, lo que hace HTMX es generalizar cada una de estas ideas. Aquí hay un evento. Hice clic en esto. Entonces, HTMX generaliza eso y dice, está bien, cualquier evento puede activar una solicitud HTTP. HTMX también convierte prácticamente cualquier elemento en HTML en un control de hypermedia potencial. Por defecto, en HTML solo tienes enlaces y formularios. Con HTMX, ahora cualquier cosa puede ser un control de hypermedia. Te da control sobre la forma de la solicitud, ya sea un get o un put post, pero también te da acceso a put y a muchos otros. Y quizás lo más importante, este enlace, cuando haces clic en enlaces o envías formularios en aplicaciones web tradicionales, tienes que reemplazar toda la vista con lo que regresa. Así que tengo que decir, puedes usar iframes para hacer reemplazos parciales, pero los iframes tienen sus propios problemas.

Entonces, lo que hace HTMX es decir, está bien, generalicemos eso para que cuando se haga la solicitud y regrese el HTML, hagamos que podamos colocar ese HTML en cualquier lugar de la página en lugar de tener que reemplazar toda la vista. Así que repasemos los atributos en HTMX que te permiten hacer estas cosas. Aquí hay un botón de `Me gusta` que se ha hecho en HTMX, y repasemos los atributos que se están utilizando en él para que este botón de `Me gusta` funcione. Lo primero que hay que tener en cuenta es este hxput. HTMX tiene una serie de atributos, hxget, post, put, delete y patch, que te permiten decir efectivamente en este elemento, cuando ocurra el evento desencadenante y hablaremos de eso en un segundo, cuando ocurra un evento desencadenante, emite este tipo de solicitud. Así que ahora cualquier elemento en tu documento HTML puede convertirse efectivamente en un control de hypermedia. Puede emitir una solicitud de hypermedia a un servidor y obtener HTML a cambio. Esa es la primera parte. La segunda parte es hxtrigger, y esto es lo que generaliza ese evento. Con los enlaces, el evento es un clic. Cuando tienes formularios, el evento es un envío, y con HTMX, puedes usar cualquier evento, como mouseover o lo que sea. Aquí estamos usando clic, que es bastante obvio para un botón. En este caso, en realidad podrías omitir esto, porque el desencadenador predeterminado para un botón va a ser clic, pero está aquí solo para que puedas verlo de manera explícita. Así que tenemos esta capacidad de desencadenar una solicitud HTTP en cualquier cosa, no solo clics y envíos en enlaces y formularios respectivamente. Y luego el último paso importante para la generalización aquí es este hxtarget, y esto dice que después de emitir este put a esta URL y obtener algún HTML, quiero que tomes el contenido de la respuesta y lo coloques en el elemento con el ID output. Esto utiliza un selector CSS, por lo que es un selector CSS estándar que indica el elemento con el ID, eso es lo que significa este símbolo de almohadilla, output. Y debajo, tenemos una etiqueta de salida con, efectivamente, un ID llamado output, y así que lo que va a suceder es que cuando un usuario haga clic en este botón, se emitirá un put a like en el clic, y luego obtendrá algún contenido HTML, y ese contenido se insertará dentro de esta salida. Y esto resulta ser una generalización muy importante de HTML. Realmente abre las posibilidades de lo que se puede lograr con HTML.

Ahora, lo que notarás de todos estos atributos es que todos son muy declarativos. Son muy similares al atributo href y al atributo method que vimos en los enlaces y forms respectivamente, donde especifican qué hacer, pero no hay un code imperativo aquí. No estás escribiendo mucho JavaScript para que esta funcionalidad funcione. En cambio, simplemente estás diciendo, esto es lo que quiero que suceda, y luego el JavaScript de HTMX en segundo plano busca estos atributos y conecta los controladores de eventos necesarios y así sucesivamente. Así que eso es solo unos pocos atributos, y eso es una buena generalización de los controles de hypermedia. Y nuevamente, si te interesa mucho esta idea, recomiendo nuestro libro, Hypermedia.Systems, donde entro en detalles exhaustivos sobre esto. Hay un par de otros atributos que vale la pena conocer. Por ejemplo, hxSwap, que indica exactamente cómo quieres que se intercambie el contenido, por lo que esto reemplazaría, y aquí tenemos hxSwap igual a outerHTML, por lo que esto reemplazaría la etiqueta de salida en lugar de insertar el contenido dentro de ella. hxIndicator, lo siento, esto se cortó en la parte inferior aquí, pero lo que dice es mostrar este elemento mientras una solicitud está en proceso, para que puedas mostrar un indicador para que el usuario sepa que algo está sucediendo, por ejemplo, cuando hacen clic en un botón, etc. Y luego un par de atributos más, hxInclude, que te permite incluir el valor de las entradas en una solicitud, lo cual puede ser útil, por ejemplo, si tienes un comportamiento similar a un formulario donde necesitas enviar cosas, o incluso un enlace donde quieres incluir algo en esa solicitud.

Y luego hxSelect es otro atributo útil, que te permite extraer parte de una respuesta, nuevamente, utilizando un selector CSS, por lo que la respuesta, debería decir, no la solicitud, cuando la respuesta regresa, solo quieres extraer una pequeña sección de ella para insertarla en algún lugar en el DOM, entonces puedes usar hxSelect para eso. Y hay algunos atributos más, pero esos son los principales.

En general, diría que hay alrededor de una docena de atributos principales que componen HTMX, probablemente menos de 10 de los verdaderos atributos principales. Puedes consultar htmx.org/reference. Y eso no es mucho, ¿verdad? Son como 12 atributos. La mayoría de ellos tienen una sintaxis bastante sencilla. El desencadenador puede volverse un poco complicado, pero hxTarget, muchos de ellos utilizan selectores CSS, cosas con las que ya estás familiarizado. Así que no es una biblioteca muy complicada, es genial.

Pero, ¿qué podemos hacer? ¿Qué podemos hacer con estos pocos atributos o controles de hypermedia? Bueno, veamos un ejemplo. Hay una página completa, si vas a htmx.org/examples, hay una página completa de ejemplos para que puedas ver todo lo que se puede lograr con estos 10 o 12 atributos. Pero uno que realmente muestra el poder de HTMX y los controles de hypermedia generalizados es algo llamado búsqueda activa. Y este es un ejemplo de ese patrón de búsqueda activa. Y tenemos cuatro atributos aquí. No vamos a entrar en demasiados detalles, pero va a emitir una solicitud POST y lo hará en un evento de entrada. Y aquí hay algo llamado un retraso. Lo que hace es que lo debouncea, por lo que no lo emite en cada evento de entrada. En cambio, lo emite solo cuando ha ocurrido un evento de entrada y luego se ha producido una pausa de 500 milisegundos. Va a apuntar a los resultados de búsqueda, que es el cuerpo de la tabla aquí abajo. Y mostrará un indicador HTMX. Y no te preocupes demasiado por los detalles. Solo a grandes rasgos, son cuatro atributos. Pero lo que nos permite hacer aquí abajo, y esto es una demostración funcional, es comenzar a escribir y filtrar fácilmente una lista de usuarios.

Y este es un patrón muy común en aplicaciones donde tienes una tabla de elementos y quieres filtrarla. Google hace esto con los resultados de búsqueda. Ves esta UI en todas partes. Y es una UI muy útil. Es genial ver estos resultados mientras escribes. Y puedo presionar borrar y no se actualizará hasta que haya una pequeña pausa. No estamos sobrecargando el servidor cada vez que se presiona una tecla. Eso es para lo que sirve el debounce.

Y esto, creo, es un muy buen ejemplo de, nuevamente, solo cuatro atributos. Y solo está utilizando HTML. Entonces, si miramos las respuestas a esta publicación, estas respuestas son solo HTML. Y ese HTML, por ejemplo, en la última búsqueda, obtuvimos dos filas. Y puedes ver que esas dos filas se insertaron en el DOM solo con HTMX. Y eso es todo. Relativamente simple, pero al mismo tiempo, puedes lograr cosas bastante geniales como esta. Así que eso, creo, muestra. Este es uno de los buenos ejemplos que creo que demuestra el poder o la idea de lo que se puede lograr con controles de hypermedia generalizados. Entonces, bien. Sí, HTMX, controles de hypermedia generalizados. Puedes crear UI que a menudo rivaliza con las SPAs, como aplicaciones basadas en JavaScript pesado sin escribir mucho JavaScript. Es solo HTML con algunos atributos adicionales. Entonces podemos construir más aplicaciones sin JavaScript. ¿Por qué estoy dando una charla en una conferencia de JavaScript entonces? ¿Y eso significa que HTMX es anti-JavaScript? Y debo admitir que HTMX atrae a personas que no les gusta JavaScript. Tenemos muchos fanáticos de HTMX que no les gusta JavaScript. Y debido a eso, creo que, desafortunadamente, HTMX ha obtenido la reputación de ser una biblioteca anti-JavaScript. Pero no creo que eso sea correcto. Creo que desde una perspectiva diferente, HTMX en realidad es profundamente pro-JavaScript. Y la forma en que creo que es pro-JavaScript es que HTMX asume la tarea de sincronizarse con el servidor de estos frameworks basados en JavaScript pesado. Y no, no puedes hacer todo en HTMX.

Definitivamente tiene sus limitaciones. Pero se puede hacer mucho con él. Y lo que me gusta, la forma en que me gusta pensar en esto es que HTMX se encarga de la responsabilidad de todo lo que tiene que ver con JavaScript. Por lo tanto, JavaScript ya no necesita ser un lenguaje de programación de propósito general para todo en tu aplicación web. En cambio, puede centrarse en lo que fue diseñado originalmente para ser, que es un lenguaje de script relativamente ligero para la web que permite la extensibilidad.

Hay otra demostración a la que quiero echar un vistazo, que es la demostración de ordenamiento. Permíteme mostrarla rápidamente. Ejemplos. Ordenamiento. Lo siento, debería haberlo agregado. Este es otro ejemplo de HTMX. Y lo que este ejemplo utiliza es una biblioteca de JS para ordenar. Y lo que esa biblioteca permite es el comportamiento de arrastrar y soltar. Y así, aquí hay un poco de code en HTMX. Nuevamente, no vamos a entrar en los detalles de esto. Pero básicamente, lo que hace es que se conecta a cualquier elemento que tenga la clase ordenable en él, la biblioteca de JavaScript para ordenar. Y así, lo conecta para cualquier nuevo contenido que se descargue. Y aquí abajo, tengo algo de HTML que tiene HTMX. Dice `post to slash items` en el evento final. Y este evento final es un evento que se activa por el ordenable. Se activa por la biblioteca de JavaScript para ordenar. Y así, lo que esto va a hacer, y luego este formulario está marcado como ordenable. Y así, todo lo que está dentro de aquí se puede arrastrar y soltar. Y así, lo que me permitirá hacer en HTMX es agarrar estas cosas y soltarlas y luego sincronizar el orden con el servidor. Si miramos aquí abajo, puedes ver que se están realizando solicitudes y estamos enviando, dependiendo del orden, vamos a enviar al servidor con las cosas en el nuevo orden.

Y luego podemos guardar eso, persistirlo y volver a renderizarlo, y así sucesivamente. Y así, esto es un ejemplo en mi mente, esto es un ejemplo en mi mente de un uso de HTMX donde está trabajando en conjunto con una biblioteca de JavaScript. Sortable.js es obviamente una biblioteca de JavaScript. Y está proporcionando funcionalidad que el navegador no tiene. El navegador no admite arrastrar y soltar, al menos no tan suavemente como sortable.js lo admite. Y así, podemos brindar una mejor experiencia del usuario utilizando tanto JavaScript como HTMX. Entonces no hay una oposición allí. En cambio, son complementarios entre sí. HTMX no podría lograr esa interfaz de usuario por sí solo. Tendrías que hacer un intercambio de hipertexto y no sería tan fluido. Entonces, este es un ejemplo en mi mente donde HTMX y JavaScript o una biblioteca de JavaScript están trabajando juntos en conjunto. Estamos aprovechando el hecho de que JavaScript está presente en el navegador. Es un lenguaje de script muy sólido. Digan lo que quieran sobre él para proyectos a gran escala y todo lo demás. Pero aquí estamos usando JavaScript de la manera en que fue diseñado. Scripting del lado del cliente para extender y mejorar la experiencia del usuario.

Roy Fielding es alguien que escribió una especie de famosa disertación sobre la web. Fue uno de los ingenieros originales que trabajaron en la web temprana. Y su disertación nos dio términos como rest y hideous, que tal vez hayas escuchado. Pero habló sobre el scripting en esa disertación. Y esto es lo que tenía que decir. Y cuando dice rest aquí, lo que quiere decir es la web. Puedes pensar en rest como si fuera la web. Está hablando de un sistema restful, que era su descripción de la web. Entonces, lo que dijo es que rest permite que la funcionalidad del cliente se extienda mediante la descarga y ejecución de código en forma de applets o scripts. Esto simplifica a los clientes al reducir el número de características que deben ser pre-implementadas. Así que arrastrar y soltar. No tuvimos que pre-implementarlo en el navegador. El navegador no tiene que tener una API para eso, porque tenemos JavaScript para ayudarnos a hacer eso. Y permitir que las características se descarguen después de la implementación mejora la extensibilidad del sistema.

Exactamente. Esto es lo que acabamos de ver en esa demostración. Arrastrar y soltar no es algo que esté integrado en la web. Al menos no tan bien como lo está con sortable JS. Y así puedes usar sortable JS para lograr esa user interface, esa extensibilidad, utilizando JavaScript. Pero luego HTML puede conectarse a eso utilizando eventos. Y puede encargarse de la sincronización con el servidor backend y realmente mantener ese modelo original, el modelo restful de la web.

Entonces, nuevamente, quiero enfatizar que HTML está trabajando en conjunto con JavaScript aquí. Ambos se complementan entre sí. Y HTML alivia a JavaScript de la carga de hacer todo. No tienes que hacer todo en JavaScript. Y realmente puedes usar JavaScript para lo que se destaca, para este tipo de cosas. Para esta manipulación de la interfaz de usuario en el lado del cliente para proporcionar funcionalidad en el navegador que simplemente no está presente de forma predeterminada por diversas razones. Aún no se ha estandarizado. O es simplemente advanced behavior. Algo que se debe lograr en JavaScript.

No hay vergüenza en usar JavaScript y bastante JavaScript con HTMX. Y de manera similar, no creo que alguien que esté muy interesado en JavaScript y sea un desarrollador de JavaScript deba evitar echar un vistazo a HTMX. Creo que algunos de los mejores desarrolladores, los mejores desarrolladores de HTMX en los próximos cinco años serán personas que tengan un buen entendimiento de JavaScript. Porque cuando te enfrentas a situaciones advanced en HTMX, la programación declarativa como la que permite HTMX y la programación orientada a hipertexto como la que permite HTMX son geniales, pero solo pueden llegar hasta cierto punto. Entonces, si realmente quieres hacer esas interfaces de usuario más advanced, si realmente quieres obtener esa interactividad, si quieres impulsar HTMX, tendrás que escribir JavaScript. Y tendrás que ser un buen desarrollador de JavaScript. Así que creo que hay una complementariedad ahí. Complementariedad. ¿Cuál es la palabra que quiero decir? Creo que hay una complementariedad entre estas dos tecnologías. HTMX puede ayudar a JavaScript al liberarlo de la carga de hacer todo. Y JavaScript puede ayudar a HTMX al proporcionar esa extensibilidad adicional que simplemente no tiene sentido integrar en HTMX, en la propia biblioteca de HTMX. Así que creo, nuevamente, lo que quiero que la gente se lleve de esto es que HTMX no es anti-JavaScript. HTMX es una biblioteca a favor de JavaScript. Gracias por escuchar mi charla.