Enlaces rápidos
En el mundo en constante cambio del desarrollo de sitios web, los desarrolladores buscan constantemente herramientas y tecnologías que ayuden a mejorar la experiencia del usuario y simplificar la interacción con el sitio web. Una de esas herramientas modernas y poderosas es la biblioteca htmx, que ofrece un enfoque innovador para un desarrollo de sitios web más rápido y fluido.
La comunidad de desarrollo web ha estado ocupada hablando sobre htmx últimamente, pero ¿qué es esta nueva y apasionante tecnología? Resulta que es mucho más simple de lo que cabría esperar, pero los beneficios de htmx pueden justificar las exageraciones.
En este contexto, nuestro nuevo artículo analiza cómo utilizar htmlx para facilitar y mejorar el rendimiento de su sitio web. Examinaremos las características de esta tecnología y cómo puede facilitar mejor la interacción entre el usuario y el sitio web. Repasaremos para qué casos de uso es más adecuado htmx y cómo los desarrolladores pueden aprovechar al máximo sus capacidades para hacer que un sitio web sea más interactivo. Verificar Mejorar el desarrollo web con elementos HTML creativos y potentes: consejos para desarrollar sus habilidades.
¿Qué es htmx?
htmx es una pequeña biblioteca de JavaScript con un enfoque limitado. Hace que la funcionalidad común de JavaScript esté disponible a través de atributos HTML. He aquí un ejemplo sencillo:
<a href="/about" hx-get="/about">About</a>
Este código muestra un atributo HTML personalizado, hx–get. Si hace clic en este enlace, la biblioteca htmx enviará una solicitud AJAX Cargando la página de destino sin actualizar el navegador por completo.
htmx tiene una funcionalidad adicional que le permite enviar solicitudes:
- De elementos distintos a a و formulario.
- En eventos distintos de hacer clic y enviar.
- Utilice métodos HTTP distintos de و PUBLICAR.
- Esto reemplaza cualquier parte de la página en lugar de solo la totalidad.
Aunque htmx admite tecnologías como animaciones CSS y WebSockets, su objetivo principal es simplificar el procesamiento de solicitudes HTTP.
¿Cómo se puede utilizar htmx en una aplicación web sencilla?
htmx maneja funcionalidades específicas dentro de aplicaciones web o sitios web, en lugar del comportamiento de toda la aplicación.
Una de las grandes ventajas de la biblioteca es lo fácil que es empezar a utilizarla. Puedes descargar e instalar una copia si lo deseas, pero como no tiene dependencias, todo lo que tienes que hacer para comenzar es agregar un enlace al script en la CDN:
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
Para el desarrollo y las pruebas locales, necesitará: Configurar un servidor web, como Apache, si aún no tiene un servidor en ejecución. Este es un requisito, incluso si solo está experimentando con archivos estáticos, porque el protocolo file: no permite solicitudes AJAX.
Un ejemplo simple usando desplazamiento infinito
ملاحظة: Puedes descargar este sencillo ejemplo desde repositorio GitHub su propia.
El desplazamiento infinito es una técnica común utilizada por sitios web como Twitter en su feed. Cuando llegas al final de la lista, el desplazamiento infinito carga más elementos para que sigas leyendo.
Naturalmente, esta característica requiere JavaScript para verificar la posición de desplazamiento de la página y cargar nuevos elementos sin actualizar la página. Pero htmx puede hacer todo esto por usted.
Tome la siguiente etiqueta que representa una lista de publicaciones, usando una imagen para cada una:
<ol>
<li><img src="http://placekitten.com/420/300" /></li>
<li><img src="http://placekitten.com/400/320" /></li>
<li><img src="http://placekitten.com/440/300" /></li>
<li><img src="http://placekitten.com/420/340" /></li>
<li><img src="http://placekitten.com/300/200" /></li>
</ol>
Imagine que tiene estos elementos en un archivo, Feed1.html, con más elementos en Feed2.html, y así sucesivamente. Luego, cada página mostrará un pequeño subconjunto de elementos por los que puede desplazarse:
Ahora puedes usar los enlaces de la página siguiente para pasar de una página a otra, pero también puedes implementar fácilmente el desplazamiento infinito. Simplemente cambie el último elemento a:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
Agregar estos cuatro atributos al elemento del menú final implementa un desplazamiento infinito. Esto es lo que significa cada atributo:
| Atributo | el valor | el significado |
|---|---|---|
| disparador hx | revelado | Cuando este elemento aparece por primera vez en la pantalla... |
| hx-obtener | feed2.html | … enviar una solicitud A Feed2.html,... |
| selección hx | li | …Seleccionar articulos li De la respuesta,... |
| intercambio hx | final | ...y agréguelo después de este elemento. |
A medida que se desplaza hacia abajo en la lista, observe cómo la página carga automáticamente contenido nuevo. Puede confirmar esto observando el control deslizante y verificando las herramientas de desarrollador en su navegador:
Tenga en cuenta que, con esta sencilla configuración de página estática, la página Feed2.html incluye un elemento final con el atributo hx-get establecido en Feed3.html, y así sucesivamente. Observe también cómo la biblioteca htmx ha agregado un detector para el evento de desplazamiento. Verificar Cómo detener el desplazamiento infinito para un sitio web específico.
Otros posibles usos para htmx
Puede utilizar htmx para muchas otras interacciones comunes, que incluyen:
- numeración de páginas: carga y reemplaza elementos cuando un visitante hace clic en un enlace de paginación.
- Modelo de validación: Al enviar, reemplace el formulario con un mensaje de confirmación o con un subconjunto del formulario.
- Barras de progreso: actualice el valor de la barra de progreso periódicamente según la respuesta del ping.
- Edición en línea: Reemplaza un elemento con un área de texto que contiene el valor de ese elemento.
Cada uno de estos ejemplos se puede crear usando JavaScript estándar, pero htmx facilita mucho el proceso.
Beneficios y desventajas de htmx
Beneficios que se pueden obtener
htmx puede simplificar enormemente las interacciones comunes que pueden beneficiar a muchas aplicaciones web e incluso a muchos sitios web. Permite a los diseñadores y otras personas que trabajan con páginas web front-end agregar funcionalidad sin tener que aprender JavaScript.
Al resumir el comportamiento común, htmx garantiza la coherencia entre sus proyectos. El desplazamiento infinito se comportará de la misma manera de una página a otra, independientemente de quién lo haya implementado.
Debido a que enfatiza un enfoque declarativo (qué) en lugar de un enfoque determinista (cómo), la funcionalidad de htmx suele ser más fácil de entender y razonar.
Desventajas que se pueden encontrar
Aunque htmx puede permitirle olvidar JavaScript en muchos contextos, ¡no puede resolver todos los problemas por usted! Aún necesitará escribir código para manejar una lógica empresarial específica y más funciones de bajo nivel.
Dado que htmx hace gran parte del trabajo por usted, hay menos posibilidades de personalizar el comportamiento. Esto suele ser una compensación positiva, pero hay que estar dispuesto a ceder el control.
HTML puede permitirle evitar escribir JavaScript, pero aun así debe tener en cuenta que el código JavaScript se ejecuta en segundo plano. Es posible que tenga la tentación de utilizar el atributo hx-get en cada enlace, en lugar del atributo href. Pero esto introduce una dependencia de JavaScript; Si el código no se ejecuta por algún motivo, aparecerá un enlace que no hace nada por los usuarios. Siempre debes practicar la mejora gradual para evitar esto. Puedes ver ahora ¿Qué es JavaScript y cómo funciona? Con algo de código.
