[24/06/2022] Jamstack es una popular filosofía de desarrollo web que tiene como objetivo acelerar tanto el desarrollo web como el tiempo que lleva descargar una página web. Basándose en desarrolladores y CI/CD, Jamstack mejora las técnicas tradicionales para crear páginas web interactivas, desplazando la ejecución del código en tiempo de carga lejos de los servidores web -hacia JavaScript dentro del navegador y servicios externos accesibles vía APIs. El resultado final es un enfoque amigable que permite a los desarrolladores crear páginas web estáticas, capaces de procesarse muy rápidamente y de personalizarse fácilmente en múltiples plataformas.
[Reciba lo último de CIO Perú suscribiéndose a nuestro newsletter semanal]
La arquitectura Jamstack
Jamstack es una arquitectura de aplicaciones web que se basa en tres pilares que proporcionan las iniciales de su nombre: JavaScript, API y markup. Las páginas web en un sitio de Jamstack consisten en lenguaje markup estándar, por lo que se pueden crear y probar en cualquier lugar, sin dependencias en los servidores de aplicaciones o tecnologías del lado del servidor, como Node.js. Cualquier funcionalidad interactiva es proporcionada por código JavaScript estándar que se ejecuta en el navegador, que realiza llamadas a APIs reutilizables a través de HTTPS. Estas llamadas se utilizan para acceder a datos externos o cualquier otra funcionalidad que no se pueda integrar en la propia página web.
Para comprender por qué Jamstack es revolucionario, considere el stack LAMP, que ejemplifica la forma en que la mayoría de los desarrolladores han pensado el desarrollo web durante los últimos 15 años. LAMP significa Linux (el sistema operativo que alimenta la mayoría de los servidores web), Apache (el software para servidor que se ejecuta en esas máquinas Linux), MySQL (la base de datos donde se almacenan los datos de la aplicación web) y PHP/Perl/Python (el lenguaje utilizado para escribir el código del lado del servidor). Cuando apunta su navegador a una página web basada en LAMP, el servidor web ejecuta el código del lado del servidor que genera la página web sobre la marcha, extrayendo datos según sea necesario de la base de datos MySQL.
La arquitectura LAMP permite a los desarrolladores crear páginas web dinámicas e interactivas, pero también requiere un servidor web potente -y cuanto más tráfico recibe un sitio, más potencia informática del lado del servidor necesita. Incluso con un servidor con todas las funciones, las páginas web dinámicas pueden tardar mucho en crearse y cargarse. En un mundo con personas con poca capacidad de atención, que a menudo navegan por la web en sus teléfonos, esa demora se ha convertido en un gran obstáculo.
Jamstack nació como parte del movimiento de páginas web estáticas, que surgió a mediados de la década del 2010, en reacción contraria al modelo tradicional de cómo debería funcionar una página web. Para comprender Jamstack, debe comprender la tecnología detrás de las páginas web estáticas.
Páginas web estáticas y Jamstack
Si tuviera que explicarle a alguien completamente novato cómo funciona la web, podría ser algo como esto: en algún lugar del sistema de archivos de un servidor web hay archivos HTML, accesibles por direcciones HTTP, que un navegador web descarga y luego interpreta para crear una página web. Pero esa es una descripción de una página web estática: asume que los archivos HTML ya existen cuando el navegador web los busca. Pero gran parte de la web, durante la última década, estuvo dominada por páginas web dinámicas, que generan archivos HTML sobre la marcha en respuesta a solicitudes web, a menudo en función de parámetros pasados al servidor web por medio de formularios o en la propia URL.
Generadores de sitios estáticos: En los primeros días de la web, cuando las páginas web eran invariablemente estáticas, muchos desarrolladores web escribían código HTML a mano. Cuando las páginas web se volvieron más complejas, llegaron herramientas como Dreamweaver de Macromedia, y comenzaron a generarse páginas HTML estáticas mediante programación. A medida que despegaba el movimiento de páginas web estáticas, comenzó a surgir una nueva ola de generadores de sitios estáticos, como Gatsby, Hugo y Jeckyll. A diferencia de las herramientas WYSIWYG, como Dreamweaver, los generadores de sitios estáticos se basan en la línea de comandos y están diseñados para integrarse bien con los procesos de CI/CD. Estas herramientas generan archivos HTML, a menudo basados en contenido escrito en Markdown, y se cargan automáticamente en un repositorio de control de versiones, como GitHub. Como estos archivos están marcados como listos para la producción, las páginas estáticas en la página web en vivo se actualizan automáticamente.
Redes de entrega de contenido: Una cosa importante para tener en cuenta es que estático, en este contexto, no implica páginas web 1.0 simples que no son interactivas. Estas páginas pueden incluir JavaScript avanzado que se ejecuta en el navegador y realiza llamadas API a bases de datos, funciones del lado del servidor o funciones sin servidor alojadas. Pero debido a que nada de esa ejecución ocurre en el servidor web, un sitio estático no necesita un servidor web de potencia industrial completo con una base de datos. Muchos sitios estáticos se implementan en redes de entrega de contenido (o CDN, por sus siglas en inglés) donde el contenido se refleja en múltiples servidores en todo el mundo para poder entregarlo rápidamente a los usuarios en cualquier lugar.
Mathieu Dionne, responsable de marketing en Snipcart, describe los primeros días de este nuevo mundo de páginas web estáticas en una entrada de blog y menciona que, alrededor del 2015, "los fundadores de Netlify... acababan de proponer el término 'Jamstack' para evitar la connotación negativa de 'web estática'”.
Hemos descrito el proceso Jamstack a lo largo de esta sección. Ahora, analicemos brevemente Netlify y su papel en el ecosistema Jamstack.
Netlify y Jamstack
Netlify es una empresa de alojamiento web y computación en la nube, y su cofundador, Mathias Biilmann, acuñó el término Jamstack. Los servicios de Netlify se adaptan a los clientes que desean crear sitios basados en la filosofía Jamstack.
Netlify afirma haber solucionado un problema específico que había estado reteniendo a las páginas web estáticas, que es la invalidación de la caché. Las páginas web dinámicas, basadas en bases de datos, pueden consumir una gran cantidad de recursos del servidor, pero puede estar seguro de que ofrecerán la última versión de su página web a cualquier visitante que la encuentre. Debido a que las páginas web de Jamstack a menudo se alojan en varios servidores distribuidos de una CDN, las actualizaciones son menos sencillas. Cada servidor CDN puede tardar, desde unos minutos hasta horas, en darse cuenta de que su versión en caché del sitio ya no es válida. Para solucionar este problema, la CDN de Netlify proporciona invalidación de caché instantánea para archivos HTML.
En los años transcurridos desde que Netlify levantó la bandera de Jamstack, la empresa ha utilizado la tecnología como la columna vertebral de su oferta de PaaS, proporcionando una plataforma de contenido para grandes empresas como Nike y Peleton.
Jamstack con Gatsby
Netlify no es el único proveedor de alojamiento en el espacio de Jamstack, y no tiene ningún tipo de marca comercial o control de propiedad sobre el término. Existe una variedad de soluciones de implementación y alojamiento de Jamstack disponibles, y la mayoría de los grandes proveedores de la nube están entrando en acción, incluyendo Amazon Web Services, Google Firebase y Microsoft Azure. Otras empresas, más especializadas, también han entrado en este espacio, como Gatsby, Inc., creadora del generador de sitios estáticos del mismo nombre.
Gatsby (la empresa) ha construido una oferta de servicios muy exitosa en la parte posterior del generador del sitio Gatsby. Debido a sus raíces de código abierto, otros proveedores de servicios también ofrecen el generador de sitios Gatsby, incluyendo Netlify.
El CMS sin cabecera
Como ya debe saber si alguna vez ha tenido que administrar una página web, crearla y alojarla es solo el comienzo. También necesita una forma de crear contenido nuevo y agregarlo a su sitio. Debido a que las personas que hacen eso generalmente no son programadores, necesitarán una herramienta fácil de usar -específicamente, un sistema de administración de contenido o CMS (por sus siglas en inglés). Los CMS tradicionales, como WordPress, ofrecen una interfaz de usuario (UI) de back end, donde puede ingresar contenido de la página web, administrar una base de datos donde se almacena ese contenido, y crear páginas web dinámicas que presentan ese contenido en respuesta a las solicitudes del navegador.
Los CMS para sitios Jamstack funcionan de manera diferente y generalmente se conocen como "sin cabecera”. Un CMS sin cabecera ofrece una interfaz de usuario para ingresar y administrar contenido y una base de datos u otros medios para almacenarlo, pero no genera código HTML para que lo analice un navegador. En su lugar, las páginas HTML estáticas de la página web utilizan JavaScript para realizar llamadas a las API del CMS, y el CMS devuelve el contenido en un formato que JavaScript puede convertir en una página web.
Este sistema separa completamente el contenido de la presentación, lo que por supuesto es un ideal de programación tradicional. Debido a que el CMS tiene una API accesible, varias páginas web pueden usarla fácilmente. Por ejemplo, si creó versiones separadas de su página web para dispositivos móviles, desktops y relojes inteligentes, todas estas versiones pueden acceder al mismo contenido almacenado en el CMS.
Netlify, como es de esperarse, cuenta con su propia oferta en este campo, llamada NetlifyCMS, pero existen otras ofertas disponibles; el desarrollador, Nebojsa Radakovic, los desglosa en su introducción a los CMS sin cabecera. Existen muchos nombres prometedores en esa lista, así como un nombre muy familiar. Si bien usamos WordPress como ejemplo de un CMS tradicional, también se puede ejecutar como un CMS sin cabecera para impulsar un sitio Jamstack.
¿Por qué usar Jamstack?
Hemos mencionado muchos de los beneficios de usar Jamstack, pero vale la pena recapitularlos, ahora que tiene una imagen completa:
- Velocidad: Los sitios estáticos se cargan más rápido -y eso no es solo una cuestión de conveniencia. Google penaliza los sitios lentos al reducir su rango de búsqueda, y los clientes acostumbrados a respuestas rápidas a menudo abandonan las transacciones de comercio electrónico si los pasos tardan en cargarse.
- Experiencia del desarrollador: Los desarrolladores pueden crear sitios estáticos utilizando las técnicas de desarrollo que han transformado las prácticas y la productividad de la industria. Y la filosofía Jamstack produce stacks de sitios que separan claramente las preocupaciones, lo que permite a los desarrolladores centrarse en sus áreas de especialización: los diseñadores y desarrolladores front end pueden crear sitios sin necesidad de dominar un lenguaje del lado del servidor, mientras que los desarrolladores back end pueden centrarse en las API. Las preguntas de contenido se manejan completamente en el ámbito del CMS.
- Flexibilidad: Los sitios estáticos pueden hospedarse en servidores web tradicionales, CDNs, servicios especializados o alguna combinación de los tres. Y debido a que los CMS independientes interactúan con los front end a través de las API, pueden crear fácilmente sitios para múltiples plataformas que comparten el mismo contenido.
Cuando no usar Jamstack
Con todos esos beneficios, todavía hay que mencionar que Jamstack no es para todos. La otra cara de la moneda, con relación a cómo Jamstack se adapta a las necesidades de los desarrolladores, es que podría terminar dependiendo demasiado de los desarrolladores. Esto no es tan malo para las empresas que ya tienen, o están dispuestas a contratar, un equipo de desarrollo web dedicado con las habilidades necesarias para Jamstack. Pero muchos usuarios más pequeños están acostumbrados a usar software comercial, o de código abierto, disponible en el mercado, y que les permite ejecutar sus páginas web con poca necesidad de la participación diaria de los desarrolladores. Los sitios de comercio electrónico, en particular, tienden a depender de una amplia variedad de complementos y bibliotecas desarrollados a lo largo de los años para las soluciones de alojamiento web tradicionales; sus equivalentes de Jamstack no están tan extendidos ni maduros, lo que significa que Jamstack no siempre es bueno para el comercio electrónico.
¿Jamstack es popular?
A pesar de la publicidad que lo rodea, Jamstack actualmente soporta una parte bastante pequeña de todas las páginas web. En el 2021, Web Almanac estimó que los sitios creados por generadores de sitios estáticos (casi todos los cuales se habrían creado siguiendo las líneas de la filosofía Jamstack) representaban solo alrededor del 1% de todas las páginas web. Dicho esto, Jamstack se encuentra en un período de rápido crecimiento. Durante los últimos tres años, muestra un aumento en su cuota de mercado de un factor de más de dos cada año. Una gran señal del creciente interés de los desarrolladores en la tecnología: alrededor de un tercio de los desarrolladores de Jamstack son bastante nuevos en el campo y tienen menos de dos años de experiencia.
Tutoriales de Jamstack
¿Busca profundizar en este tema? Consulte estos tutoriales para desarrolladores de Jamstack:
- Hasura, una empresa que se enfoca en el sistema API GraphQL, utilizado por Gatsby y otras plataformas Jamstack, tiene un buen tutorial de alto nivel que le lleva paso a paso a través de las consideraciones arquitectónicas y las opciones que se incluyen en un sitio Jamstack.
- El servidor web Digital Ocean tiene un buen tutorial sobre cómo crear un sitio de portafolio Jamstack usando Angular y Scully.
- Netlify ofrece un video tutorial que cubre mucho terreno, desde lo básico hasta temas más avanzados, e incluye una introducción a la creación de un sitio Jamstack basado en una base de datos.
Una vez que haya dominado los conceptos básicos descritos aquí, estará listo para usar los principios y tecnologías de Jamstack para sus páginas web. ¡Feliz aprendizaje!
Basado en el artículo de Josh Fruhlinger (InfoWorld) y editado por CIO Perú