¿Qué es JAMstack y cómo empiezo?

Los sitios JAMstack están de moda en este momento en el mundo de los desarrolladores web. ¡Y con razón! Pero, ¿qué es exactamente y cómo podemos aprovechar todos sus beneficios?

  • ¿Qué es este JAMstack?
  • Eso no debe confundirse con sin servidor
  • ¿Qué compone el JAMstack?
  • Entonces, ¿qué hace que una aplicación JAMstack sea tan excelente?
  • ¿Se considera que mi sitio web está en JAMstack?
  • ¿Cuáles son algunos ejemplos de JAMstack?
  • ¿Cuáles son algunas de las herramientas que puedo utilizar para crear sitios o aplicaciones JAMstack?

¿Qué es este JAMstack?

Para empezar, JAMstack es una arquitectura y filosofía de software que se adhiere a los siguientes componentes: Javascript, API y Markup.

Si esto le suena familiar, ¡es porque lo es! ¿Esa aplicación React que compila con Webpack y, en última instancia, sirve desde S3? Sí, esa es una aplicación JAMstack. ¿Ese archivo HTML simple que no tiene JavaScript y literalmente no hace nada dinámico? Sí, también es una aplicación JAMstack.

Eso no debe confundirse con sin servidor

Si viene más del lado de la nube (piense en AWS, GCP, Azure), es posible que se sienta inclinado a pensar en Serverless y JAMstack como lo mismo. Por supuesto, tienen similitudes en la filosofía de cómo se administran los recursos, como alojar un sitio en S3. Pero una aplicación JAMstack no siempre será una aplicación sin servidor.

Considere una aplicación alojada en almacenamiento estático en el proveedor de nube de su elección. Sí, es posible que esté sirviendo la aplicación sin servidor, pero es posible que esté tratando con una API que utiliza Wordpress o Rails, los cuales ciertamente no son sin servidor.

Combinar estas filosofías puede ser de gran ayuda, pero no deben confundirse como si fueran lo mismo.

¿Qué compone el JAMstack?

Volviendo al JAMstack: generalmente se compone de 3 componentes: Javascript, API y Markup. Su historia se deriva del crecimiento del término "sitio estático" en algo más significativo (y comercializable). Entonces, aunque en última instancia, el resultado final es un sitio estático, se amplía para incluir herramientas de primera clase en cada paso del camino.

Si bien no hay ningún conjunto específico de herramientas que deba usar, o ninguna herramienta más allá del simple HTML, hay excelentes ejemplos de lo que puede componer cada parte de la pila. Vamos a sumergirnos un poco en cada componente.

Javascript

El componente que probablemente ha hecho más trabajo para popularizar el JAMstack es Javascript. Nuestro idioma de navegador favorito nos permite proporcionar todos los bits dinámicos e interactivos que quizás no tengamos si estamos sirviendo HTML simple sin él.

Aquí es donde muchas veces verás que los marcos de interfaz de usuario como React, Vue y los recién llegados como Svelte entran en juego.

Hacen que la creación de aplicaciones sea más sencilla y organizada al proporcionar componentes API y herramientas que se compilan en un simple archivo HTML (o en un montón de ellos).

Esos archivos HTML incluyen un grupo de activos como imágenes, CSS y el JS real que finalmente se envía a un navegador a través de su CDN (red de entrega de contenido) favorita.

API

Utilizar las fortalezas de las API es fundamental para hacer que una aplicación JAMstack sea dinámica. Ya sea autenticación o búsqueda, su aplicación utilizará Javascript para realizar una solicitud HTTP a otro proveedor que, en última instancia, mejorará la experiencia de una forma u otra.

Gatsby acuñó la frase "malla de contenido" que hace un buen trabajo al describir las posibilidades aquí.

No necesariamente tiene que comunicarse con un solo host para obtener una API, pero puede comunicarse con todos los que necesite (pero trate de no exagerar).

Por ejemplo, si tiene una API de Wordpress sin cabeza donde aloja sus publicaciones de blog, una cuenta de Cloudinary donde almacena sus medios especializados y una instancia de Elasticsearch que proporciona su funcionalidad de búsqueda, todos trabajan juntos para brindar una experiencia única a las personas que usan Tú sitio.

Margen

Esta es la pieza fundamental. Ya sea su HTML escrito a mano o el código que se compila hasta el HTML, es la primera parte que está sirviendo al cliente. Esta es una especie de pieza de facto de cualquier sitio web, pero la forma en que la sirve es la pieza más importante.

Para ser considerada una aplicación JAMstack, el HTML debe servirse de forma estática, lo que básicamente significa que no se procesa dinámicamente desde un servidor.

Si está armando una página y sirviéndola con PHP, probablemente no sea una aplicación JAMstack. Si carga y sirve un solo archivo HTML desde el almacenamiento que construye una aplicación con Javascript, suena como una aplicación JAMstack.

Pero eso no significa que siempre tengamos que construir el 100% de la aplicación dentro del navegador. Herramientas como Gatsby y otros generadores de sitios estáticos nos permiten extraer algunas o todas nuestras fuentes de API en el momento de la compilación y representar las páginas como archivos HTML.

Piense que si tiene un blog de Wordpress, podemos incluir todas las publicaciones y, en última instancia, crear un nuevo archivo HTML para cada publicación. Eso significa que podremos ofrecer una versión precompilada de la página directamente en el navegador, lo que generalmente equivale a una primera pintura más rápida y una experiencia más rápida para su visitante.

Una nota sobre el "alojamiento"

Usar el término alojamiento aquí puede ser engañoso si es nuevo en el concepto. Sí, técnicamente tu sitio se aloja en algún lugar, pero no en el sentido tradicional. No tiene un servidor que mantenga donde carga sus archivos con un cliente FTP como Cyberduck.

En cambio, ya sea que lo haga usted mismo con S3 o lo conecte a Netlify (que en realidad es de múltiples nubes), su HTML y activos estáticos se obtienen desde el almacenamiento de objetos. Al final de eso, normalmente tiene un CDN como Cloudflare que almacena en caché esos archivos en ubicaciones de todo el mundo, lo que hace que sus páginas se carguen más rápido para las personas que visitan su sitio.

Entonces, ¿qué hace que una aplicación JAMstack sea tan excelente?

Las aplicaciones JAMstack satisfacen de manera inherente la mayoría, si no todos, de los 5 pilares del AWS Well-Architected Framework. Estos son conceptos básicos que AWS considera que brindan una infraestructura rápida, segura, de alto rendimiento, resistente y eficiente.

Veamos cómo ...

Velocidad

El hecho de que esté sirviendo aplicaciones JAMstack como archivos estáticos directamente desde un CDN (generalmente) hace que sea probable que su aplicación se cargue súper rápido. Atrás quedaron los días en los que el servidor tenía que dedicar tiempo a crear la página antes de responder; ahora sirve la página como HTML simple "tal cual" o con algún tipo de hidratación del lado del cliente como lo vería con React.

Costo

La mayoría de las veces, los sitios JAMstack serán más baratos que sus contrapartes del lado del servidor. El alojamiento de activos estáticos es barato y ahora su página se publica al mismo ritmo.

Escalabilidad

Dado que está sirviendo sus archivos desde un alojamiento estático, probablemente un CDN, eso casi automáticamente le brinda una escalabilidad infinita. La mayoría de los proveedores harán esta afirmación, lo que significa que no tendrá problemas para permitir que cualquier afluencia de personas ingrese a su sitio por la puerta principal.

Mantenimiento

La base de su sitio estático no es un servidor, lo que significa que no necesita mantenerlo. Ya sea Netlify, S3 o cualquier otro proveedor, su HTML, CSS y JS estático se mantienen sin problemas.

Seguridad

Duplicando la falta de servidor que debe mantener personalmente, realmente no necesita preocuparse tanto por bloquear formas para que la gente se entrometa.

En cambio, deberá centrarse principalmente en los permisos para bloquear el contenido privado y asegurar a sus usuarios que su información personal no está disponible públicamente.

Pero esto también depende de tus API

Por mucho que estos puntos sean ciertos para los aspectos estáticos de su sitio, tenga en cuenta que aún puede depender de algún tipo de API para su experiencia del lado del cliente.

Intente aprovechar estas solicitudes en tiempo de compilación cuando pueda, como con un generador de sitios estáticos. De lo contrario, deberá sopesar la cantidad de visitas que está realizando a un punto final dinámico y cómo afecta todos los puntos anteriores para su experiencia general.

¿Se considera que mi sitio web está en JAMstack?

Ya hablamos de los 3 componentes (Javascript, API, Markup), pero de lo que no hablamos es del hecho de que no necesariamente tienes que usar los 3 para considerar tu sitio digno de la etiqueta JAM. .

Realmente todo se reduce al marcado y cómo lo sirve. En lugar de que su aplicación Rails renderice su HTML por usted, puede alojar una aplicación React precompilada en S3 que llega a Rails a través de un conjunto de API.

Pero ni siquiera necesitas tener API. ¡Ni siquiera necesitas tener Javascript! Siempre que esté sirviendo un archivo HTML sin tener que compilarlo en un servidor en el momento de la solicitud (también conocido como renderizado previo), tiene un sitio JAMstack.

¿Cuáles son algunos ejemplos de JAMstack?

freecodecamp.org

¡Si! freecodecamp.org y su portal de aprendizaje es un sitio JAMstack construido sobre Gatsby. Incluso con las complejidades de proporcionar una aplicación para tomar cursos de código, freeCodeCamp es capaz de reunir el poder de un generador de sitios estáticos y API poderosas para llevar a las personas de todo el mundo el poder de aprender código.

Puede ver a Quincy de freeCodeCamp hablar más sobre esto en el JAMstack_conf 2018:

//www.youtube.com/watch?v=e5H7CI3yqPY

Nota: los portales de noticias y foros no son actualmente sitios JAMstack.

Alimentos imposibles

¡El sitio web principal de Impossible Foods no es otro que un sitio de Gatsby! Todo, desde sus recetas hasta su buscador de ubicación, se compila a través de nuestro generador de sitios estáticos favorito "ultrarrápido".

web.dev

El centro de recursos web.dev de Google se construye utilizando el creciente 11ty. Incluso puede encontrar el código de código abierto en: //github.com/GoogleChrome/web.dev

¿Cuáles son algunas de las herramientas que puedo utilizar para crear sitios o aplicaciones JAMstack?

La buena noticia con todo este rumor es que hay un montón de herramientas disponibles actualmente y un montón más en camino. Es posible que aún sean un poco toscos en los bordes, pero eso se debe a que este es un nuevo y valiente mundo de herramientas y es necesario suavizarlo para que quede perfecto.

Construyendo su aplicación

Esta es la parte divertida. ¿Cómo vas a construir tu aplicación? Con Scully en la imagen, puedes elegir tu versión favorita del marco de interfaz de usuario y empezar a trabajar. Aquí hay algunos populares para comenzar, pero de ninguna manera son exhaustivos.

  • 11ty
  • Gatsby
  • Hugo
  • Nift
  • Scully (para ustedes fanáticos de Angular)
  • Y muchos más…

¿Necesitas que elija uno? Comience con Gatsby y arranque con un simple iniciador.

Sirviendo su aplicación

Me gusta pensar en esto como la parte fácil dependiendo de su configuración. Herramientas como Netlify y Zeit hacen que esto sea muy fácil de configurar al conectarse a su repositorio de Github y compilar cada vez que se envía una nueva confirmación, pero por supuesto tiene opciones como AWS si desea más control.

  • AWS
  • Azur
  • GCP
  • Páginas de Github
  • Netlify
  • Oleada
  • Zeit

¿Necesitas que elija uno? Comience con Netlify y tómese 5 minutos para implementar ese sitio de Gatsby.

Haciendo su aplicación dinámica

Realmente, esto puede ser cualquier cosa que se pueda usar como una API que realice solicitudes desde el navegador. No voy a enumerar un montón de ejemplos por tipo, pero aquí hay algunas herramientas y lugares donde puede encontrar algunos recursos.

  • Auth0: autenticación
  • Cloudinary - Gestión de medios
  • Google Analytics: análisis del tráfico web
  • headlesscms.org - Lista interminable de CMS sin cabeza
  • Cordura - CMS
  • Marco sin servidor: recursos propios, fáciles de implementar sin servidor
  • Snipcart - Comercio electrónico
  • Stripe - Gestión de pagos
  • Y muchos otros recursos ...
  • Y un montón de otras opciones de CMS ...
  • Y alguna información general y herramientas ...

¿Y qué hay de los recursos generales para aprender?

Puede encontrar una gran cantidad de recursos para comenzar a trabajar rápidamente en el mundo JAMstack.

  • Cómo alojar e implementar un sitio web estático o una aplicación JAMstack en AWS S3 y CloudFront de mi parte en freeCodeCamp
  • Una guía paso a paso: Gatsby en Netlify de Netlify
  • Cree su propio blog desde cero con Eleventy del grupo filament
  • Cómo alojar su sitio web estático con AWS: una guía para principiantes de freeCodeCamp
  • Tutorial de Hugo: Cómo construir y alojar un sitio de comercio electrónico estático (muy rápido) de SnipCart
  • Cómo crear aplicaciones JAMstack sin servidor autenticadas con Gatsby y Netlify desde freeCodeCamp

Espere ver más

Al igual que su contraparte sin servidor, los días de JAMstack son jóvenes. A medida que pase el tiempo, veremos que las herramientas maduran y se expanden, lo que nos brinda nuevas y emocionantes formas de crear rápidamente sitios rápidos que cualquiera pueda usar.

¡Únete a la conversación en Twitter y cuéntame cuál es tu parte favorita de la creación de un sitio JAMstack!

¿Echando de menos algo?

¿Falta su herramienta JAMstack favorita o un ejemplo asombroso? ¡Hazme ping en Twitter!

¡Sígueme para obtener más Javascript, UX y otras cosas interesantes!

  • ? Sigueme en Twitter
  • ? ️ Suscríbete a mi Youtube
  • ✉️ Suscríbete a mi boletín