30díasdeblog

Una introducción sobre Jamstack

Jamstack combina filosofías de desarrollo modernas inspiradas en devops con páginas HTML estáticas de la vieja escuela para permitir a los desarrolladores crear sitios web rápidos más rápido.

Marvin López

28 de jun. de 2020 • 7 min read

Día 28 del reto #30díasdeblog y hoy es el ultimo domingo de #Tech del reto.

Hoy compartiré sobre Jamstack, un nuevo enfoque de arquitectura en el desarrollo de sitios web.

¿Qué es Jamstack?

Jamstack, es una filosofía de desarrollo web (algo revolucionaria) que es cada vez más popular y que tiene como objetivo acelerar el proceso de desarrollo web así como el rendimiento y seguridad de la página web. En resumen es un enfoque para crear sitios web más rápidos y seguros. Basa su enfoque en DevOps y técnicas de integración y entrega continua (CI / CD), está principalmente diseñado para integrar en el desarrollo web las nuevas herramientas y flujos de trabajo utilizados en el desarrollo de software moderno.

En las palabras de Mathias Biilmann, CEO y cofundador de Netlify, Jamstack es:

"Una arquitectura de desarrollo web moderna basada en JavaScript del lado del cliente, API reutilizables y marcado preconstruido"

Jamstack revierte las técnicas para construir páginas web interactivas, eliminando la ejecución y el tiempo de carga del código de los servidores web, hacia el navegador a través de Javascript, servicios externos a los que se accede a través de las API (interfaces de programación de aplicaciones) y marcado pre-configurado. Convirtiendo aplicaciones pesadas y complejas alojadas en servidores complejos, en sitios web livianos, rápidos y seguros que pueden ejecutar en arquitecturas igualmente livianas.

Un sitio web es en realidad un programa que ejecuta en un servidor web en todo momento. Ejecutar sitios de de manera tradicional ralentiza innecesariamente las cosas, brinda demasiadas oportunidades de ataque y es costoso de escalar.

Sitios web dinámicos

Para entender por qué la filosofía Jamstack es revolucionaria, hay que entender cómo se crean los sitios web dinámicos más tradicionales y la tecnología actual detrás de los sitios web estáticos.

Los sitios web dinámicos creados de la forma tradicional, es decir, la forma en que la mayoría de los sitios web han sido desarrollados en los últimos años, utilizan LAMP.

LAMP significa:

Linux (el sistema operativo que alimenta la mayoría de los servidores web),
Apache (el software del servidor que se ejecuta en esas máquinas Linux),
MySQL (la base de datos donde se almacena la información que necesita la aplicación web) y
PHP / Perl / Python (el lenguaje que el código del lado del servidor está escrito).

Cuando desde tu navegador buscas un sitio web que está desarrollado con LAMP:

Tu navegador hace una petición al servidor web.
El servidor web ejecuta el código de la página (del lado del servidor) generando así lo que tú vez desde el navegador (la página web) sobre la marcha.
Cada vez que haces click o una búsqueda, el servidor busca y extrae los datos de una base de datos MySQL para luego, generar el código y enviarlo a tu navegador de modo que este lo muestre en tu pantalla según sea necesario.

La arquitectura LAMP permite la creación de sitios web dinámicos e interactivos, pero también requiere un servidor web potente. Cuanto más tráfico recibe un sitio web, más potencia computacional necesita en el servidor para atender las peticiones. Incluso en un servidor con las mejores características técnicas, las páginas web dinámicas pueden tardar mucho tiempo en crearse y cargarse. Hoy que las personas en su gran mayoría navegan la web utilizando sus teléfonos, la demora de carga de los sitios web se ha vuelto algo inaceptable y una de las razones por la que dejan de visitar un sitio web.

Jamstack nació como parte del movimiento que promovía los "sitios web estáticos", que surgió a mediados de la década de 2010 cuando se popularizaron generar¡dores de sitios web estáticos como Jekyll. Todo esto como una reacción contra el modelo tradicional de desarrollo de sitios web.

Un dato curioso es que inicialmente el nombre era JAMstack con las primeras tres letras en mayúsculas y hace poco fue cambiado a Jamstack como una palabra capitalizada para desvincularlo de cualquier tecnología ya que se trata más de una filosofía de desarrollo web.

Sitios web estáticos

Si quisiera explicar cómo funciona la web, diría que en algún lugar del sistema de archivos de un servidor web hay archivos HTML que son accesibles por direcciones HTTP, un navegador web los solicita y descarga a través de una url, luego interpreta esos archivos para crear una página web. A parte de explicar como funciona la web, esta es también una descripción de cómo funciona un sitio web estático, es decir, se supone que los archivos HTML ya existen cuando el navegador web los busca, no los genera un código desde el servidor como sucede con los sitios web creados con LAMP.

Como ya hemos visto, gran parte de la web en la última década ha estado dominada por sitios dinámicos, que en su lugar generan archivos HTML sobre la marcha en respuesta a las solicitudes web, solicitudes que a menudo están basadas en parámetros enviados al servidor web a través de formularios o en como parte del URL.

Generadores de sitios web estáticos

En los primeros días de la web, las páginas web eran estáticas, muchos desarrolladores web escribían el código HTML a mano. A medida que las páginas web se volvieron más complejas, llegaron herramientas WYSIWYG (What You See Is What You Get) como Dreamweaver de Macromedia, que permitían generar esas páginas HTML estáticas sin necesidad de escribir código. Cuando el desarrollo de sitios web estáticos se popularizó nuevamente a mediados de la década de 2010, surgió una nueva ola de herramientas llamadas generadores de sitios web estáticos, cómo Jekyll, Gatsby, Hugo, Eleventy, Next.Js, etc. A diferencia de las herramientas como Dreamweaver, los generadores de sitios web estáticos están controlados por código y están diseñados para integrarse con los procesos de CI / CD. Los generadores de sitios web estáticos generan archivos HTML, a menudo basados en contenido escrito en Markdown o de datos que provienen del API de algún CMS, y se cargan automáticamente en un repositorio de control de versiones como GitHub.

Una cosa importante a tener en cuenta es que la estática en este contexto no significa que se trata de páginas web 1.0 simples, es decir que no son interactivas. Como las páginas web estáticas pueden incluir JavaScript, a través de él pueden realizar llamadas a APIs, bases de datos, funcionalidades del lado del servidor o funciones serverless. Como ninguna de esas ejecuciones ocurren directamente en el servidor del sitio web, un sitio web estático no necesita un servidor web con tantas capacidades técnicas ni con una base de datos. Muchos sitios web estáticos se implementan en una CDN (Content Delivery Network o Red de Distribución de Contenido en español) donde el contenido se refleja en múltiples servidores (mirrored) en todo el mundo para ser provistos rápidamente a los usuarios en cualquier lugar y de manera más eficiente.

Netlify y el término Jamstack

Netlify es una empresa de cloud computing y alojamiento web. Mathias Biilmann, uno de los fundadores de Netlify, acuñó el término Jamstack. Los servicios de Netlify están diseñados principalmente para clientes que desean construir sitios basados en la filosofía de Jamstack.

Jamstack CMS

Si eres alguien que tiene que lidiar con un sitio web en el día a día, sabes que construir y alojar el sitio web es solo el comienzo. También necesita una forma de crear contenido nuevo y agregarlo a su sitio. Debido a que las personas que lo harán normalmente no serán programadores, necesitarán una herramienta fácil de usar, a saber, un sistema de administración de contenido o CMS. Los CMS tradicionales, como WordPress, ofrecen una interfaz de usuario de fondo donde puede ingresar el contenido del sitio web, administrar una base de datos donde se almacena ese contenido y crear páginas web dinámicas que presenten ese contenido en respuesta a las solicitudes del navegador.

Los CMS para sitios Jamstack funcionan de manera diferente, y generalmente se los conoce como Headless CMS. Un Headless CMS 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 un navegador lo analice. En cambio, las páginas HTML estáticas del sitio web usan 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, regularmente JSON.

Un Headless CMS separa completamente el contenido de la presentación (front-end). Debido a que el CMS tiene una API accesible, distintos sistemas pueden acceder fácilmente a sus datos. Por ejemplo, si ha creado versiones separadas para dispositivos móviles, computadoras de escritorio y relojes inteligentes de su sitio web, todas estas versiones pueden acceder al mismo contenido almacenado en el CMS utilizando la API.

Netlify, como es de esperar, tiene su propia oferta en este espacio, llamada NetlifyCMS, pero hay muchas otras opciones disponibles como Ghost CMS, mi preferido. Ya les conté antes que imarv.in usa Ghost CMS - Día 7.

¿Te gustaría aprender más sobre Jamstack?

Existe mucha información y tutoriales de Jamstack en Internet ya que su comunidad de programadores es enorme. Aquí te dejo unos cuantos sitios web muy buenos para empezar: