Presentación en HN: HTMX Playground implementado al 100% en el navegador

HTMX Playground

• HTMX Playground es una herramienta para experimentar con HTMX en un entorno simple de sandbox de código.
• Se puede usar de inmediato sin configuración adicional, y permite revisar ejemplos tomados originalmente de htmx.org.
• Dentro del navegador se puede escribir código en un entorno similar a un backend, definiendo endpoints en server.js y renderizando tus propias plantillas.
• Ejecuta un servidor simulado que intercepta las solicitudes salientes de HTMX, y ofrece un manejo de requests y un motor de plantillas familiares para quienes usan Django.
• Este proyecto no está limitado solo a HTMX, así que también se pueden probar libremente otras librerías.

Guardado y uso compartido

• Al presionar el botón "Copy as JSON" en la parte superior derecha, se puede copiar en formato JSON.
• Si subes el contenido copiado a Gist e ingresas la URL raw en "Load Playground", la URL de esa página se actualizará para poder compartirla.
• El código también está disponible en GitHub.

Precauciones

• No tiene función de navegación entre páginas.
• El soporte móvil es limitado.
• server.js puede tener estado, pero si se actualiza el estado en la vista on.get("/"), la actualización puede perderse porque durante la carga inicial de la página se consulta mediante un iframe separado.

Librerías utilizadas

• Svelte
• Ace (editor de código)
• PollyJS (servidor simulado)
• Nunjucks (motor de plantillas)

Opinión de GN⁺

• HTMX Playground es una herramienta útil para que los desarrolladores web prototipen rápidamente aplicaciones web interactivas usando HTMX.
• Al ofrecer un entorno accesible para desarrolladores familiarizados con frameworks backend como Django, ayuda a integrar la experiencia de desarrollo frontend y backend.
• Esta herramienta ofrece funciones para guardar y compartir código fácilmente, por lo que también puede ser muy útil para colaboración o fines educativos.

[GN⁺]

Comentarios en Hacker News

• Agradecimiento del creador de htmx

  • Creador de htmx: El creador de htmx expresó su agradecimiento. Comentó que le resulta muy alentador ver el interés y el uso de su proyecto.

• Inquietudes y preguntas sobre el uso de htmx

  • Preocupación por el pool de desarrolladores: Un usuario comentó que consideró usar htmx, pero sintió que el pool de desarrolladores era pequeño y que eso dificultaba la contratación. Compartió que, en su experiencia, fue más fácil contratar desarrolladores frontend especializados, familiarizados con frameworks específicos, que encontrar desarrolladores full-stack especializados. También señaló que los desarrolladores suelen evitar lidiar con código complejo y que no quiere que el backend se convierta en un cuello de botella. Preguntó si htmx reconoce este problema y cómo pretende abordarlo.

• Reflexiones sobre htmx y el soporte para apps móviles

  • Soporte para apps móviles: Un usuario dijo que le gusta el concepto de htmx y que empezó a leer el libro relacionado, pero le preocupa que, si necesita soporte para apps móviles, tendría que reescribir de forma importante tanto el frontend como el backend. Mencionó que conoce hyperview.org, pero que una app en react-native no encaja con el caso de uso que le interesa.

• Opiniones sobre la elección del editor y la salida de errores

  • Editor y salida de errores: Un usuario señaló que el soporte móvil es limitado y sostuvo que debería usarse Monaco Editor en lugar de Ace Editor. Sin embargo, se explicó que se usa Ace porque Monaco deliberadamente no funciona en móvil. Se indicó que esto está respaldado por un enlace a un issue de GitHub.

• Experiencia usando htmx junto con Django

  • Uso de htmx con Django: Un usuario comentó que está usando maplibre, Django y htmx juntos, y que planea publicar un ejemplo para compartirlo con otras personas.

• Experiencia de uso y feedback sobre htmx

  • Uso y feedback sobre htmx: Un usuario comentó que ha usado htmx en el trabajo y que funciona bien. Planea seguir usándolo, aunque también podría hacer una versión basada en PHP. Compartió además que perdió trabajo varias veces al pegar JSON en el campo de carga por URL, y que no poder limpiar el navegador de solicitudes de red es un problema sobre el que hizo una solicitud de funcionalidad.

• Pregunta sobre soporte técnico

  • Compatibilidad con ActiveX: Un usuario preguntó si htmx es compatible con ActiveX.

• Comentario satírico sobre la elección de herramientas de desarrollo

  • Uso de Svelte: Un usuario preguntó si htmx fue hecho con Svelte. También hizo un comentario satírico preguntándose dónde están los puristas de las MPA (Multi-Page Application) y cuál sería su reacción.

• Curiosidad sobre el desarrollo de apps offline

  • Desarrollo de apps offline: Un usuario preguntó si alguien ha creado apps offline con htmx y HTML mediante un flujo de solicitud-respuesta, definiendo un servidor virtual dentro de un service worker.

• Señalamiento de un error tipográfico en la descripción del sitio web

  • Corrección de typo: Un usuario señaló que hay un error tipográfico en la descripción de la página principal del sitio web. Indicó que "intersepts" debería corregirse a "intercepts".