¿Qué es Jamstack?

JAMstack es un término utilizado para describir una arquitectura moderna de desarrollo web basada en JavaScript, APIs y markup (JAM).JAMstack no es una tecnología específica, sino una forma diferente de construir aplicaciones y sitios web.

En lugar de utilizar un CMS o constructor de sitios tradicional, un sitio JAMstack se divide entre el código (JavaScript), la infraestructura del sitio (API) y el contenido (marcado). Todo esto se maneja en una arquitectura independiente, con una clara separación entre el lado del servidor y el lado del cliente.

De hecho, la idea principal detrás de la creación de sitios web y aplicaciones JAMstack es empujar tanta carga como sea posible desde el servidor al cliente. De este modo, se reduce enormemente el número de peticiones enviadas al servidor y se elimina gran parte de la latencia que se produce cuando el servidor procesa la petición y la devuelve al cliente.

Las primeras webs

Los primeros sitios web eran simplemente una petición al navegador de una carpeta que contenía archivos HTML. Eso es todo: el HTML determinaba el aspecto y el contenido del sitio web, y la única tarea del navegador era mostrar la página al usuario.

A medida que Internet y la tecnología que lo rodea evolucionaron, se hicieron posibles sitios web más sofisticados y se ampliaron las posibilidades de lo que usted, como propietario de un sitio web, podía hacer. El primer cambio que se produjo aquí fue la forma de servir los contenidos. Los archivos HTML estáticos ya no son suficientes. En su lugar, se hizo necesario ofrecer contenidos personalizados a los usuarios del sitio web.

Para servir contenidos personalizados, el servidor tenía que construir el HTML del sitio web para cada solicitud. Esto supuso un gran paso adelante respecto a servir simples archivos HTML. Cuando un usuario solicitaba una página, el servidor tenía que consultar una base de datos y construir un contenido adaptado a un usuario concreto, en lugar de preparar esa página.

Ventajas de las primeras webs

Las ventajas son evidentes: ahora se pueden ofrecer contenidos más personalizados a los usuarios.

Sin embargo, también hay inconvenientes. Se necesitan más recursos del servidor para construir el contenido, lo que ralentiza la entrega del contenido al usuario en comparación con los antiguos archivos HTML estáticos.

Desgraciadamente, no había nada que hacer en ese momento. Si querías ofrecer contenido personalizado, tenías que dejar que el servidor y la base de datos lo construyeran por ti. Todo eso cambió con la invención y maduración de JavaScript. Hoy en día, puede ser difícil imaginar Internet sin JavaScript.

¿Qué es el JavaScript?

JavaScript fue desarrollado para permitir que las páginas cambien dinámicamente después de ser cargadas en el navegador. Como todos los principales navegadores han adoptado JavaScript, se ha convertido en la capa de ejecución universal. Los navegadores ya no son sólo visualizadores de documentos, sino que también pueden realizar tareas complejas que cambian el aspecto y el comportamiento del contenido del sitio web.

Esto aportó considerables ventajas a todos los sitios web: no sólo se podía utilizar JavaScript para añadir funcionalidad dinámica a un sitio web una vez cargado, sino que también era posible trasladar parte de la carga de trabajo del lado del servidor al lado del cliente. Esto no sólo mejora la experiencia del usuario para los visitantes del sitio, sino que también acelera la entrega, ya que el navegador ahora asume parte de la carga de construir las páginas.

Para lograrlo, tenemos que ver la pila tecnológica de una manera diferente. La forma tradicional de hablar de la pila tecnológica es mencionar el sistema operativo o la base de datos.

En cambio, en Jamstack nos centramos en otro nivel de la pila tecnológica: el nivel que constituye la verdadera limitación del proyecto.

Estas limitaciones se agrupan en tres partes esenciales.

• JavaScript en el navegador como capa de ejecución universal para añadir funcionalidad adicional y comportamiento dinámico.
• APIs para reemplazar las bases de datos y recuperar lo que se necesita directamente de los servicios requeridos.
• Markup para proporcionar el contenido real del sitio web y el HTML necesario.

Veamos ahora estos tres elementos por separado.

Estructura JavaScript en Jamstack

El sitio web de JAMstack está construido para ser flexible y asegurar que una parte de la arquitectura no restrinja las otras partes. Cuando se utiliza un sistema de gestión de contenidos tradicional (a menudo llamado sistema monolítico), todo está acoplado. La base de datos, el contenido y los modelos del front-end son gestionados por el mismo sistema, lo que significa que todo depende de los demás. Aunque esto no es malo en sí mismo (de hecho, ayuda mucho), puede ser limitante en términos de funcionalidad y rendimiento.

Para evitar esta falta de flexibilidad, el sitio JAMstack estará completamente dividido, y cada parte servirá para un propósito más específico y limitado.

JavaScript es el responsable de mostrar el contenido a los usuarios y garantizar una buena experiencia de usuario. Y como el JavaScript está desvinculado del contenido, usted es completamente libre de ejecutarlo como quiera: la «J» de JAMstack significa JavaScript, pero no tiene por qué ser JavaScript. Si quieres usar algo como Ruby, Python o Go, puedes hacerlo.

Ventajas de Jamstack

La ventaja de este sistema es que puedes elegir qué marco quieres usar y cómo quieres usarlo.

API en Jamstack

Las interfaces de programación de aplicaciones (API) se utilizan para definir las posibles interacciones entre varios servicios de software. Las API se crearon en el año 2000 y han evolucionado mucho desde entonces. Al igual que muchas otras tecnologías de la época, las API se desarrollaron para integrarse con los flujos de trabajo y los procesos de desarrollo web de la época.

En otras palabras, las APIs sólo estaban pensadas para ser consumidas por aplicaciones del lado del servidor, que era la forma en que se hacían las cosas en ese momento. Sin embargo, todo cambió cuando se desarrolló un nuevo estándar de JavaScript: la API web, que se puso a disposición de cualquier cliente de JavaScript que se ejecutara en un navegador.

Este es un cambio de juego completo y uno de los mayores cambios en la arquitectura de JAMstack: con la API Web, el servidor ya no tiene que hacer todo el trabajo. En cambio, se puede trasladar al lado del cliente con JavaScript. Y como las APIs están ahora disponibles para todo, la tendencia es utilizarlas en forma de microservicios. Estos microservicios son esencialmente pequeñas piezas de código que proporcionan una funcionalidad específica que es completamente independiente de otros servicios. Así se crea una arquitectura de servicios que funcionan de forma independiente, pero que se integran y conectan a la perfección para proporcionar funcionalidad web.

Lo bueno de las APIs web es que puedes utilizar la mejor solución o servicio disponible, en lugar de verte obligado a hacer algo del sistema actual.

Marcado Jamstack

El contenido es el rey, y en JAMstack viene en forma de marcado.

El Lenguaje de Marcado de Hipertexto (HTML) es el corazón de la web moderna y es entendido por todos los navegadores. La función principal de HTML es presentar un modelo de objetos del documento (DOM) preparado para que los navegadores web lo analicen, lo muestren y lo procesen. Sin embargo, no se limita a los navegadores web. Diferentes tecnologías como los rastreadores de los motores de búsqueda, los dispositivos inteligentes y los lectores de pantalla también pueden manipular el DOM.

El HTML ha evolucionado mucho, pero su tarea principal sigue siendo proporcionar el contenido y su estructura para que el navegador lo muestre. Esto no ha cambiado fundamentalmente en el sitio JAMstack. Sin embargo, la forma de hacerlo está cambiando.

En lugar de que el servidor cree todo el contenido para cada solicitud del cliente, ahora se basa en el contenido en caché. Para ello, se utilizan herramientas de creación (como los generadores de sitios estáticos y las herramientas de creación de front-end) para preconstruir el marcado y pasarlo a una red de distribución de contenidos (CDN). Esto significa que el servidor no necesita actuar sobre las nuevas solicitudes en tiempo real, sino sólo cuando se realizan nuevos cambios en el contenido o los activos.

Con el marcado preconstruido y listo para su consumo, depende de JavaScript llamar al contenido necesario. Si se requiere un contenido dinámico o personalizado, éste es manejado por la API en lugar de ser solicitado por el servidor desde la base de datos.

JAMstack y los CMS tradicionales

La principal diferencia entre un sitio web de JAMstack y un sitio web construido en un sistema de gestión de contenidos es la estrecha colaboración entre el contenido, el código y el diseño.

Con un CMS, todo es gestionado por el mismo sistema. Hay una interfaz de back-end, donde el desarrollador maneja todo el código y las plantillas de diseño. El contenido también se crea, actualiza y gestiona desde la interfaz de back-end, y todo se almacena en una base de datos en el servidor. Cuando se visita una página del sitio web, se ensambla en el servidor y se entrega al visitante, que entonces ve la página.

El sitio JAMstack separará todas estas partes y las procesará por separado. Esto reduce las dependencias y le da la libertad de elegir su propia pila tecnológica. Una de las principales diferencias es la forma en que se generan las páginas para los visitantes del sitio. El sitio de JAMstack se basa casi por completo en el lado del cliente y no en el del servidor. Sus páginas se almacenan en la caché (normalmente utilizando una CDN) como HTML y JavaScript, esperando a que los visitantes vengan a verlas. Cuando un visitante accede a su página, todas las páginas están listas para ser procesadas sin tener que volver a montarlas en el servidor.

Ventajas de Jamstack

Procesamiento muy rápido – JAMstack depende menos de los servidores y las bases de datos, por lo que los visitantes de las páginas suelen cargarse muy rápidamente: almacena en caché todo el contenido en la CDN y se centra en un código frontal limpio, lo que significa que las páginas web evitan muchos procesos normalmente asociados a la carga.

El sitio web es seguro. Como el back-end y el front-end están efectivamente separados, los fallos de seguridad en el código del front-end no implican un fallo de seguridad en la aplicación del back-end. Están separadas por APIs, que en su mayoría son de sólo lectura. Al mismo tiempo, se reduce la dependencia de la base de datos, lo que minimiza los posibles problemas.

La ampliación es más fácil y menos costosa. No dependen del procesamiento de un servidor o de una base de datos pesada y, por lo tanto, no están sujetos a las limitaciones habituales. Sólo proporciona activos estáticos, por lo que el cliente puede hacer el trabajo pesado.

Con una CDN potente, se necesitan muchos menos recursos para escalar el sitio web. Esto significa que no tiene que actualizar sus servidores, lo que no sólo facilita la escalabilidad, sino que también es más barato en muchos casos.

Experiencia de desarrollo superior. Como desarrollador, puedes elegir tu propia pila tecnológica, lo que te da flexibilidad en todos los aspectos. Los desarrolladores pueden hacer su trabajo sin preocuparse por las limitaciones de una plataforma o tecnología concreta. Además, el auge de los microservicios y las API reutilizables ha facilitado mucho la reutilización de la funcionalidad en múltiples sitios web y aplicaciones.

Desventajas de utilizar JAMstack.

Dado que el contenido debe proporcionarse en forma de marca, los editores deben ser lo suficientemente técnicos como para crear y actualizar el contenido. A menudo hay que enseñar a los redactores nuevas habilidades, lo que ralentiza la velocidad de creación de contenidos porque se pierde la funcionalidad de edición a la que están acostumbrados con un CMS.

El editor es responsable de la gestión adecuada de los medios de comunicación, lo que puede ser una tarea tediosa.

La codificación es necesaria para actualizar las plantillas. Como el contenido está desvinculado de la interfaz, los editores no pueden personalizar fácilmente la plantilla. Esto significa que los desarrolladores tienen que dedicar mucho tiempo a actualizar las plantillas.

El sitio JAMstack está bien mientras las páginas se construyan con texto e imágenes. Sin embargo, cuando se requieren características dinámicas, pueden surgir problemas. Como no hay una base de datos que gestione las peticiones, tienes que hacer el trabajo pesado con tu propio código y llamadas a la API. Esto no quiere decir que sea imposible, pero como la funcionalidad dinámica no forma parte de la arquitectura, se necesitan más recursos para conseguirla.

Tu sitio web depende en gran medida de sistemas y API de terceros, lo que significa que depende de ellos para la coherencia. Si el sistema de terceros falla o la API falla, su sitio web (o parte de él) también fallará. Esto no es diferente de un sitio web normal donde el servidor se cae, pero con un sitio JAMstack tienes muy pocas posibilidades de arreglar el problema por ti mismo si es un problema con el proveedor de terceros.

¿Es Jamstack el futuro?

Sí y no. Con el proyecto adecuado, JAMstack es definitivamente una buena solución y la arquitectura desacoplada aporta muchos beneficios a muchos sitios web.

Sin embargo, el estado actual de JAMstack se encuentra todavía en el lado técnico y requiere un cierto nivel de conocimientos técnicos tanto para los desarrolladores como para los editores para tener éxito. Por lo tanto, si su equipo no tiene las habilidades para trabajar eficazmente con JAMstack, es posible que no obtenga los resultados que desea.

No importa lo rápido que seas si los visitantes de tu sitio web sólo ven contenidos antiguos que tus editores se han esforzado en actualizar.