Ir al contenido

htmx

De Wikipedia, la enciclopedia libre
htmx
Información general
Tipo de programa biblioteca de JavaScript
Autor Carson Gross
Desarrollador Carson Gross
Modelo de desarrollo Código abierto
Lanzamiento inicial 10/08/2022
Licencia Licencia BSD
Información técnica
Programado en JavaScript
Versiones
Última versión estable 2.0.212 de agosto de 2024
Enlaces
[editar datos en Wikidata]

htmx (también escrito como HTMX) es una biblioteca JavaScript front-end de código abierto que extiende HTML con atributos personalizados que permiten el uso de AJAX directamente en HTML y basado fuertemente en hipermedia. Estos atributos permiten el desarrollo de una página web dinámica en HTML y CSS, sin necesidad de escribir JavaScript adicional. Estos atributos permiten que tareas que tradicionalmente requerían escribir JavaScript se realicen completamente con HTML. La biblioteca fue creada por Carson Gross como una nueva versión de intercooler.js.

La biblioteca soporta la comunicación con el servidor mediante métodos HTTP estándar y simplifica la inserción de respuestas del servidor (generalmente texto o fragmentos HTML) en partes designadas de la página web sin tener que volver a renderizar la página entera. Esto a su vez permite un comportamiento similar al que se puede lograr con el comportamiento de reconciliación en DOM virtuales.

Historia

[editar]

htmx tiene sus raíces en intercooler.js, una biblioteca frontend creada por Carson Gross en 2013.[1]​ La biblioteca tenía como objetivo abordar la complejidad asociada con AJAX mediante la introducción de un enfoque simplificado utilizando atributos HTML.[2]​ La intención era crear un marco de referencia que estuviera alineado con la intención original de Roy Fielding para el paradigma REST (transferencia de estado representacional), y específicamente HATEOAS (hipermedia como motor del estado de la aplicación). El problema se describe en la publicación del blog de Fielding "Las API REST deben estar controladas por hipertexto" de octubre de 2008.[3]​[4]​

htmx se creó como una versión mejorada de intercooler.js que no dependía de jQuery y la versión 1.0.0 se lanzó en noviembre de 2020.[5]​El lanzamiento de htmx fue un hito importante para el proyecto, al ofrecer una forma de utilizar AJAX, transiciones CSS, WebSockets y eventos enviados por el servidor directamente en HTML mediante atributos. [6]​

En 2023, htmx fue incluida en la primera cohorte del programa GitHub Accelerator, un programa que brinda a proyectos de código abierto con financiamiento y orientación por parte de miembros de proyectos de código abierto maduros. [7]​

Diseño y funcionalidad

[editar]

htmx combina las capacidades de los framework modernos con el procesamiento del lado del servidor de las aplicaciones web tradicionales.[8]​ La filosofía de diseño de la biblioteca gira en torno al objetivo de "hacer HTML completo como hipertexto". [9]​ Al aprovechar los atributos HTML personalizados con el prefijo hx- para disparar solicitudes AJAX para obtener contenido con el que actualizar partes del DOM, htmx permite a los desarrolladores definir un comportamiento dinámico directamente dentro de su marcado HTML. Esto permite reducir o incluso eliminar la necesidad de código JavaScript. [10]​ [11]​ Esta aproximación confiere algunos beneficios, como por ejemplo, evita problemas ocasionados por grandes cantidades de Javascript,[12]​administración de estados complejos e hidratación. [13]​ Este enfoque ofrece una forma más accesible e intuitiva de crear interfaces de usuario modernas, evitando al mismo tiempo las complejidades que suelen asociarse con los frameworks de JavaScript tradicionales. [14]​ Como htmx puede actualizar partes específicas de una página web sin necesidad de recargar toda la página, al igual que utilizar HTML y CSS simples, su uso puede dar como resultado una mejor experiencia y mayor rendimiento para el usuario, ya que solo una parte de los datos necesita ser solicitada nuevamente al servidor. [15]​

La biblioteca también desafía el enfoque tradicional de utilizar JSON como formato estándar para solicitudes HTTP al reemplazarlo con HTML. Esto tiene como objetivo resolver los problemas relacionados con el rendimiento y la sobrecarga cognitiva de la serialización, de serialización y uso posterior en la interfaz de usuario, como la incapacidad de JavaScript y JSON para procesar con precisión números mayores que 253 o distinguir números de punto flotante de números enteros y la complejidad involucrada con alternativas a REST basadas en JSON, como GraphQL o gRPC. [16]​ Además, una ventaja potencial de htmx y de los enfoques orientados a hipertexto, es que los datos recuperados directamente de la base de datos no necesitan estar en un formato JSON o compatible con JSON, como el utilizado por muchas bases de datos de documentos o el tipo JSON de PostgreSQL, o ser serializados por el servidor solo para volver a ser de serializados por el cliente. [17]​ La reducción del cómputo del lado del cliente también ayuda a cambiar el foco del desarrollo hacia el backend, lo que podría dar como resultado un mejor rendimiento del lado del cliente, aunque a costa de una mayor carga del servidor. Esta aproximación brinda a los desarrolladores una forma más simple de resolver problemas del lado del servidor, sirviéndose del lenguaje de programación que deseen, que de otra forma deberían ser resueltos del lado del cliente con JavaScript. [18]​

Uso

[editar]

htmx agrega atributos personalizados al HTML para definir comportamientos dinámicos, como disparar solicitudes al servidor y actualizar contenido. La funcionalidad de htmx se basa en los atributos hx-get, hx-post, hx-put, hx-delete y hx-patch, que realizan solicitudes AJAX con el método HTTP especificado. [8]​ [15]​ Estas solicitudes se realizan cuando se activa un determinado evento DOM, change para elementos de input, select o textarea, submit para elementos de formulario y click para otros elementos. [8]​ Los eventos se puede anular con hx-trigger. [19]​. Otros atributos incluyen hx-target para especificar un destino distinto del elemento actual para intercambiar contenido y hx-swap para establecer cómo se debe intercambiar o ubicar el contenido obtenido del servidor en relación con el elemento de destino. [20]​ [21]​

Comunidad y adopción

[editar]

Desde su creación como intercooler.js y su posterior evolución a htmx, la biblioteca ha ganado un número significativo de seguidores dentro de la comunidad de desarrollo web. [22]​ [23]​ htmx ha sido considerado como una alternativa más simple y liviana a los framework de JavaScript completos como React, Vue.js y Angular. [24]​ [25]​ Como resultado, ha ganado cierta popularidad como alternativa al enfoque utilizado por la mayoría de los framework de JavaScript utilizados para crear aplicaciones web dinámicas. [26]​

Se han desarrollado integraciones de htmx con distintos framework web full-stack, lenguajes de programación y motores de plantillas, tales como Node.js, Django, Flask, Adobe ColdFusion y ASP. NET, Clojure y Ruby on Rails. [27]​ Estas bibliotecas suelen ser simplemente por conveniencia, ya que el diseño portátil y minimalista de htmx le permite integrarse con prácticamente cualquier motor de plantillas HTML. [9]​

Véase también

[editar]

Referencias

[editar]
  1. ↑ «htmx 1.0.0». HTMX. 24 de noviembre de 2020. Consultado el 4 de abril de 2024. 
  2. ↑ Melanson, Mike (19 de enero de 2022). «Htmx: HTML Approach to Interactivity in a JavaScript World». The New Stack (en inglés estadounidense). Consultado el 24 de abril de 2024. 
  3. ↑ Carson Gross. «Simple AJAX using HTML attributes». Intercooler.js (en inglés). Consultado el 24 de abril de 2024. 
  4. ↑ Roy T. Fielding (20 de octubre de 2008). «REST APIs must be hypertext-driven > Untangled». 
  5. ↑ «htmx ~ htmx 1.0.0 has been released!». htmx.org. Consultado el 24 de abril de 2024. 
  6. ↑ «htmx - Technology Radar». Thoughtworks (en inglés estadounidense). 
  7. ↑ Kara Sowles (12 de abril de 2023). «GitHub Accelerator: our first cohort and what's next». The GitHub Blog (en inglés estadounidense). Consultado el 24 de abril de 2024. 
  8. ↑ a b c James Hibbard (8 de agosto de 2023). «An Introduction to htmx, the HTML-focused Dynamic UI Library». SitePoint. Consultado el 4 de abril de 2024. 
  9. ↑ a b Matthew Tyson (20 de septiembre de 2023). «Intro to HTMX: Dynamic HTML without JavaScript». InfoWorld (en inglés). Consultado el 24 de abril de 2024. 
  10. ↑ «Introduction to HTMX | refine». 26 October 2023. 
  11. ↑ Matthew Tyson (13 de marzo de 2024). «Complexity bad: An interview with HTMX creator Carson Gross». InfoWorld (en inglés). Consultado el 24 de abril de 2024. 
  12. ↑ Sheppard, Dennis (2017), «Leveling Up Your PWA», Beginning Progressive Web App Development (en inglés) (Berkeley, CA: Apress): 243-259, ISBN 978-1-4842-3089-3, doi:10.1007/978-1-4842-3090-9_12, consultado el 30 de abril de 2024 .
  13. ↑ «A First Look at HTMX and How it Compares to React». Builder.io (en inglés). 
  14. ↑ «htmx ~ Essays». htmx.org. Consultado el 30 de abril de 2024. 
  15. ↑ a b «htmx ~ Documentation». htmx.org. Consultado el 30 de abril de 2024. 
  16. ↑ Kleppmann, Martin (1 de marzo de 2017). «Formats for Encoding Data». Designing Data-Intensive Applications (epub) (en inglés estadounidense) (1st edición). 1005 Gravenstein Highway North, Sebastopol, CA 95472, United States of America: O’Reilly Media. JSON, XML, and Binary Variants. ISBN 9781491903100. 
  17. ↑ Shi, Xuanhua; Zhang, Yipeng; Huang, Hong; Hu, Zhenyu; Jin, Hai; Shen, Huan; Zhou, Yongluan; He, Bingsheng et al. (April 2020). «Maxson: Reduce Duplicate Parsing Overhead on Raw Data». 2020 IEEE 36th International Conference on Data Engineering (ICDE). IEEE. pp. 1621-1632. ISBN 978-1-7281-2903-7. doi:10.1109/ICDE48307.2020.00144. 
  18. ↑ Eckert, Raphael (23 de marzo de 2023). Erstellen eines einfach bedienbaren und einfach implementierbaren UI-Konzepts mit Go und htmx [Creando un concepto de interfaz de usuario fácil de usar y fácil de implementar con Go y htmx.] (en de-DE). Heilbronn: Hochschule Heilbronn. 
  19. ↑ James Hibbard (8 de agosto de 2023). «An Introduction to htmx, the HTML-focused Dynamic UI Library». SitePoint. Consultado el 4 de abril de 2024. 
  20. ↑ «htmx ~ hx-target Attribute». htmx.org. Consultado el 3 de septiembre de 2024. 
  21. ↑ «htmx ~ hx-swap Attribute». htmx.org. Consultado el 3 de septiembre de 2024. 
  22. ↑ «@htmx_org». X (formerly Twitter). Consultado el 19 de mayo de 2024. 
  23. ↑ «htmx.org». npm (en inglés). 17 de abril de 2024. Consultado el 30 de abril de 2024. 
  24. ↑ Tyson, Matthew (1 de abril de 2024). «What's the best JavaScript framework?». InfoWorld (en inglés). Consultado el 19 de mayo de 2024. 
  25. ↑ Dale, Kyran (7 de diciembre de 2022). «Chapter 4. Webdev 101». Data Visualization with Python and JavaScript (2nd edición). Sebastopol, CA: O'Reilly Media. ISBN 9781098111878. 
  26. ↑ Valeria Letusheva (9 de mayo de 2024). «Highlights from the Django Developer Survey 2024». InfoWorld (en inglés). Consultado el 19 de mayo de 2024. 
  27. ↑ «htmx ~ Server-Side Examples». htmx.org. Consultado el 19 de mayo de 2024. 

Enlaces externos

[editar]
  • Sitio web oficial
  • htmx en GitHub
  • Esta obra contiene una traducción derivada de «htmx» de Wikipedia en inglés, concretamente de esta versión, publicada por sus editores bajo la Licencia de documentación libre de GNU y la Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.
Obtenido de «https://es.wikipedia.org/w/index.php?title=Htmx&oldid=162645179»