Por qué debería usar GatsbyJS para crear sitios estáticos

Gatsby ha ido creciendo con el tiempo y me alegra verlo en uso en una gran cantidad de sitios como sitios de marketing, blogs y páginas estáticas generadas.

Lo que me atrajo en primer lugar fue la experiencia de desarrollo sin problemas, los resultados increíbles y la cálida comunidad. Profundizar un poco en su funcionamiento, el ecosistema y también discutir su potencial con más desarrolladores me hizo pensar en lo poderoso que es, mucho más de lo que había supuesto inicialmente.

Este artículo busca hacerle ver por qué ha ganado popularidad. Si ya lo está utilizando, obtendrá una mejor idea de las funciones que podría utilizar para una experiencia de desarrollo aún mayor.

Tenga en cuenta que esto es lo que funciona para mí, y solo comparto mis puntos de vista. De ninguna manera te estoy diciendo que tu configuración actual que funciona para ti es obsoleta, solo trato de compartir cómo Gatsby ha sido genial para mí.

¿Qué es Gatsby?

Es otro generador de sitios estáticos como Hugo, Jekyll, etc. Entonces, ¿qué lo hace especial? ¿Por qué estamos hablando específicamente de eso?

Gatsby se puede utilizar para crear sitios estáticos que son aplicaciones web progresivas, siguen los últimos estándares web y están optimizados para ofrecer un alto rendimiento. Hace uso de las últimas y populares tecnologías, incluidas ReactJS, Webpack, GraphQL, ES6 + JavaScript y CSS modernos.

Esto significa que muchos desarrolladores pueden participar sin mucha curva de aprendizaje, ya que ya saben o al menos han usado una pieza de esta pila tecnológica en la que se basa Gatsby.

Además, me gustaría agregar algo que noté al trabajar con desarrolladores que no tenían idea sobre los últimos marcos y bibliotecas y que solo estaban acostumbrados a la forma tradicional de crear sitios HTML, JavaScript y archivos CSS.

Aproximación al desarrollo

Por un lado, tenemos usuarios que esperan una experiencia fluida similar a la de una aplicación en la web. El otro lado son los desarrolladores, acostumbrados a que los sitios tengan páginas en las que cada uno sea archivos HTML o tal vez usen algunas plantillas, en la base, sitios como páginas con enlaces internos .

Si está comenzando con alguno de los últimos marcos, tomemos el caso de React. Podría tener una aplicación en funcionamiento con una configuración mínima con create-react-app. Pero si echa un vistazo a la estructura del proyecto, puede que no tenga mucho sentido para un novato o incluso para algunos desarrolladores que vienen de otras pilas de tecnología. El patrón es bastante diferente de lo que ha visto antes.

Es porque sin una configuración adicional su objetivo es crear aplicaciones de una sola página, SPA. Para agregar enrutamiento, páginas u optimización para SEO, requerirá más herramientas y configuración.

Eso no parece muy conveniente cuando quieres sitios estáticos, ¿verdad? Así que aquí tenemos a Gatsby, optimizado para este caso de uso específico. Esto podría resultar más intuitivo para los desarrolladores, ya que hay páginas creadas a partir de componentes que siguen la idea fundamental de que los sitios son páginas con enlaces internos.

Caracteristicas

Componentes

Los componentes son una característica clave de React, y ahora son un patrón de diseño web comúnmente seguido. Con el nivel actual de complejidad de las interfaces de usuario, es casi imposible escribir código mantenible en páginas largas de HTML o usar motores de plantillas y esperar consistencia.

En su lugar, construimos componentes reutilizables y luego los usamos para construir vistas. De esta manera tenemos módulos separados que manejan cosas separadas, y es más fácil de administrar y mantener. El componente solo contiene toda la información que requiere, y Gatsby, dado que usa React, sigue el mismo patrón.

El diseño atómico es un enfoque que es una buena forma de manejar interfaces complejas, y podríamos ponerlo en práctica aquí con los componentes de React. Brad Frost tiene una publicación de blog increíble que describe qué es y cómo funciona.

Empaquetado de paquetes web y las últimas herramientas

Webpack crea paquetes optimizados y minimizados de HTML, JavaScript y CSS. Cuando está preconfigurado con Babel y más complementos, le permite usar los últimos ES6 + JavaScript y GraphQL.

Guinda del pastel: tenemos la recarga en caliente y la división de código incorporada, lo que brinda una mejor experiencia de desarrollo y un mejor rendimiento del sitio. Esto tiene como objetivo hacer que el desarrollador escriba una configuración mínima de herramientas y se centre más en el desarrollo real del sitio.

Complementos de Gatsby, iniciadores y paquetes React

Puede usar cualquiera de los paquetes que ya ha estado usando con NPM, particularmente los de React, ya que se basa en lo mismo. Pero eso no es todo: hay una gran cantidad de complementos, iniciadores y transformadores en constante crecimiento de la comunidad de Gatsby.

Casi nunca llega al punto en el que realmente tiene que construir su propia herramienta o módulo, la comunidad ya ofrece una gran cantidad para satisfacer todas las necesidades.

Con estos, Gatsby se puede ampliar con funciones adicionales. Por ejemplo, un par de ejemplos incluyen imágenes receptivas, funcionalidad fuera de línea, datos de origen de CMS y formatos de marcado de datos, adición de servicios de terceros (Google Analytics, etc.), etc.

Estilismo

Una vez más, las interfaces de usuario complejas significan patrones de estilo complejos, y es solo cuestión de tiempo antes de que las hojas de estilo se inflen. Obtiene problemas de especificidad, se desplaza por cientos de líneas de código tratando de averiguar cosas y termina usándolo !importantpara ver realmente el estilo que agregó.

Gatsby tiene soporte para bibliotecas SCSS, CSS-in-JavaScript, lo que le permite administrar estilos mejor y con facilidad. Incluso la configuración para esto es bastante fácil de manejar con la instalación de un complemento o paquete.

Imágenes receptivas

Cambiar el tamaño de las imágenes para que tengan capacidad de respuesta en diferentes dispositivos, carga diferida, uso srcsetsy picture… Ya suena tedioso cuando se debe hacer manualmente.

Aunque es un requisito para el rendimiento y las interfaces optimizadas similares a las de las aplicaciones en estos días, no vemos muchas herramientas a las que podamos acceder y usar directamente.

Mientras tanto, en Gatsby con solo un complemento, particularmente el gatsby-plugin-sharp, puede generar directamente imágenes fluidas, agregar filtros, cambiar formatos, desenfocar al cargar y mucho más. Esto ahorra mucho trabajo y tiempo al cambiar el tamaño de las imágenes manualmente y escribir código repetitivo explícito para imágenes receptivas. También le brinda un mejor rendimiento junto con una experiencia de usuario más fluida.

Experiencia similar a una aplicación

Con el aumento de rendimiento y las funciones para agregar a la fluidez de la experiencia del usuario, Gatsby apunta a una experiencia completa similar a una aplicación que toma prestada de las PWA completas. No hay recargas entre páginas cuando se usa gatsby-link en lugar de hipervínculos, y la aplicación aún parece fluida y eficaz gracias a las imágenes de carga diferida y la división de código.

Para los sitios que siguen los estándares y que también desea que tengan un buen rendimiento, tenemos muchas cosas que hacer y guías que seguir: minificación y agrupación, almacenamiento en caché del navegador y scripts o archivos de carga asincrónica, etc. Cuando trabaja con un marco como React, tiene más cosas de las que preocuparse a pesar de que resuelve un par de problemas: división de código, SEO, enrutamiento si es necesario, imágenes receptivas y la lista continúa.

Gatsby tiene como objetivo resolver todos estos problemas, con menos tiempo dedicado a las herramientas, la configuración y el entorno y más tiempo para diseñar y desarrollar el sitio.

El ecosistema de Gatsby

Complementos

Gatsby se creó para ser extensible y flexible; el uso de complementos es una forma de hacerlo. Se pueden instalar directamente y usarse para una variedad de funcionalidades que incluyen hacer que el sitio esté fuera de línea, agregar Google Analytics, agregar soporte para SVG en línea, lo que sea, la lista es casi interminable.

De los diferentes tipos de complementos de Gatsby, los complementos de gatsby-source en particular obtienen datos de una fuente local o remota y permiten que se puedan utilizar a través de GraphQL. Estas fuentes pueden ser CMS como Wordpress, Drupal, Plone, rebajas locales, XML o archivos, bases de datos, API y formatos de datos como JSON, CSV.

Esto implica que casi cualquier cosa se puede utilizar como fuente para trabajar con Gatsby y generar sitios estáticos.

Nota: GraphQL es un lenguaje de consulta para API que funciona con la filosofía de pedir exactamente lo que necesita. A diferencia de las API REST, no busca puntos finales para proporcionar sus datos y procesarlos a partir de la estructura que se proporciona a partir de ellos, sino que solicita lo que desea y utiliza directamente estos datos. Lea más sobre cómo funciona y cómo usarlo en sus documentos.

Después de la instalación, algunos complementos se pueden usar de inmediato simplemente enumerándolos gatsby-config.jsy otros configurados con un objeto de opciones.

Ve a ver la biblioteca de complementos de Gatsby, ya tiene una gran cantidad de complementos y la comunidad activa aún está agregando más.

Entrantes

Básicamente, estos son sitios repetidos de Gatsby que le ayudan a iniciar el desarrollo rápidamente según el tipo de sitio que sea. Le ayudan a trabajar directamente en el desarrollo de un sitio, la configuración y las características básicas que ya necesita. Lo que significa, menos tiempo en las herramientas, más tiempo para el desarrollo.

Los complementos de Gatsby a menudo tienen sus correspondientes iniciadores que muestran o sirven una forma rápida de comenzar a usarlos. También actúan como una referencia que cubre todas las características y configuraciones de presentación del complemento en uso.

Los temas de Gatsby son una característica aún en desarrollo que le permite empaquetar y reutilizar estas funcionalidades y patrones similares a lo que se ve en los principiantes. Lea más sobre lo que se está gestando en el blog de Gatsby.

Sitios estáticos

En primer lugar, echemos un vistazo a cómo funciona Gatsby internamente. A diferencia de los SPA que realizan solicitudes de API mientras ejecuta la aplicación, Gatsby realiza toda la búsqueda de datos, incluida la obtención de datos de archivos locales, durante el tiempo de compilación. Todos estos datos se utilizan para generar archivos HTML, JavaScript y CSS estáticos. Esta representación estática es lo que hace que las cosas funcionen más rápido.

Eso fue mucho sobre Gatsby, su ecosistema y cómo te ayuda a crear sitios estáticos increíbles. Pero, ¿por qué querríamos sitios estáticos? ¿No suena como un paso atrás de los dinámicos?

  • No requieren una configuración compleja del servidor con bases de datos, mantenimiento y no tienen problemas de escala.
  • Los datos están completamente seguros. Los CMS y las API tienen características privadas, pero los datos aún están presentes en el servidor y pueden explotarse. Gatsby solo toma los datos requeridos para mostrar desde la fuente y los datos privados o seguros ni siquiera están presentes en la compilación final. ¿Cuál es la más segura posible?
  • En lugar de depender de los servidores para generar páginas dinámicamente, renderícelas previamente en la construcción y utilice CDN para una experiencia increíblemente rápida y fluida para los usuarios de todo el mundo.
  • Gatsby hace renderizado estático. Lo que hace que el contenido esté disponible como HTML y optimizado para motores de búsqueda, sin un tiempo de carga inicial largo.

¡Pruébalo!

Eso debería haber arrojado algo de luz sobre qué es todo el revuelo que lo rodea y por qué algunas empresas importantes eligen usarlo en sus sitios. El escaparate del sitio de Gatsby parece estar creciendo con muchas adiciones increíbles últimamente.

¡Quizás es hora de que sumerjas las manos y eches un vistazo!

Gracias a CodeSandbox, podemos hacer esto de inmediato, en el propio navegador.

Si desea ejecutarlo localmente, debe consultar el archivo gatsby-cli. Es la forma más rápida y sencilla de empezar. También tienen documentación y tutoriales increíbles para que se sumerja en los sitios de desarrollo en gatsbyjs.org.

Espero que hayas disfrutado este artículo y hayas encontrado que valga la pena. ¡Puedes ver todos mis proyectos en Github o Dribbble y no dudes en contactarme en Twitter!

También te gustaría echar un vistazo a mis otros artículos:

Aplicaciones web progresivas: reduciendo la brecha entre las aplicaciones web y móviles

A menos que haya estado viviendo bajo una roca, probablemente haya oído hablar de las PWA o las aplicaciones web progresivas. Es un tema candente, ¿verdad… medium.freecodecamp.org Hackathon Report: Qué puedes codificar en 30 horas? ¡Bastante!

¿Qué puedes construir en 30 horas seguidas? Como un grupo de estudiantes universitarios de segundo año con una cartera de trabajo creciente ... medium.freecodecamp.org Mes de Código ACM 2k17: Building Moodify

Marzo fue un mes bastante productivo, todo gracias a este importante evento organizado por Association for Computing Machinery, NIT… hackernoon.com