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. Y el título de esta charla es que HTMX es pro JavaScript. Así que de lo que voy a hablar es de qué es HTMX y luego hablaré sobre cómo siento que puede ser una biblioteca pro JavaScript, 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é. Y esta charla es de interés para ti. Podrías echar un vistazo a Hypermedia Systems. Está disponible en línea de forma gratuita, o puedes comprar una copia impresa o una versión Kindle si lo deseas.

Entonces, ¿qué vamos a hacer en esta charla? Bueno, voy a mirar HTMX muy rápido. Dar a las personas que no lo conocen, o tal vez solo han oído hablar de él de pasada, una visión general de lo que es. Y mirar la relación entre HTMX y JavaScript. Y luego voy a mostrar una demo de HTMX. Y luego lo que quiero hacer después de esa demo es pensar un poco sobre cómo HTMX y JavaScript interactúan. Y tal vez, de nuevo, intentar cambiar la forma en que las personas están hablando sobre HTMX y JavaScript. Entonces, HTMX, ¿qué es esta cosa? Bueno, es lo que llamo una biblioteca de front-end orientada a hipermedia. Y lo que hace es que muchas bibliotecas de JavaScript con las que la gente está familiarizada hoy en día, como React y demás, lo que hacen es que tienden a reemplazar HTML. Así que no usas enlaces y formularios de la manera tradicional que lo harías en el pasado con HTML. En cambio, tienes una base de código de front-end bastante elaborada que está trabajando con una API JSON. Y luego React o lo que sea está actualizando de manera reactiva la interfaz de usuario. Y así, HTMX es un poco diferente en que realmente intenta extender HTML y vivir en el mundo de hipermedia que HTML nos ofrece. Así que con una aplicación basada en HTMX, típicamente no estás escribiendo una tonelada de JavaScript tú mismo. HTMX en sí está escrito en JavaScript.

En su lugar, lo que haces con HTMX es colocar atributos en tu HTML, y esos atributos impulsan lo que llamo intercambios de Hypermedia. Y entonces lo que hace HTMX es una biblioteca de JavaScript que busca esas cosas y luego se conecta en comportamientos, una especie de mecanismo estándar de manejador de eventos para eso. Así que a nivel conceptual, lo que HTMX está construyendo es esta idea de controles de Hypermedia. Y los controles de Hypermedia, de nuevo, no están muy orientados a JavaScript, pero permíteme darte el trasfondo de esto.

Lo que son los controles de Hypermedia son cosas como enlaces y formularios. Así que este es el tipo de 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, cuando alguien hace clic en este enlace, obtén esta página. Y esto permite lo que se llama ramificación no lineal.

Entonces, ¿qué era Hypermedia? De nuevo, solo una breve historia aquí. Hypermedia, la idea con ella, lo que la hacía interesante en comparación con medios más antiguos, como libros o películas o lo que sea, era que el usuario podía navegar a través de ella de una manera no lineal. Y de nuevo, este es el aspecto fundamental de la World Wide Web. Probablemente todos estén muy familiarizados con ello. Ahora hay otro control de Hypermedia importante, para la interactividad del usuario de todos modos, en HTML, y ese es el tag de formulario. Y los tags de formulario son un poco más sofisticados que los enlaces. No entraré en los detalles de ello, pero excepto para notar que el tag de formulario con este atributo method da a los autores de HTML más control sobre la forma de la solicitud que se emite. Así que los enlaces emiten gets y eso es todo lo que pueden hacer. Los formularios pueden emitir gets y posts.

Y también tienen una relación más complicada con las etiquetas dentro de ellos. Así que para entender lo que HTMX está tratando de hacer, vamos a centrarnos realmente en lo que significa esta etiqueta de anclaje. ¿Qué significa esto? De nuevo, 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, está bien, renderiza este fragmento de texto en la página y probablemente muéstralo de alguna manera con una affordance, con algún tipo de indicación visual que indique que es clickeable. Y luego, cuando un usuario hace clic en eso, lo que va a hacer es emitir un HTTP get a esta URL about, y va a obtener una respuesta HTML, típicamente.

Así que eso es lo que hacen los enlaces, desde un punto de vista mecánico de hipermedia, eso es lo que hacen los enlaces. Entonces, lo que HTML, o disculpa, lo que HTMX hace es generalizar cada una de estas ideas. Así que hay un evento aquí. Hice clic en esta cosa. Así que HTMX generaliza eso y dice, está bien, cualquier evento puede desencadenar una solicitud HTTP. HTMX también hace que prácticamente cualquier elemento en HTML sea un potencial control de hipermedia. Así que en HTML por defecto, todo lo que tienes son enlaces y formularios. Con HTMX, ahora cualquier cosa puede ser un control de hipermedia. Te da control sobre la forma de la solicitud, ya sea que sea un get o un put post, pero también te da acceso a put y un montón de otros también. Y luego, quizás lo más importante, este enlace, cuando haces clic en enlaces o envías formularios en aplicaciones web tradicionales, tienes que reemplazar todo el viewport con lo que sea que regrese. Así que tengo que decir, puedes usar iframes para hacer reemplazos parciales, pero los iframes sufren de sus propios problemas.

Así que lo que HTMX hace es decir, está bien, vamos a generalizar eso para que cuando se haga la solicitud y el HTML regrese, hagamos que podamos poner ese HTML en cualquier parte de la página en lugar de tener que reemplazar todo el viewport. Así que vamos a repasar los atributos en HTMX que te permiten hacer estas cosas. Así que aquí hay un botón de me gusta que se ha hecho en HTMX, y vamos a repasar los atributos en él que están siendo utilizados por el autor usando HTMX para hacer que este botón de me gusta funcione. Así que lo primero que hay que mirar es este hxput. Y así HTMX tiene una serie de atributos, hxget, post, put, delete y patch, que te permiten decir efectivamente en esta cosa, en esto, sea lo que sea 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 efectivamente convertirse en un control de hipermedia. Puede emitir una solicitud de hipermedia a un servidor y obtener de vuelta HTML. Así que esa es la primera parte. La segunda parte es hxtrigger, y esto es lo que generaliza ese evento. Así que con los enlaces, tienes el evento como un clic. Cuando tienes formularios, el evento es un envío, y así con HTMX, puedes usar cualquier evento, así que mouseover o lo que sea. Aquí estamos usando clic, lo cual es bastante obvio para un botón. En este caso, podrías omitir esto, porque el desencadenante predeterminado para un botón va a ser clic, pero está aquí solo para que puedas ver esto 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.

Así que y luego el último gran paso para la generalización aquí es este hxtarget, y lo que esto dice es después de que emitas este put a esta URL y obtengas de vuelta algo de HTML, lo que quiero que hagas es que tomes el contenido de la respuesta, y quiero que lo pongas en la cosa con el ID output. Esto está usando un selector CSS, así que este es un selector CSS estándar que dice la cosa con el ID, eso es lo que significa este hash, output. Y abajo, tenemos una etiqueta de output con, efectivamente, un ID en ella llamado output, y así lo que va a pasar es que cuando un usuario haga clic en este botón, va a emitir un put a like en el clic, y luego va a obtener algo de contenido HTML de vuelta, y ese contenido va a ser insertado dentro de este output. Y esto resulta ser una generalización realmente importante de HTML. Realmente abre lo que puedes lograr con HTML.

Ahora, ya sabes, lo que notarás sobre todos estos atributos es que son muy declarativos. Son muy parecidos a ese atributo href y ese atributo method que vimos en enlaces y formularios respectivamente, donde especifican qué hacer, pero no hay código imperativo aquí. No estás escribiendo mucho JavaScript para hacer que esta funcionalidad funcione. En su lugar, simplemente estás diciendo, esto es lo que quiero que suceda, y luego el JavaScript de HTMX en el fondo busca estos atributos y conecta los manejadores de eventos necesarios y así sucesivamente.

Así que esos son solo unos pocos atributos, y es una buena generalización de controles de hipermedia. Y de nuevo, si estás muy interesado en esta idea, recomiendo nuestro libro, Hypermedia.Systems, donde entro en detalle exhaustivo sobre esto. Hay un par de otros atributos que vale la pena conocer. Por ejemplo, hxSwap, que indicará exactamente cómo quieres que se intercambie el contenido, así 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, lamento que esto se haya cortado en la parte inferior aquí, pero lo que dice es mostrar este elemento mientras una solicitud está en curso, para que puedas mostrar un indicador para que el usuario sepa que algo está sucediendo, por qué no, cuando hacen clic en un botón y así sucesivamente.

Y luego hxSelect es otro atributo que es útil, que te permite extraer parte de una respuesta, nuevamente, usando un selector CSS, así que la respuesta, debería decir, no 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 allí, 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 realmente principales. Puedes consultar htmx.org slash reference. Y eso no es mucho, ¿verdad? Eso es como 12 atributos. La mayoría de ellos tienen una sintaxis bastante sencilla. El disparador puede volverse un poco complicado, pero hxTarget, muchos de ellos usan selectores CSS, cosas a las que ya estás acostumbrado.

Así que no es una biblioteca muy complicada, así que genial. Pero, ¿qué podemos hacer? ¿Qué podemos hacer con estos pocos atributos o controles de hipermedia? Bueno, echemos un vistazo a un ejemplo. Hay una página completa, si vas a htmx.org slash 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 creo que realmente muestra el poder de HTMX y los controles de hipermedia generalizados es algo llamado active search. Y este es un ejemplo de ese patrón de active search. Y tenemos cuatro atributos aquí.

No vamos a entrar mucho en los detalles, pero va a emitir un post y lo va a emitir en un evento de entrada. Y hay algo llamado delay aquí. Lo que hace es que lo desacelera, para que no lo emitamos en cada evento de entrada. En su lugar, lo emitimos solo cuando ha ocurrido un evento de entrada y luego ha pasado una pausa de 500 milisegundos. Va a apuntar a los resultados de búsqueda, que es el cuerpo de la tabla aquí abajo. Y va a mostrar un indicador de HTMX. Así que no te preocupes demasiado por los detalles. Solo como a un nivel alto, son cuatro atributos.

Y este es un patrón realmente común en aplicaciones donde tienes alguna tabla de cosas y quieres filtrarla. Así que Google hace esto con los resultados de búsqueda. Ves esta interfaz de usuario por todas partes. Y es una interfaz de usuario muy útil. Es realmente agradable ver estos resultados a medida que escribes. Y puedo presionar eliminar y no se actualizará hasta que haya una pequeña pausa. No estamos saturando el servidor cada vez que ocurre una pulsación de tecla. Para eso es ese debounce.

Y así, creo que este es un muy buen ejemplo de, nuevamente, cuatro atributos, solo cuatro atributos. Y no está usando nada más que HTML. Así que 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 por HTMX. Y eso es todo. Así que relativamente simple, pero al mismo tiempo, puedes lograr algunas cosas bastante geniales como esta. Así que eso, creo, lo muestra. Este es uno de los buenos ejemplos que creo que muestra el poder o la idea de lo que puedes lograr con controles de hipermedia generalizados.

Así que, de acuerdo. Sí, HTMX, controles de hipermedia generalizados. Puedes crear una interfaz de usuario que a menudo rivaliza con las SPAs, como aplicaciones basadas en JavaScript sin escribir mucho JavaScript. Es solo HTML con algunos atributos más dentro de él. Así que 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 tengo que admitir que HTMX atrae a personas que no les gusta JavaScript. Tenemos muchas personas que son grandes fanáticos de HTMX porque no les gusta JavaScript. Y debido a eso, creo que, desafortunadamente, HTMX ha ganado una reputación de ser una biblioteca anti-JavaScript. Pero no creo que eso sea correcto. Creo que desde una perspectiva diferente, HTMX es en realidad profundamente pro-JavaScript. Y la forma en que creo que es pro-JavaScript es que HTMX asume el trabajo de sincronizar con el servidor de estos marcos de trabajo pesados basados en JavaScript. Y no es, ya sabes, no puedes hacer todo en HTMX.

Definitivamente hay limitaciones. Pero puedes hacer mucho con él. Y así, lo que me gusta, la forma en que me gusta pensar en esto es que HTMX quita la responsabilidad de todo de los hombros de JavaScript. Así que JavaScript ya no necesita ser este lenguaje de programación de propósito general para todo en tu aplicación web. Y en su lugar, puede centrarse en lo que fue diseñado originalmente, que era un lenguaje de secuencias de comandos relativamente ligero para la web que permite la extensibilidad.

Así que hay otra demostración que quiero ver, que es la demostración de sortable. Déjame mostrarla rápidamente. Ejemplos. Sortable. Lo siento, debería agregar esto. Este es otro ejemplo de HTMX. Y lo que este ejemplo está usando es que está usando una biblioteca de JS sortable. Y lo que permite esa biblioteca es el comportamiento de arrastrar y soltar. Y así, hay algo de código en HTMX. Nuevamente, no vamos a entrar en los detalles sangrientos de esto. Pero básicamente, lo que hace es que se conecta a cualquier elemento que tenga la clase sortable en él, la biblioteca de JavaScript sortable.

Y así, lo conecta para cualquier contenido nuevo que llegue. Y así, aquí abajo, tengo algo de HTML que tiene algo de HTMX en él. Dice post a slash items en el evento end. Y este evento end es un evento que es activado por sortable. Es activado por la biblioteca de JavaScript sortable. Y así, lo que esto va a hacer, y luego este formulario está marcado como sortable. Y así, todo lo que está dentro de aquí va a ser arrastrable y soltado. Y así, lo que eso me va a 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 haciendo solicitudes y estamos publicando, dependiendo de cuál sea el orden, vamos a publicar al servidor con las cosas en el nuevo orden.

Y luego podemos guardar eso y persistirlo y volver a renderizarlo, etcétera. Y así, este es un ejemplo en mi mente, este 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 funcionalidades que el navegador no tiene. El navegador no soporta arrastrar y soltar, al menos no tan suavemente como lo soporta sortable.js. Y así, podemos soportar una mejor experiencia de usuario usando tanto JavaScript como HTMX. Así que 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 hipermedia y no sería ni de cerca tan suave. Así que este es un ejemplo en mi mente donde HTMX y JavaScript o una biblioteca de JavaScript están trabajando juntos en concierto. Estamos aprovechando el hecho de que JavaScript está allí en el navegador. Es un lenguaje de secuencias de comandos muy fuerte. Digan lo que quieran sobre él para proyectos a gran escala y todo lo demás. Pero aquí estamos usando JavaScript de la manera para la cual fue diseñado. Secuencias de comandos del lado del cliente para extender y mejorar la experiencia del usuario.

Así que Roy Fielding es alguien que escribió una especie de famosa disertación sobre la web. Fue uno de los ingenieros originales que trabajó en la web temprana. Y su disertación nos dio términos como rest y hideous, que quizás hayas escuchado. Pero habló sobre secuencias de comandos 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 siendo como la web. Está hablando de un sistema restful, que era su descripción de la web. Así que lo que dijo es, rest permite que la funcionalidad del cliente se extienda descargando y ejecutando código en forma de applets o secuencias de comandos. Esto simplifica los clientes al reducir el número de características que deben ser preimplementadas. Así que arrastrar y soltar. No tuvimos que preimplementar eso 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 del despliegue 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 interfaz de usuario, esa extensibilidad, usando JavaScript. Pero luego HTML puede conectarse a eso usando eventos. Y puede hacerse cargo del trabajo de sincronizar con el servidor backend y realmente retener ese modelo original, el modelo restful de la web.

Así que nuevamente, quiero enfatizar que HTML está trabajando en concierto con JavaScript aquí. Los dos se complementan entre sí. Y HTML está liberando a JavaScript de esta carga de hacer todo. No tienes que hacer todo en JavaScript. Y realmente puedes usar JavaScript para lo que destaca, para este tipo de cosas. Para este tipo de extensibilidad, la manipulación de la interfaz de usuario en el lado del cliente para proporcionar funcionalidad en el navegador que simplemente no está allí por defecto por cualquier razón. Simplemente no se ha estandarizado aún. O es simplemente un comportamiento avanzado. Algo que necesita lograrse 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 muy buen entendimiento de JavaScript. Porque cuando te encuentras en situaciones avanzadas en HTMX, la programación declarativa como HTMX permite, la programación orientada a hipermedia como HTMX permite es genial, pero solo puede llegar hasta cierto punto. Así que si realmente quieres hacer esas interfaces de usuario más avanzadas, si realmente quieres obtener esa interactividad, si quieres impulsar HTMX, tendrás que escribir JavaScript. Y tendrás que ser un desarrollador de JavaScript bastante bueno.

Y así creo que hay una complementariedad allí. Complementariedad. ¿Cuál es la palabra que quiero decir? Creo que hay un complemento 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, la biblioteca HTMX en sí. Así que creo, nuevamente, que lo que quiero que la gente se lleve de esto es que HTMX no es anti-JavaScript. HTMX es una biblioteca pro-JavaScript. Gracias por escuchar mi charla.