Introducción básica sobre JAMstack, una revolucionaria forma de desarrollar aplicaciones y sitios web con mejor rendimiento, menos costosos, más seguros, rápidos y optimizados.
¿Qué es JAMstack?
Consiste en un tipo de arquitectura web, basada en los lenguajes JavaScript y Markup, así como en el uso de APIs.
- J – JavaScript
- A – API (interfaz de programación de aplicaciones)
- M – Markup
“JAMstack es una arquitectura de desarrollo web moderna basada en JavaScript del lado del cliente, API reutilizables y Markup predefinido”
Mark Biilmann – CEO y co-fundador de Netlify y uno de los creadores del término JAMstack
“JAMstack está destinado a ser una arquitectura moderna para ayudar a crear sitios rápidos y seguros y aplicaciones dinámicas con JavaScript / API y markup pre-renderizado, servido sin servidores web, y es este último punto el que es, en cierto modo, algo que lo distingue y tal vez, lo hace un poco más interesante e inusual.
Phil Hawksworth – Desarrollador de Netifly
JavaScript
Se usa el lenguaje JavaScript para manejar las funcionalidades dinámicas, sin restricciones sobre qué marco (framework) o biblioteca utilizar.
APIs
Muchas operaciones a menudo en manos del servidor pasan a ser acciones a cargo de APIs reutilizables, a las cuales se accede mediante HTTPS con JavaScript, admitiendo desde funciones personalizadas a servicios de terceros.
Markup
Los sitios web se entregan como archivos HTML estáticos, usando generadores de sitios estáticos ya disponibles.
Sitios JAMstack
Básicamente, tener un sitio construido con esta arquitectura web implica compilar las páginas del sitio web y hospedar los archivos estáticos generados en un CDN (content delivery network), tomando los contenidos y otros datos desde APIs.
Los sitios JAMstack crean versiones compiladas de cada sitio web, con los cientos o miles de páginas que contenga, hasta que se vuelva a compilar una nueva versión.
Cada nueva página / contenido publicado se agregará a toda esa nueva compilación del sitio web. A cada nueva versión compilada.
¿Dónde comprar Jamstack? ¿Precio?
JAMstack no es un software en específico, ni un sistema, tecnología o lenguaje de programación. Tampoco un conjunto de tecnologías en particular.
No es un producto a la venta, ni un servicio en concreto. Cualquier desarrollador puede aprender a desarrollar esta clase de sitios web.
Para su desarrollo e implementación, se requiere de un programador o una empresa a cargo de la migración del frontend y también de hacer ajustes en el backend para que sea compatible y pueda operar como una API consumible.
Se podría decir que JAMstack consiste en un novedoso paradigma de desarrollo web.
Si se quiere, un nuevo modo de desarrollar sitios web y aplicaciones, que mejora notablemente el rendimiento a todo nivel.
Por ejemplo, en capacidad de procesamiento, velocidad de carga y otros aportes de optimización, que podrás ver reflejado primero en tu tráfico y métricas. Y luego, en la experiencia de usuario, conversiones y quizá en tu bolsillo.
Se trata de un stack web diseñado “para hacer que la web sea más rápida, más segura y más fácil de escalar”, señala la web oficial jamstack.org.
¿Cuándo y por qué implementar la infraestructura JAMstack?
Si tienes un sitio web grande, con muchas visitas diarias y mensuales, la adopción de JAMstack podría servirte en términos de rendimiento y seguridad, sin necesidad de grandes inversiones.
En vez de destinar varios dólares en labores de optimización y en lugar de plagar tu sitio con demasiados plugins de WordPress para acelerar esto y mejorar aquello, prueba con en este tipo de arquitectura de desarrollo web.
Los resultados positivos se traducirán en el SEO de tu sitio, dado que los sitios web estáticos tienden a ser muchos más veloces en su carga.
Ver: Buscadores alternativos a Google sin censura, con menos filtros
Beneficios de JAMstack
La adopción de esta infraestructura concede beneficios de seguridad, escalabilidad, rendimiento, mantenimiento y portabilidad, además de mejorar la experiencia para el desarrollador.
A modo de ojeo rápido, estas son algunas de las ventajas más interesantes que concede JAMstack:
- Mejor rendimiento, sitios más rápidos, al proporcionar lenguajes de marcado y páginas prediseñadas mediante un CDN.
- Menos costoso, dado que el hospedaje de sitios estáticos es más económico (o incluso gratis).
- Mayor seguridad, ya que evita la habitual preocupación y riesgos asociados con servidores y bases de datos.
- Más facilidades del lado del desarrollador, al permitir abocarse al front-end, lo cual puede traducirse en un desarrollo más rápido y enfocado.
- Mejor escalabilidad, incluso en momentos de gran tráfico y viralización inesperada, gracias a las capacidades y bondades de usar un CDN.
Ver: ¿Cuándo se creó el Internet?
¿Por qué es más eficiente?
Uno de sus principales beneficios es en términos de eficiencia, al separar (mejor dicho: desacoplar) diferentes procesos involucrados en el desarrollo de una web.
Con el tipo de arquitectura provista por JAMstack, las páginas no se compilan y entregan en función de la demanda, a medida que se visitan por los usuarios.
Por el contrario, proporciona contenido pre-creado, servido directamente desde un CDN, con lo cual una versión del sitio ya está disponible.
Al servirse sin un servidor, el contenido pregenerado no necesita ser generado ni entregado, dado que ya existe. Ya está pronto para ser visto y navegado por el usuario.
Se prepara el contenido con anticipación, en vez de entregarlo y renderizarlo bajo demanda cuando los usuarios acceden, “alejando las cosas del tiempo de solicitud y en una especie de tiempo de compilación”, explica Phil Hawksworth, desarrollador de Netlify.
La utilización de un CDN permite, a la vez, distribuir el contenido a nivel global, llegando más cerca de los potenciales visitantes.
JAMstack permite que la página llegue más cerca del usuario, gracias al uso de CDN, red de servidores distribuidos, ubicados en diferentes puntos, que permite distribuir el contenido web en una zona geográfica amplia.
Además, al no existir un único punto de origen central, la publicación en línea se presenta rápidamente a sus lectores.
¿Por qué ofrece mayor seguridad?
Porque permite eliminar distintos componentes y sistemas de la infraestructura de hospedaje, exigiendo menos servidores e insumos para protegerse frente a posibles ataques.
¿Por qué mejora la escalabilidad de los sitios?
Porque simplifica la complejidad asociada al almacenamiento en caché que afrontan en especial sitios web de gran escala y tráfico, al proporcionarlo en modo predeterminado desde un CDN.
“Cuando los sitios pueden servirse completamente desde un CDN, no existe una lógica o un flujo de trabajo complejos para determinar qué activos se pueden almacenar en caché y cuándo. Con los sitios Jamstack, todo se puede almacenar en caché en una red de distribución de contenido. Con implementaciones más simples, redundancia incorporada e increíble capacidad de carga”.
Web jamstack.org
Una vez cargada la compilación del sitio, el CDN se encarga de invalidar el caché, volviendo instantánea la nueva construcción / versión del sitio.
¿Por qué mejora la performance de los sitios?
Porque al permitir que las páginas se encuentren disponibles en un CDN próximo al usuario y prontas para entregarse, mejora increíblemente el rendimiento de los sitios.
Todo sin necesidad de implementar infraestructuras complejas y caras.
“Los sitios Jamstack eliminan la necesidad de generar visitas a la página en un servidor en el momento de la solicitud al generar páginas antes de tiempo durante una compilación”.
Web jamstack.org
¿Por qué alivia el mantenimiento web?
Porque al reducir la complejidad (y costos) de alojamiento, al servir sitios generados previamente directamente desde un CDN, se reducen también las tareas de mantenimiento y las vigilancias en vela.
El grueso del trabajo se realiza durante la compilación de páginas del sitio web. Luego, el sitio se compone de páginas estáticas, sin necesidad de hospedarse en servidores que requieran actualizaciones y mantenimientos constantes.
Esto ahorra unos dólares y frustrantes intercambios con soporte.
¿Por qué es más portable?
Los sitios Jamstack están pre-generados, evitando que los servidores web tengan que responder a cada solicitud recibida por los usuarios.
De ahí que puedan hospedarse en gran cantidad de servicios de hosting. Alcanza con cualquier servicio de alojamiento estático básico.
¿Por qué mejora la experiencia para el desarrollador?
Porque el desarrollo de sitios JAMstack no requiere del uso de tecnologías específicas o poco conocidas, siendo compatible con muchas herramientas de amplia disponibilidad.
En ese sentido, no serán pocos los desarrolladores que podrán comenzar a construir sitios JAMstack, dado que ya conocen muchas de las tecnologías disponibles bajo el espectro JAMstack.
Pilares de JAMstack
Para dar a los sitios web y apps mayor resistencia y mejor productividad, JAMstack se basa en 2 principios básicos e innovadores:
- Pre-rendering
- De-coupling
Pre-rendering
La representación previa. O mejor dicho, el pre-renderizado para el procesamiento y generación de imágenes, videos y otros recursos del sitio web.
El frontend está pre-diseñado en páginas estáticas “altamente optimizadas“.
Las imágenes, videos y otros recursos de la web se envían y sirven desde un CDN.
Diferentes activos del sitio web se sirven directamente desde un CDN, lo cual permite entregar los contenidos de modo más rápido y seguro, además de disminuir costos de hosting y ciertos riesgos asociados.
De-coupling
El desacoplamiento. Con JAMstack se separan los procesos necesarios para que los datos de un sitio web lleguen al usuario.
En el contexto de JAMstack, el de-coupling se define como “el proceso de crear una separación limpia entre sistemas o servicios”.
Al desacoplar los servicios necesarios para la ejecución de un sitio web, los diferentes componentes que lo conforman pueden separarse y funcionar en modo autónomo.
La actualización del sitio, por ejemplo, se hace por un lado, en forma independiente, mientras que en otro nivel se realiza la gestión del contenido.
Los sitios Jamstack pueden usar JavaScript y una API para comunicarse con servicios de backend, subcontratando por ejemplo sistemas de administración de contenido web, autentificación, pagos, mecanismos de identificación, etc.
“Los sitios Jamstack pueden utilizar dichos servicios en el momento de la compilación y también en el tiempo de ejecución directamente desde el navegador a través de JavaScript. Y el desacoplamiento limpio de estos servicios permite una mayor portabilidad y flexibilidad, así como un riesgo significativamente reducido”.
Web jamstack.org
Conceptos importantes a tener en cuenta
Estos son algunos de los conceptos a considerar si quieres profundizar en torno a esta clase de arquitectura web:
- API
- API Economy
- CDN (Content Delivery Network)
- Client render
- Decoupling
- Headless Technology
- Microservice
- Pre-render / Pre-generate
- Server render
- Static site generator
¿De dónde viene el nombre JAMstack?
El término “Jamstack” se originó en intercambios entre Matt Biilmann y Chris Bach, co-fundadores de Netlify, compañía que ofrece servicios de hosting y backend sin servidor para aplicaciones y sitios web estáticos.
Un nombre inventado para referirse “al enfoque arquitectónico” en el contexto de una conversación, un asunto tan abstracto como importante en el proceso de construcción de un sitio web.
“Jamstack abarca muchos de los fundamentos existentes de las arquitecturas web, por lo que crearon el término Jamstack para ayudarnos a hablar de ello de manera más sucinta”.
Web jamstack.org
¿Se puede usar JAMstack con WordPress?
Sí, claro. Se trata de un combo que conjuga la facilidad y funcionalidad del panel de WordPress, con la seguridad y rendimiento que aporta la implementación JAMstack.
Lista de CMS para JAMstack – Headless CMS
- Netlify CMS
- Rooftop
- Ghost
- Strapi
- AbeCMS
- Sensenet
- Hashbrown
- Flotiq
- Slicknode
- TriTan CMS
- Appernetic
- BowTie
- Bloomreach
- Cloud CMS
- CloudCannon
- Cockpit
- Webiny
- Cosmic
- Flamelink
- Crownpeak
- Forestry
- Headless
- LexasCMS
- Magnolia
- Prismic
- Prepr
- Troglio
- Zetsy.io
- Umbraco Heartcore
- Publii
- Hexo Admin
- Squidex
- Daptin
- Statamic
- Superdesk
- dotCMS
- Gentics Mesh
- Google Drive CMS
- Flextype
- Coisas
- unite cms
Aquí puedes ver el listado completo.
Lista de generadores de sitios estáticos para sitios Jamstack
Entre otros tantos generadores de sitios estáticos compatibles con JamSTACK:
- Nuxt
- React
- Next.js
- Gatsby
- Hugo
- Jekyll
- Eleventy
- Docusaurus
- Slate
- DocSify
- React Static
- Pelican
- Metalsmith
- Sapper.js
- Harp
- Assemble
- Expose
- Phenomic
- Cactus
- HubPress
- Markdown
- Scully
- OctoPress
- Jigsaw
- Roots
- Cobalt
- WP2Static
- DocPress
- Frozen-Flask
- pretzel
- Orchid
- Webby
- Statik
- staticjinja
- Wyam
- Acrylamid
Y muchísimos más. Aquí puedes ver el listado completo.
Síntesis rápida sobre JAMstack
- Con los sitios JAMstack, al usuario ya le llega todo armado, a través de páginas estáticas. Del lado del usuario, se minimiza al máximo los tiempos de carga.
- Cuando se implementa un sitio con esta arquitectura, los archivos HTML se alojan en un CDN.
- El frontend debe hacerse desde 0.
- Se puede utilizar WordPress como backend, conservando el panel de admin de WordPress (por ejemplo, con rooftrop) y usando una API para obtener los datos.
- Las páginas web generadas se publican en un CDN para que se encuentren distribuidas. Netlify, por ejemplo, lo distribuye en su propio CDN, optimizando los assets y el propio html del sitio.
¿Cómo migrar de WordPress a JAMstack para manejar el contenido?
El proceso de migración de WordPress a JAMstack para la gestión del contenido es compleja.
Se recomienda leer la guía de Smashing Magazine, web de referencia para desarrolladores, que hace un tiempo migró su sitio de WordPress a JAMstack, eliminando el HTML del sitio y alojándolo en Netlify.
Desde entonces, comenzó a entregar el contenido de su sitio mediante páginas estáticas desde un CDN, logrando entre otros hitos y resultados alentadores:
- La versión estática fue “más de seis veces más rápida en promedio”.
- Se evitaron errores de conexión a la base de datos.
- Eliminó el problema de los tiempos de inactividad, incluso cuando ciertos contenidos cobran gran volumen de tráfico.
- Dormir más tranquilo en cuanto a seguridad.
- Mejorar el tiempo de carga, pasando de esperas de 800 ms para servir el archivo HTML a 80 ms (!!!).
Leer Guía de Smashing Magazine: ‘How Smashing Magazine Manages Content: Migration From WordPress To JAMstack’ – Sarah Drasner
Ver: Protectores de la privacidad en línea
¿Jamstack + AMP?
Si bien son similares en cuanto a concepto y fines, Jamstack y AMP van por carriles diferentes y en paralelo.
Conviene implementar páginas AMP, tengas (o no) sitios JAMstack. Ambas sumarán y mucho a efectos de optimización.
Google premia los sitios AMP, conocidos por ofrecer mayor velocidad en las versiones móviles, algo que se traduce en una mejor experiencia para el usuario y mayor tráfico.
Salvando las distancias conceptuales y prácticas, JAMstack podría compararse con las páginas AMP, en cuanto a la rapidez de carga que aporta una para el entorno web y otra para el ámbito móvil.
AMP (Accelerated Mobile Pages) es un estándar de código abierto, creado para acelerar la carga de sitios webs desde dispositivos móviles.
Ver: Guía para instalar Google AMP en WordPress
Una vez creadas las páginas AMP de un sitio, Google almacena las almacena en caché en su propio CDN, con lo cual se logran cargar mucho más rápido para los usuarios (al tiempo que, como dueño de un sitio web, se pierde cierto control a favor del gigante).
Fuentes para ampliar:
Aquí puedes encontrar una atractiva y sencilla explicación.
En este enlace a Smashing Magazine puedes acceder a una explicación muy completa.
Para profundizar sobre los antecedentes, beneficios y estudios de caso en torno a esta infraestructura web, el libro ‘Modern Web Development on the JAMstack’ (Biilmann & Hawksworth, O’Reilly, 2019).
Y aquí el proyecto en GitHub.
