¿Qué es Gatsby JS?

Bienvenido! En este artículo vamos a aprender cosas básicas sobre Gatsby JS, qué es y por qué lo usaría.

Así que vamos a empezar con la pregunta, ¿Qué es Gatsby?

En pocas palabras, Gatsby es un generador de sitios estáticos.

¿Qué significa eso?

Vale bien, y ¿Qué es un generador de sitios estáticos?
La parte de sitio estático significa que lo que Gatsby producirá para nosotros son archivos HTML estáticos que cargamos en un servidor.

Ahora bien, esto funciona de manera diferente a como funcionan muchos sitios web donde se visita un sitio web y tiene que ir a consultar una base de datos o hacer algo de programación en el propio servidor con el fin de servir sus páginas web.

Así que Gatsby va a romper esa convención y va a tener todas las cosas ya preconfiguradas de antemano y sólo va a servir eso.

Es importante señalar que los sitios estáticos no significan que no sean interactivos o no sean dinámicos.

Por lo tanto, podemos cargar JavaScript en los archivos HTML que Gatsby sirve, así como hacer que las llamadas a la API hagan interacciones y construyan sitios increíblemente ricos e inmersivos, aunque sean estáticos en su naturaleza de sólo ser archivos HTML servidos sin que se ejecuten lenguajes de programación del lado del servidor, como puede ser Java o Php.

Gatsby también es un generador. Esto significa que Gatsby es en realidad una herramienta que se ejecuta en nuestro ordenador de manera más común, aunque puedes ejecutar Gatsby en un servidor, y va a generar contenido para ti.

En la configuración común que utilizo aquí, ejecutamos Gatsby localmente en nuestro ordenador cuando estamos construyendo un sitio y luego generamos el producto final terminado que Gatsby devolverá en forma de ficheros html y js, que es un sitio estático de Gatsby, y de nuevo esto incluirá imágenes HTML CSS JavaScript todas las cosas que necesitamos para que nuestro sitio funcione, Gatsby lo generará para nosotros así que queremos pensar en Gatsby como una herramienta que nos ayudará a construir un producto final.

Para hacer toda esta generación Gatsby va a usar el Node JS. Node se ejecutará en un entorno de desarrollo en su propio ordenador. Sin embargo la vista final cuando envíes una vista de Gatsby en vivo porque es estática y no necesitará correr Node JS en el propio servidor.

Está usando node para ayudar a generar los archivos como parte de su sistema de herramientas, pero el resultado final no requiere que Node se ejecute en el lado del servidor.

Gatsby JS utiliza GraphQL

Una de las grandes cosas de Gatsby es que va a utilizar el lenguaje de consulta GraphQL para obtener datos de cualquier lugar.

Si no estás familiarizado con GraphQL, es una evolución de cómo hacer las llamadas a la API más simples y eficientes. Y es una herramienta realmente grandiosa en la que probablemente vas a disfrutar entrar si no la conoces ya.

La parte más emocionante de esto es que podemos meter nuestros datos en un sitio de Gatsby desde cualquier lugar!

Podríamos usar archivos de reducción, podemos acceder a bases de datos, podríamos engancharnos a CMS comunes como WordPress y otros CMS, tirar el contenido desde ficheros planos o incluso sólo desde archivos CSV.

Debido a que tenemos Node corriendo en nuestro entorno de desarrollo y tenemos este lenguaje GraphQL, tenemos un enorme rango de habilidades de lo que podríamos utilizar para poder llevar datos a Gatsby.

Es importante recordar que Gatsby no va a manejar nuestros datos por nosotros, sino que hará que los datos sean llevados a Gatsby y generará el sitio a partir de esos datos.

Los usos de Gatsby reaccionan por las plantillas
Gatsby también usa React y CSS, con los que espero que estés familiarizado. React se va a utilizar para todas las plantillas y CSS para el estilo.

Así que, GraphQL traerá nuestros datos, React se encargará de cómo debe verse la plantilla y el estilo es CSS. Luego, finalmente todo será exportado a ese último y súper rápido sitio estático de Gatsby.

Gatsby tiene un rico ecosistema de plugins
También quiero mencionar que Gatsby está construido con una arquitectura de plugins y este es un gran sistema.

Porque lo que estamos sirviendo es un sitio estático y cómo interactuamos con JavaScript y otras cosas puede ser un poco complicado. Así que es muy agradable que podamos sacar este complejo código en plugins y que podamos confiar en un enorme ecosistema de otros autores de plugins para hacer algo del trabajo pesado con cosas comunes para nosotros.

Esta arquitectura de plugins es una gran parte de Gatsby y lo que lo hace tan popular y poderoso.

¿Qué es Gatsby?

Gatsby es un generador de sitios estáticos que utiliza GraphQL para obtener datos, React para plantillas y tiene una arquitectura de plugin.

¿Por qué usar Gatsby?

Ahora hablemos de ¿Por qué usar Gatsby?

En una simple frase, usas Gatsby por su velocidad, seguridad y mejor experiencia de usuario y de desarrollo.

Podría decirse que una de las mayores ventajas que obtienes con Gatsby, porque está generando un sitio estático, va a ser la velocidad.

Va a ser mucho más rápido que muchas de las alternativas, incluso comparado con los sitios en caché que usan WordPress y cosas así, porque ese sitio estático es realmente difícil de superar en términos de velocidad y rendimiento.

También debido a la naturaleza estática y al envío de archivos HTML, esto será inherentemente más seguro.

No hay una base de datos en vivo para hackear o acceder. No hay datos de usuarios que se vayan a almacenar en el servidor con el sitio de Gatsby. Así que incluso si alguien fuera capaz de hackear el servidor en sí, sólo tendrá acceso a los archivos HTML y podrá hacer mucho menos daño que si tuviera acceso, por ejemplo, a un sitio de WordPress o tuviera acceso a los datos del usuario o a la información de la tarjeta de crédito del comprador y todo ese tipo de cosas.

Así que vamos a tener enormes ganancias de seguridad cuando trabajemos con Gatsby.

Finalmente, la tercera gran ganancia con Gatsby es la mejora de la experiencia del desarrollador.

Estoy muy contento de que esto sea algo importante en la comunidad de desarrolladores de hoy en día. Puede ser realmente agotador y molesto para los desarrolladores trabajar con productos anticuados.

Una de las cosas buenas de trabajar con Gatsby es que tienes un entorno de desarrollo moderno. Las herramientas son simples y robustas. Los lenguajes son modernos y limpios. En general, es un entorno realmente genial para trabajar. Eso se extiende también a la comunidad de otros desarrolladores.

Si eres un desarrollador esto debería ser súper claro para ti y emocionante. Si no eres un desarrollador y estás aprendiendo sobre Gatsby a un alto nivel, recuerda que esto es algo que realmente necesitas valorar en tus proyectos: la experiencia general de los desarrolladores.

Gatsby JS es Código Abierto con un equipo de desarollo pagado, por lo que el desarrollo y evolución está más que garantizado.
Lo último que hay que recordar de todo esto es que Gatsby tiene un equipo sólido, una comunidad de código abierto y una gran documentación.

Gatsby es un proyecto de código abierto que tiene grandes logros en términos de su capacidad de crecimiento y la gente contribuye a él. Además es gratis! Eso no es poca cosa.

Sin embargo, a diferencia de algunas comunidades de código abierto, Gatsby también tiene un equipo de profesionales pagados que están ahí para ayudar a que el proyecto de código abierto crezca y florezca.

Esto es algo genial si estás considerando invertir en una tecnología que podría no tener el apoyo a largo plazo, probablemente no tengas que preocuparte por eso con Gatsby.

Documentación de Gatsby

Además, hay una gran documentación y eso es muy útil cuando se trabaja con una herramienta para saber que se le apoyará en la documentación. El equipo de Gatsby parece tomarse esto en serio y hace un gran trabajo con ello.

Una rápida revisión de Gatsby JS

Así que, dicho esto, hagamos un rápido repaso de todo lo que hemos aprendido:

Gatsby es un generador de sitios estáticos que bajo el capó utiliza Node, GraphQL y React.
Sus principales beneficios son la seguridad de la velocidad y la experiencia del desarrollador.
Gatsby tiene una estable y creciente comunidad de desarrolladores y autores de plug-ins