Aplicaciones sólidas de React y GraphQL para personas con prisa

Rate this content
Bookmark
Slides

En esta charla, veremos algunas de las opciones modernas para construir una aplicación full-stack de React y GraphQL con convenciones sólidas y cómo esto puede ser de enorme beneficio para ti y tu equipo. Nos enfocaremos específicamente en RedwoodJS, un framework full stack de React que a menudo se llama 'Ruby on Rails para React'.

29 min
08 Dec, 2022

Video Summary and Transcription

La charla aborda los desafíos y avances en el uso de GraphQL y React juntos. Presenta RedwoodJS, un framework que simplifica la integración frontend-backend y proporciona características como generación de código, andamiaje y autenticación. La charla demuestra cómo configurar un proyecto de Redwood, generar diseños y modelos, y realizar operaciones CRUD. Redwood automatiza muchas partes de GraphQL y proporciona una forma fácil para que los desarrolladores comiencen con GraphQL. También destaca los beneficios de Redwood y sugiere visitar RedwoodJS.com para obtener más información.

Available in English

1. Introducción a GraphQL y React

Short description:

Hablaré sobre cómo lidiar con React y GraphQL si tienes prisa. En 2017, comencé a trabajar en un proyecto grande que utilizaba GraphQL. Me encontré con frustraciones al lidiar con diferentes módulos y unirlos de manera cohesiva. Esto llevó a un trabajo repetitivo y manual.

Bueno, definitivamente ha pasado un tiempo desde que comencé a trabajar con GraphQL. De hecho, han pasado unos 5 años, y en años tecnológicos eso es bastante tiempo. Y cuando comencé a trabajar con GraphQL al principio, realmente no me importaba cuánto tiempo llevaría trabajar en un proyecto o poner en marcha una aplicación de GraphQL. Pero en estos días cada vez más me encuentro con prisa en mis proyectos y quiero algo que sea más rápido para comenzar y más rápido de mantener. Y eso es de lo que voy a hablar hoy, cómo lidiar con React específicamente y GraphQL si tienes prisa.

Me llamo Ryan y hago muchas cosas en la web. Pero hoy estoy muy enfocado en Course Lifts y Course Lift es un alojamiento de cursos para personas que quieren tener todas las mecánicas de cómo armar sus páginas de inicio de curso, cómo armar su información de ventas, etc. Hecho para ellos para que puedan centrarse en hacer su curso y nosotros les ayudamos a vender su curso. Échale un vistazo a Course Lift en Twitter si estás interesado.

Volviendo a 2017, hace cinco años, cuando empecé a involucrarme con GraphQL, fue un momento increíble porque había tanta energía en la comunidad en torno a GraphQL. Era bastante nuevo. Creo que se remonta a 2012 en su inicio, pero fue alrededor de esta época en 2017 que la gente comenzó a emocionarse mucho con él y esa emoción era realmente palpable. Esta soy yo en la Cumbre de GraphQL en San Francisco. Tuve la oportunidad de dar una charla allí en 2017 y había mucha energía en la sala sobre GraphQL. La gente quería usarlo en todas partes. La gente quería usarlo en todas sus APIs, desde todos sus frontends, y realmente podías sentir eso en la conferencia. Fue alrededor de esta época que comencé a trabajar en un proyecto grande para un cliente nuevo. En ese momento estaba trabajando para Auth0, pero comencé a independizarme y a hacer trabajos de consultoría y empecé a trabajar en proyectos grandes que utilizaban GraphQL en este nuevo caso de este nuevo proyecto. Fue alrededor de este momento que realmente empecé a familiarizarme con GraphQL. Estaba tratando de averiguar cómo incorporarlo a este proyecto y cómo hacerlo realmente bueno para el cliente en particular. Lo que noté es que había muchas frustraciones que surgieron cuando comencé a trabajar en este proyecto. Podría agruparlas en algunas categorías diferentes. La primera es que en ese momento no estaba muy claro cómo lidiar con diferentes módulos, cómo separar partes de la API en diferentes secciones, cómo lidiar con cosas como, ok, quiero un módulo de usuarios y luego quiero tener un módulo para algún otro recurso. Cómo agrupar esas cosas y luego unirlas de manera cohesiva simplemente no estaba establecido claramente. Y así, debido a que no había estas convenciones establecidas, uno quedaba para resolver esas cosas por su cuenta. Y así, encontré una convención que funcionaba en mi proyecto, pero definitivamente era bastante personalizada y tal vez no era la mejor manera de hacer las cosas. Esto llevó, creo, a mucho trabajo repetitivo y manual. Estaba copiando y pegando carpetas de módulos, cambiando nombres y luego teniendo que importar cosas en un archivo principal. Poner todas esas cosas en un esquema ejecutable en Node. Y era solo esta tarea repetitiva y manual con la que tenía que lidiar.

2. Desafíos en la integración frontend-backend

Short description:

No existían buenas abstracciones frontend para la integración en tiempo de desarrollo frontend-backend. La integración entre los clientes de consulta frontend y el esquema backend no estaba bien establecida. Esto llevó a soluciones personalizadas y frágiles, con problemas al agregar nuevos módulos. La carga de archivos y la autenticación también eran desafiantes en GraphQL en ese momento.

Y en ese momento, tampoco existían realmente buenas abstracciones frontend para la integración en tiempo de desarrollo frontend-backend. Recuerdo que no estaba del todo claro cómo obtener información cuando estás trabajando en el frontend sobre lo que el backend podía ofrecer en términos de recursos o campos en tus recursos. Y así, esta integración entre los clientes de consulta frontend y el esquema backend, simplemente no estaba bien establecida en ese momento sobre cómo hacer que esas cosas funcionen bien juntas. Esto llevó realmente a un conjunto de soluciones personalizadas y frágiles. Junté cosas que pensé que funcionaban bien en la aplicación y resultó que eran un poco frágiles. Cosas como problemas al agregar nuevos módulos, olvidar importar una de las nuevas partes del esquema en mi archivo principal donde creo el esquema ejecutable. Cosas como tener que lidiar con la carga de archivos y la autenticación. Todas estas diferentes partes de la aplicación que son bastante estándar en la mayoría de los lugares, simplemente no eran tan estándar en GraphQL en ese momento.

3. Avances y Beneficios de GraphQL

Short description:

La adopción de GraphQL ha crecido, con más empresas grandes y desarrolladores que lo utilizan. Los puntos técnicos han mejorado, incluyendo mejores bibliotecas de servidor, convenciones y herramientas. Las integraciones entre editores de código, frontends y backends han mejorado. La generación de código ha facilitado las modificaciones de código. La seguridad de tipos ha sido un beneficio significativo, permitiendo una mejor seguridad de tipos en tiempo de desarrollo.

Las cosas definitivamente han mejorado a lo largo de los años. La adopción ha crecido. Cada vez más empresas grandes están utilizando GraphQL y más desarrolladores en todas partes lo están probando. Creo que casi todos los puntos técnicos de GraphQL han mejorado a lo largo de los años. Ahora tenemos mejores bibliotecas de servidor. De hecho, tenemos más de ellas. Tenemos mejores formas de organizar estas convenciones en nuestros proyectos. Las herramientas son mejores en general. Tenemos integraciones desde editores de código y tenemos integraciones entre frontends y backends en tiempo de desarrollo, lo cual es genial. Tenemos cosas como la generación de código, que ayuda a realizar modificaciones en nuestro código de una manera fácil. Y en última instancia, la seguridad de tipos realmente ha sido un gran beneficio de todo esto. Poder conocer los tipos que están disponibles en la API de GraphQL y luego poder utilizarlos en toda la pila de la aplicación ha sido realmente beneficioso para la seguridad de tipos en tiempo de desarrollo.

4. Desafíos y Experiencia Ideal con GraphQL

Short description:

Los nuevos desarrolladores de GraphQL a menudo encuentran desafiante comprender las diferentes piezas y dónde encaja GraphQL en el stack. Trabajar con otras APIs e integrarlas también puede ser un desafío. Centrarse en los éxitos tempranos y demostrar los claros beneficios de GraphQL puede ayudar a impulsar su adopción. La experiencia ideal es poder ver fácilmente los beneficios de la relación cliente-servidor sin necesidad de comprender todos los detalles técnicos. RedwoodJS es un framework que reúne diferentes tecnologías y ofrece convenciones para mantener la consistencia.

Pero creo que aún hay margen de mejora y eso se debe a que los nuevos desarrolladores de GraphQL a menudo quedan confundidos. He hablado con muchos desarrolladores de GraphQL que tienen dificultades para comprender todas las piezas en juego cuando intentan comenzar. Y creo que esto se debe a que el ciclo de aprendizaje de GraphQL puede ser bastante desafiante. Tener que entender qué es un esquema, qué es un resolvedor y cómo interactuar con esas dos cosas desde el cliente puede ser un poco desafiante. La pregunta de dónde encaja GraphQL en el stack también puede ser desafiante. Algunas personas piensan que se debe colocar GraphQL entre el servidor y la base de datos, por ejemplo, mientras que otros piensan que es estrictamente entre el cliente y el servidor. Por lo tanto, informar a los nuevos desarrolladores sobre dónde realmente debe encajar GraphQL en su stack puede ser un desafío.

¿Cómo se trabaja con otras APIs cuando se utiliza GraphQL? ¿Cómo se trabaja con APIs que no están construidas en GraphQL e integrarlas? Y luego, ¿qué herramientas son necesarias para que todo el stack encaje? Y eso también puede ser un desafío para los nuevos desarrolladores. Por lo tanto, creo que si podemos obtener éxitos tempranos, éxitos tempranos en el sentido de poder comprender los claros beneficios de GraphQL de una manera rápida, creo que es posible entusiasmar más a los desarrolladores con GraphQL. Y si queremos que haya más adopción de GraphQL, si queremos que más personas lo prueben y lo utilicen en sus proyectos, creo que centrarse en esos éxitos tempranos es una parte fundamental de ello.

En mi opinión, hay una experiencia ideal y se ve así. Deberíamos poder ver fácilmente desde el principio los beneficios claros de esa relación cliente-servidor sin tener que pensar en todos los detalles técnicos. Sin tener que pensar en, bueno, ¿cuál es exactamente la definición de un esquema? ¿Qué significa un resolvedor? ¿Qué es la parte del cliente? ¿De qué se trata todo esto? En cambio, poder mostrar el contrato claro que existe entre esas cosas y poder hacerlo de una manera en la que el desarrollador no necesite pensar en todos los detalles y los aspectos técnicos, creo que es una gran ventaja. Tener una forma de manejar otras piezas que se encuentran en cualquier otro tipo de entorno, creo que también es importante. Cosas como la autenticación y la autorización, la carga de archivos, esas cosas que son necesidades en las aplicaciones. Creo que poder demostrar cómo hacer esas cosas de manera fácil y temprana es una parte importante. Y luego, estar automáticamente informado sobre el esquema de GraphQL en todo el stack. Obtener información de tipo del esquema de GraphQL que existe, poder utilizar esa información de tipo para informarnos en tiempo de desarrollo y tener una forma fácil de hacerlo, creo que es clave. Hay numerosas formas en que esto se hace más fácil en la actualidad. Hay cada vez más frameworks, cada vez más paquetes para comenzar que ayudan con este tipo de cosas. Pero el que hablaré hoy y el que creo que es probablemente la mejor forma de dar vida a esta experiencia es un framework más nuevo llamado RedwoodJS. RedwoodJS es un framework altamente opinado. Reúne muchas piezas diferentes de tecnología de una manera muy cohesiva y muy agradable de usar. Y una de las cosas que me encanta es que ofrece muchas convenciones y patrones que facilitan mucho mantener la consistencia en una aplicación, especialmente si se trabaja con varios desarrolladores. Y es un framework muy bueno que reúne muchas tecnologías excelentes de las que hablaremos hoy.

¿Cómo se ve una aplicación de Redwood? Bueno, reúne estos elementos. Tenemos React, GraphQL, Node, Prisma, Storybook y Jest. Esas son las piezas principales. También hay algunas otras. Y reúne estas tecnologías de una manera que es súper cohesiva y súper fácil de comenzar y seguir adelante.

5. Funciones y Beneficios de Redwood

Short description:

Redwood ofrece un enfoque de repositorio único, generadores para generación de código, andamiaje para operaciones CRUD, autenticación lista para usar, soluciones de enrutamiento, diseños, modificaciones de código para actualizaciones fáciles, soporte de monorepo y patrones personalizados como cells. Simplifica la generación de componentes y páginas.

No tenemos que preocuparnos demasiado por estas piezas. Sabes, a medida que nuestra aplicación crece, simplemente siguen funcionando y funcionan muy bien.

Cuando se trata de una aplicación de Redwood, tenemos dos lados. Las aplicaciones de Redwood existen en un repositorio único, en un espacio de trabajo de Yarn. Tenemos un lado web y un lado API. Y este enfoque de repositorio único es genial porque nos permite trabajar dentro de un solo proyecto, pero trabajar en ambos lados, el lado web y el lado API.

Y así, la pregunta a menudo es sobre Redwood, ¿qué hace? ¿Simplemente instala un montón de paquetes para nosotros, para esas tecnologías? ¿Simplemente nos da un archivo package JSON y luego instalamos todas esas piezas individuales de tecnología? Y la respuesta es no, hace mucho más que eso. Nos brinda un conjunto enorme de generadores, que ahorra mucho tiempo en la generación de código. Obtenemos andamiaje para cosas como poder tomar un modelo y luego poder darnos toda la funcionalidad CRUD relacionada con él. Así que todas las piezas de esquema que necesitamos, resolvedores que necesitamos. Y también todas las partes del frontend que necesitamos, para poder hacer CRUD. Obtenemos autenticación lista para usar. Así que, típicamente, si estás trabajando con autenticación en GraphQL, es posible que estés buscando una directiva personalizada. Obtenemos todas esas cosas automáticamente con Redwood. Obtenemos el enrutamiento resuelto con Redwood. Obtenemos una implementación muy buena de un enrutador dentro de la capa de React con Redwood. Es una abstracción muy inteligente, funciona muy bien. Obtenemos cosas como diseños, ya sabes, una convención para tener una estructura de aplicación, por ejemplo, que se puede utilizar en toda la aplicación. Obtenemos modificaciones de código. Cuando llega el momento de actualizar la versión de Redwood en la que te encuentras, a menudo hay código que necesita ser actualizado en toda la aplicación, y podemos ejecutar un simple comando NPX para actualizar ese código en toda la aplicación, lo cual es genial. Trabajamos dentro de monorepos. Hace las cosas mucho más simples cuando estamos tratando con un solo repositorio para el frontend y el backend de nuestro stack de aplicación, en lugar de tener múltiples piezas de las que tenemos que preocuparnos y que se despliegan de diferentes formas, etc. Y luego, lo que más me gusta son los patrones personalizados que ofrece Redwood, cosas como cells, de las que hablaremos más adelante. Cells son esta abstracción que nos brinda una forma de manejar todo el ciclo de vida de una operación CRUD. Y veremos eso con más detalle. Generar componentes es muy sencillo. Usamos un comando yarn, por lo que es yarn Redwood generate components y el nombre de tu componente, por ejemplo. Obtenemos lo mismo con una página. Tendríamos un componente que podría ser solo una parte aislada de una interfaz de usuario en la que podríamos estar trabajando. También podríamos querer tener una página, que es como una estructura más grande donde van nuestros componentes.

6. Generando Diseño e Iniciando un Proyecto Redwood

Short description:

Generamos un diseño como una estructura de aplicación con páginas y componentes. Si estamos trabajando con un recurso del servidor, podemos generar un SDL para obtener un esquema completo de GraphQL y resolvedores. Veamos Redwood JS en acción creando un nuevo proyecto con Yarn. Instala las dependencias y genera los tipos. Accede al proyecto para explorar los lados del sitio web y la API.

Y luego, también podríamos querer generar un diseño, que sería una especie de una estructura de aplicación. Puedes pensarlo así, que en última instancia ofrece algo que se ve así, teniendo nuestra estructura de aplicación con cualquier número de páginas que pueda haber en ella.

Y luego esas páginas en sí mismas implementarían varios componentes. Y esta es una forma bastante típica en que se organiza una aplicación. Tienes, por ejemplo, una barra de navegación y una barra lateral en tu diseño, luego tienes páginas dentro de las cuales se puede navegar y luego componentes que realizan el trabajo de la aplicación.

Luego, si estamos tratando con, ya sabes, un recurso del servidor, algo que residiría como una parte del esquema en nuestro servidor con un resolvedor, podemos generar un SDL. Entonces sería yarn, red generaría un SDL, dándole un nombre. Y luego obtendríamos un esquema completo de GraphQL, un conjunto completo de resolvedores y podríamos usarlo de inmediato con llamadas a GraphQL.

Así que eso es gran parte de la teoría. ¿Por qué no vemos Redwood JS en acción y podemos ver cómo GraphQL realmente brilla dentro de una aplicación Redwood. Entonces, cuando estamos trabajando con Redwood y queremos comenzar un nuevo proyecto, podemos hacerlo con Yarn. Podemos hacer Yarn create Redwood app y luego darle un nombre a la aplicación. Llamémosla GraphQL Galaxy. Y luego voy a decir que quiero TypeScript. Típicamente esto es lo que siempre hago. Sabes, TypeScript es lo que uso por defecto, pero también puedes obtener Redwood en una versión estándar de JS si lo deseas. Solo no agregues el guión guión TypeScript al final.

Cuando hacemos eso, vamos a obtener una nueva aplicación iniciada para nosotros. Va a instalar todo tipo de dependencias. Va a recopilar todos los paquetes que están dentro de una aplicación Redwood aplicación. Así que React, GraphQL, tenemos Storybook, Jest y más. Y va a juntar todas esas cosas para nosotros en nuestro nuevo paquete. Va a ejecutar Yarn install y va a generar los tipos de inmediato. La generación de tipos es algo que sucede automáticamente dentro de Redwood JS, y eso también va a suceder aquí en la fase de instalación. Así que vamos a darle un minuto para que se ejecute, y luego vamos a entrar en el proyecto y ver cómo trabajar con GraphQL en él.

Muy bien, ya estamos listos aquí. Así que voy a entrar en GraphQL Galaxy, y vamos a abrir esto en VS Code. Y vamos a hacer un recorrido rápido aquí de lo que hay en los directorios. Como mencioné, tenemos dos lados. Tenemos un lado del sitio web y un lado de la API.

7. Configurando Página y Modelo de Galaxy

Short description:

Aquí está nuestro sitio web y el lado de la API. Generemos una página llamada 'página de galaxy' y configuremos un modelo para el recurso galaxy en nuestro backend. Tendremos campos como id, nombre, descripción, creado en y actualizado en.

Aquí está nuestro sitio web, todo lo que se incluye en la parte del cliente de nuestra aplicación. Luego está el lado de la API, y aquí es donde se encuentran cosas como nuestros modelos de database con Prisma, y también es donde vamos a gestionar nuestras piezas de GraphQL. Lo primero que podríamos hacer es ejecutar esto y ver cómo se ve en el navegador. Para eso, podemos hacer Yarn redwood, o si queremos, abreviarlo, rwdev. Y cuando lo hagamos, tendremos un nuevo proyecto en el navegador que podemos ver.

Esta es la página principal de Redwood. Todavía no tenemos nada en términos de páginas, pero podemos generar una y hagámoslo ahora mismo. Generemos una página. Para hacer eso, abriré una nueva terminal y haré Yarn redwood, o simplemente rw para abreviar. Generar una página y llamémosla página de galaxy. Y veremos cómo se ve esto en el navegador. Cuando generamos la página, se guarda en el directorio web, si vamos a Source, a Pages, ahí está nuestra página de galaxy, y tiene cosas en las que estamos interesados, como nuestro componente de React que forma la página y también una prueba que viene de forma gratuita, y una historia de Storybook en la que también podemos trabajar.

Aquí, nuestra página está apareciendo, vamos a navegar a ella. Aquí está nuestra página de galaxy. Entonces, para esta página, tal vez queramos tener un recurso galaxy en nuestro backend con el que podamos trabajar, algo en nuestra database, un recurso con el que podamos realizar algunas operaciones CRUD en contra. Con eso, volvamos aquí, de vuelta a la terminal, y ahora vamos a usar algo llamado un scaffold. Pero lo primero que tenemos que hacer es configurar nuestro modelo. Vamos al directorio API, y vamos a nuestro modelo, que estará en DB, schema.prisma, y lo que haremos es eliminar este ejemplo que viene con la instalación de Redwood, y nos daremos un nuevo modelo llamado galaxy. Esto será como una tabla que contendrá galaxias. Así que tal vez la Vía Láctea, Andrómeda y todas las demás que existen en el vasto universo. Comencemos teniendo un campo de id aquí. Por ahora, lo haremos un entero, y el valor predeterminado puede ser autoincremental, así que autoincrementaremos ese id. Querremos decir que este es también el id para esta tabla en particular. Podríamos querer un nombre. El nombre puede ser una cadena. Podríamos querer una descripción, que también será una cadena. Y típicamente queremos llevar un registro de cuándo se creó un recurso. Así que created at puede ser un campo. Eso es de tipo datetime, y el valor predeterminado puede ser ahora. Y tal vez también pueda haber un updated at, y podemos rastrear cuándo ocurren las actualizaciones.

8. Configurando Operaciones CRUD en Redwood

Short description:

Ese es un campo de fecha y hora, y podemos usar el decorador updated at para obtener automáticamente esos valores. Tenemos una tabla de galaxias en SQLite como nuestra base de datos. Al ejecutar el generador, obtenemos todo conectado, incluida la base de datos y la tabla de galaxias. El comando scaffold crea diseños, rutas y componentes para agregar y editar galaxias. El directorio API contiene el archivo galaxies.sdl, que proporciona el esquema GraphQL para administrar el recurso. Incluye campos como ID, nombre y descripción, y admite consultas y mutaciones. Redwood también proporciona autenticación de forma predeterminada, lo que facilita la protección de nuestros recursos.

Ese es un campo de fecha y hora, y podemos usar el decorador updated at para obtener automáticamente esos valores. Así que tenemos una tabla de galaxias, y estamos usando, en este caso, SQLite como nuestra base de datos. Si ejecutamos la instalación en esto, deberíamos obtener todo conectado.

Entonces, digamos que si ejecutamos nuestro generador para esto, deberíamos obtener todo conectado. Así que podemos hacer yarn redwood prisma db push, eso debería darnos nuestra base de datos. Así que ahí está nuestra base de datos, dev.db, y ahora tendrá esa tabla de galaxias en su lugar. Y lo que podemos hacer para facilitarnos mucho el trabajo con los datos aquí es hacer yarn redwood scaffold, o generar, scaffold galaxy. Ejecutemos ese comando y veremos qué obtenemos.

Así que tenemos un diseño. Tenemos rutas. Tenemos todo tipo de cosas. Si vamos a nuestro archivo de rutas, este es nuestro archivo de enrutamiento a nivel de React. Tenemos un montón de rutas nuevas. Tenemos una ruta donde podemos agregar una nueva galaxia, tenemos una ruta donde podemos editar una existente, y todo tipo de cosas que apuntan a diferentes componentes que se han creado para nosotros. Si echamos un vistazo dentro de nuestro directorio web. Así que tenemos una nueva página aquí que es una página de galaxia. Creé una página inicial llamada galaxia, que probablemente podríamos eliminar ahora, ya que tenemos otra página dedicada llamada página de galaxia. Tenemos un conjunto de componentes que se ajustan a este recurso de galaxia, lo que nos permitirá hacer todo lo que queremos hacer para administrar CRUD.

Si miramos en el directorio API, también tenemos un montón de cosas. Por ejemplo, galaxies.sdl. Este es el esquema GraphQL en el servidor que queremos para administrar este recurso. Podemos ver que de inmediato nos da lo que podríamos esperar en función de una muestra inicial de este modelo que está en la base de datos. Tomando los campos que están en este modelo, podemos inferir que podríamos querer tener ID, nombre, descripción, todas estas cosas disponibles como parámetros en este objeto. Obtenemos consultas para galaxias, en plural, una sola galaxia por su ID. Tenemos la capacidad de hacer mutaciones de inmediato. Y si te fijas aquí, estamos requiriendo autenticación de inmediato. Tenemos este decorador require auth. Si no queremos eso, podemos optar por omitir la autenticación, lo cual es útil durante el desarrollo. Pero es una característica muy agradable de Redwood que automáticamente nos brindará autenticación para proteger nuestros recursos en caso de que nos olvidemos, por ejemplo. Así que tenemos todo en su lugar aquí para tener un conjunto completo de operaciones CRUD.

9. Operaciones CRUD con Redwood Scaffold

Short description:

En el directorio de servicios, tenemos resolutores para operaciones CRUD. Después de agregar una nueva galaxia, podemos realizar varias operaciones como editar, guardar, eliminar y mostrar el registro. Redwood proporciona estas operaciones automáticamente a través de su generación de scaffold.

Si miramos en el directorio de servicios aquí en galaxies.ts, estos son los resolutores acompañantes que se utilizarán para realizar todas estas operaciones CRUD. Entonces, ¿por qué no echamos un vistazo de nuevo en el navegador? Si actualizamos, no hay nada en la página aquí. Y eso se debe a que necesitamos llegar a un punto donde podamos editarlo. Así que si vamos a galaxies/nuevo, aquí vamos, podemos agregar una nueva galaxia. En la Vía Láctea hogar. Llamémosle hogar como descripción. Guardaremos esto. Ahí está el registro en nuestra database. Podemos editarlo para que sea algo más. Podemos guardar eso. Podemos eliminarlo. Podemos mostrarlo. Tenemos todo tipo de operaciones que nos son proporcionadas de forma gratuita por Redwood mediante la generación de este scaffold.

10. Resolviendo las partes de GraphQL y generando consultas

Short description:

Todas las partes de GraphQL se resuelven automáticamente al ejecutar un comando. La consulta GraphQL generada solicita todos los campos del modelo y configura los estados para las operaciones CRUD. También maneja operaciones exitosas, estados de carga, estados vacíos y fallas. Las piezas del servidor correspondientes se generan automáticamente.

La parte importante en la que me enfocaré aquí es que todas las partes de GraphQL se resuelven automáticamente al ejecutar ese comando. Por ejemplo, si vamos al directorio de componentes a Galaxy y luego vamos a Galaxy cell, aquí está nuestra consulta GraphQL que se generó. Solicita todos los campos que tenemos en ese modelo. Configura todos los estados en los que podríamos estar para realizar una operación CRUD. ¿Qué sucede si hay una operación exitosa? Nos prepara para eso. ¿Qué sucede si estamos en un estado de carga? ¿Qué sucede si estamos vacíos o si hay una falla? También nos los proporciona. Y las piezas del servidor correspondientes a esto, como ya hemos visto, ya están allí, generadas automáticamente.

11. Comenzando con Redwood

Short description:

Redwood proporciona una forma fácil y automatizada para que los desarrolladores comiencen con GraphQL. Genera automáticamente el código necesario, eliminando la necesidad de dedicar tiempo a la sintaxis y configuración de los resolvers. Los desarrolladores pueden centrarse en comprender cómo funcionan las diferentes piezas juntas.

Entonces, cuando pensamos en una forma para que los desarrolladores comiencen con GraphQL de una manera muy sencilla, una forma muy fácil donde puedan ver los beneficios de GraphQL en sí mismo, creo que Redwood proporciona un camino muy claro para eso. Las cosas se generan automáticamente. No necesitamos perder tiempo descubriendo exactamente la sintaxis de la pieza SDL que podríamos necesitar, cómo vincular un resolver a ella, cómo colocar la pieza de consulta. Simplemente se hace automáticamente por nosotros. Y luego podemos dedicar tiempo a comprender cómo funcionan todas estas piezas juntas. Pero esa forma muy fácil de comenzar se hace por nosotros, lo cual creo que es una gran ventaja.

12. Conclusión y Llamado a la Acción

Short description:

Si eres nuevo en GraphQL, visita RedwoodJS.com para tener una experiencia fácil de comenzar. Si eres un desarrollador experimentado de GraphQL, recomienda Redwood a otros para tener un camino claro hacia los beneficios. Mi nombre es Ryan, fundador de Courselift. Visita Courselift.com o Courselift en Twitter para alojamiento de cursos.

Entonces, si eres nuevo en GraphQL y te gusta lo que has visto en términos de un camino claro para comenzar, visita RedwoodJS.com y es tan fácil como lo mostramos hoy. O si eres un desarrollador experimentado de GraphQL y alguien que conoces está interesado en GraphQL, te recomendaría que les hables sobre Redwood para que puedan tener esa experiencia de comenzar muy fácil. Quita los aspectos mecánicos del camino, obtén un camino muy claro para obtener el beneficio primero y luego descubre el resto después. Muchas gracias. Mi nombre es Ryan y una vez más soy el fundador de Courselift. Si estás interesado en alojamiento de cursos que te ayuda a comercializar y vender tus cursos, visita Courselift.com o Courselift en Twitter. Muchas gracias.

13. Resultados de la encuesta y Generación de código

Short description:

Los resultados de la encuesta mostraron que la mayoría de las personas respondieron 'generar modelo de esquema' y 'generar modelo SDL'. Sin embargo, la respuesta correcta es SDL, que te permite generar un conjunto completo de resolutores CRUD para tu backend. Al ejecutar 'yarn redwood generate SDL' con el nombre de tu modelo, puedes generar automáticamente el código necesario.

Hola Ryan, bienvenido. Muchas gracias por estar aquí. Solo un recordatorio para los asistentes, pueden hacer sus preguntas a Ryan en Discord y en el canal de preguntas y respuestas de Andrew Meda. Entonces sí, Ryan, adelante y comencemos echando un vistazo a los resultados de la encuesta que hiciste antes de tu charla. Suena bien. Nuevamente en Slido, podemos echar un vistazo y ver. Parece que la mayoría de las personas han respondido, alrededor del 50% ha respondido generar modelo de esquema. Closely behind is generate SDL model. Entonces, ¿qué opinas sobre esas respuestas? Creo que las personas estaban en el camino correcto, pero parece que la correcta fue votada menos que la incorrecta. Es SDL, para obtener un conjunto completo de resolutores CRUD, de tu SDL para tu backend. Entonces, si tienes algún modelo en tu esquema de PRISMA, puedes hacer yarn redwood generate SDL, y luego el nombre de tu modelo, y luego obtienes todo ese código generado para ti.

14. Differences from Other Frameworks

Short description:

Redwood reúne tecnologías establecidas como React, GraphQL, Jest y Storybook, proporcionando una forma coherente de utilizarlas sin la molestia de conectarlas. A diferencia de Next.js, que se centra más en React, Redwood ofrece una forma específica de utilizar React y un backend, pero con menos herramientas. Está estrechamente relacionado con Blitz, proporcionando comandos para crear una aplicación y vincular fácilmente varias piezas. Redwood difiere de frameworks como Angular en que maneja todos los aspectos del stack completo, mientras que Angular solo se enfoca en el frontend.

¡Increíble! Sí, suena como una forma realmente genial de comenzar y darte todo lo que necesitas. Así que genial. Increíble.

Bueno, vamos a comenzar con algunas de las preguntas que estamos viendo. La primera es, ¿cómo se diferencia Redwood de otros frameworks y meta frameworks, cosas como next o blitz, etc.?

Sí, Redwood es un concepto interesante. Reúne varias piezas de tecnología que ya están establecidas y son bien conocidas. Como vimos en la charla, incluye React, GraphQL, Jest, Storybook, entre otros. Los reúne y te brinda una forma coherente de usarlos sin mucho problema, ¿verdad? Pero una de las partes más difíciles, creo, al comenzar un proyecto en el que quieres usar todas esas piezas de tecnología, es tener que conectarlas todas y seguir la documentación para hacerlo. Redwood simplemente resuelve eso por ti.

Diría que, por ejemplo, Next.js se centra mucho más en React. Por supuesto, puedes hacer cosas de API con Next, pero Next no tiene una opinión tan clara sobre cómo integrar GraphQL, por ejemplo. Redwood te ofrece una forma de tener un frontend y un backend, pero es menos dogmático en ese sentido. Aunque sigue siendo dogmático en el hecho de que te brinda su propia forma específica de usar React y un backend, pero con menos herramientas.

Diría que Redwood está más estrechamente relacionado con algo como Blitz. Blitz tiene objetivos similares, te brinda comandos para crear una aplicación desde cero para ti. Te brinda una forma de vincular fácilmente varias piezas. Entonces, Redwood es similar en ese sentido a Blitz, pero con sus propias opiniones, etc. Y si miras otros frameworks, quiero decir, si, quiero decir, tal vez consideres a React en sí mismo un framework, algunos dirían que sí, otros dicen que es solo una biblioteca. Pero difiere en ese sentido porque React es solo para la interfaz de usuario en su mayor parte. Y luego, ya sabes, lo mismo con frameworks como Angular, por ejemplo. Verías más a Redwood haciendo todo en el stack completo por ti. Mientras que Angular solo se enfoca en el frontend. Así que creo que eso es un poco de cómo difieren.

Sí, es interesante. Creo que si miras frameworks, bibliotecas, ya sabes, utilidades, como APIs, y piensas en algunos aspectos como, ¿es esto frontend, backend, stack completo? ¿Es esto dogmático versus no dogmático? ¿Es esto más una biblioteca versus un framework donde va a ser muy directivo en cómo lo usas? Sí. Así que creo que parece haber una superposición interesante en esos tres aspectos. Si quieres comenzar rápidamente, cubrir la mayor parte del stack posible. Y también tener pautas establecidas para poder tomar decisiones que estén en línea con las mejores prácticas.

15. Deploying to Serverless and Redwood Features

Short description:

Redwood está dirigido a facilitar la implementación en serverless, lo que lo hace muy fácil de trabajar con serverless. Los generadores en Redwood ofrecen ganancias significativas en productividad al generar una gran cantidad de código para ti. La próxima función de Redwood es desacoplar la autenticación de proveedores específicos, brindando más flexibilidad. ¡Gracias, Ryan, por tu increíble charla!

Cubre muchos de esos casos de uso, por así decirlo. Sin duda. Y, y una cosa que fue importante para Redwood desde el principio, es que esté dirigido a Facilitar la implementación, en un sentido de JAMstack, por lo que la implementación en serverless. Donde, sin ningún problema en absoluto, implementarías tus puntos finales de GraphQL en una función serverless. También podrías implementar cualquier tipo de funciones individuales con las que quieras trabajar como funciones serverless. Así que es muy fácil trabajar con serverless también. Sí, y estamos viendo que desde un punto de vista arquitectónico, los equipos que pueden trabajar en ese entorno, pueden moverse bastante rápido, lo cual es genial. Así que es increíble.

Otra pregunta está relacionada con eso, de hecho. ¿Qué características de Redwood ofrecen las mayores ganancias de productividad? Sí, para mí son los generadores. Esos son bastante grandes. Sabes, hay un argumento que se puede hacer de que los generadores pueden no ser lo más importante para un framework porque una vez que has generado tu código, luego estás manteniendo los componentes que ya has construido. Y tal vez no siempre estás usando generadores. Pero para mí, especialmente al comenzar un proyecto, poder crear cosas y generar, obtener una gran cantidad de código ya hecho es enorme. Y he comenzado a usar, me subí al tren con ChatGBT dándome código ahora. Estoy usando Copilot y cosas así. Así que cuanto más código pueda ser escrito por mí, mejor. No soy un purista que dice que tengo que escribir todo mi propio código. Con gusto dejaré que la computadora escriba el código por mí. Así que Redwood es genial para eso, ya sabes, generar código para que puedas salir por la puerta. Y luego haces los cambios apropiados que necesitas, por supuesto, en tus componentes y construyes a partir de ahí. Así que es un impulso enorme. Increíble.

Y una última pregunta para la que tenemos tiempo. ¿Hay alguna característica que esté por venir y que esperes con ansias? Bueno, ahora se está hablando de manejar la autenticación de una manera un poco diferente. Hasta ahora, el modelo de autenticación de Redwood ha estado estrictamente vinculado a un proveedor. Puedes usar muchos proveedores diferentes, pero está bastante acoplado a ese proveedor que elijas. Y ahora hay trabajo por hacer para desacoplar la autenticación que tradicionalmente ha estado acoplada a un proveedor específico. Así que estoy deseando eso. Increíble. Bueno, no puedo esperar para aprender más al respecto. Y muchas gracias, Ryan, por responder nuestras preguntas y por tu increíble charla. Realmente apreciamos que estés aquí. Absolutamente. Feliz de estar aquí. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn