Desarrollo Web

Jamstack ha demostrado ser una alternativa sólida al desarrollo web tradicional, ha crecido hasta convertirse en un gran ecosistema de herramientas que ayudan a los desarrolladores a crear sitios web de alto performance, seguros y con beneficios demasiado buenos para ignorarlos.

Los desarrolladores no son los únicos beneficiados con el uso de Jamstack, ya que la experiencia para el usuario también se ve mejorada. Jamstack ha ido creciendo de un manifiesto a un movimiento, ha evolucionado y ganado una gran popularidad desde sus comienzos. Veamos un poco más de qué se trata el auge de este ecosistema tecnológico.

Un poco de historia de Jamstack

Hace unos años, en el 2016 se creó el manifiesto original de Jamstack, el mismo estipula que el objetivo original era construir una mejor arquitectura para la web, que permitiera que fuera más rápida y segura, que brinde una mejor experiencia tanto para los desarrolladores como para los usuarios.

En 2016 en una conferencia en San Francisco, Estados Unidos, Matt Biilmann CEO y Cofundador de Netlify dio una charla sobre la nueva pila de Frontend donde introdujo por primera vez el término JAMstack y los principios detrás de él.

En 2018 Netlify, Gatsby y Contenful comenzaron a promover Jamstack y se llevó a cabo la primera conferencia Jamstack.

En 2019, la comunidad Jamstack ya no es tan pequeña y hubo un surgimiento de nuevas herramientas que llegaron a respaldar los sitios de Jamstack.

En 2020 la comunidad crece y asume nuevos retos. Se renombra, obtiene un nuevo logotipo y en general madura.

En 2021 vemos que Jamstack continúa creciendo, poniendo mucha más energía en la consistencia de la marca y madurando la solución. Se puede decir que se hizo más popular pero también un poco más complicado debido a la introducción de un nuevo concepto “Arquitectura de las Islas” y unos generadores de sitios estáticos (SSG) basado en Eleventy llamados Astro y Slinkity que limitan el uso de JavaScript.

En 2022 el concepto de Jamstack sigue creciendo, pero creo que es el año de enfocarse en volver a sus principios básicos y mantener su simplicidad, no puedo predecir lo que ocurrirá este año con el progreso de Jamstack, lo que sí puedo decir es que sigue siendo una arquitectura de gran valor que continúa en evolución.

La comunidad de Jamstack dispone de un canal en Discord y un repositorio en GitHub.

Cambio de JAMstack a Jamstack

Te preguntarás ¿por qué en algunas partes está escrito JAMstack y otras Jamstack? ¿Existe alguna diferencia? Netlify abrió una discusión en el año 2020 para cambiar de JAMstack como originalmente se escribía desde que se creó en 2016, a Jamstack, la decisión de esa discusión es que se aprobó el cambio y ahora es simplemente Jamstack, no JAMstack.

Pero, ¿por qué? La palabra JAMstack como fue escrita en sus inicios proviene del acrónimo JAM que significa JavaScript, API y Markup, convirtiéndose así en una pila JAM, pero se ha transformado en mucho más que eso y realmente ya no es una pila o stack debido a que no es un grupo de herramientas establecidas como por ejemplo en LAMP o la pila MEAN, incluso en Jamstack no es obligatorio tener que usar esos tres pilares juntos. Para evitar confusiones sobre el acrónimo y la pila entonces lo renombraron a Jamstack.

Qué es Jamstack

Jamstack es fundamentalmente una filosofía, una metodología, es un enfoque, una forma de pensar, un conjunto de principios y mejores prácticas. Es una arquitectura, no se trata realmente de tecnologías específicas, no existe un instalador de Jamstack, ni es impulsado por una gran empresa, ni existe algún organismo de normalización que lo controle o defina.

“ Es una arquitectura de desarrollo web moderna basada en JavaScript del lado del cliente, API reutilizables y marcado preconstruido”
— Mathias Biilmann (CEO y cofundador de Netlify).

Jamstack se formó inicialmente en respuesta al desarrollo dinámico de páginas web que muchos consideraban que se había vuelto engorroso, lento e inseguro, como las aplicaciones monolíticas que se estaban desarrollando, donde por ejemplo cada solicitud de usuario pasa por un proceso complejo que involucra una compilación HTML, servidores web, conexiones a bases de datos, código backend, almacenamiento en caché y seguridad. Este proceso cuesta dinero, lleva mucho tiempo y es propenso a riesgos de seguridad.

Por lo que surgió Jamstack con un nuevo enfoque, en donde no existe un “entorno de servidor” en absoluto, al menos no en el sentido tradicional. En su lugar, HTML se renderiza previamente en archivos estáticos, este código se distribuye a una CDN que es una red global de servidores, y las tareas que alguna vez se procesaron y administraron en el lado del servidor ahora se realizan a través de API y microservicios.

Como he mencionado los sitios Jamstack no tienen un servidor backend, en cambio se utiliza una CDN que es en realidad una red de servidores de archivos en todo el mundo, todos con una copia de los archivos de tu sitio. El navegador web envía una solicitud a tu sitio, luego la solicitud es redirigida al servidor de archivos físicamente que se encuentre más cercano, esto garantizará la respuesta más rápida posible, mejorando así la experiencia de usuario.

Es un enfoque en el que se desacopla el backend y el frontend siendo una excelente alternativa al enfoque tradicional de desarrollo web que nos permite no preocuparnos por la infraestructura y servidores, solo por la etapa de construcción. Cuando se desacopla el backend y el frontend, los desarrolladores pueden concentrarse en una sola área y no tienen que ser unos expertos en todas las áreas.

En resumen, los sitios web de Jamstack no tienen la necesidad de consultar una base de datos porque los archivos ya están compilados y se envían al navegador desde un CDN.

Y, si alguna vez has tenido problemas con cualquier sistema, CMS o framework monolítico, seguramente has tenido que luchar con el alojamiento, implementando cambios, actualizaciones, asegurando y escalando todo, entonces puedes comprender por qué Jamstack se está volviendo tan popular. Es uno de esos cambios que brinda un impulso de productividad para los desarrolladores y un gran aumento de rendimiento para los usuarios.

Se trata de tener cosas que están renderizadas previamente, se trata de aprovechar el navegador, el poder del navegador y las tecnologías disponibles para nosotros en el navegador, operando sin un servidor web.

Si eres un desarrollador experimentado puedes notar que este enfoque se parece a la forma en que construíamos las páginas cuando recién se inventaba la web a diferencia que ahora contamos con mejor tecnología.

Los sitios de Jamstack están bien preparados para cumplir con los exigentes requisitos de la web móvil actual, donde los tiempos de carga son urgentemente importantes y la calidad del ancho de banda nunca se puede garantizar.

Componentes de Jamstack

El JAM en JAMstack significa y reúne JavaScript, API y Markup o Marcado, los tres componentes principales utilizados para crear sitios que son rápidos y altamente dinámicos.

• JavaScript: las funcionalidades dinámicas son manejadas por JavaScript. No se exige que uses algún framework, biblioteca o kit de herramientas específicos, ni hay alguna restricción sobre diseñar tu aplicación de alguna manera en particular. JavaScript es lo que hace que un sitio de Jamstack sea dinámico, permite que los activos estáticos cambien dinámicamente a través de la manipulación DOM.

• APIs: Jamstack no requiere una necesidad real de construir un backend o servidor y se basa principalmente en APIS de terceros, en cambio complementa la tecnología sin servidores y se puede usar con funciones sin servidor, como funciones de Netlify o similares. Los desarrolladores usan API para obtener los datos que necesitan para crear e implementar aplicaciones y sitios Jamstack estáticos. Las API se utilizan a menudo en el cliente cuando desea acceder a contenido dinámico desde el navegador. Si tienes el tiempo y recursos como desarrollador puedes construir tus propias API, pero en la actualidad existen APIs casi que para cualquier cosa, desde pagos o suscripciones hasta casi cualquier otra cosa que te puedas imaginar.

• Markup: abarca lenguajes de plantillas como Markdown por ejemplo y lenguajes de serialización de datos como YAML y JSON. Específicamente, el Markup o marcado en Jamstack se refiere al marcado o contenido “prerenderizado” servido en su forma final, HTML.

En Jamstack, el contenido no se entrega dinámicamente a través de un servidor web encargado de crear páginas en tiempo de ejecución. Más bien, el marcado está preconstruido por adelantado y se sirve al navegador a través de un CDN.

Los archivos HTML estáticos se pueden generar a partir de archivos de origen, como Markdown. Este proceso normalmente involucra una herramienta de construcción, como un generador de sitios estáticos o SSG puede ser Hugo o Gatsby. Puedes encontrar haciendo clic aquí una lista de generadores de sitios estáticos para sitios Jamstack.

A pesar de que estos son los componentes principales en los que se basó la creación del concepto de Jamstack, con el pasar del tiempo este término evolucionó (como mencioné al principio) por lo que ya no se trata de una pila, y ya no es solo algo exclusivo de JAM.

¿Es Jamstack estático?

Te estarás preguntando ¿estático? Pero es muy extraño que a estas alturas regresen sitios web estáticos, pero lo que realmente ocurre con este concepto de sitios estáticos en Jamstack no se refiere a que tienen que ser sitios web sin dinamismo, sino más bien significa que es capaz de ser servido directamente desde la CDN.

¿Un sitio Jamstack consiste sólo en páginas estáticas HTML aburridas? No para nada, es algo confuso, es verdad, pero como mencioné, no significa que no exista el dinamismo, aquí es donde entra JavaScript y las APIs. Una vez que se renderiza previamente los archivos HTML estáticos que se cargaron en el navegador, entonces con JavaScript genera las solicitudes a los servicios de terceros, incluidas bases de datos, funciones sin servidor, entre otras.

Entonces, estático en el contexto de Jamstack no significa que no cambia, solo significa que se reconsidera cuándo y cómo ocurren los cambios. Se ejecuta un sitio dinámico, mientras que los archivos estáticos se renderizan previamente, se sirven desde una CDN, por lo que no realizamos ninguna ejecución en algún servidor, no necesitamos de la ayuda de un servidor físico, de una infraestructura para manejar las partes dinámicas.

Si por ejemplo tienes un sitio de comercio electrónico puedes intentar generar todas las páginas de productos por adelantado y las tiene listas, viven directamente en el CDN, el tiempo de carga será lo más rápido posible. Los usuarios navegarán de forma rápida con una gran experiencia de usuario. Para aplicar alguna funcionalidad puedes usar JavaScript, como por ejemplo para agregar productos al carrito de compras, y luego para realizar la compra usas alguna API, como Stripe por ejemplo.

Beneficios del uso de Jamstack

La promesa de esta arquitectura es que sea más rápida, más económica y más segura. La mayoría de estos beneficios son el resultado directo de eliminar el servidor web, y en su lugar, usar un CDN. Dado que una CDN no procesa solicitudes y, en cambio, solo sirve archivos, el ciclo de solicitud y respuesta es mucho más corto, por lo que los CDN son más rápidos.

• Costo: los sitios Jamstack generalmente requieren muchos menos recursos del lado de la entrega en términos de servidores, bases de datos y demás. Esto hace que alojarlos sea más barato, en general, y en ocasiones de forma masiva. Obviamente, esto puede variar según lo que su sitio web deba hacer para funcionar, pero generalmente es cierto. Si usa un servidor web, por supuesto, deberá estar funcionando las 24 horas del día, los 7 días de la semana, escuchando solicitudes, por lo que tendrás que pagar por el servidor incluso cuando esté inactivo. En cambio, un servidor de CDN se cobrará por el volumen de datos servidos y, por lo tanto, el tiempo de inactividad es irrelevante. Por esta razón el uso de CDN es más barato en general.

• Seguridad: a diferencia de un servidor web, una CDN no procesa solicitudes y, por lo tanto, tiene vectores de ataques muy limitados para los piratas informáticos. Como tal, los sitios Jamstack casi siempre son más seguros que los sitios que no son Jamstack. Por otro lado, no existe un servidor web al que se pueda enviar ataques, no hay bases de datos a las que acceder, no hay necesidad de preocuparse por los parches.

• Escala: hay momentos en que nuestros sitios recibirán aún más atención de la que habíamos planeado, es decir, tendrán un tráfico muy alto, pero cuando nuestro sitio es Jamstack es atendido desde una CDN por lo que no es necesario activar servidores adicionales para responder a una gran carga de tráfico.

• SEO: debido a que los sitios web de Jamstack son solo contenido estático, y debido a que el contenido estático es mucho más fácil de rastrear e indexar para los motores de búsqueda, el SEO mejora considerablemente. Un sitio web que presenta contenido dinámico se hace más complejo para los indexadores.

Conclusión

Jamstack es algo emocionante. En muchos aspectos, es un regreso a las viejas costumbres, pero definitivamente retocado para la era moderna, está teniendo un impacto significativo en la industria del desarrollo web.

Se trata de volver a los conceptos básicos del desarrollo web como los documentos HTML estáticos renderizados previamente y alojarlos de una manera que no requiera una gran infraestructura o inversión en hardware de alojamiento (ya sea físico o virtual), al menos no directamente, y que como desarrollador no tengas que preocuparte por la infraestructura.