Jamstack: la revolución del sitio web estático que revoluciona el desarrollo web

Jamstack es una filosofía de desarrollo web cada vez más popular que tiene como objetivo acelerar tanto el proceso de desarrollo web como los tiempos de descarga de la página web. Partiendo del movimiento devops y las técnicas de integración continua / entrega continua (CI / CD) que se están convirtiendo en la norma en muchas organizaciones, Jamstack cambia las técnicas de larga data para crear páginas web interactivas, alejando la ejecución de código en tiempo de carga de los servidores web y hacia JavaScript en el navegador y servicios externos a los que se accede a través de interfaces de programación de aplicaciones (API).

¿Qué es Jamstack? Jamstack, definido

Jamstack es un modelo de aplicación web basado en tres pilares, que proporcionan las iniciales de su nombre: JavaScript, API y marcado. Las páginas web de un sitio Jamstack constan de un lenguaje de marcado estándar, por lo que se pueden crear y probar en cualquier lugar, sin dependencias de servidores de aplicaciones o tecnologías del lado del servidor como Node.js. Cualquier funcionalidad interactiva la proporciona el código JavaScript estándar que se ejecuta en el navegador, que realiza llamadas a API reutilizables a través de HTTPS para obtener acceso a datos externos o cualquier otra funcionalidad que no se pueda integrar en la propia página web.

Para comprender por qué la filosofía Jamstack es revolucionaria, considere la pila LAMP, que ejemplifica la forma en que la mayoría de los desarrolladores han pensado sobre el desarrollo web durante la mayor parte de los últimos 15 años. LAMP significa Linux (el sistema operativo que alimenta a la mayoría de los servidores web), Apache (el software de 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 apunta su navegador a un sitio web basado 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 la creación de sitios web dinámicos e interactivos, pero también requiere un servidor web potente, y cuanto más tráfico recibe un sitio, más potencia informática necesita del lado del servidor. Incluso con un servidor con todas las funciones, las páginas web dinámicas pueden tardar mucho en construirse y cargarse. En un mundo de personas con períodos de atención breves que navegan por la web en sus teléfonos, ese retraso se ha vuelto cada vez más inaceptable.

Jamstack nació como parte del movimiento de la “web estática”, que surgió a mediados de la década de 2010 como reacción contra este modelo tradicional de cómo debería funcionar un sitio web. Para comprender Jamstack, debe comprender la tecnología actual detrás de  los sitios web estáticos.

Sitios estáticos, generadores de sitios estáticos y Jamstack

Si tuviera que explicarle a un novato completo 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 un sitio estático:  asume que los archivos HTML ya existen cuando el navegador web los busca. Como ya hemos visto, gran parte de la web durante la última década ha estado dominada por sitios dinámicos, que en cambio generan archivos HTML sobre la marcha en respuesta a solicitudes web, a menudo basados ​​en parámetros pasados ​​al servidor web a través de formularios o en el URL en sí.

En los primeros días de la web, cuando las páginas web eran invariablemente 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 como Dreamweaver de Macromedia, que podían generar esas páginas HTML estáticas mediante programación. A medida que el movimiento de la web estática despegó a mediados de la década de 2010, comenzó a surgir una nueva ola de los llamados generadores de sitios estáticos , incluidos Gatsby, Hugo y Jeckyll. A diferencia de las herramientas WYSIWYG como Dreamweaver, los generadores de sitios estáticos se controlan por línea de comandos y están diseñados para integrarse con los procesos de CI / CD. Los archivos HTML son generados por las herramientas, a menudo basados ​​en contenido escrito en Markdown, y subidos automáticamente a 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 el sitio web en vivo se actualizan automáticamente.

Una cosa importante a tener en cuenta es que estático en este contexto no significa que estas sean páginas web 1.0 simples que no sean interactivas. Recuerde, estas páginas pueden incluir JavaScript avanzado que se ejecuta en el navegador y realiza llamadas API a bases de datos, funcionalidad del lado del servidor o funciones alojadas sin servidor. Pero debido a que nada de esa ejecución ocurre en el servidor web en sí, un sitio estático no necesita un servidor web industrial completo con una base de datos. Muchos sitios estáticos se implementan en redes de entrega de contenido, o CDN, donde el contenido se refleja en varios servidores de todo el mundo para entregarse rápidamente a los usuarios en cualquier lugar.

Mathieu Dionne, líder de marketing de Snipcart, describe los primeros días de este nuevo mundo de sitios estáticos en una publicación de blog y menciona que alrededor de 2015, "los fundadores de Netlify ... acababan de idear el término 'Jamstack' para solucionarlo. la connotación negativa de 'red estática' ”. En otras palabras, hemos estado describiendo el proceso Jamstack a lo largo de esta sección. Pero ahora debemos discutir brevemente Netlify y su papel en el ecosistema.

¿Qué es Netlify?

Netlify es una empresa de alojamiento web y computación en la nube. El cofundador de Netlify, Mathias Biilmann, acuñó el término Jamstack, y los servicios de Netlify están diseñados para los clientes que desean crear sitios basados ​​en la filosofía Jamstack.

Netlify afirma haber resuelto un problema específico que había estado reteniendo sitios estáticos, que es la invalidación de caché. Los sitios web dinámicos basados ​​en bases de datos pueden consumir muchos recursos del servidor, pero puede estar seguro de que ofrecerán la última versión de su sitio web a cualquier visitante que se detenga. Debido a que los sitios web de Jamstack a menudo se alojan en los múltiples 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 almacenada en caché del sitio ya no es válida. El CDN de Netfliy proporciona invalidación instantánea de caché para archivos HTML para solucionar este problema.

Pero Netlify no es el único proveedor de alojamiento en el espacio Jamstack, y no tiene ningún tipo de marca registrada ni control de propiedad sobre el término. Hay una serie de soluciones de implementación y alojamiento Jamstack disponibles, y la mayoría de los grandes proveedores de nube se están sumando a la acción, incluidos AWS, Google Firebase y Microsoft Azure.

Jamstack CMS

Si eres alguien que tiene que lidiar con un sitio web a diario, sabes que crear y alojar un 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 harán eso generalmente no serán programadores, necesitarán una herramienta fácil de usar, es decir, un sistema de administración de contenido o CMS. Los CMS tradicionales, como WordPress, ofrecen una interfaz de usuario de back-end donde puede ingresar contenido del sitio 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 los sitios Jamstack funcionan de manera diferente y, por lo general, se denominan sin cabeza. Un CMS sin cabeza ofrece una interfaz de usuario para ingresar y administrar contenido y una base de datos u otros medios para almacenarlo, pero no genera por sí mismo código HTML para que lo analice un navegador. En cambio, las páginas HTML estáticas del sitio 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, que es por supuesto un ideal de programación desde hace mucho tiempo. Debido a que el CMS tiene una API accesible, varias páginas web pueden acceder a ella fácilmente. Por ejemplo, si ha creado versiones de su sitio web para dispositivos móviles, de escritorio y de reloj inteligente, todas estas versiones pueden acceder al mismo contenido almacenado en el CMS.

Netlify, como era de esperar, tiene su propia oferta en este espacio, llamada NetlifyCMS, pero hay otras ofertas disponibles; el desarrollador Nebojsa Radakovic los desglosa en una publicación de blog. Hay muchos prometedores en esa lista, así como un nombre muy familiar. Si bien usamos WordPress como ejemplo de un CMS tradicional, WordPress se puede ejecutar como un CMS sin cabeza para impulsar un sitio Jamstack también.

Conferencia Jamstack

Netlify también trabaja para crear una comunidad Jamstack y patrocina conferencias Jamstack. La compañía realizó eventos en Nueva York, Londres y San Francisco en 2019, y organizó un evento virtual en mayo de 2020. Al momento de escribir este artículo, puede inscribirse en el evento de San Francisco programado para el 6 y 7 de octubre de 2020, aunque la pandemia de coronavirus todavía tiene planes de conferencias de otoño en el aire. 

Si desea recibir actualizaciones, puede seguir la conferencia en Twitter. También puede consultar las charlas anteriores en el canal de YouTube Jamstack Conf.

[También en: Los 6 mejores IDE de JavaScript | Los 10 mejores editores de JavaScript]

Tutoriales de Jamstack

¿Busca profundizar más? Consulte estos tutoriales de Jamstack que le brindarán experiencia práctica en la creación de un sitio Jamstack:

  • El desarrollador David Neal tiene un buen tutorial introductorio sobre cómo construir un sitio Jamstack, comenzando de manera muy simple y luego volviéndose cada vez más complejo. 
  • En el blog de LogRocket, el ingeniero de software Ogundipe Samuel ofrece un análisis detallado paso a paso de la creación de un sitio de comercio electrónico sobre los principios de Jamstack. 
  • Netlify ofrece un video tutorial de más de tres horas que cubre mucho terreno, desde lo básico hasta temas más avanzados. 

Una vez que haya dominado los conceptos básicos descritos aquí, estará preparado para comenzar a trabajar con el desarrollo de Jamstack en su vida profesional. ¡Feliz aprendizaje!