El JAMStack es una arquitectura muy cool de desarrollo que ha llegado para quedarse, ha crecido de la mano de los servicios basados en la nube, javascript y los lenguajes de marcas que ya conocemos. Su simpleza sorprende cuando la entiendes, pero para llegar a entenderla, cuesta abandonar el modelo monolítico al que estamos acostumbrados.

Los Orígenes

El término JAMStack fue acuñado por Mathias Biilmann, cofundador de Netlify, quien lo describe como: una arquitectura de desarrollo web moderna basada en JavaScript del lado del cliente, APIs reusables y Markup precompilado.

El JAMStack no se refiere a una tecnología o framework en si mismo, y tampoco es manejado por una gran compañía o un comité de estandarización que defina o controle su rumbo.

En lugar de ello, el JAMStack es un movimiento, una colección comunitaria de buenas prácticas y flujos de trabajo que resultan en sitios web muy veloces, con los cuales es placentero trabajar.
— Modern Web Development on the JAMStack¹

El JAM en el Stack

Cuando hablamos de un stack o una pila, podemos reconocer las tecnologías ocupadas en cada capa de la pila. En el JAMStack esto no es visiblemente definido, salvo por la capa de JavaScript del lado del cliente; esto en parte es porque cuando hablamos de APIs, generalmente nos referimos a servicios disponibles en la nube suministrados por terceros. Estas APIs proveen la funcionalidad que hace falta para mantener un sitio o aplicación web bajo la metodología Serverless, es decir, sin servidor; expandiendo las posibilidades de forma casi ilimitada.

Las APIs en el JAMStack

Uno de los ejemplos más sencillos para entender cómo entran las API reusables en un sitio o aplicación web JAMStack, es cuando se hace necesario autenticar usuarios para acceder a cierto contenido; aquí entra una API de terceros, para este caso, una de las más populares OAuth, que usa JWT para compartir la llave del usuario con su API y el sitio web. Funciones más avanzadas se pueden implementar con Funciones Lambda, como las ofrecidas por Amazon Lambda Functions, o mis favoritas Netlify Functions. Con ellas puedo acceder a otras APIs como las suministradas por FaunaDB en caso de necesitar una base de datos; las opciones son casi ilimitadas.

El Markup precompilado

Aunque el término markup es común para nosotros y es algo que usamos todos los días cuando escribimos HTML y XML, cabe hacerse la pregunta ¿qué significa precompilado?. Bien, en términos generales, un sitio web basado en JAMStack es un sitio web estático, es decir, no responde al modelo monolítico tradicional que conocemos, como por ejemplo los sitios creados con Laravel, Wordpress o Joomla, entre otros, los cuales deben traer los datos desde una DB para mediante PHP escribir el HTML necesario para mostrar el contenido del sitio cada que es solicitado. Un sitio web estático bajo JAMStack generalmente está escrito con algún generador de sitios web estáticos, por ejemplo mi favorito HUGO, pero también está el viejo conocido Jekil, o el popular Gatsby.

El sitio entonces es escrito usando el lenguaje que use el compilador y antes de que sea desplegado sobre la CDN de nuestra elección, es compilado y el resultado es un sitio completamente hecho en HTML, CSS y JavaScript. El cual mostrará el contenido solicitado sin necesidad de consultar una base de datos con PHP del lado del servidor como es el caso de Wordpress, Joomla y similares. Este símple cambio de filosofía, aumenta la velocidad de carga de los sitios exponencialmente, además, trae otras ventajas que mencionaré más abajo.

Pero entonces, ¿Por qué lo amo?

Tengo 15 o 20 argumentos técnicos que soportan mi crush con el JAMStack, pero uno de ellos fue la posibilidad de desplegar un sitio web estático desde mi repositorio de GitHub, por supuesto, todos conocemos ya los GitHub Pages, pero generalmente no es lo que buscas cuando quieres poner en línea un sitio web comercial o personal. Mi caso fue el primero, necesitaba con urgencia un servidor gratuito dónde subir un sitio web que había creado recién aprendí HUGO iniciando la cuarentena por la pandemia de la COVID-19. Probé abrir los puertos del router de mi casa ya que tuve que entregar la oficina que tenía rentada con una conexión comercial de internet, y en este punto debo decir que le agradezco a mi operador de Internet haberme lanzado hacia el JAMStack, porque al no poder abrir los puertos para mostrar el trabajo realizado al cliente, tuve que buscar altenativas.

Seguido a esto está el hecho de que los motores de búsqueda como el de Google, indexarán con mayor puntuación un sitio web estático que uno que depende de código backend y que esté cambiando con frecuencia, incluso la cache de wordpress suele ser castigada por el pagerank de Google.

Finalmente, todos tus artículos o contenido del sitio están en el sistema de archivos en texto plano y no tienes que vertelas con un backup de una base de datos para mantener copias de seguridad o realizar una modificación directa en cualquier herramienta básica de edición de texto como nano, notepad en Windows o algo más completo como vuestra majestad emacs.

Mi CDN favorita

Como les venía diciendo, tuve que buscar altenativas, y en mis búsquedas vi un Tweet de @silvercorp que decía “Cómo publicar una web gratis usando Netlify y Github”, pues bien, esa fue la pruebita que me dejó pegado al JAMStack. Descubrí todas las capacidades que Netlify puede ofrecer apenas arañando la superficie, dentro de ellas su potente y bien distribuída CDN, su simpleza en la configuración de los dominios, su amable y populosa comunidad de soporte, entre otras cosas.

Y como les dije arriba, la velocidad de carga de los sitios web aumenta exponencialmente, no solo porque el sitio es puro markup, sino porque se despliega sobre una red de distribución de contenido de nivel mundial. Estas CDN tienen un servidor que entrega el contenido al borde de la red (Edge Network), lo más cerca posible de donde es solicitado, y si dicho servidor sufriere una falla o sobrecarga, el contenido se entrega desde el siguiente más cercano. Lo cual hace a los sitios creados bajo JAMStack, tremendamente veloces comparados con los sitios web clásicos del modelo monolítico.

Entonces aquí puede aparecer la pregunta, si esto funciona en modo serverless, ¿por qué hablas de servidores? Bien, pues no soy autoridad para responder esto, pero sí te puedo decir que en el modelo monolítico, el servidor tiene tanto el código del sitio, las funciones que le dan dinamismo, la base de datos, y el servidor HTTP; mientras que en el JAMStack, si bien existen servidores, estos proveen cada una de las funciones por aparte, entonces tienes un servidor para cada cosa que compone tu sitio, y en adición para el despliegue del contenido no tienes un solo servidor sino cientos. Pero no existe el concepto de “El Servidor” para tu sitio, sino que lo que haces es interconectar todas estas piezas que trabajan de manera fantástica y satisfactoria.

Lo malo del JAMStack

Como todas la relaciones amorosas, el JAMStack también tiene su parte mala. Pero dejaré que leas el siguiente artículo sobre el tema para que te hagas una idea más robusta: What is JAMStack & Why you should care?. Por favor comenta tus conclusiones.