Conociendo Gatsby JS
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? Veamos.
¿Por qué elegir Gatsby JS?
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: Alojamiento y Backend sin Servidor
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: Rendimiento a un nuevo nivel
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: Herramientas y servicios para desarrolladores
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 en Gatsby JS
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.
Introducción a 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.
Creando nuestro primer proyecto con Gatsby
Antes de iniciar a crear nuestro proyecto debemos tener instalado NodeJS. A continuación, te mostramos los comandos que debes ingresar en tu terminal para instalar Gatsby y crear tu primer proyecto:
- Instala Gatsby:
npm install -g gatsby-cli
2. Crea tu primer proyecto. Ingresa el siguiente comando:
gatsby new gatsby-site [https://github.com](https://github.com)/gatsbyjs/gatsby-starter-hello-world
Aquí, ’gatsby-site’ es el nombre del proyecto que hemos creado. Puedes reemplazarlo por el nombre de tu proyecto.
3. Accede al proyecto con el siguiente comando:
cd gatsby-site
4. Inicia tu proyecto, para luego verlo desde el navegador de tu 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
Beneficios de Gatsby en el Desarrollo
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.
Lanzamiento de tu sitio Gatsby
Para generar tu sitio para producción utilizamos el comando:
gatsby build
Si deseas probar el sitio productivo localmente, puedes utilizar el comando:
gatsby serve
¿Qué te pareció este pequeño tutorial? Si tienes alguna consulta o pregunta, no dudes en contactarnos. Esperamos que este artículo te haya proporcionado una buena introducción a Gatsby JS, sus beneficios y cómo puedes empezar a usarlo para tus proyectos de desarrollo web.
