¿Qué es Gatsby y por qué es hora de subirse al tren del bombo?

Los marcos van y vienen, y aunque Gatsby eventualmente puede derivar como lo hace la tecnología, los aumentos de rendimiento y productividad son argumentos sólidos para sumergirse de inmediato.

Espera, ¿qué es Gatsby?

Gatsby es un marco de código abierto y gratuito basado en React que ayuda a los desarrolladores a crear sitios web y aplicaciones increíblemente rápidos.

Su énfasis (lo explicaré más adelante). Me gusta describirlo como Create React App con esteroides, donde es una manera fácil de iniciar una aplicación React y concentrarse en ser productivo con las partes verdaderamente diferentes de su aplicación. En esencia, es una aplicación Webpack glorificada, donde todo se basa en la misma canalización de Webpack que ha luchado por escribir y comprender completamente hasta el día de hoy (o tal vez solo soy yo).

Sin embargo, lo bueno es que lo que genera es un sitio web estático (archivo HTML simple) con su aplicación renderizada previamente para una entrega óptima. Esto significa que esencialmente puede ejecutarse en cualquier lugar, como simplemente descargarlo en S3 y servirlo como una página web estática o, incluso más fácil, hacer que Netlify lo compile y lo entregue por usted.

Todo esta en los guiones

Gatsby es una de las muchas herramientas disponibles que admite la arquitectura JAMstack. Para los que no están familiarizados, JAM significa Javascript API y Markup, o prácticamente un sitio web HTML estático que utiliza javascript para hacer que suceda la magia.

Las aplicaciones JAMstack tienen muchos beneficios desde el primer momento, que incluyen:

  • Fácil de alojar
  • Barato para alojar
  • Se carga muy rápido (la mayoría de las veces)

Esto significa que, por lo general, la mayoría de las veces, tendrá un sitio rápido que no le costará mucho dinero tanto para alojar como para mantener.

¿Suena un poco familiar?

Es fácil comparar esto con Rails, como escucho a menudo de otros en mi equipo, y con razón. ¡Hay mucha magia detrás de escena en Gatsby!

Pero a menos que se esté apoyando exclusivamente en complementos y temas (lo cual está bien), al final del día, todavía está creando una aplicación React como lo haría en cualquier otro lugar. Su aplicación puede casi ser portado a cualquier otro marco (aparte de la parte fuentes de datos y la generación de la página). Los componentes son componentes, los estilos son estilos.

const Nav = () => { return ( A normal nav component in a normal Gatsby app. ) }

Gatsby tiene opiniones sobre muchos aspectos, pero esas opiniones en su mayoría quedan fuera de la idea de que todavía estás creando una aplicación de paquete web y esas convenciones son del paquete web y la configuración detrás de él, no necesariamente Gatsby.

Entonces, ¿qué lo hace tan genial?

Literalmente arranca en menos de un minuto

Seriamente. Hacer girar un nuevo sitio de Gatsby es la definición literal de todos esos artículos de cebo de clics que dicen que puedes hacer algo en 5 minutos. Instale la CLI y estará a 3 comandos de su aplicación creada de forma local o estática.

Por ejemplo, si desea iniciar un nuevo proyecto básico con Sass:

$ gatsby new my-cool-gatsby-project //github.com/colbyfayock/gatsby-starter-sass $ cd my-cool-gatsby-project $ yarn develop

Una comunidad de principiantes proporciona un punto de entrada fácil a su nueva aplicación (o todo lo que desea).

Nota: todo "menos de un minuto" depende del tipo de conexión en la que se encuentre, ya que deberá esperar a que las dependencias se descarguen e instalen.

Reunirlo todo en la malla de contenido

Uno de los conceptos detrás de Gatsby es la idea de la "malla de contenido" y Gatsby es la solución para unirlo todo. Muchas aplicaciones, y cada vez más, se están construyendo con la arquitectura JAMstack, lo que ayuda con la idea de que podemos obtener la mayor parte de nuestro contenido de tantos lugares como queramos y llevarlo a una aplicación de manera eficiente.

Cuando todo esté dicho y terminado, puede extraer datos de muchas fuentes en una aplicación compilada estáticamente. Eso es realmente rápido. ?

¡Aumento de rendimiento gratuito!

De inmediato, obtiene su configuración de paquete web sobrealimentado que incluye división de código, búsqueda previa, estilos en línea, minificación de activos y un montón de otras grandezas. Actualice eso fácilmente con una gran cantidad de complementos que son fáciles de configurar, como configurar su aplicación como una PWA (aplicación web progresiva) y proporcionar la capacidad para el modo fuera de línea

Hay muchas palabras de moda allí, pero al final del día, eso significa que su sitio web debe ser ágil basado en la mayoría de las mejores prácticas que optimizan todos los activos de su sitio para la velocidad y la entrega, al mismo tiempo que lo hacen lo más accesible posible al transpilar para navegadores más antiguos y asegurarse de que las conexiones lentas no estén desperdiciando recursos valiosos. Es difícil de confirmar como una estadística sólida, pero Kyle Mathews (Fundador de Gatsby) afirma que los sitios de Gatsby son 2-3 veces más rápidos que tipos de sitios similares.

¡Productividad incrementada!

Ya no tiene que preocuparse por las complejidades de asegurarse de que su aplicación funcione reescribiendo y ajustando la configuración de su paquete web a las nuevas mejores prácticas para cada nueva aplicación que arranque. Gatsby hace todo esto por ti. Le permite concentrarse en los bits de importación que hacen que su aplicación sea especial, no en el andamiaje.

Esto se da un paso más allá con los complementos de Gatsby y la adición de Temas. Los temas no son lo que esperarías en el sentido tradicional, o lo que esperarías de Wordpress, pero brindan una forma de abstraer cualquier parte de tu aplicación Gatsby para que puedas reutilizarla de aplicación en aplicación.

¿Tiene una biblioteca de componentes centrales que usa siempre? Conviértalo en un tema. ¿Tiene una configuración particular para el abastecimiento de datos que no desea reescribir cada vez? Conviértalo en un complemento. Poder abstraer estas piezas clave de su aplicación le ahorra tiempo y estrés en cada nuevo proyecto que desarrolla, sin mencionar la capacidad de mantener esas piezas en un solo lugar, corrigiendo errores y mejoras con una simple actualización del paquete.

Gran comunidad

El propio Gatsby ya tiene una comunidad bastante grande, pero además de eso tienes Webpack y React, que han existido por un tiempo. React es el marco de interfaz de usuario más popular en este momento, lo que facilita mucho la depuración a través de una simple búsqueda en Google. Es difícil encontrar un problema con el que eres el primero y el único con el que te topas.

Si tiene una pregunta de Gatsby en particular, sus problemas de Github están llenos de personas dispuestas a ayudarlo a depurar o abordar el siguiente error. Todo lo que te piden es que les proporciones cortésmente una forma de reproducirse, ¡lo que hace que sea más fácil para ellos ayudarte en primer lugar!

Amigo de Hackerman

¿Le gustaría arremangarse y modificar la tubería usted mismo? Gatsby proporciona formas fáciles de parchear el procesamiento, ya sea que se conecte al ciclo de vida de la compilación o que modifique la configuración del paquete web. Esto permite que el núcleo de su aplicación sea tan fácil o avanzado como desee, aunque si es tan avanzado, ¡tal vez ayude a escribir uno o dos complementos!

Quizás no sea tan bueno ...

La construcción rápida produce más errores

Debe esperar encontrar algunos inconvenientes aquí y allá al mantenerse en lo último y lo mejor, después de todo, es un software de código abierto que se desarrolla para algo más que su sitio individual.

El equipo de Gatsby se ha estado construyendo muy rápido, lo cual es increíble, pero moverse rápido tiende a pasar por alto las cosas a medida que se construyen. Afortunadamente, están comenzando a impulsar las pruebas automatizadas para ayudar a fortalecer el código y están tratando intencionalmente de evitar apresurar el trabajo para abordar este tipo de inquietudes.

Solo asegúrese de probar minuciosamente las actualizaciones de su paquete y no tenga miedo de degradar y bloquear la versión de su paquete si tiene problemas.

Los sitios estáticos son de primera clase, no aplicaciones web

Gatsby se plantea como una solución integral para aplicaciones estáticas y no estáticas por igual, pero ¿lo es? El soporte para rutas solo para clientes requiere un complemento o un ajuste de creación de página, lo cual está bien, pero su tono sobre los problemas tiende a sugerir que no siempre están igualmente enfocados en los dos.

Realmente, el único argumento aquí es ¿por qué usarías Gatsby en lugar de Create React App para ese caso de uso? Aunque puede que no sea de primera clase, sigue siendo bastante funcional con una ventaja de los beneficios estándar subyacentes de Gatsby, pero claramente los errores y las características no se priorizarán para alcanzar ese objetivo.

¡Pruébalo ya!

Mi opinión o la de cualquier otra no importa hasta que la pruebes. En el peor de los casos, literalmente perdió 5 minutos entre la instalación de las dependencias y la eliminación de la carpeta con el proyecto, lo que en una nota positiva es una experiencia de aprendizaje. En el mejor de los casos, acaba de descubrir una herramienta increíble que le ayudará a hacer grandes cosas.

¡Ve a construir, experimenta y comparte las grandes cosas que haces!

Editar: Se cambió "ralentizar" a "evitar apresurarse" para aclarar la intención de la declaración, ya que no están ralentizando la cantidad de trabajo real que se está realizando, sino tratando de tener más cuidado con él.

¡Sígueme para obtener más Javascript, UX y otras cosas interesantes!

  • ? Sigueme en Twitter
  • ? ️ Suscríbete a mi Youtube
  • ✉️ Suscríbete a mi boletín

Publicado originalmente en //www.colbyfayock.com/2019/09/what-is-gatsby-and-why-its-time-to-get-on-the-hype-train