¡Hola a todos! En este artículo me gustaría contarte cómo puedes reducir varias veces el tamaño de los archivos javascript gracias a un lenguaje de plantilla como hmpl.

El enfoque tecnológico que aparece en el artículo no es nuevo, pero sin embargo es lo suficientemente popular hoy en día como para que valga la pena hablar de él.

Reducir el tamaño del archivo javascript permitirá que las páginas se carguen más rápido en el cliente. Si tomamos el SPA moderno, resulta que el tamaño de los archivos, incluso teniendo en cuenta todas las minificaciones, sigue siendo bastante grande. Por supuesto, una vez que cargas una página una vez, es más fácil navegar por ella, pero el tiempo de carga de la primera vez puede ser de un segundo a, digamos, varios minutos con una mala conexión a Internet. Pocos clientes querrán esperar tanto.

Cuando se utiliza la mayoría de los marcos y bibliotecas para crear una interfaz de usuario, hay que escribir mucho código repetitivo. Cada símbolo ocupa espacio en la memoria. Tomemos un clicker de Vue.js:

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `

        Click!
        
Clicks: {{ count }}
    
`,
}).mount("#app");

Un clicker súper simple, pero incluso requiere una buena cantidad de líneas de código en js, y mucho menos en aquellos casos en los que la aplicación es más o menos grande.

Incluso sin dos comas, podría haber algunos bytes menos

Esto no es solo un problema con Vue, sino también con otros marcos y bibliotecas que funcionan de manera similar. Pero ese no es el único punto. Hay una gran cantidad de módulos adicionales que van hacia ellos, y hacia ellos va la misma cantidad de módulos adicionales, y así hasta el "infinito".

De hecho, una de las soluciones a este problema se propuso hace mucho tiempo y es trivialmente simple: consiste en preparar la interfaz de usuario en el servidor y simplemente cargarla en el cliente. Gracias a esto, se puede reducir significativamente el tamaño de los archivos de la aplicación. Esta es exactamente la idea utilizada en HMPL.

En el ejemplo, también intentaré hacer un clicker, pero usando hmpl.js.

document.querySelector("#app").appendChild(
  hmpl.compile(
    `

        Click!
        
Clicks: {{ src: "/api/clicks", after: "click:button" }}
    
`
  )().response
);

Como puede ver, la interfaz de usuario será la misma, pero el tamaño del archivo será un poco más pequeño.

Incluso si minimiza los archivos y elimina todos los espacios innecesarios de las plantillas, tal vez los archivos estén a la par o algo más grandes, pero esto es solo una suposición sobre pequeños ejemplos. Si tomamos aplicaciones grandes, entonces es obvio que con este enfoque habrá muchos menos js.

Como se puede ver en el ejemplo, la funcionalidad de calcular y almacenar el estado de la aplicación se puede, si se desea, trasladar al servidor.

Como puede ver en el ejemplo, la funcionalidad de calcular y almacenar el estado de la aplicación se puede, si se desea, trasladar al servidor. Está claro que si hay una gran cantidad de usuarios, esto simplemente hará que el servidor caiga, pero el hecho de que la interfaz de usuario sea la misma es importante.

Sí, por supuesto, este método no solo tiene esa desventaja, sino también la reutilización de la interfaz de usuario, cómo almacenar en caché la interfaz de usuario para no cargar todo cien veces y mucho más. Es importante contar con una alternativa que, si se configura correctamente, puede competir con la mayoría de las soluciones modernas.

¡Muchas gracias a todos por leer este artículo!

Lista de materiales:

https://hmpl-lang.github.io/#/docs
https://vuejs.org/guide/quick-start.html