Qué es el JAMStack

Un stack(pila) en programación es una colección de tecnologías, configuradas para trabajar entre sí.

En muchas ocasiones, una stack va acompañada de una filosofía de trabajo, un cómo realizar las cosas, de beneficios, al igual que desventajas, de casos en los que será mejor ese stack u otro.

Algunas de las stack más famosas son LAMP (Linux, APache, mySQL y PHP), MEAN (Mongo, Express, Angular y NodeJS), MERN (Mongo, Express, React y NodeJS), entre otras más, que han tenido momentos de mucha popularidad. En este artículo te quiero hablar del JAMStack, una stack pensada en rendimiento, velocidad y escalabilidad.

Qué es el JAMStack

Las palabras JAM hacen referencia al conjunto de tecnologías que componen el JAMStack, JavaScript, APIs y Markup pre compilado, en un momento ahondaré más en cómo funcionan estas tecnologías en conjunto y cuáles son los beneficios.

La base del JAMStack está en una arquitectura orientada hacia el cliente, y no hacia el servidor. Con el creciente desarrollo de frameworks JavaScript que corren en el frontend como React, Angular, Vue, entre otros, éste stack delega el funcionamiento de la aplicación a la programación en el cliente, lo que permite reducir el trabajo que hacemos en el servidor y por lo tanto entregar respuestas más rápidas en nuestras páginas web.

El segundo pilar de esta stack está en las APIs, por lo que en lugar de acceder a la base de datos desde el servidor y compilar templates con éstos datos como tradicionalmente lo hacen frameworks como Laravel, Rails, Django, etc. La comunicación de datos con nuestra aplicación se abstrae en servicios web, a los que accedemos vía HTTPs con JavaScript, usando cualquier tecnología del cliente que hayas decidido para la base de tu aplicación, como explicamos en el párrafo anterior.

Por último, un tercer pilar es el markup precompilado, que a diferencia del desarrollo web tradicional, promueve precompilar las vistas, el marcado o los templates, en lugar de generarlos dinámicamente en cada petición, más de esto en el siguiente punto:

Precompilar marcado

En el desarrollo web tradicional, cuando el servidor recibe una solicitud para alguna página web, usamos un lenguaje de programación para recibir esta petición, consultar los datos necesarios (principalmente de una base de datos) y producir una vista, usando un motor de templates que trabaja en cada petición que recibe.

Este proceso puede convertirse en un punto rojo de rendimiento, ya que el trabajo de consultar datos y compilar una vista en cada petición, puede tomar hasta segundos si no se toman las medidas de rendimiento necesarias.

El JAMStack, remueve por completo este proceso en cada petición, reemplazando el proceso de compilación del template en cada petición, por uno que sucede en tiempo de compilación, un proceso que realizamos cada que subimos nuevos cambios a nuestro sitio web.

Redes de distribución en la nube.

Al transforma nuestro marcado en archivos estáticos, recibimos el beneficio adicional de poder montar este marcado en redes de distribución en la nube, o Cloud delivery networks por su nombre en inglés (CDN).

Las CDN son redes de servidores administradas por software de distribución, donde podemos montar nuestros archivos estáticos (imágenes, archivos css, scripts, templates, etc), y el software se encarga de distribuirlos alrededor del mundo.

Cuando una petición viene a una CDN, ésta decide de qué servidor en la red global deberá responder a la petición, procurando dar la respuesta más rápida y eficiente. Además de que no dependemos del funcionamiento de un servidor para mantener nuestro sitio en línea.

En el flujo tradicional de respuesta, donde cada vista es procesada por petición y generada de manera dinámica, es imposible tratar las vistas como archivos estáticos y por lo tanto, éstos no se pueden distribuir a través de una red como la que discutimos.

Dos proveedores se destacan en el ámbito de las CDN para aplicaciones, o Application Delivery Network, Firebase Hosting y Netlify. Estos servicios ofrecen, además de la red de distribución, herramientas para la automatización de la subida de nuevos cambios y actualizaciones al sitio web.

¿Es un sitio web estático o una aplicación web?

A pesar de que en el JAMStack, el marcado es precompilado y estático, no sacrificamos el dinamismo. La parte dinámica del código se mueve del servidor al cliente, a través de código JavaScript como discutimos con anterioridad, normalmente con la ayuda de un framework frontend como React, Angular o Vue.

Como se menciona en el sitio oficial de Gatsby, una de las tecnologías más populares del JAMStack, en el presente todos los sitios web son aplicaciones web, y todas las aplicaciones web son sitios estáticos.

Las aplicaciones del JAMStack mueven el dinamismo al cliente y los datos a servicios web que se consumen con JavaScript.

Recursos y tecnologías

Los requisitos para aplicar este stack son muy simples:

• JavaScript en el cliente para interactividad y consumir servicios web
• Precompilar templates y preferentemente, distribuirlos en una CDN

Las implementaciones del JAMStack son increíbles, con la creciente popularidad de esta filosofía, se han generado proyectos donde la experiencia de desarrollo es de primera clase, en la página StaticGen.com se almacena una colección de tecnologías que generan sitios estáticos, entre ellas podemos encontrar algunas que usan el JAMStack:

• Next.js: Frontend con React. Link
• Nuxt: Frontend con Vue. Link
• Angular Universal: Frontend con Angular. Link
• Gatsby: Frontend con React y GraphQL. Link

Todas son alternativas increíbles para este tipo de aplicaciones, personalmente he trabajado con Angular Universal, Nuxt y Gatsby, las 3 son muy buenas opciones y normalmente la alternativa que usarás dependerá de qué framework frontend quieras usar, si es Angular, React o Vue, particularmente me quedó con Gatsby por su integración con GraphQL, si en tu equipo o tú ya dominas GraphQL, creo que es la mejor opción.

Recursos para aprender

En CódigoFacilito tenemos un curso gratuito de Nuxt, pero, el que consideramos el curso perfecto para el JAMStack sin duda es el curso de Gatsby, además te recordamos que tenemos planes de estudio de Angular y Vue, para aprender ambos frameworks frontend a fondo.

Por último, la página del JAMStack recolecta publicaciones y tutoriales interesantes que puedes ver haciendo clic aquí, aunque la mayoría del contenido está en inglés.

Conclusión

El JAMStack es un stack de tecnologías que mueve la interactividad del servidor al cliente, donde los datos se consumen a través de https en servicios web usando JavaScript, usualmente acompañado de un framework frontend, además, los templates o el marcado son compilados en desarrollo, antes de subirse a un hosting, recomendamos aprovechar el stack con una red de distribución en la nube.

Existen tecnologías en el mercado para iniciar inmediatamente, entre las que destacan Next, Nuxt, Angular Universal y Gatsby.

Si quieres ofrecer rendimiento, velocidad de respuesta, resilencia y un stack moderno de tecnologías a tus clientes, considera el JAMStack.