Gatsby JS es un framework basado en React y GraphQL en el cual podemos crear sitios web y aplicaciones. Cuenta con un portal donde podemos encontrar algunos plugins que nos ayudan en la construcción. Por defecto, gatsby cuenta con performance, escalabilidad y seguridad.

Ahora, nos preguntaremos: ¿cómo puede brindarnos estos beneficios por default? Al momento de compilar nuestro sitio web, Gatsby obtiene los datos y genera las páginas. Al entrar en nuestro sitio, Gatsby entrega contenido estático y de esta manera podemos ver la velocidad de carga que tiene nuestro website.

Cuando nuestro website este listo para producción, podemos realizar la publicación fácil y en tiempo record. Entre los sitios que hemos probado se encuentra:

NetliFy

Netlify es una empresa de computación en la nube con sede en San Francisco que ofrece servicios de alojamiento y backend sin servidor para aplicaciones web y sitios web estáticos.

Sus características incluyen la implementación continua de Git en Netlify Edge, la infraestructura de red de entrega de aplicaciones global de la compañía, manejo de formularios sin servidor, soporte para funciones AWS Lambda, e integración completa con Let’s Encrypt. Ofrece planes gratuitos y de pago. (Let’s Encrypt es una autoridad de certificación sin fines de lucro administrada por Internet Security Research Group (ISRG) que proporciona certificados X.509 para el cifrado de seguridad de la capa de transporte (TLS) sin cargo. Se lanzó el 12 de abril de 2016.)

Algunos clientes de Netlify incluyen Google, Facebook, Verizon, NBC, Samsung, Nike, Cisco, Atlassian, LiveChat, Unilever, TriNet, Loblaw, Wieden + Kennedy, HashiCorp, Vue.js, Citrix, Peloton, Kubernetes, Lodash, Smashing Magazine y Sequoia Capital.

Gatsby Cloud

Gatsby Cloud es una infraestructura en la nube personalizada que le da a un sitio Gatsby: almacenamiento en caché inteligente y compilaciones incrementales verdaderas para llevar la velocidad y el rendimiento a un nivel completamente nuevo.

AWS Amplify

AWS Amplify es un conjunto de herramientas y servicios que permite a los desarrolladores web móviles y front-end, crear aplicaciones de pila completa seguras y escalables, impulsadas por AWS. Con Amplify, es fácil crear flujos de incorporación personalizados, desarrollar experiencias habilitadas por voz, crear feeds en tiempo real con tecnología de inteligencia artificial, lanzar campañas dirigidas y más. Independientemente del caso de uso, AWS Amplify lo ayuda a desarrollar y lanzar excelentes aplicaciones que adorarán a sus clientes.

AWS Amplify incluye un marco de código abierto con bibliotecas centradas en casos de uso y una potente cadena de herramientas para crear y agregar funciones basadas en la nube a su aplicación, y un servicio de alojamiento web para implementar aplicaciones web estáticas.

GraphQL

GraphQL es un lenguaje de consulta de datos de código abierto para API, y un tiempo de ejecución para completar consultas con datos existentes. GraphQL fue desarrollado internamente por Facebook en 2012 antes de ser lanzado públicamente en 2015.

El 7 de noviembre de 2018, el proyecto GraphQL se trasladó de Facebook a la recientemente establecida GraphQL Foundation, alojada por la organización sin fines de lucro Linux Foundation. Desde 2012, el aumento de GraphQL ha seguido la línea de tiempo de adopción establecida por Lee Byron, el creador de GraphQL, con precisión. El objetivo de Byron es hacer que GraphQL sea omnipresente en todas las plataformas web.

Gatsby viene integrado con GraphQL que nos proporciona datos a nuestro sitio. ¿Cómo vemos esto aplicado en nuestro sitio? Cuando queremos mostrar una galería de imágenes que tenemos en nuestro proyecto. En nuestra página mediante un query (query o consulta de búsqueda es un término informático que se utiliza para hacer referencia a una interacción con una base de datos) podemos obtener las imágenes y su información.

JAMSTACK – JavaScript API MarkDown

JAMstack es una nueva arquitectura para construir app y sitios web que entrega un mejor rendimiento, altos niveles de seguridad, bajos costos en escalamiento y una mejor experiencia en el desarrollo. Al generar las páginas en tiempo de contrucción y no en tiempo de ejecución, se ve la ganancia al poder entregar un contenido rápido.

Nuestro primer proyecto

Antes de iniciar a crear nuestro proyecto debemos tener instalado NodeJS:

Iniciemos con la instalación de Gatsby.

Desde nuestro terminal ejecutamos el comando:

npm install -g gatsby-cli

Una vez instalado Gatsby procedemos a crear nuestro primer proyecto.

Ingresamos el siguiente comando:

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Donde gatsby-site es el nombre del proyecto que hemos creado. Lo pueden reemplazar por el nombre de su proyecto.

Podemos entrar al proyecto con el siguiente comando:

cd gatsby-site

Ahora vamos a iniciar nuestro proyecto para luego verlo desde el navegador de nuestra preferencia con el siguiente comando:

gatsby develop

Al finalizar la ejecución del comando podemos accesar a nuestro sitio a través del link: https://localhost:8000

Uno de los puntos a resaltar es que al realizar cambios en nuestras páginas, los podemos ver rápidamente ya que cuenta con un live reload.

Para generar nuestro sitio para producción utilizamos el comando:

gatsby build

Si desean probar el sitio productivo localmente pueden utilizar el comando:

gatsby serve

Cuentanos ¿qué te pareció este pequeño tutorial? Si tienes alguna consulta puedes contactarnos con confianza.