¿Qué es el JAMStack?

JAMStack, es un término o más bien, un nuevo Stack que todos hemos estado escuchando mucho en los último meses.
El término fue acuñado por Mathias Biilmann el CEO de Netlify que lo describe de la siguiente forma:

“A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”
— Mathias Biilmann (CEO & Co-founder of Netlify).

Gracias al gran crecimiento que ha tenido JavaScript a partir ES6, han surgido grandes tecnologías y frameworks que nos permiten crear aplicaciones tanto en el Frontend como en el Backend, pero también cada día nos empezamos a preocupar mucho más por el performance y rendimiento de nuestra aplicación, por eso JAMStack es es una arquitectura orientada hacia el cliente con Javascript, que permite que el tiempo de respuesta de nuestras aplicación sea mucho más rápido, debido a que hace uso del Markup precompilado, lo cual nos permite generar nuestros archivos estáticos en tiempo de compilación y al momento del usuario acceder a la aplicación los tiempos de respuesta serán mucho más cortos.

Como ya lo mencionamos, el JAMStack es un nuevo stack que nos permite desarrollar aplicaciones web. Pero antes de ver que significa cada una de las siglas, recordemos lo que significa Stack.

¿Qué es un Stack?
Es el término con el que nos referimos al grupo de tecnologías sobre las que funciona una aplicación.

Ahora si, veamos que significa cada una de sus siglas:

J: JavaScript

Todo el funcionamiento, lógica y dinamismo de nuestra aplicación está orientada hacia el cliente, por lo cual JavaScript toma un papel importante y gracias a todos los frameworks que tenemos hoy en día, como lo son React, Angular y Vue e incluso con Vanilla Javascript podemos tener esa interactividad del lado del cliente.

A: APIs

Nuestra fuente de datos o fuente de verdad son las APIs, las cuales son las que por medio de llamadas http nos permiten obtener nuestra información que será mostrada finalmente al cliente.

M: Markup precompilado

Hasta el momento parece que estamos hablando de lo mismo que venimos haciendo hasta el momento, que es usar en el cliente un framework como React, en el cual hacemos peticiones http hacia nuestro servidor para obtener información y luego mostrarla al cliente. Pero el factor diferenciador de este stack es el Markup precompilado, ya que en nuestras aplicaciones normales, el cliente siempre tiene que esperar en tiempo de ejecución hasta que se rendericen y construyan nuestras páginas para poder visualizar la información, mientras que con el Markup precompilado, todas estas vistas ya son construidas en tiempo de compilación de la aplicación.

Un poco de historia…

Antes de continuar, quiero que hablemos un poco de historia.

En los años 1990 fueron los inicios del Internet, dónde todas las páginas web eran estáticas, es decir, no podíamos tener ningún tipo de interactividad con ella y si en algún momento necesitamos cambiar una imagen o parte de un texto, necesitamos que una persona con conocimientos de HTML modificara la respectiva información, este rol anteriormente era conocido Web Master.
Asé se veían esas primeras páginas web:

Para lograr tener una interactividad, en los años 2000 se empezaron a generar los archivos HTML desde el servidor usando tecnologías como PHP.
Luego se empezó a formalizar uno de los Stack más conocidos:
LAMP (Linux, Apache, MySQL y PHP).
Este Stack funcionaba muy bien, incluso en algunos casos sigue funcionando, pero a medida que las aplicaciones crecían en complejidad el servidor no tenía muy buenos tiempos de respuesta y era factible sufrir ataques de denegación de servicio o DDoS (por sus siglas en inglés, Distributed Denial of Service) por lo cuál la solución era aumentar la cantidad de servidores que respondían las peticiones de los clientes.

En la anterior imagen podemos ver el flujo tradicional de como se generaban las páginas web, en el cual cada petición hecha por el cliente debía ser procesada por el servidor, el cual para retornar la información debe hacer consultas a la base de datos y luego por medio de su motor de plantillas, entrega al cliente el respectivo HTML.

En los años 2010 seguíamos usando este mismo Stack, pero la experiencia del usuario cada vez tomaba más importancia, por lo cual se empezaban a usar técnicas de catching de la información, se empezó a implementar devops y otra serie de técnicas para lograr mejores tiempos de respuestas.
También JavaScript empezó a tener crecimiento y surgió AJAX lo cual nos permite hacer peticiones al servidor sin necesidad de recargar la página.

En 2013 MongoDB introdujo un nuevo satck llamado MEAN, el cual tiene MongoDB, Express.js, Angular y Node JS. Fue uno de los primeros Stack que empezó a usar JavaScript tanto en el Frontend como en el Backend.

Luego han seguido surgiendo muchos más Stack como lo es MERN que usa React JS en el Frontend o MEVN que usa Vue JS.

En el año 2017 aproximadamente empieza a surgir el nuevo Stack JAMStack el cual fue un termino acuñado por CEO de netlify en una conferencia en 2017.

A diferencia del flujo tradicional, con el JAMStack tenemos un flujo completamente diferente y con muchísimas ventajas. En este flujo no se deben generar los HTML por cada una de las peticiones que hace el cliente, sino que estos se crean al momento de compilar la aplicación, lo cual nos permite tener unos tiempos de respuesta mucho más rápido, un aumento considerable del performance y por supuesto una mejor experiencia de los usuarios.
Al momento de generar los templates, podemos acceder a información de cualquier tipo de API externa, ya sea de un servidor propio, de un Headless CMS o incluso archivos estáticos,

Si analizamos detenidamente ese nuevo flujo, es como devolvernos a los años 1990, en donde generábamos nuestros archivos estáticos y el cliente solo accedía a ellos, solo que con la gran diferencia que hoy en día contamos con grandes herramientas que nos permiten a parte de construir aplicaciones mucho más rápidas y escalables, poder tener esa experiencia e interactividad que anteriormente no teníamos.

En el siguiente gráfico podemos ver la diferencia de cada uno de lo Stack.

Redes de distribución en la nube (CDN)

Un beneficio adicional del Markup precompilado, es que podemos hacer uso de CDN o Cloud Delivery Networks para lograr mejor tiempo de respuesta a de nuestros archivos.

Estos servidores a parte de entregar respuestas con base al servidor más cerca, también tienen en cuenta cual es el que tiene menos carga de peticiones, o el que no esté presentando bugs al momento de tratar de acceder.

Normalmente los CDN los usamos para manejar archivos tales como:
JS, CSS, Imágenes.
Un ejemplo muy común del uso de CDN es cuando usamos bootstrap, en el cual tenemos la posibilidad de descargar los respectivos archivos JS y CSS o acceder directamente a sus servidores:

En la siguiente imagen podemos evidenciar un poco como se distribuya un CDN a través del mundo, con servidores en puntos estratégicos, lo cual nos permite que dependiendo del lugar que hagamos nuestra petición obtenemos nuestra respectiva respuesta mucho más rápido, debido a que accederemos al servidor que se encuentre más cerca a nuestra ubicación.

Algunos ejemplos de plataformas que prestan este servicio y con respectivas capas gratuitas son:

Conclusión.

El JAMSrack surge como una alternativa más al momento de construir aplicaciones web y obviamente dependerá mucho del tipo de aplicación que vayamos a construir, por ejemplo, este Stack es bastante bueno y ofrece muchas ventajas al momento de construir un blog, un sitio web personal o una tienda virtual, debido a que la información que se va a mostrar será la misma para todos los usuarios.
También nos permite seguir usando nuestros Frameworks como lo son React Angular y Vue, lo cual nos permite mantener nuestra interactividad del lado del cliente y nuestra arquitectura de componentes.

Espero este articulo les haya aportado un poco más a conocer sobre el JAMStack, no soy un experto sobre el tema, pero soy un apasionado por el desarrollo web y especialmente un apasionado por el mundo de Javascript.