JAMstack: el qué, el porqué y el cómo

Introducción

El desarrollo web suele implicar el uso de diferentes pilas de desarrollo, incluidas la pila LAMP, la pila MEAN, la pila MERN, etc. JAMstack es otra pila que ofrece algunos beneficios únicos a los desarrolladores. En este artículo se analizarán esos beneficios y algunas definiciones y términos generales para ofrecer una introducción a JAMstack.

¿Qué es JAMstack?

Los sitios web estáticos han ido creciendo en uso y funcionalidad recientemente. Ya no son una colección de archivos HTML y CSS, sino que hacen cosas como procesar pagos, manejar actividades en tiempo real y más. Llamar a estos sitios “estáticos” socava y subestima su funcionalidad. De ahí el término JAMstack .

JAMstack son las siglas de JavaScript , API y Markup . Según el sitio web oficial, JAMstack significa:

Arquitectura de desarrollo web moderna basada en JavaScript del lado del cliente, API reutilizables y marcado prediseñado.

El término fue acuñado por Mathias Biilmann, cofundador de Netlify.

Con JAMstack, ya no hablamos de tecnologías específicas como sistemas operativos, servidores web, lenguajes de programación backend o bases de datos. Es una nueva forma de crear sitios web y aplicaciones que ofrece un mejor rendimiento, mayor seguridad, menor costo de escalado y una experiencia de desarrollador más optimizada.

¿Por qué JAMstack?

¿Cuándo debería considerar el uso de JAMstack? Algunas razones por las que podría considerar el uso de JAMstack incluyen:

• Rendimiento más rápido: debido a que un sitio web JAMstack tiene HTML y recursos prediseñados, se puede servir a través de una CDN.
• Mayor seguridad: los sitios web JAMstack reducen las vulnerabilidades del área de superficie del servidor y de la base de datos.
• Menor costo: el costo de ejecutar un sitio web JAMstack es generalmente más bajo que el de alternativas comparables, ya que utiliza menos recursos.
• Mejor experiencia para desarrolladores: con JAMstack, no existe un acoplamiento estricto entre el backend y el frontend de la aplicación. Esto significa que puede seleccionar entre diferentes opciones de infraestructura de contenido y CMS, lo que elimina la necesidad de pilas separadas para mantener y ofrecer contenido. El uso de JAMstack también simplifica el proceso de uso de servicios de terceros como Algolia y Netlify Forms.

También hay un número creciente de servicios que integran funcionalidad dinámica en los sitios web de JAMstack, incluidos:

• Netlify Identity, que permite la gestión de registros, inicios de sesión, recuperación de contraseñas y más.
• Búsqueda de texto completo con Algolia y Lunr.js.
• Manejo de formularios con Formspree o Netlify Forms.

Cómo construir con JAMstack

Para construir un proyecto utilizando JAMstack, debe cumplir los siguientes criterios:

• JavaScript: cualquier programación dinámica durante el ciclo de solicitud/respuesta es manejada por JavaScript, que se ejecuta completamente en el cliente. Puede ser cualquier framework frontend como Vue.js, React, Angular, etc. o incluso JavaScript estándar.
• API: todos los procesos del lado del servidor o las acciones de la base de datos se resumen en API reutilizables, a las que se accede a través de HTTP con JavaScript. Estas pueden ser personalizadas o aprovechar servicios de terceros.
• Marcado: el marcado con plantilla debe crearse previamente en el momento de la implementación, generalmente utilizando un generador de sitios como GatsbyJS, Nuxt.js o Hugo para sitios de contenido, o una herramienta de creación como Webpack o ParcelJS para aplicaciones web.

Teniendo esto en cuenta, los siguientes proyectos no son proyectos JAMstack:

• Un proyecto construido con un CMS del lado del servidor como WordPress, Drupal, etc.
• Una aplicación web monolítica ejecutada en servidor que se basa en un lenguaje de backend como PHP, Node o cualquier otro lenguaje de backend.
• Una aplicación de página única (SPA) que utiliza representación isomórfica para crear vistas en el servidor en tiempo de ejecución.

Al crear un proyecto con JAMstack, tenga en cuenta las siguientes prácticas recomendadas:

• Todo el sitio debe servirse en CDN.
• Emplea implementaciones atómicas.
• Utilice la invalidación de almacenamiento en caché instantánea.
• Todo debería residir en Git.
• La creación de marcado debería automatizarse.

Conclusión

En este artículo, aprendiste qué es JAMstack y por qué deberías considerarlo para tu próximo proyecto. También aprendiste sobre los requisitos del proyecto para los sitios JAMstack. Para ver ejemplos de sitios web y aplicaciones web creados con JAMstack, también puedes consultar estos ejemplos oficiales.

Puede obtener más información sobre JAMstack visitando el sitio web oficial y la sección de recursos.