JAMstack es una arquitectura de desarrollo web. No es un lenguaje de programación ni un framework. JAMstack es un conjunto de buenas prácticas de desarrollo web, enfocado en aportar el mejor rendimiento, la mayor seguridad, y el menor coste para escalar. Además de favorecer el trabajo de tu equipo de desarrolladores.
En este artículo, te voy a presentar las buenas prácticas que puede representar JAMstack en tus proyectos. ¡Vamos allá!
¿Qué es JAMstack?
Según la documentación oficial de JAMstack:
JAMstack es una arquitectura moderna de desarrollo web basada en JavaScript en el lado del cliente, API reutilizables y uso de Markups.
Cuando hablamos de "The Stack", ya no hablamos de sistemas operativos, servidores web específicos, lenguajes de programación backend o bases de datos. Hablamos de serverless.
El JAMstack no se enfoca en ninguna tecnología específica. Es un conjunto de buenas prácticas para crear webs y aplicaciones, enfocado en aportar el mejor rendimiento, la mayor seguridad, y el menor coste en escalado. Además de favorecer el trabajo del desarrollador.
Es posible que hayas leído términos específicos como MEAN stack y MERN stack. Estos son solo términos utilizados para agrupar algunos frameworks o tecnologías web. Por el contrario, JAMstack es conceptualmente un conjunto de buenas prácticas sin especificar tecnología.
¿Qué significa JAMstack?
Es únicamente un conjunto de varias tecnologías utilizadas para crear aplicaciones web o mobile. En conclusión, JAMstack es la combinación de JavaScript, APIs y Markup. ¿interesante verdad?
El principal objetivo de JAMstack es olvidarte de la dependencia del mantenimiento e instalación del servidor. Con un objetivo claro de facilitar la distribución y el escalado así como especifica la entrega continua. Tu proyecto se alojará directamente en un CDN, aportando máxima velocidad, rendimiento y mejorando la experiencia de usuario.
¿Por qué JAMstack?
Como ya comentamos en el post Decoupled CMS. Las webs tradicionales o las webs con CMS como por ejemplo, WordPress, Drupal, etc. dependen en gran medida de servidores, plugins y bases de datos. Pero el objetivo de JAMstack es pasar toda esta carga al cliente, mediante JavaScript. Recibiendo los datos desde una API, alojando toda la web en un CDN y markups generados mediante un generador de webs estáticas compilados con GraphQL por ejemplo.
Características de JAMstack
Veamos alguno de sus propósitos:
Velocidad
Como comentamos en el post, Rendimiento web, CDN & SEO. El tiempo de respuesta de tu web es fundamental y seguro que tu web contiene gran cantidad de contenido estático (fichas de producto, imágenes, catálogos, vídeos, documentos, etc.). Un CDN minimizará el tiempo de carga de tu web. El objetivo de JAMstack es tener generados todos los ficheros para alojarlos en un CDN, para reducir la latencia, mejorando los tiempos de respuesta obteniendo una correcta experiencia de usuario.
Seguridad
Se incrementa la seguridad generando contenido estático mediante un generador de webs estáticas. O en el caso de tener la necesidad de requerir contenido dinámico se realizará mediante una API, evitando accesos directos a bases de datos. Además al alojar la web en un CDN estarás protegido de ataques DDoS.
Económico y escalable
El resultado de una web con JAMstack es la simplificación de la web en un solo código fuente que puede servirse desde un CDN a costes irrisorios, además de ser muy escalable. También puedes integrar algún pipeline CI/CD para la automatización de nuevas versiones.
Buenas prácticas de JAMstack
- Los cambios deben ser ágiles para garantizar una configuración estándar y rápida, así que deberías utilizar workflows de desarrollo en Git.
- Utiliza servicios CDN para garantizar la máxima velocidad en la entrega de contenido.
- Usa herramientas generadoras de webs estáticas como Jekyll, Hugo o Gatsby.
- Asegúrate de que tu proyecto cumple con los estándares web y es altamente accesible.
- Tu proceso debe estar automatizado mediante un pipeline CI/CD.
- Haz que tu proceso de puesta en producción también esté automatizado y escalado, con plataformas como AWS Amplify o Netlify.
¿Cómo empezar?
Puedes usar algunas tecnologías que aplican ya las buenas prácticas de JAMstack. Aquí van algunas:
- Jekyll: es uno de los generadores de webs estáticas más populares. Es actualmente la comunidad más grande y tiene una enorme cantidad de recursos como themes, plugins y documentación.
- Hugo: como Jekyll, aunque mejorando la velocidad a la hora de generar el sitio web. Además de que Hugo sea más sencillo, ya que no requiere mucha configuración para iniciar tu proyecto web. En su contra, no dispone de gran cantidad de recursos como Jekyll.
- Gatsby: es el software más reciente y uno de los más interesantes, se está popularizando. Basado en React.js, es muy rápido y permite acelerar los tiempos de carga. Te permite producir una web moderna y de alta calidad, además de aplicaciones web progresivas.
- NuxtJS: Al igual que Gatsby uno de los más interesantes. Basado en Vue.js, es muy rápido y permite acelerar los tiempos de carga. Te permite producir una web moderna y de alta calidad, además de aplicaciones web progresivas.
- Netlify CMS : Netlify CMS es un CMS opensource que puedes integrar a tus workflows de desarrollo en Git, para que puedas usar con cualquier generador de web estáticas como Jekyll, Hugo, Gatsby o NuxtJS.
- Prismic, Contentful, Directus, o Storyblock serían algunos ejemplos de soluciones y plataformas Headless CMS.
Conclusión
JAMstack es un conjunto de buenas prácticas para desarrollar y gestionar webs con un alto rendimiento, máxima seguridad, máxima escalabididad, menor coste y la mejor experiencia de desarrollo.
JAMstack no es ninguna tecnología específica, es una arquitectura de desarrollo moderna de desarrollo web basada en JavaScript en el lado del cliente, API reutilizables y uso de Markups.
¿Integras JAMstack en tus desarrollos? ¿Utilizas generadores de web estáticas con pipeline CI/CD?
Photo by Jonathan Simcoe on Unsplash
Referencias:
