Introducción a JAMstack: la arquitectura de la web moderna

Estoy seguro de que te has encontrado con la palabra JAMstack antes, pero es posible que no hayas entendido lo que realmente significa. También he visto esta palabra antes, pero no me importó comprobarla hasta que Egwuenu Gift organizó JAMstack Lagos. Entonces me di cuenta de que ya había estado creando aplicaciones JAMstack.

JAMstack es una arquitectura de desarrollo web moderna. No es un lenguaje de programación ni ninguna forma de herramienta. Es más una práctica de desarrollo web destinada a lograr un mejor rendimiento, mayor seguridad, menor costo de escalado y una mejor experiencia de desarrollador.

En este artículo, te presentaré lo que significa JAMstack, por qué debería preocuparte, las mejores prácticas y cómo empezar. ?

Introducción

Según la documentación oficial de JAMstack,

JAMstack es una arquitectura de desarrollo web moderna basada en JavaScript del lado del cliente, API reutilizables y marcado predefinido. Cuando hablamos de "The Stack", ya no hablamos de sistemas operativos, servidores web específicos, lenguajes de programación backend o bases de datos. JAMstack no se trata de tecnologías específicas. Es una nueva forma de crear sitios web y aplicaciones que ofrece un mejor rendimiento, mayor seguridad, menor costo de escalado y una mejor experiencia para el desarrollador.

JAMstack es una tendencia importante en el desarrollo web acuñada por Mathias Biilman, CEO y cofundador de Netlify.

Está bien, ¡relájate! ¿Qué es JAMstack?

Es posible que se haya encontrado con términos específicos como MEAN stack y MERN stack. Estos son solo términos utilizados para clasificar o agrupar ciertas tecnologías con el objetivo de lograr un objetivo en particular.

JAMstack aquí significa

J avaScript

Un PI

M arkup

Las pilas generalmente son solo una combinación de varias tecnologías utilizadas para crear una aplicación web o móvil. Entonces, JAMstack es la combinación de JavaScript, API y Markup. Bastante interesante, ¿verdad?

Los proyectos de JAMstack no se basan en el código del lado del servidor; se pueden distribuir en lugar de depender de un servidor. Servidas directamente desde un CDN, las aplicaciones JAMstack desbloquean la velocidad, el rendimiento y mejoran la experiencia del usuario.

Términos útiles

Usaré estos términos en este artículo con frecuencia y pensé que deberías conocer sus significados (si aún no lo sabes):

  • API es el acrónimo de Application Programming Interface, que es un intermediario de software que permite que dos aplicaciones se comuniquen entre sí.
  • CDN (red de entrega de contenido) es un sistema de servidores distribuidos (red) que entregan páginas y otro contenido web a un usuario, según las ubicaciones geográficas del usuario, el origen de la página web y el servidor de entrega de contenido.
  • Un servidor es una computadora diseñada para procesar solicitudes y entregar datos a otra computadora a través de Internet o una red local.
  • Una base de datos es una colección de información que está organizada de manera que se pueda acceder, administrar y actualizar fácilmente.

¿Por qué JAMstack?

Los sitios web tradicionales o los sitios CMS (por ejemplo, WordPress, Drupal, etc.) dependen en gran medida de servidores, complementos y bases de datos. Pero JAMstack puede cargar algo de JavaScript que recibe datos de una API, brindando archivos desde una CDN y marcado generado mediante un generador de sitio estático durante el tiempo de implementación.

Suena bien, ¿verdad?

JAMstack es rápido

Cuando se trata de minimizar el tiempo de carga, nada supera a los archivos prediseñados que se sirven a través de una CDN. Los sitios JAMstack son súper rápidos porque el HTML ya se genera durante el tiempo de implementación y se sirve a través de CDN sin interferencias ni demoras en el backend.

JAMstack es altamente seguro

Todo funciona a través de una API y, por lo tanto, no hay brechas en la base de datos ni en la seguridad. Con los procesos del lado del servidor abstraídos en API de microservicio, las áreas de superficie para los ataques se reducen y, por lo tanto, su sitio se vuelve altamente seguro.

JAMstack es más barato y más fácil de escalar

Los sitios JAMstack solo contienen unos pocos archivos con tamaños mínimos que se pueden publicar en cualquier lugar. El escalado es una cuestión de entregar esos archivos en otro lugar o mediante CDN.

Mejores prácticas de JAMstack

  • Utilice CDN para distribuir sus archivos en lugar de servidores
  • Instalar y contribuir a su proyecto debería ser fácil y menos complejo. Utilice herramientas como npm y Git para garantizar una configuración estándar y más rápida.
  • Utilice herramientas de compilación y haga que su proyecto sea compatible con todos los navegadores (por ejemplo, Babel, Browserify, Webpack, etc.)
  • Asegúrese de que su proyecto cumpla con los estándares web y sea altamente accesible
  • Asegúrese de que su proceso de construcción esté automatizado para reducir el estrés.
  • Haga que su proceso de implementación sea automático, puede usar plataformas como Netlify para hacer esto

¿Cómo empiezo?

Puede utilizar algunas tecnologías ya creadas para crear aplicaciones JAMstack en unos minutos. A continuación, presentamos algunos:

  • Gatsby : Gatsby es un marco de código abierto y gratuito basado en React que ayuda a los desarrolladores a crear sitios web y aplicaciones ultrarrápidos.
  • NuxtJS : NuxtJS es el marco de Vue.js para aplicaciones universales, aplicaciones generadas estáticamente, aplicaciones de una sola página, aplicaciones web progresivas y aplicaciones de escritorio.
  • Hugo : Hugo es el marco más rápido del mundo para crear sitios web. Es uno de los generadores de sitios estáticos de código abierto más populares. Con su increíble velocidad y flexibilidad, Hugo vuelve a hacer divertido la creación de sitios web.
  • Netlify CMS : Netlify CMS es una gestión de contenido de código abierto para su flujo de trabajo de Git que se puede utilizar con cualquier generador de sitios estáticos para un proyecto web más rápido y flexible.
  • Contentful : Contentful es un sistema de gestión de contenido más inteligente y fluido que proporciona a los editores y desarrolladores un contenido unificado, mejorando así la colaboración y asegurando que los productos digitales se envíen al mercado más rápido.
  • Svelte : Svelte es un enfoque radicalmente nuevo para crear interfaces de usuario. Mientras que los marcos tradicionales como React y Vue hacen la mayor parte de su trabajo en el navegador , Svelte cambia ese trabajo a un paso de compilación que ocurre cuando construyes tu aplicación.

y muchos más. . .

Recursos útiles

  • JAMstack WTF
  • Cómo construir un sitio web JAMstack
  • ¿Qué es JAMstack y por qué debería probarlo?
  • Un CMS listo para JAMstack
  • JAMstack para clientes: sobre beneficios y CMS de sitio estático
  • Vuélvete estático: 5 razones para probar JAMstack en tu próximo proyecto
  • Sitios web estáticos + JAMstack = ❤

Encuentre más recursos aquí

Conclusión

JAMstack se inventó como una forma de poner una nomenclatura a la nueva forma de crear sitios web y aplicaciones que ofrecen un mejor rendimiento, mayor seguridad, menor costo de escalado y una mejor experiencia de desarrollador.

JAMstack no se trata de tecnologías específicas, es una arquitectura de desarrollo web moderna basada en JavaScript del lado del cliente, API reutilizables y marcado predefinido.

Únase a la comunidad JAMstack para obtener más información y obtener más actualizaciones.

PD: Este artículo se publicó por primera vez en mi blog aquí.