¿Qué es JAMstack?

¿Qué es JAMstack?

JAMstack es un enfoque de desarrollo web frontend (la construcción de contenidos e interfaces con los que interactúan los usuarios). Permite que los desarrolladores puedan crear y servir sitios web estáticos a los usuarios de forma rápida y eficaz .

En una aplicación web JAMstack, lo máximo del HTML que sea posible está prediseñado y almacenado en una red de entrega de contenido (CDN). En lugar de ejecutar una aplicación backend monolítica en el lado del servidor para generar contenidos dinámicos, los componentes dinámicos de la aplicación están basados en API. En el mejor de los casos, esto da lugar a una experiencia del usuario mucho más rápida y a una experiencia de desarrollador mucho más sencilla.

¿Qué significa el término "JAMstack"?

JAM son las siglas de JavaScript, API, Marcado.

• JavaScript es el lenguaje de programación que utilizan las aplicaciones web
• Una API (interfaz de programación de aplicaciones) es una forma de solicitar datos al programa o aplicación de otra persona
• El marcado es el código (HTML y CSS) que proporciona instrucciones de formato a los navegadores

Stack hace referencia a la combinación de todas estas cosas de una forma que permite a los desarrolladores crear aplicaciones y sitios web.

Un sitio web o una aplicación JAMstack se construye utilizando solo estos tres elementos. El sitio web estático que ve el usuario se crea con código de marcado HTML y CSS. Se utiliza JavaScript para cualquier funcionalidad dinámica necesaria y para llamar a las API. Las API proporcionan el backend de la aplicación.

Supongamos que Bob diseña una aplicación web que ofrece los resultados del fútbol europeo. Bob crea una aplicación backend que se ejecuta en un servidor que él opera y que comprueba constantemente los resultados de los últimos partidos. Cuando un usuario abre la aplicación web, el servidor de Bob genera páginas HTML que muestran esos resultados, y luego envía esas páginas al usuario. Sin embargo, la aplicación web de Bob es algo lenta: antes de que un usuario pueda ver esas páginas, tiene que esperar a que se ejecute la aplicación backend, a que se genere el HTML y a que este llegue a su dispositivo.

Ahora, supongamos que Bob rediseña su aplicación web utilizando un enfoque JAMstack. En lugar de escribir una aplicación backend completa, crea una serie de páginas HTML ligeras que almacena en una CDN. Cuando un usuario abre la aplicación, la CDN le entrega inmediatamente las páginas HTML correspondientes, ya que la CDN está mucho más cerca del usuario que el servidor de Bob. La aplicación también hace una llamada de la API para rellenar los resultados de los partidos de fútbol en directo en la página. La aplicación web de Bob se le carga ahora muy rápido al, y desde la perspectiva de Bob, hay mucha menos necesidad de escribir código que se encargue del trabajo de backend, del lado del servidor, para actualizar los resultados.

¿Qué es un sitio web estático?

Un sitio web estático se compone de una o más páginas web estáticas, que son archivos HTML que se cargan en un navegador de la misma manera, independientemente de quién cargue el archivo. Como las páginas web estáticas están formadas únicamente por HTML, sin código adicional que deba ejecutarse en el navegador, pueden cargarse muy rápido. (Para ver el aspecto del código HTML, haz clic con el botón derecho en una página web mientras utilizas el navegador Chrome y haz clic en "Ver el código fuente de la página").

En cambio, las páginas web dinámicas son distintas cada vez que se cargan. Para ofrecer una experiencia de usuario más interactiva y personalizada, las páginas web dinámicas cambian en función del usuario que abre la página, la ubicación de la carga de la página, la hora del día y cualquier otra entrada de datos cambiante. Cuando se carga una página web dinámica, el código tiene que ejecutarse en el servidor web que aloja la página o en el navegador del usuario. Esta dependencia de la ejecución de código puede ralentizar la experiencia del usuario.

Las páginas web dinámicas no son la única forma de crear una experiencia de usuario más moderna. Un sitio web JAMstack mayoritariamente estático puede seguir proporcionando una experiencia dinámica y personalizada a los usuarios al generar ocasionalmente nuevos contenidos estáticos o llamando a las API para rellenar los contenidos actualizados.

¿Cómo manejan las aplicaciones JAMstack las funciones del backend?

En el desarrollo de aplicaciones, el backend es el código que se ejecuta en un servidor en segundo plano. Por lo general, un usuario no es consciente de lo que está sucediendo en el backend mientras utiliza un sitio web o una aplicación. Mientras que JavaScript y el marcado dictan la forma en que una aplicación JAMstack le aparece a un usuario, todavía necesita funciones de backend para poder funcionar. JAMstack gestiona esto realizando una llamada de la API con JavaScript.

El uso de las API implicas que los desarrolladores de JAMstack no tienen que construir sus propias aplicaciones backend. Pueden basarse en las API ya existentes para que funcionen sus sitios web y aplicaciones.

Cuando los desarrolladores quieren crear su propia función para una aplicación, pueden crear una nueva API. Las API pueden ser reutilizadas en una variedad de contextos, por lo que cuando los desarrolladores diseñan sus propias API para el backend, solo deben construir esa función una vez para poder utilizarla en futuras aplicaciones.

¿Cómo se relaciona JAMstack con los microservicios?

El uso de API permite que los desarrolladores de JAMstack adopten un enfoque de microservicios para el backend. En una arquitectura de microservicios, el backend de una aplicación se divide en partes más pequeños que se ejecutan cuando se les ordena, igual que una aplicación JAMstack llama a varias API cuando es necesario; pero por lo demás no necesita el apoyo del backend.

También es posible construir una aplicación JAMstack que utilice un backend que sea parcial o totalmente sin servidor. Las funciones sin servidor son pequeños fragmentos de código reutilizables que se ejecutan a la carta. Sin embargo, una arquitectura sin servidor suele necesitar un enfoque más práctico para el backend por parte del desarrollador, ya que esencialmente están creando la aplicación backend ellos mismos en lugar de llamar a las API (aunque no tienen que preocuparse del aprovisionamiento de los servidores).

¿Cuáles son las ventajas de utilizar JAMstack?

• Rendimiento: casi todo el contenido de una aplicación JAMstack está compuesto de archivos HTML estáticos que se sirven desde una CDN. Esta es la forma más rápida de entregar contenido web a los usuarios finales.
• Escalabilidad: si una aplicación es "escalable," significa que responde bien a importantes aumentos de uso. Como el frontend de JAMstack es rápido y el backend es ligero, las aplicaciones JAMstack suelen ser extremadamente escalables.
• Mejor experiencia para el desarrollador: JAMstack permite que los desarrolladores puedan centrarse en crear una experiencia de usuario atractiva en el frontend, sin preocuparse del backend o de los problemas de rendimiento.

Cloudflare permite a los desarrolladores crear aplicaciones que se alojan directamente en la CDN global de Cloudflare. Obtén más información sobre Cloudflare Pages, nuestra plataforma JAMstack para crear sitios web estáticos. También puedes obtener más información sobre el despliegue de un sitio Gatsby, un sitio Hugo, una aplicación React, y más con Cloudflare Pages, y ver una descripción general en vídeo de Cloudflare Pages de la empresa de análisis Redmonk.