¿Qué es JAMstack?
JAMStack, una de esas palabrejas de moda que quizás ya hemos oído más de una vez. ¿Sabes lo que es? ¿Qué ventajas ofrece como modelo de desarrollo? ¿Cómo desarrollar un sitio web con JAMStack? En este artículo te lo vamos a contar.
JAMStack es un conjunto de tecnologías que incluyen los medios esenciales para desarrollar una página web. «JAM» es el acrónimo de Javascript, APIs (del navegador) y Markup. Junto con CSS sería lo mínimo necesario para crear en principio cualquier tipo de web de archivos estáticos.
Dicho esto, seguramente más de uno se extrañará de esta vuelta a los sitios estáticos, ya que en muchos proyectos es esencial una base de datos, la gestión de contenido y otra serie de elementos básicos para construir sitios comerciales. En principio es así, sin embargo, no requerimos necesariamente todo eso del lado del servidor. JAMstack propone un estilo de trabajo diferente del que estamos acostumbrados los desarrolladores de CMS como WordPress, basados en PHP y base de datos. Con JAMstack toda la producción del sitio web se realiza en local, generando todas y cada una de las páginas en archivos estáticos, que se enviarán al servidor para su publicación.
La diferencia fundamental en la publicación de un sitio tradicional es el material que subes al servidor cuando llevas a producción el proyecto. Mientras que en muchos casos se suben páginas PHP que acceden a las bases de datos para montar el HTML que se enviará al cliente, con JAMstack ese HTML ya ha sido montado previamente en local y se ha subido al servidor, cada uno de los archivos estáticos que los usuarios van a poder consultar de un sitio web.
El modelo JAMstack puede ser tan versátil como cualquier otro
Si es la primera vez que oímos hablar de JAMstack o sitios estáticos podríamos pensar, con razón, que el hecho de publicar solamente archivos estáticos (HTML + CSS + Javascript) nos ofrecerá muy poca versatilidad en cuanto al desarrollo del sitio. Que será imposible o muy difícil mantener el sitio, usar sistemas de plantillas, cambiar el contenido de los artículos. Nada más lejos de la realidad.
Por mucho que los archivos sean generados en local y subidos de manera estática al servidor no indica que los desarrolladores no tengan herramientas necesarias para la gestión del tema de diseño o la automatización de ciertas tareas y el mantenimiento del sitio. Para adaptar el proceso de desarrollo a las prácticas habituales con JAMstack, el profesional suele apoyarse en un framework que le facilite la tarea, algunas de las alternativas más conocidas son Hugo, Gatsby, Jekyll o Next.
Ventajas de JAMstack
Las ventajas de JAMstack son diversas. En realidad las mismas que obtendríamos con la publicación de sitios estáticos en general.
- Rendimiento: Los sitios son muy rápidos ya que los archivos están físicamente en el servidor. Por tanto, no se requiere tiempo de ejecución para generar la página, acceder a las bases de datos, etc.
- Seguridad: Al no haber programación del lado del servidor existe una total seguridad en lo que respecta al servidor, ya que en archivos de texto plano servidos tal cual, no puede haber ningún tipo de brecha.
- Coste: El alojamiento de una página estática se puede realizar en cualquier tipo de servidor, incluso en los más económicos.
Cómo desarrollar con JAMstack
Crear una web basada en JAMstack implica en primer paso escoger un framework que nos sirva para automatizar todo el sistema de generación de las páginas y la gestión de assets y templates. A estos frameworks se les conoce a menudo como «static site generators«. Existen alternativas de muchos tipos. Las hay ligadas a tecnologías de frontend determinadas como React (Gatsby, Next.js, Docosaurus…) o Vue (Nuxt, VuePress…) y, por supuesto, algunas alternativas otras que no casan con ninguna tecnología en concreto y, por lo tanto, nos permiten elegir las que nosotros queramos (Hugo, Jekyll…).
El desarrollo en la mayoría de los casos estará guiado por una estructura de archivos determinada, marcada por el propio framework, que tendremos que respetar para que entienda qué ficheros deben generarse y con qué contenido. Por supuesto, todos los frameworks usarán además algún lenguaje de templates que nos permitirá mezclar la estructura del sitio con el contenido particular de cada página. En muchos casos, además, el contenido se expresará en formato Markdown, que facilita mucho la edición del texto, incluso para personas que no tienen conocimientos de desarrollo.
Una vez que tenemos definido el sitio existirá un comando para generar todos los archivos que se tendrán que publicar en el servidor. Podríamos usar por supuesto sistemas de integración continua para subir los cambios a los servidores de Arsys o CMS específicos para gestionar el contenido de los sitios JAMstack, como Ghost, Strapi o muchos otros.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.