Nueva herramienta promete sitios web más rápidos con una interfaz de usuario optimizada y renderizada por servidor

¡Hola a todos! En este artículo me gustaría contarles sobre el inicio del proyecto, que creo que puede ser de su interés. El trabajo en el código se llevó a cabo durante mucho tiempo, también recibí ayuda de los colaboradores, pero ahora creo que está listo para la versión de producción.

Vale, en realidad sería muy interesante mostrar un proyecto llamado HMPL . Es un pequeño lenguaje de plantillas para mostrar la interfaz de usuario del servidor al cliente. Se basa en solicitudes personalizables enviadas al servidor a través de la función de búsqueda y procesadas en HTML listo para usar.

De hecho, es realmente una buena alternativa a módulos como htmx y alpine.js , ya que permite crear interfaces dinámicas con un conjunto mínimo de parámetros configurables, así como el tamaño de los archivos de salida. Esto se consigue trabajando con el servidor, cuando allí preparamos la UI, y solo la transferimos al cliente vía API.

¿Cómo funciona esto en código?

Tomemos como ejemplo un pequeño formulario de registro por correo electrónico, donde simplemente habrá una entrada y un botón:

 import { compile } from "hmpl-js"; const templateFn = compile( `<div> <form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form"> <div class="form-example"> <label for="name">Enter your email: </label> <input type="email" name="email" id="email" required /> </div> <div class="form-example"> <input type="submit" value="Register!" /> </div> </form> <p> { { "src":"/api/register", "after":"submit:#form", "repeat":false, "indicators": [ { "trigger": "pending", "content": "<p>Loading...</p>" } ] } } </p> </div>` ); const initFn = (ctx) => { const event = ctx.request.event; return { body: new FormData(event.target, event.submitter), credentials: "same-origin", }; }; const obj = templateFn(initFn); const wrapper = document.getElementById("wrapper"); wrapper.appendChild(obj.response);

El resultado del código:

Se gastaron bastantes caracteres en este formulario, y ahora si imaginamos que hiciéramos lo mismo en frameworks como Vue, entonces tendríamos que conectar pinia junto con el servidor, crear un montón de componentes y esto ocuparía mucho espacio en disco.

La importancia de un enfoque del lado del servidor

Ahora imaginemos que tenemos un sitio con decenas de páginas y un montón de formularios, botones, carruseles, menús, submenús y todo lo demás. En este caso, obtenemos una gran cantidad de archivos y módulos, que finalmente serán cargados por el usuario final en la versión creada. Esto puede durar varias decenas de segundos y, si una persona visita el sitio por primera vez, entonces la probabilidad de cerrar el sitio será alta.

Por lo tanto, la conversión puede caer y el embudo de ventas que el vendedor ha construido puede ser ineficaz simplemente por esto. Por lo tanto, este proyecto puede ayudar mucho, porque las páginas podrán cargarse mucho más rápido (porque toda la interfaz de usuario está en el servidor) y en el cliente el usuario verá lo mismo que se hubiera hecho en el framework.

Ventajas del módulo frente a otros:

En primer lugar, si tomamos HTMX, aquí, por supuesto, vale la pena señalar que el módulo funciona en modo de búsqueda y es totalmente personalizable. Es decir, puede enviar una solicitud como desee, en cualquier lugar y crear tantos nodos en el DOM como desee. En comparación con alpine.js, puede crear dinámicas, pero en conjunto con el servidor, lo que le permitirá no incluir módulos adicionales en su proyecto.

También puedes trabajar con archivos individuales con la extensión .hmpl, pero por ahora solo para webpack.

Un poco sobre los resultados y el desarrollo.

Espero que estés interesado en el proyecto. Sería genial saber tu opinión al respecto en los comentarios. Me llevó mucho tiempo trabajar en él, se creó un sitio web genial, un repositorio y mucho más. ¡Espero que, si no es mucha molestia para ti, puedas participar en el desarrollo del proyecto! Cada semana intento publicar problemas abiertos en los que necesitaría ayuda. Sería genial trabajar juntos :). Además, como recién comencé, no hay muchas estrellas en GitHub y sería genial si te gustó el proyecto, para que lo calificaras con una estrella. ¡Gracias!