¿Qué es Gatsby JS y cómo lo utilizan los desarrolladores de comercio electrónico para crear tiendas ultrarrápidas?

Scott Fitzgerald escribió una carta a su editor en 1922 anunciando su intención de comenzar a escribir una nueva novela que describió como: 

“[S]algo nuevo:algo extraordinario, hermoso, simple y con un patrón intrincado”.

Tres años más tarde, publicó "El gran Gatsby".

Es esta hermosa simplicidad, a diferencia de la lujosa extravagancia del personaje Jay Gatsby, lo que trae a la mente el marco de código abierto GatsbyJS. Creado en mayo de 2015 por Kyle Mathews, Gatsby es, en su forma más básica, una forma sencilla de crear un sitio web con React.

Fitzgerald falleció antes de que "El gran Gatsby" obtuviera un gran reconocimiento, pero Mathews tuvo mejor suerte. Poco más de medio año después de su lanzamiento, cuando Mathews habló en la conferencia React en enero de 2016, la gente ya lo estaba usando.

"Supuse que la gente solo usaba sitios estáticos para rebajas o sitios controlados por JSON, pero resultó que había un gran grupo de desarrolladores interesados ​​en ampliar los límites de lo que pueden hacer los sitios estáticos", dijo Mathews.

La popularidad creció tanto que en 2018, Mathews y varios colaboradores principales formaron Gatsby Inc. para ayudar a los equipos de desarrollo a crear "sitios web basados ​​en CMS con herramientas modernas".

Hoy en día, hay más de 107 000 sitios activos en Internet que usan Gatsby JS.

¿Qué es Gatsby?

Gatsby es un generador de sitios web estáticos (SSG) de código abierto que se basa en el marco de desarrollo frontend React y utiliza la tecnología Webpack y GraphQL. Se puede usar para crear sitios estáticos que son aplicaciones web progresivas, siguen los últimos estándares web y están optimizados para la velocidad y la seguridad.

En un artículo del blog para desarrolladores de BigCommerce de Karen White, se señala la percepción de que los SSG solo se pueden usar para sitios centrados en el contenido, no para aquellos con elementos dinámicos. Pero ella dice que con React junto con él, Gatsby puede crear sitios similares a aplicaciones, incluso para el comercio electrónico.

"Todo eso quiere decir que Gatsby trae la velocidad de un sitio generado estáticamente, así como la funcionalidad de un marco", escribe.

MÁS INFORMACIÓN SOBRE GATSBY + BIGCOMMERCE

Para obtener más información sobre cómo trabajan juntos Gatsby y BigCommerce, consulte nuestro blog para desarrolladores.

Leer ahora

1. Generador de sitios estáticos.

En cierto modo, los "generadores de sitios estáticos" son exactamente lo que parecen. Pero, ¿qué significa esto realmente? Si un sitio es estático o dinámico depende de si la página está codificada a mano como una página estática y luego un usuario accede a ella, o si la página se genera dinámicamente bajo demanda a través de un sistema de administración de contenido a medida que los usuarios acceden a ella. Este último requiere procesamiento del lado del servidor.

Un generador de sitios estáticos ofrece un compromiso entre los dos al permitir que los desarrolladores esencialmente "escriban dinámicamente y publiquen estáticamente". Con los SSG, los desarrolladores crean un sitio estático implementado en un servidor HTTP. Solo hay archivos y carpetas, sin bases de datos, sin representación del lado del servidor. Cuando un usuario solicita una página, el servidor devuelve el archivo correspondiente.

Los SSG también tienen beneficios de ciberseguridad. Los atacantes cibernéticos usan métodos como secuencias de comandos, inyecciones de bases de datos SQL o vulnerabilidades de bases de datos del lado del servidor, pero los SSG eluden eso porque están compuestos solo de archivos estáticos y no hacen referencia a bases de datos.

2. Reaccionar.

React es una biblioteca JavaScript eficiente y flexible para crear interfaces de usuario, según Reactjs.org. Este marco basado en componentes proporciona a los desarrolladores un conjunto de funciones básicas livianas y ampliamente aplicables que pueden usar para crear aplicaciones móviles o de una sola página.

Una de las ventajas de usar componentes de React es que una construcción modular ayuda a mantener todo consistente cuando tiene interfaces de usuario complicadas.

3. GraphQL.

GraphQL es un lenguaje de consulta para API y tiempo de ejecución para cumplir con esas consultas con sus datos existentes. Esto se ha vuelto popular entre los desarrolladores por varias razones. En primer lugar, sus solicitudes de datos se pueden estructurar de manera declarativa, lo que significa que puede consultar la API para los campos exactos que desea sin tener que lidiar con una respuesta que incluye propiedades adicionales.

Luego, las consultas de GraphQL pueden abarcar múltiples recursos en una sola solicitud. "Una API de GraphQL esencialmente tiene un punto final único que puede consultar cualquiera de los datos disponibles", dijo White.

Redefine el diseño de la API y la interacción cliente-servidor para mejorar la experiencia del desarrollador, lo que permite experiencias de usuario perfectas incluso en plataformas cruzadas y en dispositivos móviles.

4. paquete web.

Webpack es un paquete de módulos de código abierto para JavaScript. “Coloca todos sus activos, incluidos JavaScript, imágenes, fuentes y CSS, en un gráfico de dependencia”. Hay varias ventajas en el uso de Webpack, que incluyen un estilo más sencillo, división de código, más control sobre cómo se procesan los activos, implementaciones de producción estables y una velocidad de carga de página más rápida.

El ecosistema de Gatsby:complementos e iniciadores

Los complementos le permiten conectar Gatsby con plataformas de terceros e importar datos expuestos a través de una capa GraphQL.

Una de las razones por las que a los desarrolladores les encanta Gatsby es porque se basa en React. Esto significa que puede usar cualquiera de los paquetes que ya usa con NPM (un administrador de paquetes para paquetes de Node.js).

Gatsby viene con algunos arrancadores predeterminados y reduce la necesidad de un código repetitivo. Sin embargo, debido a que Gatsby es de código abierto, también tendrá acceso a una cantidad cada vez mayor de complementos, arrancadores y transformadores creados por la comunidad Gatsby existente. Solo mirar la página de Gatsby en GitHub muestra más de 3500 colaboradores.

Además, BigCommerce lanzó una plantilla de CMS de Gatsby-Netlify para impulsar el desarrollo de una tienda PWA sin servidor.

4 características notables de Gatsby

Si hay algo en lo que todos pueden estar de acuerdo, es que los sitios web de Gatsby pueden ser muy rápidos. Pero también hay muchas otras ventajas, especialmente si es un desarrollador que ya está familiarizado con React. Estas son algunas de las características más notables de Gatsby.

1. Creado para el rendimiento.

Según las pruebas de rendimiento realizadas por el fundador de Gatsby, Kyle Matthews, los sitios de Gatsby son, en promedio, 2 o 3 veces más rápidos que otros tipos de sitios similares, y el marco en sí mismo es responsable del rendimiento, por lo que está fuera de su alcance como desarrollador.

"Todo lo que tiene que hacer es crear el código fuente y Gatsby.js luego compilará la configuración de paquete web más eficaz para construir su sitio", dijo Sarah Mischinger de Storyblok.

Los generadores de sitios estáticos como Gatsby aumentan la velocidad y el rendimiento porque todo lo que el servidor tiene que hacer es devolver un archivo en lugar de realizar consultas a la base de datos y construir cada página como se solicita. Gatsby maneja toda la obtención de datos y usa esos datos para generar archivos HTML estáticos, JavaScript y CSS, lo que hace que funcione más rápido.

En un artículo en Medium, Nicholas Feitel escribe que su sitio de Gatsby "se cargó el doble de rápido que mi aplicación React simple y CINCO veces más rápido que un sitio complejo como LinkedIn". Con Gatsby, no tendrá que depender de los servidores para la generación de páginas dinámicas; en su lugar, preprocesarlos en la compilación y usar CDN para la entrega.

2. Ecosistema de código abierto.

Gatsby tiene un extenso ecosistema de complementos, integraciones poderosas y excelente documentación. Su extensa comunidad de código abierto es una de las mayores fortalezas del meta-framework. La comunidad de Gatsby ya ha creado más de 2000 complementos, por lo que es muy probable que pueda encontrar una herramienta ya creada para satisfacer sus necesidades.

3. Puede transferir datos fácilmente.

Con Gatsby, puede cargar datos de casi cualquier fuente de datos, por lo que puede usar las herramientas que más le gusten para administrar contenido mientras sigue usando React y GraphQL en el lado del desarrollo. Los complementos de origen le permiten integrarse con soluciones SaaS y otras herramientas de terceros sin una configuración extensa, y Gatsby también brinda soporte de API para agregar datos personalizados.

Esto, dice Karen White, es la gran fortaleza de Gatsby:"Gatsby introduce el concepto de una "malla de contenido" para describir la forma en que vincula plataformas de terceros".

“La malla de contenido es un alejamiento de las plataformas monolíticas todo en uno hacia un modelo en el que cada plataforma de terceros contribuye con una funcionalidad especializada a la arquitectura general, lo que permite que cada plataforma haga lo que mejor sabe hacer y la malla de contenido para unirlo todo de una manera cohesiva”.

4. Gatsby renderiza páginas y rutas con problemas mínimos.

Usando solo React, aún tendría que hacer una ruta para los componentes en su carpeta de páginas. Sin embargo, en Gatsby, al tener un componente en una carpeta de páginas, genera la página automáticamente, sin un enrutador o conmutador.

Dificultades con el marco Gatsby

Como la mayoría de los marcos de código abierto, Gatsby todavía está evolucionando. Pero tal como está ahora, hay algunas desventajas de trabajar con él, según sus habilidades de desarrollo y el tiempo que esté dispuesto a comprometerse a construir.

1. Curva de aprendizaje pronunciada.

Si está dispuesto a dedicar tiempo y esfuerzo, Gatsby tiene una gran cantidad de documentación sólida disponible y una comunidad de usuarios comprometida. Y, como señala Matthew Bunday de Zen of React, "dedicar demasiado esfuerzo a construir su tienda en línea usando nueva tecnología podría restarle valor a su negocio principal".

2. Los complementos y los iniciadores no siempre son de la mejor calidad.

Con el desarrollo de código abierto, debe prestar mucha atención a la calidad de lo que obtiene y qué estándares siguen los desarrolladores. Kalin Chernev escribe:"Si GatsbyJS se va a tomar en serio, los ejemplos y los puntos de partida en la comunidad deberían tener mejores estándares".

3 casos de uso destacados de Gatsby

Los casos de uso de Gatsby siempre están en expansión, pero estos son los tres principales casos de uso actuales, incluido un caso de uso específico de comercio en el comercio sin cabeza.

1. Cree un sitio estático utilizando un CMS sin encabezado.

Si todo lo que necesita es una página web estática que sirva HTML, JavaScript y CSS, Gatsby es una excelente opción. Puede usarlo para crear páginas dinámicamente desde casi cualquier fuente. Cuando actualiza contenido en su CMS, puede configurar un disparador automático para actualizar el contenido en el sitio estático. Eso significa que el sitio web se reconstruye solo cuando se actualiza el contenido.

2. Cree aplicaciones web progresivas (PWA).

Gatsby está diseñado desde cero para ser un marco PWA. Viene con sólidas funciones de PWA y está diseñado para ser rápido y muy accesible.

Gatsby ofrece una experiencia similar a la PWA porque renderiza previamente su sitio:no hay código del lado del servidor, base de datos, etc. Una vez que se carga, React se hace cargo para brindar una experiencia de navegación similar a la de una aplicación y un alto rendimiento percibido. La optimización lista para usar que viene junto con Gatsby incluye la división de paquetes de código, rutas de carga diferida, búsqueda previa de activos importantes e incorporación de CSS crítico.

3. Cree un sitio de comercio electrónico sin cabeza.

El concepto de malla de contenido de Gatsby se alinea bien con el enfoque de comercio sin cabeza de reemplazar las soluciones todo en uno con modularidad y flexibilidad. El comercio sin cabeza desacopla la interfaz, o la cabeza, del sitio de comercio electrónico del motor de comercio electrónico que alimenta el backend.

Como explica Karen White:“Un sitio de comercio electrónico sin cabeza que usa BigCommerce usaría BigCommerce para administrar productos, pedidos y creación de carritos, pero una tecnología distinta a Stencil para representar la capa de presentación. La capa de presentación alternativa podría ser una interfaz React personalizada, un CMS como WordPress o Drupal, o Gatsby”.

Evaluar si Gatsby tiene sentido para ti

Si debe o no usar Gatsby depende en gran medida de su visión de su negocio y de sus capacidades de desarrollo internas.

Si tiene un equipo que se siente cómodo con las tecnologías relacionadas con Gatsby, y especialmente si ya tiene un sistema de administración de contenido que le encanta, usar Gatsby para su tienda de comercio electrónico es una excelente opción. Las tiendas que son muy complejas o que agregan nuevos productos con frecuencia deben analizar más de cerca los pros y los contras antes de lanzarse.

1. ¿Quieres un sitio estático, como un simple sitio web o blog personal?

"Estático" no significa que el contenido no sea interactivo o que nunca cambie. Pero los sitios estáticos son una excelente opción para sitios web simples con mucho contenido que no cambia con frecuencia. Si bien técnicamente no es necesario tener un CMS para administrar este contenido, se recomienda enfáticamente facilitar el trabajo con ese contenido.

2. ¿Tu sitio es complejo?

Los sitios muy complejos con una gran cantidad de datos cambiantes y piezas en movimiento pueden ralentizarse al aumentar los tiempos de construcción. Además, si su sitio depende de datos que no se recuperan hasta que se procesa la página, perderá los beneficios de una página generada estáticamente.

3. ¿Ya tienes rutas generadas dinámicamente?

Si tiene rutas generadas dinámicamente en su sitio, no obtendrá los beneficios de las páginas generadas estáticamente si no las conoce en el momento de la creación.

Conclusión

Gatsby es muy popular entre los desarrolladores en este momento, y por una buena razón. A los desarrolladores les encanta React, en el que se basa Gatsby, y hay muchos recursos disponibles tanto en React como en Gatsby. También es muy flexible y ampliable, y cuando se combina con un sistema de administración de contenido autónomo, puede ser una forma rápida y poderosa de entregar contenido.

Gatsby y generadores de sitios estáticos similares también están comenzando a ser populares para las tiendas de comercio electrónico, pero ese es un caso de uso un poco más complejo. Sugerimos profundizar realmente en los requisitos y capacidades antes de lanzarse. Sin embargo, para el tipo correcto de tienda con el equipo correcto, Gatsby puede presentar hermosa y rápidamente una tienda rica en contenido con un backend de comercio electrónico estable y seguro.