htmz - framework HTML ultrapequeño

 (leanrada.com)
21 puntos por GN⁺ 2024-02-21 | 3 comentarios | Compartir por WhatsApp
  • Un microframework HTML minimalista que permite crear interfaces web modulares y dinámicas de forma tan simple como con HTML plano
  • Hace exactamente una sola cosa: puede cargar recursos HTML desde cualquier elemento de la página
    • Al hacer posible actualizar solo una parte de la página, permite reemplazar fragmentos de la página
  • Con un tamaño total de 166 bytes, usa solo HTML puro, no tiene dependencias y no requiere bundles de JS, backend, atributos especiales, DSL ni elementos personalizados
  • Interactúa con el DOM real y no usa VDOM, listeners de clic, AJAX, fetch, etc.
  • Basta con agregar un snippet HTML en línea hecho con iframe
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>

Uso básico

  • Para usar htmz, se necesita un hipervínculo (o formulario) con un atributo href que apunte a la URL del recurso (o action en el formulario) y un selector de ID de destino.
  • Parece que reutiliza el fragmento de la URL como selector de ID de destino, pero en este contexto el fragmento de la URL no se usa para otra cosa, así que se reutiliza.

¿Qué hace exactamente?

  • htmz ofrece una sola función: permitir cargar recursos HTML dentro de cualquier elemento de la página.
  • La idea no es nueva, y dividir una página web en partes que se recargan de forma independiente existe desde mediados de los años 90.
  • htmz es una generalización de los frames HTML, y puede cargar recursos HTML en cualquier elemento de la página.

Uso avanzado

  • Actualmente en HTML5, solo los elementos a y form pueden apuntar a htmz e invocarlo.
  • Se puede usar el elemento base para establecer htmz como destino predeterminado para todos los enlaces relativos.
  • Si prefieres usar el valor real del destino, se puede usar un hack para escribir el selector de ID de destino directamente en el propio atributo target.

Scripting / interactividad

  • Si se necesita más interactividad, se puede usar JavaScript, el lenguaje de scripting que acompaña a htmz.
  • htmz no excluye escribir JS ni usar bibliotecas de UI, y con htmz todavía se pueden enviar valores de formularios mediante formularios HTTP normales.

Escalabilidad

  • Si se necesitan selectores avanzados, manejo de errores, múltiples destinos, etc., los desarrolladores pueden extenderlo según sus necesidades.

FAQ

  • htmz es un iframe con nombre "htmz"; se invoca cargando una URL a través de ese iframe.
  • htmz actúa como destino proxy y entrega la respuesta al destino especificado.
  • htmz no analiza continuamente el DOM, no busca atributos o sintaxis especiales ni adjunta listeners al DOM.
  • htmz es un microframework HTML que usa la mínima cantidad posible de JS.
  • htmz es un snippet, y significa 'Html with Targeted Manipulation Zones'.
  • Este proyecto comenzó como una reacción a htmx, y fue un experimento para comprobar si era posible implementar en la web actual la funcionalidad de cargar-enlazar-destinar sin usar htmx.
  • A pesar de su tamaño diminuto, htmz se siente potente, y su principal limitación es que solo puede tener un único destino por respuesta.

Opinión de GN⁺

  • Enfoque innovador: htmz ofrece un enfoque innovador para reducir la complejidad de los frameworks en el desarrollo web y construir interfaces web usando HTML puro. Esto implica una forma de desarrollo web accesible incluso para ingenieros de software principiantes.
  • Equilibrio entre rendimiento y simplicidad: su tamaño extremadamente liviano de 166 bytes y su estructura sin dependencias pueden mejorar mucho el rendimiento de una página web. Además, ofrece la simplicidad de poder crear páginas web efectivas sin tener que aprender frameworks complejos de JavaScript.
  • El futuro del desarrollo web: htmz ofrece una perspectiva interesante sobre el futuro del desarrollo web. Muestra cómo la evolución de los estándares y tecnologías web puede dar a los desarrolladores herramientas más simples y eficientes.

Lecturas relacionadas

3 comentarios

 
joyfui 2024-03-06

Guau, esto está bien ingenioso jajaja. En el enlace dice que no es ni una librería ni un framework, sino solo un snippet... jaja
 
savvykang 2024-02-21

Uso avanzado: en el HTML5 actual, parece que solo los elementos y no tienen aplicado el escape de HTML En el HTML5 actual, parece que solo los elementos y
 
GN⁺ 2024-02-21
Opiniones de Hacker News

  • Resumen del primer comentario:

    • Reacción positiva a la idea de usar iframes con nombre y formularios con destino para páginas renderizadas en el servidor y widgets con alcance de estilos.
    • Parece que htmz implementa bien esta idea.
    • Se enfatiza no abandonar una buena idea, sino enfocarse en el acabado y la excelencia, y comunicar bien la idea.
    • Se valora como un excelente hack que muestra que el navegador puede ofrecer SPA de forma nativa.
    • Una gran demostración de alguien que entiende bien la plataforma.
    • Opinión de que la web vanilla debería ser simple y poderosa.
    • Valoración positiva de aprovechar al máximo los materiales que ya ofrece la web.
    • Elogios a las habilidades de comunicación y marketing del creador.

  • Resumen del segundo comentario:

    • Un hack que muestra que el navegador puede ofrecer SPA de forma nativa.
    • Solo harían falta algunos atributos para evitar el iframe.
    • Puede ser más útil para demostrar un punto que como herramienta real.
    • Se señala que es demasiado complejo en comparación con lo que ofrece htmx.

  • Resumen del tercer comentario:

    • Comparte la experiencia de haber desarrollado un cliente de correo HTML alrededor de 2001.
    • Se usaba un iframe oculto para cargar datos desde el servidor y manipular el DOM.
    • En ese momento el soporte de los navegadores no era suficiente, pero el mecanismo básico es el mismo.
    • Valoración positiva de que esté implementado como un paquete conciso sin necesitar muchas librerías.
    • Podría servir para la mayoría de los casos de uso frente a frameworks frontend hoy muy usados como React.

  • Resumen del cuarto comentario:

    • Fuerte argumento de que reemplazar el DOM con una respuesta debería ser parte de la plataforma.
    • Propone como primer paso un elemento que permita cargar contenido externo en la página de forma declarativa.
    • Menciona que HTML debería admitir elementos que puedan ser el destino de un enlace.

  • Resumen del quinto comentario:

    • Elogia la gran demostración de alguien que realmente entiende la plataforma.
    • Lo considera excelente, aunque poco probable de usar en la práctica.

  • Resumen del sexto comentario:

    • Sugiere eliminar this. en los event listeners inline para reducir aún más el tamaño del código.
    • Da un tip para ahorrar 10 bytes en el snippet.

  • Resumen del séptimo comentario:

    • Señala que, al usar target, podría no degradarse con elegancia como htmx cuando JS está desactivado.
    • Expresa una visión idealista sobre la situación con JS desactivado.

  • Resumen del octavo comentario:

    • Señala que reutilizar el elemento <slot> de esta manera es una mala idea.
    • En el navegador, <slot> tiene un comportamiento muy específico y, haga lo que haga la librería, es reemplazado por los hijos del elemento host.
    • Menciona que para este tipo de situación ya existe el elemento <output>.

  • Resumen del noveno comentario:

    • Señala la necesidad de mejorar la sección de demostración.
    • Al hacer clic en las "pestañas" para cambiar el código de ejemplo, se agregan eventos al historial pero la URL no se actualiza.
    • Critica que, al afirmar que es "simplemente HTML", se estén rompiendo reglas básicas de la web/UX.

  • Resumen del décimo comentario:

    • Recuerda similitudes con pjax, que usa XHR en lugar de iframe y utiliza pushState de forma predeterminada para que el botón de volver funcione.