Smashing Podcast Episodio 20 con Marcy Sutton: ¿Qué es Gatsby?

Hoy, estamos hablando de Gatsby. ¿Qué es y cómo encaja en su pila de desarrollo web? Drew McLellan habla con la experta Marcy Sutton para averiguarlo.

Mostrar notas

• gatsby
• Marcy en Twitter
• Sitio web personal de Marcy

Actualización semanal

• “Haz que tus sitios sean rápidos, accesibles y seguros con la ayuda de Google”
  por Dion Almaer
• "Comprender el desarrollo de complementos en Gatsby"
  por Aleem Isiaka
• “Creación de aplicaciones de escritorio diminutas con Tauri y Vue.js”
  por Kelvin Omereshone
• “Eliminar el pánico de las alertas de envío e inventario de comercio electrónico”
  por Suzanne Scacca
• “Transiciones CSS en Vuejs y Nuxtjs”
  por Timi Omoyeni

Transcripción

Drew McLellan: es la ingeniera principal del equipo de relaciones con los desarrolladores de Gatsby. Anteriormente, trabajó en la biblioteca de prueba de accesibilidad axe-core de código abierto y también trabajó como ingeniera de accesibilidad en Adobe. Le apasiona mejorar la web para personas con discapacidades y, a menudo, habla sobre ello en conferencias. En 2016, O'Reilly entregó su premio de plataforma web por un trabajo en accesibilidad.

Drew: También codirige los encuentros de accesibilidad de mujeres de Seattle y NW Tech en una región local. Entonces, sabemos que es una ingeniera calificada y una experta en accesibilidad. ¿Pero sabías que ella quiere enviar el Salto Ángel en un barril? Mis grandes amigos, denle la bienvenida a Marcy Sutton.

Marcy Sutton: Hola.

Drew: Hola. Marcy. ¿Cómo estás?

Marcy: Estoy genial. ¿Cómo estás?

Drew: Estoy muy bien. Gracias. Quería hablarles hoy sobre Gatsby. Porque surgió en una conversación que estaba teniendo en un episodio anterior sobre aprender React con Mina Markham. Me di cuenta de que estaba en peligro de hacer lo típico del hombre en Internet de dar una opinión sobre algo de lo que no tenía experiencia directa. Así que no es así como hacemos las cosas en Smashing.

Drew: Y quiero asegurarme de que cubrimos adecuadamente a Gatsby. Y qué mejor manera de hacerlo que hablando con alguien que lo sabe por dentro y por fuera. Entonces, suponiendo que tal vez haya escuchado el nombre de Gatsby. Pero no tengo idea de dónde encaja en la pila al crear un sitio web. ¿Qué es exactamente Gatsby?

Marcy: Gatsby es un generador de sitios web, actualmente usa React. Pero creará un sitio web estático para usted que luego se rehidratará en una aplicación web React completa. Entonces realmente obtienes lo mejor de ambos mundos con compilaciones rápidas que compilas archivos HTML que se cargarán rápidamente para los usuarios. Y luego obtienes todas estas mejoras con JavaScript para crear aplicaciones web dinámicas realmente interactivas.

Marcy: Entonces, es un espacio realmente emocionante para estar. Y he estado trabajando en el lado del aprendizaje con la documentación y ahora en el equipo de Devrel, estoy enfocado en hacerlo lo mejor posible, conociendo los desafíos de accesibilidad con JavaScript. y solo tratando de arreglarlo de adentro hacia afuera.

Drew: Muchos de nosotros estaremos familiarizados, supongo, con el concepto de un generador de sitios estáticos. Y Gatsby parece encajar ampliamente en ese papel. Pero para mí, parece que va mucho más allá de lo que hacen la mayoría de los SSG. Y la mayoría de los generadores de sitios son independientes del código front-end. Parece que con Gatsby, terminas con el código de Gatsby ejecutándose como parte de tu sitio. ¿Es esa una evaluación justa? Y si es así, ¿qué tipo de cosas está haciendo realmente Gatsby en tu front-end?

Marcy: Sí, diría que la mayor parte de eso es el enrutamiento del lado del cliente. Entonces, Gatsby en este momento está usando un enrutador de alcance debajo del capó. Hace una especie de su propia implementación. Pero esa es la pieza que cuando carga su sitio estático por primera vez, hay archivos HTML allí. Por lo tanto, si el usuario desactiva JavaScript por algún motivo, su sitio aún debería estar allí, aún debe tener contenido.

Marcy: Pero si JavaScript está habilitado, ahí es cuando ocurre este paso de hidratación donde, cuando usa enlaces en su sitio de Gatsby, obtendrá recursos de esa página, por lo que se cargará más rápido. Entonces, todo eso está habilitado con esta capa de JavaScript que te brinda Gatsby. Y más allá de eso, realmente depende de que lo que estés usando en tu sitio termine en ese paquete de JavaScript.

Marcy: Pero para cosas que usan mucha interactividad, como interfaces accesibles, ese es un buen lugar para estar. Para mí, realmente disfruto tener JavaScript disponible en todo momento, y tener mi marcado en un buen lugar. Sé que es una cuestión de preferencia, ya sea que desee que su HTML, su JavaScript y su CSS estén bien acoplados y que haya espacio para variaciones dentro de la construcción de Gatsby.

Marcy: No siempre tienes que usar algo como CSS y JS. Pero en realidad se trata de obtener el poder de esa capa dinámica de JavaScript, disponible para usted mientras está escribiendo su sitio web. No es como este complemento en un archivo separado.

Drew: Cuando pienso en cómo funciona normalmente un generador de sitios estáticos, estoy pensando en el contenido de quizás los archivos Markdown. Y el generador se ejecuta a través de ese contenido y lo fusiona con plantillas y crea decenas, cientos, miles de archivos HTML, que son las páginas de su sitio web. Cuando pienso en un sitio o una aplicación de React, pienso más en la experiencia de una sola página en la que React crea las interfaces sobre la marcha. Entonces, ¿estás diciendo que Gatsby hace ambas cosas? ¿Está creando todas las páginas y también mejorándolas con JavaScript?

Marcy: Lo es, sí. Gatsby usará Node.js en el momento de la compilación, revisará los componentes de React y los compilará en archivos HTML. Lo cual, honestamente, la primera vez que miré a Gatsby no desactivé JavaScript y dije: "Está bien, ¿hay otras páginas aquí? ¿Qué es esto?" Y estaba tan feliz de que Gatsby funcione de esa manera por defecto. Creará archivos integrados a partir de sus componentes de reacción, lo cual es increíble.

Marcy: He explorado enfoques de mejora más progresivos ya que está en JavaScript. Por ejemplo, si desea generar algo mejorado progresivamente para los usuarios, donde si tienen JavaScript desactivado, no desea todo este código roto que asume que JavaScript está allí. Así que hay algunas peculiaridades con él. Pero puede evitar ese tipo de cosas al menos para sus flujos de usuarios principales en los que desea que alguien aún pueda comprar algo, es posible que deba agregar algo de soporte y para esos casos de uso.

Marcy: Pero me ha sorprendido gratamente la forma en que Gatsby implementa eso de forma predeterminada. Entonces, es una elección que hicieron para construir sitios de esa manera, y siempre lo estamos evaluando. ¿Sigue siendo la mejor manera? ¿Qué debemos hacer para dar a nuestros usuarios lo que piden? Por lo tanto, estamos haciendo algunas exploraciones internas, en curso solo para asegurarnos de que Gatsby esté haciendo el mejor trabajo posible en la creación de un sitio web.

Marcy: Por lo tanto, mantener pequeños los tamaños de los paquetes y asegurarse de que para hacer compensaciones por lo que decimos es un código de alto rendimiento con búsqueda previa. Como, ¿tenemos los datos para respaldar eso? Ese es el tipo de cosas que, como defensor de los desarrolladores, me interesan mucho, asegurarme de que lo que empaquetamos y empaquetamos en los sitios web sea realmente necesario y realmente haga el mejor sitio de Gatsby que pueda hacer.

Drew: Mencionaste el rendimiento allí, y hay un gran enfoque en el rendimiento. Ciertamente lo parece por la forma en que se presenta Gatsby. ¿Es esa una característica real de Gatsby o es solo la naturaleza de los sitios web de JAMstack?

Marcy: Creo que puede ser una naturaleza de los sitios web de JAMstack. En última instancia, se reducirá a lo que está empaquetando en su sitio web. Por lo tanto, no importa qué marco o herramienta esté utilizando, aún debemos ser cuidadosos con lo que estamos poniendo en esos paquetes para los usuarios finales. Pero Gatsby realmente tiene como objetivo darte buenos valores predeterminados. No solo por el rendimiento, sino también por la accesibilidad.

Marcy: Pero eso siempre requiere evaluación, siempre tenemos que asegurarnos de que, si hemos agregado algo, siga funcionando. Pero sí, al obtener esa carga útil inicial de archivos estáticos, se cargan rápido. Mucho más rápido que el sitio clásico de WordPress que solía tener. Pero luego mejorarlo con JavaScript. Hay algunas compensaciones allí con seguridad.

Marcy: Pero funciona muy bien, a muchas personas les gustan mucho sus sitios de Gatsby. Por lo tanto, ha sido divertido trabajar en él a tiempo completo y aprender los entresijos de un marco de JavaScript como Gatsby.

Drew: ¿Qué tipo de funciones de rendimiento acaba de implementar Gatsby para acelerar sus sitios?

Marcy: Bueno, con la búsqueda previa de enlaces, este cliente dijo cosas de enrutamiento, diría que es probablemente la más importante. Haciendo que sea realmente fácil generar una aplicación web progresiva. Entonces, al tener algunas capacidades fuera de línea, puede elegir lo que quiera en términos de cosas fuera de línea y de tipo PWA. Pero realmente hacen que eso sea parte de la experiencia inicial, como muchos de los sitios de ejemplo de inicio desde los que puede comenzar, tienen ejemplos del uso de un manifiesto y hacen esa versión moderna de su sitio web.

Marcy: Realmente, es como no tener un código de envío que no necesitas. Eso es una gran parte de eso. Almacenamiento en caché, eso es realmente la búsqueda previa de enlaces. Eso es lo que yo diría que es la pieza más grande.

Drew: Así que aquí es donde el sitio realmente anticipa a dónde irá el usuario. ¿Es tan inteligente como eso o precarga todo en la página o?

Marcy: No, se basa en la interacción del usuario. Por lo tanto, si el usuario se desplaza hacia abajo en el puerto de vista, hay algo de búsqueda previa que sucede allí. Si pasa el cursor sobre los enlaces, estimará que hay una gran posibilidad de que vaya a esa página. Hemos estado hablando internamente, bueno, supongo, de código abierto sobre si esa búsqueda previa también debería ocurrir en el enfoque del teclado, por lo que la intersección de accesibilidad y rendimiento es muy interesante.

Marcy: Hay algunas compensaciones allí, como si un usuario de teclado que no puede usar el mouse y está tabulando a través de cada enlace para navegar, debería realmente obtener contenido para cada uno de ellos porque un usuario de mouse podría ser un poco más selectivo. sobre dónde ponen el cursor del ratón. Entonces, esas conversaciones las encuentro extremadamente fascinantes.

Marcy: Y tratando de pensar en qué datos necesitamos para validar estas suposiciones también. Entonces, sí, ha sido muy interesante observar esos valores predeterminados y qué mejoras podemos hacer y realmente verificar cuántos datos se obtienen. ¿Es eso realmente algo bueno? ¿Solo para acelerarlo un poco? ¿O es lo suficientemente rápido sin eso? ¿Existen soluciones alternativas que podamos usar como parte de la diversión de trabajar en un marco porque podemos evaluar todas esas compensaciones?

Drew: Esto es algo que los usuarios obtienen de forma gratuita en su sitio. Entonces, ¿tienen que hacer algún trabajo para implementarlo?

Marcy: Lo obtienes gratis usando el enlace de Gatsby. Entonces, es un componente que viene con Gatsby y cuando lo usas, genera etiquetas de anclaje. Entonces, su HTML es HTML real y ha aprovechado la plataforma web de esa manera. Pero en sus componentes React, está trabajando directamente con el componente de enlace Gatsby. Y eso tiene todos esos mecanismos para... Mira lo que sea su HREF futuro, para ese enlace de adónde quiere ir e irá y tomará recursos de ese enlace y los precargará.

Marcy: Y es solo interno a su sitio. Por lo tanto, no se apaga e intenta buscar cosas en otros sitios web. Pero parece funcionar bastante bien. Sé que algunos usuarios están buscando activamente formas, como si realmente tuvieras que optar por no participar en algunas de estas cosas. Al menos enrutamiento, sin usar la búsqueda previa. Simplemente usa etiquetas de anclaje regulares. Y luego realmente no obtienes esa funcionalidad. Es bastante fácil usar otra cosa. Pero algunas de las discusiones que estamos teniendo son sobre el enrutamiento del lado del cliente y cómo hacerlo lo mejor posible. Y entonces, ese es un espacio muy interesante también.

Drew: ¿Qué tan cerca tienes que trabajar dentro del ecosistema de Gatsby en términos de si quisiera tener mi propio componente de enlace? ¿Estaría completamente bien, no estaría peleando contra Gatsby para hacer ese tipo de cosas?

Marcy: No, puede colocar los componentes que desee, siempre que funcionen con el tiempo de ejecución de React. Esa es realmente la belleza de esto. Cualquier cosa que puedas poner en una aplicación React, puedes ponerla en una aplicación Gatsby. Incluso hay un complemento previo a React. Entonces, hay algunas alternativas a trabajar con Gatsby. Pero me encanta cómo puedes incorporar lo que sea, los componentes listos para usar que quieras usar o escribir los tuyos propios.

Marcy: Y creo que la flexibilidad es lo que la gente realmente disfruta. Existe la advertencia de que utiliza el tiempo de ejecución de React. Entonces, debe estar de acuerdo con usar reaccionar o usar este complemento previo a React. Pero personalmente, me gusta mucho reaccionar y JSX para trabajar con accesibilidad y plantillas, especialmente con enlaces de React. Entonces, poder usar la cabaña en mi sitio de Gatsby es genial. Me gusta mucho.

Drew: ¿Y cómo es el proceso de creación de un sitio de Gatsby que presumiblemente es un módulo de nodo que puedes instalar y harías una compilación como lo harías con cualquier otro generador de sitios estáticos?

marcy: si Hay una CLI que instala globalmente. Y supongo que es si quieres instalarlo globalmente. Eso es lo que recomendamos, porque luego puede ejecutarlo desde cualquier directorio de su computadora, pero extraerá todo lo que necesite para crear un sitio de Gatsby. Y luego puede agregar, digamos que desea usar WordPress como un CMS sin cabeza o alguna otra fuente de contenido.

Marcy: Puede instalar paquetes, complementos para que funcionen y luego integrarlos con su sitio. También hay algunos arrancadores y temas que puede usar para ponerse en marcha más rápido. Los he usado si quiero probar algo o iniciar un sitio rápidamente para una integración específica como Drupal o prismic o cualquier CMS o solución de comercio electrónico o algo que quiera usar.

Marcy: Hay muchos ejemplos. Así que no siempre estás jugando con prueba y error tratando de resolverlo, pero son una especie de bloques de construcción que puedes juntar y crear... Es lo que llamamos la malla de contenido. Por lo tanto, puede usar estas mejores integraciones en su clase para crear un sitio en lugar de, si tuviera un sitio clásico de WordPress, la experiencia de creación y el trabajo con equipos es realmente excelente.

Marcy: Pero hubo deficiencias en la interfaz, como cómo funcionaría en un dispositivo móvil. ¿Qué otra cosa? ¿Si quisiera una solución de comercio electrónico? Creo que hay algunas cosas que son más fáciles de hacer en estos días, pero ser capaz de elegir cualquier tipo de mejor solución que desee para la autenticación, o lo que sea que sea esa cosa moderna, es como, "Ojalá pudiera usar eso". ” Con Gatsby, puedes juntar muchas de estas cosas y hacer que este contenido se mezcle como una forma de construir que es bastante refrescante.

Marcy: Especialmente cuando aún puedes usar esas integraciones como WordPress y aún trabajar con equipos. Por lo tanto, estamos muy entusiasmados con esta nueva forma de trabajar en la que puede elegir todas las tecnologías que le gustan o que funcionan para su equipo.

Drew: Una de las grandes características que Gatsby ha promocionado con fuerza es esta capacidad de extraer datos o contenido de una variedad de fuentes diferentes. Mencionaste cosas como WordPress y Drupal, y lo que tienes. Tradicionalmente, si estuviera usando algo como Jekyll o Eleventy, o algo así, tendría que conectarlo yo mismo para interactuar con las API, tal vez bajar el contenido y escribirlo en archivos de descuento o archivos JSON, y luego hacer que el generador funcione. con esos archivos.

Drew: Entonces, sería una especie de proceso de dos pasos, ¿podría usar algo como un bit de fuente, que cubrimos en un episodio anterior que hace ese tipo de cosas? ¿Entiendo correctamente que Gatsby tiene esta capacidad nativa de consumir diferentes fuentes de una manera que otros generadores de sitios estáticos simplemente no lo hacen?

Marcy: Creo que lo que hace que Gatsby sea realmente fuerte en esta área es su capa de datos GraphQL y el ecosistema de complementos. Por lo tanto, es probable que alguien ya haya escrito un complemento para cualquier fuente de datos que esté buscando construir. Y si no, probablemente haya algo parecido. Pero usar GraphQL es una especie de funcionamiento subyacente. La capa que hace posible todas estas integraciones está utilizando GraphQL.

Marcy: Y entonces, hay muchas posibilidades de lo que podrías obtener y también tratamos de facilitar la escritura de complementos. Así que ha sido muy bueno aprender sobre cómo escribir un complemento, y el AST o Abstract Syntax Tree que crea y aprender cómo funciona todo eso ha sido realmente genial. Pero sí, diría que hay muchas cosas listas para usar que podrías recoger sin tener que escribirlas todas tú mismo, lo cual es bastante asombroso.

Marcy: Y es bueno tener la flexibilidad para reducir las rebajas. Digamos que sus desarrolladores quieren escribir el contenido de su blog, pero el equipo de marketing realmente no está contento con eso, podría combinar fuentes de contenido y obtenerlas de varios lugares. He visto personas que obtienen cosas de otros repositorios de GitHub, y usan un complemento de obtención para obtener contenido de descuento de esa manera. Mucha flexibilidad.

Drew: Y supongo que tienes la opción de escribir tus propios complementos para extraerlos de una fuente de datos personalizada. Supongamos que tiene un sistema heredado y desea colocar un nuevo sitio web agradable y brillante al frente. ¿Podría escribir un complemento que obtenga los datos en cualquier formato que se necesite y traducirlos en algo que sea más grande que el trabajo?

Marcy: Podrías, sí. Y así, los complementos lo permiten. Y además está esta abstracción que llamamos temas de Gatsby. Y esos no son solo el código de la interfaz de usuario, sino que podrían ser consultas de GraphQL, configuraciones que configuran un complemento, por lo que es como un complemento con el uso agrupado. Y puede distribuir esos temas en NPM.

Marcy: Y luego, su versión y puede extraerlos. Y toda esa API también es realmente interesante para los equipos que dicen que tienen varios repositorios y quieren extraer datos en ellos, sería muy repetitivo tener las mismas consultas. en todos estos repositorios en el mismo código. Entonces, para secar un poco las cosas y no repetirse tanto. Puede usar estas abstracciones llamadas temas, para distribuir esa lógica o código que habilitaría ese complemento fuente. Entonces, hay este tipo de capas de abstracciones que puedes construir encima de las cuales hemos escuchado que los equipos realmente están sacando mucho provecho en este momento.

Drew: Entonces, un tema en el mundo de Gatsby no se ve y se siente como lo sería con un CMS como WordPress.

Marcy: Sí, quiero decir, puede, pero eso no es todo lo que es. Entonces, nombrar las cosas es muy difícil. Pero disfruté mucho aprendiendo sobre los temas, solo la flexibilidad y poder, sí, podrías incluir algún código de interfaz de usuario. Pero también podría haber algún código de lenguaje de consulta que entre allí. Pero el hecho de que esté agrupado hace que sea fácil de distribuir. Sí, ha sido una abstracción realmente ordenada que ha sido genial ver lo que la gente está construyendo y qué temas están enviando, y todo eso.

Drew: Sí, me imagino que conduciría a algunos usos bastante innovadores de Gatsby. ¿Ha visto algo que haya sido, en particular, que le haya llamado la atención que los clientes estén haciendo esto particularmente creativo?

marcy: si Bueno, en términos de temas, quiero decir, uno de los primeros sobre los que leí hay un estudio de caso en el blog de Gatsby, creo que de Apollo. Y escribieron un sitio de documentación usando temas de Gatsby y eso usó un complemento de obtención de fuente. Y así, realmente desvincula su abastecimiento y su contenido, lo que hace que los equipos puedan extraer un tema para usar en múltiples repositorios.

Marcy: Diría que es lo más interesante para mí solo por lo que puedo imaginar que habilitará, equipos anteriores en los que estuve donde teníamos que obtener contenido, estábamos tan limitados y donde ese código podría vivir y cuán repetible. podría ser. Y así, viendo una solución ahora donde los equipos dicen: "Oh, esto funciona muy bien". Y eso fue incluso el verano pasado, o así fue un caso de estudio hace un tiempo.

Marcy: Entonces, desde entonces, las API han ido mejorando y hay un equipo completo trabajando en temas de Gatsby. Y sé que están implementando algunas mejoras importantes en las próximas semanas. Por lo tanto, no quiero robarles el protagonismo, pero vienen algunas cosas geniales con los temas. Han estado revisando algunos de los temas del blog, como los temas centrales que ofrecemos de Gatsby.

Marcy: Sé que lo están usando internamente para crear algunos de nuestros propios anuncios de productos o mejoras de productos que se anunciarán aquí en las próximas dos semanas. Entonces, muchas cosas geniales están sucediendo con los temas de Gatsby, y la gente vende sus propios temas y temas iniciales. Creo que eso también es muy interesante.

Drew: Está surgiendo un poco de mercado alrededor de Gatsby.

Marcy: Lo hay, sí.

Drew: ¿Hay algún tipo de capacitación en línea y ese tipo de cosas si alguien quiere... si alguien decide que realmente va a entrar en Gatsby y necesita aprenderlo rápido? ¿Hay lugares para correr a los que puedan ir con ese tipo de información disponible?

Marcy: ¿Una tonelada? Si. Definitivamente está el sitio de Gatsby Doc, que es gatsbyjs.org/doc's. Y tenemos tutoriales, y he estado haciendo transmisiones en vivo casi todas las semanas para cosas de Gatsby. Hay un montón de educadores que tienen material de Gatsby en YouTube y en varias plataformas de aprendizaje. Egghead, creo que algunos de mis compañeros de equipo de Gatsby también tienen videos de egghead.

Marcy: Entonces, hay un montón de cosas por ahí. Diría que revise las fechas si encuentra algo. Siempre estamos actualizando activamente Gatsby Doc, algunos de los videos de terceros más antiguos y cosas que pueden verificar las fechas en ellos porque no podemos monitorear cada recurso de aprendizaje para la actualización. Es difícil mantenerse al día con nuestro propio personal.

Marcy: Porque hay tantas opciones de fuente de contenido y casos de uso. Es un espacio muy amplio. Pero hay tanto material de aprendizaje por ahí, y un montón de formas de empezar que puedes intentar y encontrar cosas dependiendo de dónde te encuentres en tu espectro de aprendizaje. ¿Está en las etapas iniciales, viene de otras tecnologías y solo necesita aprender qué es esto de React?

Marcy: Puede elegir qué materiales funcionarán para usted en función de dónde se encuentre. Estuve haciendo un curso recientemente a través de transmisiones en vivo llamado Gatsby Web Creators, en el que fuimos desde HTML, CSS y JavaScript para principiantes hasta crear nuestro primer sitio de Gatsby. Acabamos de completar eso el viernes. Y así, ha sido muy bueno volver al principio.

Marcy: Y debido a que hay muchos materiales con Gatsby, usa React. Por lo tanto, es un salto bastante grande para empezar con eso. Por lo tanto, tenía muchas ganas de volver atrás y dar los pasos necesarios para construir cosas con React y Gatsby. Así que eso fue realmente genial. Y estoy emocionado de continuar en esa ruta, para que haya más material para principiantes y más cosas para ayudar a las personas a entender cómo construir un sitio con Gatsby porque muchas de esas habilidades son transferibles a otros marcos.

Drew: Una de las grandes preguntas que surgirán para cualquiera que esté pensando en crear una especie de sitios de proyectos de clientes usando Gatsby, una de las grandes preguntas que surgirán es sobre la administración de contenido y la presentación de cosas frente a un cliente. Ya mencionaste cómo Gatsby puede conectarse a diferentes sistemas de administración de contenido. ¿Es ese el método principal que implementaría para tratar esa pregunta? ¿O Gatsby tiene algo en su ecosistema que permitiría a las personas editar contenido de alguna manera?

Marcy: Sí, diría que tener un CMS o algo así puede hacer que esas relaciones de equipo funcionen mucho mejor. He estado en esos casos de uso en los que a los equipos de desarrollo les gusta: "Simplemente aprendan HTML". Y ves este glaseo del cliente como, "No, no puedo creer que acabas de decir eso". Por lo tanto, tener un sistema en el que las personas puedan hacer su mejor trabajo de la manera que más les convenga es muy, muy importante.

Marcy: Como si simplemente no pudieras manejar GitHub de marketing, y podría funcionar algunas veces, pero no todo el tiempo. Y así, tener una vista previa y construir una infraestructura lo hace mejor, y ahí es donde el espacio de productos en la nube de Gatsby entra en la refriega. Hay formas de hacer una vista previa. Sin el lado de la nube paga y la nube de Gatsby tiene un nivel gratuito para proyectos personales, por lo que no todo es pago.

Marcy: Pero tenemos esto, como que el código abierto y el ecosistema de productos se unen para que Gatsby pueda, como organización fundadora, ganar suficiente dinero para mantener el marco de código abierto, mantenerlo saludable y mantener a nuestra comunidad funcionando junto con eso. . Entonces, ahí es donde se une este lado comercial de código abierto, y realmente permite algunos de estos flujos de trabajo que los equipos necesitan.

Marcy: Algunas cosas como obtener vistas previas rápidas, compilaciones rápidas e implementadas. Entonces, hay soluciones en el lado de la nube de Gatsby específicamente, y luego, donde sea que haya una forma de código abierto para hacer que Gatsby funcione como con un servidor de vista previa o algo así, tratamos de documentar eso y asegurarnos de que nuestra comunidad sepa qué es qué y cómo hacerlo. satisfacer esas necesidades del equipo.

Marcy: Sí, diría que necesita alguna forma de obtener una vista previa de los cambios de su CMS porque es como esa gratificación instantánea. No desea estar esperando una hora para una compilación para ver algún contenido.

Drew: Así que eso es interesante. El servicio en la nube de Gatsby le brinda la capacidad de usar un servicio de CMS autónomo, donde solo está trabajando con el contenido, pero no tiene una visualización de cómo se vería en su sitio, lo que le permite obtener una vista previa de cómo eso trabajaría. ¿Está bien?

Marcy: Lo es, sí. Y así, es parte de la compensación del desacoplamiento, su CMS sin cabeza, que puede haber tenido, como WordPress, podría simplemente buscar el front-end, pero le estamos dando un nuevo front-end, y posiblemente extrayendo otras fuentes. y otras cosas que WordPress no conoce. Entonces, desacoplarlo de esa manera tiene sentido. Pero aún así, como miembro del equipo, debe poder hacer su trabajo a la velocidad a la que está acostumbrado rápidamente.

Marcy: Y ahí es donde entra la vista previa de Gatsby, las compilaciones de Gatsby para devolver esa interfaz a los equipos para que puedan colaborar, puedan tomar decisiones, enviar algo. Eso ha surgido en el último año, obteniendo más funciones y mejoras todo el tiempo y hemos escuchado de algunos equipos que realmente están comenzando a ver aumentos de velocidad.

Marcy: Y cuando nos damos cuenta, "Está bien, si esta compilación va lenta, ¿por qué?" Por lo general, se debe a que el sitio es muy, muy grande. Por lo tanto, nos hemos centrado mucho en las mejoras para sitios grandes y en mejorar realmente esos flujos de trabajo colaborativos en equipo. Es un gran enfoque del equipo en este momento.

Drew: Entonces, la nube de Gatsby es, supongo, en esencia, un servicio de alojamiento. ¿Es un CDN para implementar sus sitios de Gatsby con una gran cantidad de funciones y características específicas de Gatsby?

Marcy: Lo llamaría más un producto de entrega continua porque no es un CDN real. Se integra con CDN como Fastly, Netlify. Hay muchos proveedores diferentes a los que puede conectarse y algunos de ellos son gratuitos. Puedes hacer muchas cosas gratis, lo cual es bastante impresionante. Lo hice el otro día en nuestra última sesión de creadores web de Gatsby, usamos la nube de Gatsby y Netlify para construir nuestro sitio.

Marcy: Y te permite hacer que los sitios de Gatsby sean más rápidos específicamente, porque tiene esas mejoras. Solo tiene que construir un tipo de sitio. Entonces, hay algunas mejoras que Gatsby Cloud puede hacer, que ninguna otra plataforma puede hacer porque están tratando de admitir todos estos diferentes tipos de sitios web y los hacen muy bien.

Marcy: Pero para Gatsby, si eso es todo lo que estás construyendo, y hay bastantes agencias, que están todas involucradas en Gatsby, y quieren hacerlo lo más rápido posible. Entonces, ahí es donde la nube de Gatsby puede hacer algunas mejoras de rendimiento específicamente para Gatsby, porque no tiene que preocuparse por ninguna otra plataforma.

Drew: Entonces, la nube de Gatsby haría su compilación, y luego simplemente la implementaría en algo como Netlify o, presumiblemente, en una amplia gama de lugares diferentes.

marcy: si Sí, lo hará. Entonces, es la parte de Netlify que estaría usando mientras carga estos paquetes construidos. Archivos construidos. No está utilizando sus compilaciones, por lo que las compilaciones se realizan en la infraestructura de las nubes de Gatsby, y ahí es donde pueden ocurrir muchos aumentos de velocidad. Y luego todavía está ese paso de carga para enviarlo a un CDN, cualquiera que haya elegido.

Marcy: Pero sí, parece que a los equipos les encanta esta capacidad de ver. Quiero decir, es una funcionalidad que te habrías perdido. Entonces, eso es algo necesario para volver a agregar, es poder hacer estas vistas previas colaborativas y obtener aprobaciones y todo eso.

Drew: Entonces, la nube de Gatsby se proporciona como un servicio de la empresa Gatsby, y también está el proyecto de código abierto Gatsby. ¿Es este un tipo de relación similar a la que tienen WordPress y Automatic, donde tienes una entidad comercial que desarrolla un producto de código abierto?

Marcy: Yo diría que sí, como Drupal. Hay un precedente en tecnología para tener estas organizaciones fundadoras donde es una especie de círculo virtuoso. Y estamos trabajando en la publicación de documentación de gobernanza en este momento para asegurarnos de que sea muy claro para nuestra comunidad, cómo tomamos decisiones. Pero todo el objetivo es mantener a Gatsby sostenible, de modo que pueda seguir siendo un proyecto de código abierto que la gente pueda usar, incluso entrando en la nube de Gatsby.

Marcy: Podrías usar otras soluciones si quieres. Y entonces, necesitamos suficientes negocios para sostener, como las personas que trabajan en ellos. Y entonces, estoy como en el medio, como si flotara entre el código abierto y el lado comercial y tratando de asegurarme de que estamos priorizando las cosas. Quiero decir, como se puede imaginar, estamos haciendo malabarismos con muchas cosas con la amplitud de los espacios, todos tenemos nuestros casos de uso de nicho que nos gustan, que nos parecen muy importantes, que debemos hacer para nuestro trabajo.

Marcy: Eso se suma a ser muchos casos de uso de nicho. Entonces, tratamos de hacer malabarismos y priorizar y realmente escuchar a nuestra comunidad sobre lo que duele en este momento, lo que duele, lo que va bien. Y así, ha sido un viaje interesante para mí personalmente volver a devREL y realmente escuchar a la comunidad sobre cómo podemos hacer que seamos aún mejores.

Drew: ¿Y hay una gran comunidad alrededor de Gatsby, mucha, mucha gente usándolo?

Marcy: Hay mucha gente usándolo, muchos colaboradores. Entonces, para muchas personas, podría ser la primera vez que contribuyen con el código abierto, como venir a nuestros muelles y unirse a nosotros para Hacktoberfest y cosas así. Y así, ha sido genial ver qué gran comunidad tiene Gatsby, especialmente con cosas como la accesibilidad y tratando de asegurarse de que los marcos hagan todo lo que puedan de forma gratuita.

Marcy: Y entonces, está este, no sé, subconjunto o intersección de accesibilidad y Gatsby y ese es mi lugar feliz. Pero la comunidad más amplia, mucha gente aprende React o aprende desarrollo web a través de Gatsby. Entonces, es genial ver una progresión a través de nuestra comunidad, y esperamos que la gente venga a contribuir, incluso si se trata de un problema o algo así como: "Oye, este enlace se rompió o esta parte de los muelles me resultaba confuso". o está desactualizado”.

Marcy: Incluso decir un marco o un proyecto que usas, que algo podría ser mejor es una excelente manera de contribuir, porque puedes ayudarnos a obtener una idea de las cosas que podrían mejorar. Así que esa es una gran manera de contribuir.

Drew: Usted mencionó la accesibilidad y, por supuesto, la gente lo reconocerá como un experto en accesibilidad. And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

Marcy: Well, I wish it weren't the case. But I think the data has shown that a lot of websites that do use front end frameworks are less accessible than those that don't. A project that comes to mind is the Web a Million. And actually, I have a blog post, I'm refreshing the Gatsby site to see if my blog post has launched yet. But webbing through the web a million this project, they used their automated wave tool to crawl the top 1 million home pages and evaluate them for some accessibility violations.

Marcy: And it was really depressing results. Like they've run it twice now I think, and I think it got worse. So, it's not great, but I don't think you can really point to any one framework because there's plenty of sites that don't use frameworks that have lots of accessibility problems. So, it's kind of a broader industry issue, a really society.

Marcy: And so, for me working on a full featured web framework, I saw as an opportunity to try and get more accessibility awareness in the mainstream. And so, that was an intentional move on my part to go and try to make an impact on a lot of sites like working on one site is cool. You can solve some really interesting problems. For me, I wanted to advocate accessibility much more broadly and try to make frameworks the best they can be from the inside.

Marcy: So even if something is rough right now, trying to play that long game of like, “Okay, what web standards things can we talk about? What framework improvements can we make so that if this is kind of rough, like not just give up on it.” So, even if I know it's… I don't know, JavaScript is some folks enemy I feel like I like it. You need some JavaScript to make accessible user interfaces, you just do.

Marcy: So, I am trying to like straddle those viewpoints and do the right thing while listening to my activist colleagues and friends kind of out there like pushing us forward as an industry. And then on the inside, I can be the messenger and the person that could try and reconcile some of those huge trade offs and ethical questions about What are we building?

Marcy: So, it's challenging, but I really like it, because I have an impact to make on the web. And so, web framework. Lots of people are building Gatsby sites. So, seems like a good place to try and make an impact.

Drew: You mentioned briefly that Gatsby uses React at the moment. Is there a possible future where Gatsby might work with other frameworks, might receive a view version of Gatsby?

Marcy: I would love that. I've certainly talked about it. There is a pre React plug in, as I mentioned earlier. So you can swap that out. I think a big part of what we are talking about is sustainability of projects, trying to make the right call, these aren't easy choices to make. It's not just like rip it out and start over. There's a lot of concerns that go along with that. It goes deep.

Marcy: So, it's something we're actively talking about. And I don't really have anything specific to share right now. But we do have some internal meetings coming up soon to talk about that sort of thing. So, it's being discussed, and I would love to have a view flavor, that'd be amazing. But as you can imagine there's some interesting challenges that come along with that, and we want to make sure it's the right move so that we're not like, I don't know, going down a path and having it not work for whatever reason, then we're maintaining two frameworks, like how do we make that actually realistic in terms of what we can maintain and make succeed for an open source community?

Drew: So I've been learning all about Gatsby. What have you been learning about lately Marcy?

Marcy: Well, I wish it was better but work life balance. I've been learning about, for me, unfortunately, I'm in like a burnout cycle. And so, I feel like I'm continually learning the lesson of how to be productive, especially this year in 2020. There's just like one thing after another. So, trying to get really clear focus on where I want to go in my career, what makes me happy?

Marcy: How can I sustain, and we're talking about sustainability. Like how can I sustain my own life after a career of really pushing hard on accessibility in particular like, “Okay, how can I kind of take a little step back and make sure that what I am putting out there, what I am doing is meaningful, worth the energy.” See, a lot of my lessons have been kind of that intersection of work and life and trying to make the most of the time that's been… I don't know about you, but it's been pretty stressful for a lot of people including me.

Drew: It's been very, very stressful. We are at very difficult times, isn't it?

Marcy: Yeah, yeah. I mean, we have so much to be thankful for in this industry, having opportunities and skills that you can apply. Seeing a lot of layoffs in our industry, really trying to make decisions that reflect where we're at and not just going through the motions. So that was a big motivator for Gatsby web creators was, “Wow, there's a lot of school age kids not in school this year, it would be really cool to see an outcome of turning some kids' eyes onto web development.”

Marcy: Like when I was in seventh grade, and someone came to a class of mine to talk about photojournalism. I was like, “I want to be a photojournalist.” So that actually did work. I got some feedback from someone that said, “My seventh grader's learning from you, and now they're really excited about code.” So, that was a really good thing to spend some energy on, in a time where like, that wasn't something I would have necessarily thought of before being in these circumstances in 2020.

Marcy: So, really trying to be like nimble and make choices that kind of reflect where I want to go and what's happening.

Drew: If you the listener would like to hear more from Marcy, you can find her on Twitter where she's @marcysutton and find all her latest goings on, on her personal website, marcysutton.com. And of course you can find out how to get started with Gatsby from Gatsbyjs.org. Thanks for joining us today Marcy, do you have any parting words?

Marcy: Make the most of it wherever that might be.