Por qué deberías elegir HTMX para tu próximo proyecto lateral basado en la web - y desechar el MPA anticuado y el complejo SPA

Construyo muchos proyectos paralelos, así que siempre estoy buscando tecnologías y paradigmas que me permitan construirlos más rápido y más barato con una calidad similar. Durante los últimos meses he estado experimentando con la construcción de aplicaciones web con herramientas de bajo JS como HTMX y Alpine.

En esta publicación compartiré por qué creo que HTMX es una excelente opción para construir aplicaciones web más rápido y más barato y por qué ahora es una parte fundamental de mi pila tecnológica - La pila HAM.

MPA vs SPA
MPA vs SPA

Aplicaciones de varias páginas (MPA)
Al principio tuvimos Aplicaciones de Múltiples Páginas (MPA).

Cada URL lleva a una página web
Esta página web se renderiza del lado del servidor y se envía de vuelta al usuario
Si necesitas actualizar algo en la página ( porque un usuario cambia algo o necesita actualizarse ) entonces la página completa necesita recargarse.
Esto funciona bien, pero da una sensación muy lenta y torpe porque necesitas recargar TODO cada vez que algo en la página cambia. Como ejemplo de esto, piensa en un sitio web del gobierno estatal, la mayoría de esos todavía son MPAs anticuados y se sienten viejos y torpes en comparación con la mayoría de las aplicaciones modernas.

Ventajas y desventajas de MPA

Pros: Simple de construir
Contras: Se siente lento y torpe debido a las actualizaciones
Aplicaciones de Una Sola Página (SPA)
Para resolver esto, se crearon aplicaciones de una sola página (SPA).

Una URL carga una gran carga útil de JS que contiene un montón de lógica de la aplicación
Este JS se encarga de la renderización de la página
Utiliza un estado interno para determinar cómo debería lucir la página y realiza transferencias de datos en segundo plano, por lo que solo necesita actualizar las partes de la página que deben cambiar.
Esto se siente mejor para el usuario porque los cambios parecen más rápidos. La página solo se actualiza donde es necesario y no necesitamos una actualización completa de la página para cambiar los datos. La mayoría de las aplicaciones / sitios web hoy en día se sienten así porque generalmente proporciona una mejor experiencia de usuario.

Pros: Ricas experiencias de usuario "modernas"
Contras: Complejo a gran escala - lidiar con transferencias de datos (graphQL fue construido para esto), abstracciones y tamaños de carga útil de la lógica de la aplicación.
Así que en general:

Aplicaciones de múltiples páginas (MPA) - Fáciles de construir pero difíciles de lograr experiencias "modernas" de usuario ricas
Aplicaciones de Página Única (SPA) - Complejas de construir pero pueden lograr ricas experiencias de usuario "modernas"
MPA vs HTMX vs SPA
MPA vs HTMX vs SPA

Inspiración de imagen de u/Abhilash26 en r/htmx.

HTMX ha estado presente durante varios años, pero realmente ha ganado un gran bombo en el último año más o menos. El bombo no es infundado: a menudo te permite construir aplicaciones web modernas más rápido y más barato que una SPA.

HTMX esencialmente extiende HTML para que pueda realizar recargas parciales de página.

Cualquier elemento puede especificar cómo puede recuperar datos actualizados y cuándo debe hacerlo.
El elemento puede especificar qué hacer con los nuevos datos: reemplazarse a sí mismo u otros elementos en la página.
Si miramos atrás a la comparación entre MPA y SPA, podemos ver que la falta de recargas parciales de página es realmente lo principal que está frenando a los MPA. Así que agregar esta capacidad a un MPA permite en gran medida obtener la mayoría de las ricas experiencias de usuario "modernas" de un SPA con el nivel de complejidad de un MPA.

HTMX para Proyectos Laterales
El objetivo de un proyecto paralelo a menudo es simplemente construirlo. Probablemente no tienes un equipo de ingenieros ni un arsenal de dinero de capital de riesgo para hacerlo, solo eres tú y tu computadora.

Por lo tanto, reducir el costo de construcción - en tiempo y dinero - es crucial para hacer que un proyecto paralelo sea exitoso.

Desde mi perspectiva, HTMX proporciona un gran equilibrio entre permitirte construir aplicaciones modernas con muy baja complejidad ( y, por lo tanto, un costo de tiempo y dinero ). Así que se ha convertido en una parte fundamental de mi pila tecnológica: la pila HAM.

Siguiente
Md Saidur Rahman