TLDR; Puedes escuchar la versión en audio de este artículo en este episodio de Café con Tech
JAMStack es un término genérico para referirse a una forma de desarrollar aplicaciones web. Es una arquitectura, modelo y filosofía que determina una forma de desarrollar una aplicación que cumple con los 5 pilares de una aplicación o framework bien "diseñado" según AWS.
- Excelencia Operacional
- Seguridad
- Fiabilidad
- Eficiencia
- Optimización de Costo
Tradicionalmente una webapp está compuesta de un servidor, un programa que ejecuta una serie de operaciones para retornar una página web. Esto ocurre cientos de veces con cada visita al sitio web.
Un ejemplo de app tradicional es una app hecha con algún framework que se encarga no solo de obtener los datos, sino también de construir y servir el contenido hacia el browser. Rails, Django, Laravel, ExpressJs, etc. son ejemplos de una app tradicional.
Historia
Pero, demos un poco de contexto que siempre es adecuado saber de donde proviene una idea.
La web comenzó de manos de Sir Tim Bernes Lee proveyendo de una forma de mostrar contenido estático por medio del uso de un lenguaje de marcado HTML. Hasta aquí todo bien, el desarrollo de sitios web fue por años simplemente para mostrar contenido.
Luego se le agregó dinamismo al utilizar lenguajes que de forma dinámica construían el contenido, como Perl y PHP y esto sigue así hasta que al rededor del año 2015 los sitios estáticos vuelven a popularizarse gracias al uso de herramientas de generación de sitios estáticos como Jekyll que permitían desarrollar rápidamente un sitio web directamente en github.
El 2016 el término JAMStack es acuñado por un grupo de desarrolladores que sintieron que "Sitio estático" no hacia correcta referencia a lo que se estaba desarrollando.
el 2016 crece la revolución de la "Web moderna" en donde se prioriza la performance, escalabilidad y experiencia de desarrollo. El término JAMStack comienza a ser adoptado por grandes grupos de desarrolladores.
- 2018 es el año de la explosión de JAMStack, herramientas como Netlify, Gatsby y Contentful crecen rápidamente popularizando aún más el término. Ese mismo año nace la JAMStack Conf.
El resto es historia.
Entonces, ¿Qué es JAMStack?
JAMStack es un approach diferente pero a la vez conocido. Es una app estática. ¿Cómo?
Es estática en el sentido de que el contenido es servido como archivos estáticos (Markup) pero los datos utilizados pueden ser dinámicos (API)
Por ejemplo tu ya tradicional aplicación escrita con React, cuando la pones en producción, lo que realmente tienes es un conjunto de archivos estáticos que es distribuido por algún servicio como Amazon S3 o Netlify y eso esencialmente es JAMStack.
Entonces de que se compone una app JAMStack
Por lo general son 3 componentes
JavaScript
Javascript permite proveer de dinamismo e interacción a esos archivos estáticos. Aquí es donde frameworks y librerías como React, Angular, Svelte y Vue entran en juego.
Estas herramientas hacen que crear un sitio web sea más "simple" (no más fácil en particular) ofreciendo diversas opciones para agregar dinamismo, junto con ofrecer un set de herramientas que finalmente generan un grupo de archivos estáticos que son servidor por tu CDN favorito.
APIs
Utilizar la versatilidad de las API es esencial para ofrecer funcionalidades a tu app JAMStack, la idea aquí es que tu aplicación puede consumir funcionalidades y datos de múltiples fuentes, algo completamente distinto al enfoque tradicional en donde los datos provenían del propio servidor.
El uso de Javascript para consumir datos sobre HTTP ha permitido el crecimiento de una miríada de servicios que proveen diversas funcionalidades, como autentificación, contenido, búsqueda, almacén de datos, etc.
Gatsby aquí hizo un gran trabajo definiendo el concepto "Content Mesh" para describir la red de apis que se utilizan en una app JAMStack.
Al mismo tiempo gatsby fue pionero, o al menos de los primeros frameworks, en ofrecer una clara interfaz entre todas estas fuentes de datos por medio del uso de Graphql como centralizador.
Personalmente creo que la popularización de Graphql incentivo el crecimiento de JAMStack y viceversa.
Markup
Este componente es esencial, es finalmente la parte visible al usuario, es lo que el browser consume, aquí lo importante no es en particular como se crea, puede ser a mano o por medio de herramientas de autogeneración, si no, es importante como se distribuye.
Para ser considerado JAMStack el contenido debe ser distribuido de forma estática, lo que implica que no debe ser renderizado de forma "dinámica" por el servidor.
Si estás creando una app o sitio web y este es construido en el momento por el motor PHP (por ejemplo), no estamos hablando entonces una app JAMStack, pero si estás sirviendo un archivo HTML desde algún servicio de storage como S3, entonces suena como JAMStack.
Una forma popular de crear el componente Markup es el uso de framework de Static Site Generators como Gatsby, Jekyll, Hugo, etc.
Frameworks que permiten consumir datos desde alguna o varias API durante el tiempo de "compilación" para recrear los archivos estáticos utilizando esos datos.
Por ejemplo, piensa en que tienes una serie de posts escritos en archivos markdown hosteados en algún servicio de Cloud que ofrece una api, es posible, utilizar esa api para obtener todos los archivos que tienes y utilizar su contenido para crear una página HTML para cada uno de ellos. Esto implica que finalmente lo que subirás a tu servicio de storage es una versión "pre-compilada" que será servido directamente al browser, lo que usualmente significa una experiencia de uso mucho más rápida para tus usuarios.
Beneficios
¿Entonces, que hace que JAMStack sea tan bueno y un término tan popular?
Primero, markting, yes. JAMStack es un término bastante marketero, muchos más que aplicación estática no?, pero obviamente si tiene beneficios reales como:
- Mejor performance: Servir contenido previamente construido utilizando un CDN indica que ya no dependes de la capacidad de tu servidor para construir las páginas que serán servidas en donde en ocasiones de muchos usuarios (requests) el servidor sufría e incluso podía simplemente caerse y dejar sin servicio tu maravilloso e-commerce.
- Más seguro No necesitas preocuparte de sobre vulnerabilidades del servidor o tu base de datos por lo que puedes enfocar tus esfuerzos en definir permisos de acceso para la información privada utilizando alguna api de autorización como Auth0.
- Menor Costo: Hostear contenido estático es barato o incluso gratuito.
- Mejor experiencia de desarrollo: Frontend Devs se pueden enfocar en lo que mejor hacen, el desarrollo frontend, sin estar atados a una estructura monolítica. Esto usualmente significa un mejor y más rápido desarrollo.
- Escalabilidad Si tu producto se vuelve viral de la noche a la mañana y de pronto tienes miles de usuarios activos, tu CDN lo compensará sin mayor dificultad. El CDN te dará escalabilidad "infinita" o al menos gigantesca.
Workflow
Obviamente la forma de desarrollar puede variar en cada uno, pero por lo general hay un flujo de trabajo mínimo ideal y bastante sencillo.
Desarrolla -> Sistema de control de versiones -> CI/CD -> Assets estáticos -> Deploy atómico -> Actualizar CDN.
Obviamente depende de tus herramientas, pero por ejemplo mi blog y todos mis otros sitios están construidos con este flow, pero quizá· un poco más simplificado dado los servicios.
Desarrollo el sitio en mi editor favorito y utilizo git para guardar mis cambios y subirlos a github, todos los commit hechos a master son "escuchados" por netlify que automáticamente genera un nuevo build y directamente actualiza su CDN interno.
¿Qué herramientas puedo utilizar?
Ya sabes que es JAMStack ahora la parte divertida, construir tu propia app JAMStack.
Puedes elegir un framework que te permite seleccionar casi cualquier tecnología web.
- Gatsby: React y Graphql (mi sitio web y el de control remoto están hechos con Gatsby)
- 11ty Diferentes lenguajes de Template como Markdown, Handlebars, liquid, etc.
- Hugo. Escrito en GO. Mi sitio de notas está hecho con HUGO.
- Nift. Escrito en C++ y Language Agnostic.
- Scully: Angular.js
y muchos más que puedes ver en https://jamstack.org/generators/
¿Dónde servir o almacenar tu app? Aquí hay mucho donde elegir.
- Netlify (mi elección)
- Vercel
- AWS (AWS Amplify es una buena elección)
- Github Pages
¿Que servicios o api hay disponibles?
- Auth0 es un gran servicio de autenticación y autorización.
- Cloudinary como servicio para hostear imágenes, las social cards de mis sitios es generada utilizando cloudinary.
- Sanity, Contenful o incluso Wordpress como CMS
- Stripe o MercadoPago como plataforma de pagos ¿Y Como le doy dinamismo?
Como ya hemos comentado, un sitio JAMStack provee de contenido estático en términos de que los archivos utilizados son estáticos, pero su contenido puede ser tan dinámico como se requiera. Hay varias formas de ofrecer este dinamismo como también muchos servicios que utilizar
- Puedes Utilizar React, Vue, Angular, o casi cualquier otro framework
- Puedes utilizar funciones serverless como lo que ofrece AWS lambda, Netlify functions o Vercel
- Utilizar bases de datos como FaunaDB
- Formularios, comentarios, e-commerce, search, etc.
En fin, aún hay mucho camino por recorrer
Recursos
Dada la pasión y emoción alrededor de JAMStack existen varias comunidades online que trabajan para proveer ambientes inclusivos para permitir que todos puedan aprender sobre este modelo y como hacer de la web un mejor lugar.
La principal conferencia sobre JAMStack es la jamstackconf. La conferencia líder y "oficial" sobre esta arquitectura, organizada por Netlify.
- Meetups: Puedes encontrar varias y diferente meetups que buscan mantener el contenido vivo permitiendo que muchos puedan dar a conocer su trabajo en estas pequeñas comunidades. Puedes encontrar una lista de estas meetups en jamstack.org/community
- Slack: También puedes unirte a algunas comunidades online como el Slack de JAMStack, the New Dynamic y Party Corgi Network.
- Newsletter: Puedes unirte a algún newsletter que te permitirán mantenerte al día sobre el desarrollo de JAMStack.
- Guías y tutoriales: En frontend masters puedes encontrar el curso de Jason Lengstorf sobre introducción a JAMstack. Egghead.io también tiene varias lecciones sobre Jamstack incluyendo videos sobre Netlify, Gatsby, Next y otros.
Gracias especiales a Colby Fayock autor de The Jamstack Hanbook, cuyo ebook fue utilizado como parte de las referencias para este episodio.
