JAMstack: La piedra angular del desarrollo web en la era moderna

Tuesday, April 14, 2020

JAMstack es la arquitectura de desarrollo web basada en JavaScript, APIs y Markup, es la respuesta perfecta a los problemas de desarrollo web de hoy en día.

Durante los últimos años, la escena de desarrollo de la web ha ido evolucionando gradualmente. En este momento, la mayoría de los desarrolladores son muy conscientes de ciertos inconvenientes cuando se trata de utilizar un CMS tradicional como Wordpress y/o Drupal. Con Google mejorando sus capacidades de rastreo y renderización de Javascript y favoreciendo la velocidad como uno de los factores más importantes, es algo evidente por qué los sitios web estáticos y pre-renderizados están emergiendo como la solución perfecta para los desarrolladores web de hoy en día.

Hemos escrito sobre los problemas de los generadores de sitios web y de los sitios estáticos de hoy en día como alternativas fiables de WordPress, pero aquí me gustaría explicar la idea principal detrás de JAMstack, en qué se diferencia de las pilas tradicionales, por qué es una mejor solución para los desarrolladores y clientes de la web.

¿Qué es JAMstack?

Para decirlo de la forma más sencilla posible, JAMstack es una abreviatura práctica acuñada por Mathias Biilmann, el director general de Netlify y significa JavaScript, API y Markup. Representa una moderna arquitectura de desarrollo web que ofrece a los desarrolladores la oportunidad de confiar en las ventajas de un sitio web estático, que incluyen un mejor rendimiento web y beneficios de seguridad, al tiempo que se mantienen los atributos dinámicos de un CMS orientado a la base de datos pero sin la base de datos.

Es imperativo señalar que con JAMstack las reglas y los beneficios se explican por sí mismos y son sencillos:

  • JavaScript (del lado del cliente) está llevando a cabo una programación dinámica durante el ciclo de solicitud/respuesta.
  • Las APIs reutilizables se acceden a través de HTTPS con JavaScript abstrae todos los procesos del lado del servidor o acciones de la base de datos.
  • La plantilla de marcado debe ser preconstruida en el momento del despliegue, utilizando un generador de sitios o una herramienta de construcción de aplicaciones web.

Para presentar esto en el contexto, comparemos al actual campeón del desarrollo web, el proceso LAMP stack, con el retador, JAMstack.

Proceso de desarrollo estático vs. proceso de desarrollo dinámico

La arquitectura de desarrollo web LAMP se originó a partir de cuatro componentes de código abierto que los desarrolladores, a principios de la década de 2000, adoptaron para construir sitios web: el sistema operativo Linux, el servidor HTTP Apache, la base de datos MySQL y el lenguaje PHP.

La forma en que funcionan las cosas para los sitios web construidos con la pila LAMP es que con cada solicitud de un usuario para una página, un servidor primero consulta una base de datos y combina el resultado con los datos del marcado de la página y los plugins para generar un documento HTML en el navegador.

Los sitios web de JAMstack, por otro lado, sirven archivos estáticos inmediatamente cuando se hace una solicitud, haciendo que el sitio web sea mucho más veloz. Puede hacerlo porque no hay necesidad de consultar la base de datos, ya que los archivos ya están compilados y se sirven al navegador desde un CDN.

En resumen, el flujo de trabajo de JAMstack reduce drásticamente los engorrosos obstáculos al desarrollo y el exceso de mantenimiento.

¿Qué provocó la necesidad de usar JAMstack?

Con el aumento del uso del móvil, las empresas en línea se enfrentan a ciertos retos. Para empezar, la capacidad de atención del usuario medio está disminuyendo rápidamente. Hoy en día la mayoría de la gente quiere obtener su información o acceso a un sitio web/video de inmediato. Por eso, la mayoría de los negocios en línea están interesados en ofrecer un acceso más rápido al contenido para sus audiencias. Las marcas mundiales de Internet en ese sentido han irrumpido en el mercado con sus propias soluciones.

Google lanzó el Proyecto AMP, una iniciativa de código abierto que tiene como objetivo mejorar el ecosistema de contenidos para todos. En resumen, las páginas de AMP están construidas con 3 componentes básicos: AMP HTML, AMP JS, y AMP Cache. Su objetivo es hacer que las páginas sean más rápidas en todos los dispositivos y plataformas de distribución.

Facebook tiene artículos instantáneos destinados a resolver algunos problemas específicos a los que se enfrentan los usuarios de Facebook, especialmente los tiempos de carga lenta en la web móvil.

Incluso Apple lanzó su News Format como una solución para la velocidad de entrega de contenido multimedia dinámico y animado.

Las tendencias de la industria se dirigen hacia la potente tecnología móvil y la aparición de modernos y rápidos navegadores web, esto está llevando a los desarrolladores a buscar soluciones prácticas. ¡Ahí es donde entra JAMstack! Pero hay otras cosas que también alimentan la necesidad de la JAMstack. Para empezar, el actual API-economía, SSG (Static Site Generators), la gran cantidad de CMSs y CDNs (Content Delivery Networks) avanzados para una mejor distribución de contenidos.

¿Cómo responde JAMstack a los problemas de desarrollo de la web de hoy en día?

Para entender cómo funciona JAMstack en la práctica, tenemos que diferenciar entre los siguientes sitios web:

  • Sitios web pre-renderizados (alias. Sitios web estáticos): Básicamente, un sitio web pre-renderizado es un sitio web compuesto de páginas HTML con contenido pre-poblado. El navegador simplemente solicita una URL de una página estática, tras lo cual el servidor devuelve la página estática completa. La parte hermosa de este sistema es que no se hacen llamadas a una base de datos y no hay contenido generado sobre la marcha. En otras palabras, el contenido que está siendo solicitado por el usuario ya está allí. No lo malinterprete, esto no significa que cada página se ponga manualmente, y esto no significa que no pueda haber elementos dinámicos en esas páginas. Por esa razón, varias herramientas diferentes manejan diversas capas de esta pila tecnológica.
  • Sitios web dinámicos: El rendimiento de la web es una parte esencial del desarrollo de la web moderna y, por muy bien que se optimice un sitio web, los sitios web dinámicos terminan siendo terriblemente lentos, y eso se debe a que hay demasiados pasos que deben darse antes de que se cargue el contenido real cada vez que un usuario accede al sitio/página. Los sitios web dinámicos pueden ser tan rápidos como los estáticos, pero con ello es mucho más difícil de lograr y con un costo mucho mayor para sus recursos. Además, con tantos plugins y elementos del servidor, eres vulnerable a ataques maliciosos desde muchos puntos finales.

Otro problema adicional es que muchos sitios web se están construyendo utilizando soluciones tradicionales de CMS (es decir, WordPress o similares). Aunque no son malas en sí mismas, con el tiempo prácticamente se cargan con una enorme cantidad de scripts, plugins y un surtido de elementos adicionales que en realidad se sienten redundantes. Debido a todo ello, los tiempos de carga se reducen drásticamente para cada sitio web o proyecto de desarrollo web en curso.

¿Qué significa todo esto para los clientes finales?

Cuando se habla de JAMstack con un público experto en tecnología, la sala se llena de asombro y todo suena genial y comprensible. Pero la mayoría de las veces te encuentras con un cliente que necesita un poco de educación, a falta de una palabra mejor, sobre JAMstack y sus beneficios sobre el desarrollo tradicional de la web representado en WordPress y/o Drupal. La mejor manera de hacer que el cliente entienda JAMstack es explicarle los beneficios que su negocio obtendría al usarlo.

Rendimiento

Como ya he mencionado, la velocidad de carga de la página se está convirtiendo en uno de los factores de clasificación más importantes. Lo que hace a JAMstack tan rápido es que descarta la base de datos de la arquitectura web (pre poblando los datos), lo que significa que un sitio web no tiene que ejecutar múltiples consultas.

En esencia, se puede argumentar que los sitios estáticos son más rápidos y con mejores clasificaciones, lo que a su vez equivale a más tráfico y más...💰💰💰

Para asegurarse de que el cliente vea la diferencia en las puntuaciones de rendimiento, si no tienes tu propio página JAMstack, muéstrales cómo el sitio web de Smashing Magazine se hizo 10 veces más rápido cuando pasaron de WordPress a un sitio estático. O simplemente enseñales el rendimiento de nuestra página web.

Seguridad

Con la arquitectura JAMstack, el front-end y el CMS están desacoplados y los procesos del lado del servidor son ejecutados por APIs. Eso por sí solo reduce el área potencial de ataque.

Puede decirle a su cliente que un sitio estático equivale a un sitio más seguro y fiable, lo que a su vez equivale a menos gastos de seguridad.

Flujo de trabajo

Hay una mayoría de sitios web de CMS dinámicos que se están desordenando, esto ha demostrado ser un gran problema, especialmente en los últimos años. Tarde o temprano esto también se convertirá en un problema para sus clientes, simplemente porque se preocuparán por demasiadas opciones y características en su CMS, la mayoría de las cuales son bastante innecesarias desde un punto de vista práctico.

Se puede argumentar que el abandono de la base de datos, los plugins y el mantenimiento del hosting les ahorrará costes, además de reducir los costes operativos y de desarrollo.

Escalabilidad

Finalmente, el contenido estático de los sitios web de JAMstack se puede colocar en un CDN, lo que facilita automáticamente el escalado dinámico y ahorra costos en infrastructuras de servidores.

Las limitaciones de JAMstack

Sí, JAMstack es revolucionario en muchos sentidos. Sí, puede ayudarle a crear un sitio web mucho mejor, o presentar su empresa mucho mejor que la competencia. Sin embargo, como cualquier otra tecnología, también tiene un par de limitaciones.

Por ejemplo, si su proyecto web se basa en actualizaciones frecuentes, actualizaciones en tiempo real y características dinámicas con las que los usuarios pueden interactuar, aunque JAMstack ha hecho mucho al respecto, puede que no sea la mejor opción para usted.

Las galerías en tiempo real (como instagram), los comentarios, los formularios y otras características interactivas en tiempo real sólo pueden añadirse a un sitio web de JAMstack utilizando soluciones de terceros y el uso de base de datos, lo que repercute en un desarrollo más caro. Aunque no tiene por qué ser un defecto y un sitio web puede funcionar como un encanto, para algunos la gestión de muchos proveedores de complementos puede ser una carga.

Finalmente, cualquier cambio en el diseño debe pasar por el desarrollador, en caso de que no lo seas. Así que probablemente tendrás que mantenerte en contacto con tus desarrolladores de JAMstack (lo cual no tiene por qué ser una mala idea en absoluto).

Ahora estamos en el camino para hacer realmente una mejor Internet para todos.

¿Tiene un proyecto a mano que seria perfecto para implementar JAMstack? Podemos ayudarle a conseguirlo. Contacte con nosotros para aprender más sobre lo que podemos hacer por usted y su negocio.