De GraphQL Zero a GraphQL Hero con RedwoodJS

Rate this content
Bookmark

A todos nos encanta GraphQL, pero puede ser desalentador poner en marcha un servidor y mantener tu código organizado, mantenible y testeable a largo plazo. ¡Ya no más! Ven a ver cómo paso de un directorio vacío a una API GraphQL completamente desarrollada en cuestión de minutos. Además, descubre lo fácil que es usar y crear directivas para limpiar aún más tu código. ¡Vas a amar aún más GraphQL una vez que hagas las cosas de manera Redwood Easy!

32 min
09 Dec, 2021

Video Summary and Transcription

Tom Pressenwurter presenta Redwood.js, un framework de aplicaciones de pila completa para construir APIs GraphQL de manera fácil y mantenible. Demuestra una aplicación Redwood.js con una interfaz frontal basada en React y una API de Node.js. Redwood.js ofrece una estructura de carpetas y un esquema simplificados para organizar la aplicación. Proporciona una manipulación de datos fácil y operaciones CRUD a través de funciones GraphQL. Redwood.js permite la fácil implementación de nuevas consultas y directivas, incluyendo autenticación y limitación de acceso a datos. Es un framework estable y listo para producción que se integra bien con otras tecnologías de interfaz frontal.

Available in English

1. Introducción a Redwood.js

Short description:

Tom Pressenwurter presenta Redwood.js, un marco de aplicación de pila completa para construir fácilmente y de manera mantenible APIs de GraphQL.

♪♪ ♪♪ ♪♪ ¡Hola a todos! Aquí Tom Pressenwurter con una pregunta sencilla para ustedes. ¿Cuál es la forma más fácil de poner en marcha una API de GraphQL? Todos amamos GraphQL, pero a veces puede parecer un poco intimidante comenzar un proyecto. Y aquí hay otra pregunta. ¿Puede ser fácil y mantenible? ¿Puedes mantener las cosas en orden a largo plazo? Bueno, ahí es donde entra Redwood.js. Redwood.js es un marco de aplicación de pila completa, perfecto para todo, desde prototipos rápidos hasta la construcción de startups. He estado trabajando en ello durante los últimos dos años, y creo que se ha convertido en algo realmente útil, tanto en el front-end como en el back-end.

2. Redwood.js Application Overview and Setup

Short description:

Tom Pressenwurter demuestra una aplicación de Redwood.js, con un front-end basado en React y una API de Node.js en el back-end. Se utiliza Prisma para la comunicación con la base de datos. Luego crea una nueva aplicación de Redwood.js llamada 'tracks' y configura el entorno de desarrollo.

Permítanme mostrarles cómo se ve una aplicación de Redwood.js. En el front-end, tenemos una aplicación web, una aplicación de una sola página basada en React. Y en el back-end tenemos una API basada en Node.js. Escrita en JavaScript o TypeScript. El front-end se comunica con el back-end utilizando Apollo Client y habla GraphQL con el back-end donde utilizamos GraphQL Helix y Envelop para crear el servidor GraphQL.

En su lógica de negocio, utilizará Prisma para comunicarse con una base de datos. Mientras que Redwood.js proporciona el front-end y el back-end, hoy me voy a centrar principalmente en el back-end y en la creación de la API GraphQL. Así que vamos a ver un poco de código.

Bien, lo primero que voy a hacer es crear una nueva aplicación de Redwood.js utilizando yarn create Redwood app, y voy a hacer una aplicación de música sencilla. Así que la voy a llamar tracks. Esto va a descargar todas las dependencias. Ejecutar yarn install, etc. Normalmente lleva un poco de tiempo, así que voy a acelerarlo para ustedes. Ahí vamos. Voy a entrar en ese directorio y voy a abrir VS code desde allí. Lo primero que voy a hacer, es abrir una ventana de terminal aquí y voy a convertir esto en un repositorio de git para que puedan ver más fácilmente qué archivos estoy cambiando.

3. Estructura de carpetas y esquema de la aplicación Redwood.js

Short description:

Aquí está la estructura de carpetas de la aplicación Redwood.js con el front-end y la API en el backend. El archivo de esquema de Prisma define la estructura de la base de datos, incluyendo una tabla de artistas y una tabla de álbumes. Podemos conectar ambas para permitir que los artistas tengan múltiples álbumes. Para ver la aplicación, ejecutaremos 'yarn redwood dev'. El front-end es un marcador de posición y el backend se encuentra en el puerto 8911. Necesitaremos ejecutar una migración para poner el esquema en la base de datos.

Bien, aquí está la estructura de carpetas de una aplicación de Redwood.js. Tenemos el sitio web del front-end del que hablé y tenemos la API del backend. Y aquí, podemos encontrar en la carpeta DB, el esquema.prisma. Este es el archivo de esquema de Prisma que nos dirá cómo se ve nuestra base de datos.

Hay algunos datos de muestra aquí. Para mí, quiero tener una tabla de artistas que solo tendrá un nombre que es una cadena y también voy a tener una tabla de álbumes que contendrá información de álbumes. Eso tendrá un ID, que es un entero es un ID y se incrementará automáticamente y tendrá un título que es una cadena y tendrá un número de likes, que es un entero.

Ahora, quiero poder conectar estos dos para que mis artistas puedan tener múltiples álbumes. Así que voy a decir, voy a tener un álbum y eso va a ser un array de álbumes. Cuando guardo esto, boom, obtenemos algunas cosas agradables que Prisma hace por nosotros. Así que conectará estos dos por nosotros y solo voy a cambiar el nombre que llama a esto y voy a decir que siempre va a tener una de estas conexiones. Eso es todo por ahora, solo un artista y un número de álbumes como esquema.

Ahora, iniciemos nuestra aplicación para que podamos ver cómo se ve. Todavía no hemos hecho mucho. El esquema en realidad no existe en una base de datos todavía pero solo iniciemos la aplicación, ejecutaremos yarn redwood dev. Esto iniciará tanto el backend como el front-end para que podamos ver la aplicación completa conectada y estaremos principalmente interesados en el backend en esta charla pero es útil saber que el front-end existe. Así que aquí está el front-end. Por ahora, es solo un marcador de posición. El backend se encuentra en el puerto 8911 slash GraphQL y aquí podemos ver el esquema de lo que ya está allí. Hasta ahora, no hay mucho. Algunos escalares, algunas cosas de introspección. Realmente no hay mucho sucediendo aún como esperaríamos.

Entonces, ¿qué queremos hacer a continuación? Tenemos nuestro esquema. Necesitamos poner eso en una base de datos. Así que ejecutemos una migración para hacer eso. Así que ejecutaré YARN Redwood Prisma porque estamos usando Prisma. Migrate-dev y eso tomará nuestro esquema, mirará qué ha cambiado y creará una migración para eso y la pondrá en una carpeta de migraciones que aparecerá aquí en un segundo una vez que le dé un nombre. Y aquí está. Así que diré agregar artista y álbum. Ahora creará esta carpeta de migraciones por nosotros.

4. Añadiendo Datos y Generando Funciones GraphQL

Short description:

Podemos implementar fácilmente migraciones en un servidor de producción. Ahora tenemos el esquema de la base de datos establecido. Podemos agregar datos de muestra utilizando un archivo de semilla y el comando 'yarn redwood prisma db seed'. Redwood JS proporciona funciones GraphQL para listar y crear datos. Al generar un andamio para artistas y álbumes, podemos realizar operaciones CRUD. El esquema de GraphQL ahora incluye consultas para álbumes y artistas, así como operaciones de creación, eliminación y actualización. Con Redwood, podemos trabajar rápidamente con datos y enfocarnos en la experiencia del desarrollador.

Esto nos permite implementar fácilmente estas migraciones en un servidor de producción eventualmente. Y ahora tenemos el esquema establecido dentro de la database.

Muy bien, genial. Pero no es muy interesante hasta que haya algunos data. Así que podemos agregar algunos data, algunos datos de muestra en la database utilizando este archivo de semilla aquí. Tengo algunos datos de muestra aquí. Así que voy a borrar este archivo. Voy a pegar el mío. Estos son solo algunos datos de muestra que se ingresarán allí. Y puedo poner eso en la database usando yarn redwood prisma db seed. Así que se ejecutará ese archivo e ingresará esos datos de muestra en la database para que podamos jugar con ellos. Ahí lo tenemos. Eso está hecho.

Y ahora necesitamos una forma de ver los data. Y sería útil tener algunas funciones GraphQL para poder listar y tal vez crear nuevos. Afortunadamente, Redwood JS tiene exactamente lo que necesitamos. Así que ejecutaremos yarn redwood g para generar, y vamos a crear un andamio, que será lo que necesitamos tanto en el front-end como en el back-end para crear las operaciones CRUD que nos permitirán comenzar. Luego podemos modificar a partir de ahí. Así que crearé un andamio para el artista, y crearé uno para el álbum.

Y ahora que tenemos eso, veamos nuevamente nuestro GraphQL en nuestro esquema. Verás que ahora hay muchas más cosas allí. Así que tenemos muchas consultas sobre álbumes y artistas, así como operaciones de creación, eliminación y actualización. Así que ejecutemos uno de ellos y veamos qué tenemos. Veamos los álbumes y podemos decir, dame el título y el número de likes, ejecutemos eso y aquí vamos. Ahora tenemos muchos álbumes en la database con los que podemos jugar. Y tenemos funciones GraphQL para poder ver todas esas cosas en solo unos minutos. Esto es realmente lo que implica trabajar en el mundo de Redwood. Intentamos hacer que todas estas cosas sean súper fáciles. Nos enfocamos mucho en la developer experience, llevándote a donde quieres estar lo más rápido posible. Muy bien, eso está bien y es bueno.

5. Implementación y Creación de Consultas

Short description:

Puedes usar tipos en diferentes archivos en Redwood.js. Los servicios en Redwood.js son fragmentos de la API de GraphQL divididos por funcionalidad. Los nombres de las consultas y mutaciones en el archivo SDL se mapean automáticamente a funciones JavaScript o TypeScript exportadas en la implementación del servicio. La implementación consiste en simples llamadas a Prisma que pueden ser personalizadas. Veamos cómo crear otra consulta para encontrar álbumes populares.

Tienes tu esquema, pero ¿qué generamos? ¿Es eso algo bueno? Bueno, vamos a ver. Así que vamos a ver en el origen GraphQL álbumes. Y aquí encontramos el SDL. El Lenguaje de Definición de Esquema GraphQL que representa cómo se ve nuestra API de GraphQL. Así que vemos el tipo de álbum, tenemos algunas consultas y tenemos las otras cosas que ya has visto en el esquema.

De manera similar, tenemos otro archivo donde se define el artista. Y de hecho, puedes usar tipos en todas estas cosas. Los unimos para ti. Así que hacemos que esta parte de crear una API de GraphQL sea muy fácil. Una organización realmente excelente. Todo está en su lugar. Todo está separado exactamente donde quieres que esté.

Entonces, ¿cómo se implementan estos? Veamos en los servicios. Un servicio es un fragmento de tu API de GraphQL dividido por funcionalidad. Y aquí podemos ver, nuevamente, veamos los álbumes, albums.js. Y aquí verás una serie de funciones regulares exportadas. Cada una de ellas puede tomar argumentos, tal vez. Y esto te resultará familiar. Se parece mucho a lo que podrías poner en tus resolutores, si estás creando un objeto de resolutor gigante.

Lo bueno de Redwood.js es que mapearemos automáticamente los nombres de tus consultas y mutaciones en tu archivo SDL a funciones JavaScript o TypeScript que se exportan. Por ejemplo, en el SDL, tienes la consulta de álbumes, y en la implementación del servicio albums.js, tienes una función de álbumes. Y así es como los emparejamos. Simplemente buscamos funciones exportadas con el mismo nombre, y así los mapeamos. Y verás por qué esto se vuelve importante más adelante.

Entonces, bueno, aquí está la implementación. Estas son simplemente llamadas a Prisma, simples, no demasiado complicadas. Y si quieres cambiar esto, puedes personalizarlo a tu gusto. Si quieres eliminar la capacidad de crear un álbum a través de GraphQL, simplemente puedes eliminar esta implementación, eliminar la declaración del SDL y listo. Ahora veamos cómo se ve crear otra consulta. Así que vamos a álbumes y digamos, quiero tener la capacidad de encontrar álbumes populares.

6. Implementación de la consulta 'popAlbums'

Short description:

Para implementar una nueva consulta en Redwood.js, crea una función que devuelva los datos deseados de la base de datos. En este caso, la consulta 'popAlbums' ordena los álbumes por likes en orden descendente y devuelve los primeros 10. Redwood.js facilita la separación y gestión de funciones en la API de GraphQL. Esta es la simplicidad y magia de Redwood.js, que te permite construir y añadir rápidamente funcionalidad a tu API de GraphQL.

Así que crearé una nueva consulta llamada popAlbums, y va a devolver un array de álbumes, y ninguno de ellos será nulo. Y le agregaré esta directiva require auth, que te mostraré para qué sirve más adelante. Está subrayado aquí porque dice que el servicio no está implementado. Así que tenemos algunas cosas útiles que hacemos en VS Code para ayudarte. Y una de ellas es avisarte de que, hey, has definido esto en el SDL, pero aún no has escrito el servicio para ello.

Muy bien, genial. Así que vamos a escribir la implementación del servicio, el resolutor para esto. Va a parecerse mucho a albums. Así que exportemos const popAlbums, y eso va a ser una función, sin argumentos. Y va a devolver la base de datos de la tabla de álbumes. Voy a encontrar muchos de esos. Y voy a, digamos que queremos ordenar todos los álbumes por likes, en orden inverso, descendente, y luego tomar los primeros 10 de esos. Así que con Prisma, podemos decir ordenar por, likes, descendente, y tomar los primeros 10 de esos. Así que guardemos eso. Y vayamos a ver si ahora está disponible después de que el servidor se recargue. Así que deberíamos esperar ver pop albums, y de hecho, ahí está. Y obtengamos el título y los likes, ejecutemos eso. Y aquí vamos. Ahora tenemos algunos álbumes, y los likes están ordenados en orden descendente. Y veamos, solo hay 10 de ellos. Genial. Hemos implementado una nueva función, una nueva consulta de GraphQL. Tan fácil como eso, tiene sentido. Exportamos una función. Es muy fácil separarla de todas las demás. Y es tan fácil como eso. Esta es la magia de Redwood que has visto hasta ahora. Tan fácil como eso para poner en marcha tu API de GraphQL, añadir algo a ella. Ahora vayamos un poco más lejos. Digamos que quiero añadir un nuevo servicio y añadir algo en eso, ¿verdad? Pero esta vez lo haré a mano.

7. Añadiendo el servicio 'info' y la consulta 'top album'

Short description:

En nuestro GraphQL, añadimos un servicio de información con un esquema que extiende el tipo de consulta. Creamos una consulta 'top album' que devuelve el álbum más popular y requiere autenticación.

Así que en nuestro GraphQL, voy a añadir algo. Lo llamaré info. Será nuestro servicio de información. Y ahí todo lo que tenemos que hacer es, al igual que los otros, exportar una constante llamada esquema. Y va a ser GQL, GraphQL. Y ahí, tenemos nuestro tipo de consulta que vamos a extender. Y quiero crear algo que nos devuelva un solo álbum, el álbum más popular. Así que lo llamaré el top album. Y simplemente va a responder con un álbum y necesito mi directiva require auth.

8. Implementación de la consulta 'top album'

Short description:

Podemos importar funciones de resolución y usarlas en otros servicios, separando la funcionalidad del backend y mejorando la mantenibilidad.

Así que guardémoslo. Es el error, sin implementación. Así que démonos un pequeño atajo rápido aquí. Y esto va a crear la implementación para nosotros y lo vamos a rellenar ahora en el servicio de información. Voy a limpiar esto un poco, sin argumentos. Y recuerdas cómo esas funciones que las funciones de resolución ahora son solo funciones regulares de JavaScript. Bueno, eso significa que podemos importarlas. Así que importemos los álbumes populares del servicio de álbumes. Y como ya lo tenemos disponible, saquemos el primero de ahí. Así que obtengamos todos los álbumes populares. Lo llamaremos, tenemos que esperar porque es asíncrono. Y luego retornemos el álbum cero y solo retornemos el primero. Y por supuesto, tenemos que esperar. Así que tenemos que hacer esta función asíncrona. Así que guardémoslo. Y ahora esperaríamos después de reiniciar el servidor que tengamos una nueva consulta llamada top album. Y veamos cuál es el título y el número de likes que hay ahí. Oops, likes, en plural. Aquí vamos. Tenemos 9808 likes, ese es el top album tal como esperamos. Así que eso estuvo bastante bien, ¿verdad? Podemos importar esas funciones de resolución y usarlas en otros lugares en los servicios. Realmente te brinda una forma de separar tu funcionalidad del backend, tu lógica de negocio de una manera lógica, lo que te brinda una mantenibilidad a largo plazo y hace que sea realmente fácil de entender y comprender lo que está sucediendo.

9. Recorriendo y recuperando datos en GraphQL

Short description:

En GraphQL, puedes recorrer datos para obtener información específica. Por ejemplo, puedes recuperar el nombre de un artista o explorar álbumes relacionados. Esta flexibilidad te permite mostrar fácilmente datos relevantes en la página de inicio de tu aplicación. A pesar de pequeños errores de nomenclatura, la capacidad de GraphQL para recorrer y recuperar datos es impresionante.

Otra cosa genial acerca de GraphQL es que, por supuesto, puedes recorrer cosas. Así que digamos que queremos saber quién es el artista y obtener su nombre, podemos ejecutar eso. ¡Boom, ahí está su nombre! Y, por supuesto, podemos ir más profundo. Podemos decir, tal vez estoy en mi página de inicio y quiero mostrar el álbum más popular y recomendarte algunos de los álbumes relacionados. Así que diré, bien, ¿cuáles son tus álbumes de este artista? Y quiero el título y el número de likes para mostrarlos en la página de inicio. Y parece que nombré esto incorrectamente. En realidad se llama álbum. Ok, aquí vamos. Ahora podemos ver los álbumes relacionados. ¿No te encanta GraphQL? Es genial, ¿verdad? Pero espera, hay más.

10. Understanding the require auth Directive

Short description:

Hablemos sobre la directiva require auth en Redwood.js. Por defecto, cada consulta y mutación de GraphQL está asegurada. Redwood.js permite una fácil integración de servicios de autenticación de terceros o la opción de crear el tuyo propio. La directiva require auth se implementa en la carpeta de directivas y utiliza una directiva de validación para aceptar o rechazar el acceso. La función require auth verifica si el usuario está autenticado. Si no lo está, se genera un error de autenticación. Para omitir la autenticación en consultas específicas, se puede utilizar la directiva skip auth.

Hablemos sobre esas directivas que vimos. Así que recuerda los álbumes y la directiva require auth. Bueno, veamos qué hace eso. En Redwood, llamamos a estos servicios seguros. Eso significa que, de forma predeterminada, cada consulta y mutación de GraphQL que hagas estará asegurada. Ahora, no hemos instalado ninguna autenticación y Redwood.js lo hace realmente fácil para agregar integraciones de autenticación de terceros como OAuth o Netlify Auth. O puedes crear el tuyo propio y guardarlo en tu propia base de datos. Y tenemos una funcionalidad completa llamada dbouth para hacer eso.

Entonces, cuando haces eso, require auth realmente comenzará a hacer algo. Ahora mismo, simplemente permitirá que todo pase como has visto aquí. No se necesita autenticación. Bueno, veamos cómo se implementa require auth. Y eso está aquí en la carpeta de directivas. Entonces, require auth entra, dice, esto es cómo se ve en el mundo SDL, esto se fusiona. Y esta es una directiva de validación, lo que significa que va a aceptar o rechazar tu acceso. Y aquí estamos llamando a esta aplicación require auth, que está aquí arriba y simplemente extrae algo de la fuente lib auth, este require auth. Así que veamos eso. Fuente lib auth. Y aquí está require auth y llama a is authenticated, que simplemente devuelve true. Entonces, si entramos aquí y decimos, bueno, en lugar de hacer eso, voy a fingir ser un servicio de autenticación. ¿Qué pasa si no estoy autenticado y lanzo un nuevo error de autenticación y simplemente dirá, nope. De acuerdo, ahora esperaremos que nuestras consultas no funcionen. Ahora hemos forzado que no haya, todo está sin autenticar. Así que intentemos ejecutar esto de nuevo. Y aquí vamos. Nope, sin autenticar, y ahora nada que use require auth funcionará. Entonces, digamos que queremos obtener el álbum y obtener el título y los likes. Nope, GraphQL dice nope, ¿verdad? Porque está detrás de require auth. De acuerdo, bueno, ¿y si no queremos autenticación? ¿Qué pasa si esta consulta está en la página de inicio y no necesitas estar autenticado? Bueno, por eso tenemos otra directiva llamada skip auth. Así que la consulta de álbumes, digamos que puede omitir la autenticación ahora porque está disponible públicamente.

11. Implementing 'sub-limiter' Directive

Short description:

Puedes integrar la autenticación directamente en tus archivos SDL. Redwood.js proporciona una directiva de transformación llamada 'sub-limiter' que te permite limitar la cantidad de registros devueltos según la suscripción del usuario. Al implementar la función de transformación, puedes modificar el valor del resultado. Esta directiva se puede utilizar en la consulta de álbumes para restringir el acceso a los suscriptores.

Entonces, consulta de álbumes, vamos a decirle que ahora puede omitir la autenticación porque está disponible públicamente. Así que ahora ejecutemos esa consulta. ¡Hey, ahí vamos! Funciona de nuevo. Entonces, authentication se puede integrar directamente en tus archivos SDL. Lo tienes disponible de manera muy detallada por consulta y lo verás en las mutaciones. Y eso se integra con todas nuestras técnicas de authentication, lo que lo hace súper fácil.

Entonces, ¿qué pasa si quieres crear el tuyo propio? Hay otro tipo de directiva llamada directiva de transformación. Y te voy a mostrar lo que eso significa. Así que generemos una. Yarn redwood generate directive. Y digamos que quiero, si tienes una suscripción a mi servicio, entonces obtendrás todos los data que desees. Pero si no tienes una suscripción, entonces quiero limitar la cantidad de registros que puedes obtener. Así que voy a llamar a esto un sub-limiter porque es un limitador de suscripción. Entonces, sub-limiter. Esto generará una nueva directiva. Tengo que decirle que quiero una directiva de transformación. Generará un esqueleto para mí. Y aquí está. Entonces, quiero decir, esta es una implementación real. Tiene un montón de comentarios aquí, pero la mayor parte de esto es, hay una función de transformación, recibe el valor del resultado tal como es, y te permite modificarlo. Así que aquí, en lugar de fingir que esto es una cadena, que el mío no lo será, el mío será matrices, puedo decir, quiero cortarlo y restringirlo a solo tres elementos. Ahora, esto lo hará para todos. Si tuviera más lógica aquí, podría decir, si context.currentUser, porque esto es, siempre puedes obtener el usuario actual, el usuario autenticado llamando a context.currentUser, . algo, algo, algo tiene suscripción, etcétera, que he implementado, entonces así es como lo haría aquí. No tengo eso. Esto simplemente siempre restringirá. ¿Dónde voy a usar eso? Puedo usar eso en un álbum, en mi consulta de álbumes. Puedo decir, en lugar de dártelo todo, solo quiero que esté disponible para los suscriptores. Aquí vamos.

12. Implementando la Directiva de Limitador de Suma

Short description:

Agrega la directiva de limitador de suma para restringir la cantidad de álbumes devueltos. Prueba fácilmente las funciones con pruebas generadas. Redwood.js ofrece características avanzadas como limitación de profundidad, funcionalidad segura por defecto, integración de registro y almacenamiento en caché. Obtén más información en redwoodjs.com y síguenos en Twitter en redwoodjs. ¡Regístrate para obtener pegatinas gratis!

Agrega la directiva de limitador de suma a la consulta de álbumes, y ahora, en lugar de obtener todos los álbumes, de los cuales hay alrededor de 100, espero que esto se restrinja a tres. Y ahí vamos. Puedo tomar ciertos fragmentos de implementación y puedo dividirlos de diferentes formas y puedo adjuntarlos al SDL donde tenga sentido, lo cual es realmente útil y puede limpiar tu código.

En lugar de poner todo eso en el archivo de servicios para cada cosa y replicarlo en todas partes, aquí está solo en el SDL. Y lo que es realmente genial es que puedo copiar eso y puedo decir, bueno, quiero que eso también sea verdadero para los álbumes populares. ¿Adivina qué? Solo obtienes tres. Así que puedo ponerlo allí y ahora puedo decir álbumes populares y esperaremos que efectivamente yo, todavía no estoy autenticado allí porque no lo omití, ¿recuerdas? Así que omítelo. Y ahora esa es una consulta pública que puedo hacer. Y veamos si funcionó allí también. Ejecutemos eso. Y aquí vamos. Ahora solo tengo tres álbumes que se han devuelto.

Desafortunadamente, ese es todo el tiempo que tengo hoy, pero esto va mucho más profundo. Facilitamos la prueba de cada una de estas funciones que creas porque están aisladas. Puedes probarlas fácilmente con las pruebas que generamos para ti aquí. Tenemos características advanced como la limitación de profundidad para evitar el abuso de tu servicio, todas las funcionalidades seguras por defecto, integración de registro e incluso almacenamiento en caché próximamente. Así que si te gusta lo que has visto y quieres saber más, visita redwoodjs.com, échale un vistazo, sigue nuestro proyecto en Twitter en redwoodjs. Y si quieres algunas pegatinas gratis, lo cual sé que quieres, ve a redwoodjs.com y regístrate para obtener algunas pegatinas gratis. Gracias por escuchar.

¿Qué opinas de estas respuestas aquí? ¿Es esto lo que esperabas o? Bueno, veamos. Esperaba que mucha gente no hubiera oído hablar de Redwood para que ahora pudieran haberlo escuchado y responder que sí en el futuro. Así que veamos, nunca había oído hablar de eso. Sí, un 30%. Había oído hablar de eso, pero nunca lo probé. Eso es realmente increíble. Me gusta hacer un seguimiento de cuánto se conoce Redwood en la conciencia pública, ¿estamos difundiendo la palabra? Y así, esto es genial, en realidad, pensé que podría ser menor que esto, pero esto es asombroso. Quiero decir, escuchar sobre eso es la primera parte. Probarlo o usarlo en un proyecto, 0%. Bueno, no hay otro camino que no sea hacia arriba desde ahí. Somos un proyecto joven, así que creo que esto es, quiero decir, esto es exactamente donde queremos estar cuando se trata de estas cosas.

QnA

Redwood.js Open Source and Production Capability

Short description:

Redwood.js tiene licencia MIT y es gratuito. Aún no ha alcanzado la versión 1.0, pero está en la fase de candidato a lanzamiento. Es bastante estable, con correcciones de errores en curso. La experiencia del primer usuario es una prioridad y hay un tutorial increíble disponible en redwoodjs.com. Redwood es un marco de aplicación web de pila completa, no solo GraphQL. Es adecuado para su uso en producción, con startups financiadas que ya lo están utilizando.

Queremos estar donde la gente haya oído hablar de ello, y ahora pueden pasar al siguiente paso. Exactamente, creo que estas son buenas estadísticas. Algunos de ellos nunca habían oído hablar de ello, así que ahora lo han hecho y ahora pueden probarlo y seguir adelante desde allí, seguro. Exactamente, exactamente.

Sí, vamos a la audiencia con algunas preguntas y respuestas, y recuerden, audiencia, si tienen alguna pregunta para Tom, adelante y colóquenlas en el canal de preguntas y respuestas en Discord, y las responderemos ahora mismo. Ya tenemos un par de preguntas aquí para ti, Tom.

La primera es, ¿Redwood es de código abierto? Sí, Redwood tiene licencia MIT y es gratuito, así que el límite es el cielo. Úsalo para lo que quieras. Hazlo tuyo, cámbialo. Nos encantan las contribuciones, obviamente. Ya tenemos más de 250 personas que han contribuido al marco de trabajo. De hecho, hemos estado trabajando en ello durante varios años, por lo que se ha vuelto bastante maduro, pero aún no ha alcanzado la versión 1.0. Aunque la versión 1.0 llegará muy pronto. Ahora estamos en la fase de candidato a lanzamiento, y nos encantan las contribuciones. Por eso es de código abierto. Soy un gran defensor del código abierto. Me ha ayudado mucho en mi career, y siempre he disfrutado participando en proyectos de código abierto, así que absolutamente, con licencia MIT, gratuito para usar.

Increíble, sí, también me encanta el código abierto. ¿Y qué hay de la capacidad de producción? ¿Está listo para su uso en producción? Bueno, aún no es la versión 1.0. Como dije, ahora estamos en la fase de candidato a lanzamiento. Ingresamos a esa fase hace aproximadamente una semana y media, y es bastante estable. Todavía hay algunas correcciones de errores que haremos. Tenemos la intención de estar en la fase de candidato a lanzamiento probablemente hasta febrero o marzo del próximo año, así que un par de meses mientras trabajamos en los errores y nos aseguramos de que la primera user experience sea realmente excelente. Tenemos un tutorial increíble que si estás interesado en lo que viste hoy, ve a redwoodjs.com y revisa el tutorial un poco, y aprenderás mucho más no solo sobre el backend, sino también sobre el frontend, ya que Redwood es un marco de aplicación web de pila completa. No se trata solo del lado de GraphQL que viste hoy. Realmente tiene un lado completo de aplicación web, y trabajamos muy duro en eso, y en un par de meses será la versión 1.0, lo que significa que diría absolutamente, sí, úsalo en producción. Aunque hay startups, startups financiadas hoy en día que están construyendo con Redwood y en producción, así que se puede hacer.

Increíble, genial. Bueno, hablando de eso, mostraste muchas cosas geniales. Lo hiciste ver tan fácil en el backend.

Redwood.js Frontend Features

Short description:

Redwood.js tiene un frontend basado en React con características como cells para la obtención declarativa de datos, lo que facilita la gestión y optimización del flujo de obtención de datos. También ofrece capacidades de pre-renderizado para mejorar el SEO y el rendimiento. Consulta el sitio web y el tutorial para obtener más detalles.

¿Y qué hay del frontend? ¿Cómo es eso y cuáles son las fortalezas del frontend? Actualmente, Redwood está basado en React como frontend, y hacemos mucho trabajo para integrar el frontend y el backend. Tenemos una característica que llamamos cells, que es una forma declarativa de hacer la obtención de data. Una vez que tienes tu backend de GraphQL en el frontend, si quieres obtener data y luego renderizar un componente React, utiliza lo que se llama una celda, y simplemente indicas cuál es tu consulta, y luego dices qué quieres que suceda, qué componente quieres que se renderice cuando estás en un estado de carga, cuando estás en un estado de error, cuando tienes un conjunto de resultados vacío, o cuando tienes un retorno exitoso, simplemente enumeras qué componentes serían esos, en lugar de tener todo tipo de condicionales por los que tienes que navegar en tu código, lo hace mucho más fácil de gestionar, y nos permite entrar en el ciclo de vida para que en el futuro, podamos hacer cosas aún más interesantes y optimizar ese flujo de obtención de data, pero eso es solo una de las muchas cosas que hacemos.

Tenemos capacidades de pre-renderizado, por lo que en tu archivo de rutas, simplemente puedes indicar que deseas que una página específica se pre-renderice y luego en el momento de la construcción, pre-renderizaremos esa página para que esté estáticamente disponible, lo cual es excelente para el SEO y el rendimiento, y luego se hidratará en el cliente y se presentará al usuario. Y esto es solo algunas de las características que tenemos. Puedes ir al sitio web obviamente y ver todo lo que hay. El tutorial cubre todo esto muy bien. Así que si estás interesado, definitivamente sigue el tutorial. Eso es lo primero que debes hacer si quieres aprender más.

Comparison to Other Frameworks

Short description:

Redwood.js se diferencia de otros frameworks de pila completa al integrar un conjunto de herramientas, incluyendo Storybook, Jest y GraphQL. Ofrece una experiencia fluida para construir proyectos o startups. Si bien frameworks como Blitz.js y Remix ofrecen capacidades de pila completa, no aprovechan GraphQL. Redwood.js está optimizado para utilizar GraphQL como protocolo de transporte, lo que permite una fácil integración de clientes adicionales.

Sí, suena muy interesante y parece que resuelve muchos problemas que otros frameworks podrían tener o que también intentan resolver. Y hablando de eso, ¿qué otros frameworks de pila completa hay o cómo se compara Redwood con otros frameworks de pila completa? Y Metin específicamente quiere saber, ¿hay alguno del que tengas miedo? Así que vivimos en el mismo espacio, supongo, Next.js, obviamente muy popular, es increíble. Es un marco de trabajo increíble. Ahora bien, no aporta mucho más. Hay muchas cosas que funcionan con él, pero tendrás que hacer la mayor parte del trabajo tú mismo para integrar esas cosas. Y en comparación con Next, Redwood integra un conjunto enorme de herramientas, Storybook está incluido por defecto, no tienes que configurarlo, está completamente integrado. Jest, pruebas, integrado. GraphQL en el backend, integrado. Todas estas herramientas que eventualmente querrás agregar si estás construyendo un proyecto o una startup ya están disponibles en Redwood. Esa es la mayor diferencia en comparación con algo como Next. Ahora bien, hay otros frameworks que también se están construyendo como pila completa hoy en día. Cosas como Blitz.js, que se construye sobre Next, agrega capacidades de backend de pila completa. También integran Prisma desde el lado de la base de datos, pero está construido en un contexto más de Next. Así que si te gusta Next, es uno para revisar. Y luego está también Remix, que recientemente se ha liberado como código abierto y está tomando una postura un poco diferente. Ahora bien, ninguno de estos otros dos aprovecha GraphQL. Así que si estás viendo esta conferencia, supongo que te gusta GraphQL. Y si quieres utilizar GraphQL como tu protocolo de transporte desde tu frontend a tu backend y facilitar la adición de clientes adicionales a medida que avanzas, un cliente móvil o un cliente de línea de comandos o lo que sea, entonces Redwood estará súper optimizado exactamente para ese caso. Y una gran razón para elegir Redwood será por GraphQL, que ninguno de los competidores te ofrecerá.

Redwood.js Front-end Technologies

Short description:

Redwood.js está diseñado para ser una arquitectura multi-cliente, lo que permite una fácil integración de diferentes tecnologías front-end, como React, Vue y Svelte. El objetivo es proporcionar flexibilidad en la implementación de sitios web o aplicaciones con varios frameworks front-end, todos consumiendo el mismo back-end de GraphQL.

Genial. Entonces mencionaste que el front-end utiliza, o dijiste ahora mismo que el front-end utiliza Reactivo, ¿hay planes de cambiar eso a algo más o tal vez incorporar otros front-end como algo tipo Astro? Sí, desde el principio, hemos pretendido que Redwood sea una arquitectura multi-cliente de un tipo de arquitectura, por eso usamos GraphQL. Una de las cosas que podemos hacer en el futuro debido a eso es agregar muy fácilmente otras tecnologías de renderizado de clientes. Así que podrías imaginar que además de un sitio web de front-end basado en React, podríamos tener un sitio web de front-end basado en Vue o Svelte que aún solo consuma el mismo back-end de GraphQL e incluso podrías usar varios de esos si tuvieras diferentes sitios que quisieras implementar utilizando diferentes tecnologías front-end a lo largo del tiempo o realmente no es diferente a tener una aplicación móvil basada en React, como una aplicación móvil nativa de React que nos encantaría agregar en algún momento y una vez que lleguemos a la versión 1.0, comenzaremos a investigar en qué de estas otras tecnologías están interesadas las personas en que trabajemos y hacer que esas cosas sean mucho más fáciles de integrar con tu back-end de GraphQL también. Así que el cielo es el límite cuando se trata de tecnologías front-end. Sí, no, eso es increíble. Tener tantas opciones diferentes, a la gente le encanta tener opciones. Así que hay una pregunta más aquí volviendo al tema del código abierto, ¿hay un plan para un modelo de ingresos ya que es de código abierto? ¿Cómo lo vas a financiar? Bueno, por ahora lo financio yo mismo y hay varias personas que trabajan en ello a tiempo completo. Me encuentro en la afortunada posición de poder hacerlo y me gusta eso porque no tengo que preocuparme por todas las cosas de inicio que normalmente vienen con esto. No tengo que preocuparme por los inversores que intentan acelerar las cosas o aprovechar y monetizar cosas que son un poco antinaturales. Es difícil decir qué depara el futuro para Redwood. Principalmente quería que esto existiera para ayudar a las personas a construir sus startups y proyectos más rápidamente. Por eso estoy en este espacio desde el principio. Por eso me convertí en desarrollador yo mismo. Y poder devolver de esta manera es realmente satisfactorio para mí. Ahora me encantaría que hubiera algún tipo de membresía de Redwood algún día donde las personas pudieran pagar una tarifa para acceder más fácilmente al equipo o a contenido premium o algo para que no tenga que pagar la factura completamente por mí mismo para siempre, lo cual sería agradable, pero siempre quiero que se haga de una manera que sea aditiva y de una manera que realmente abrace a la comunidad y haga avanzar a Redwood desde una perspectiva de código abierto y realmente se haga en beneficio de la comunidad. Eso es realmente importante para mí. Esa es la verdadera naturaleza del código abierto. Eso es increíble. Te felicito por hacer eso. Eso es genial. Así que esas son todas las preguntas que tenemos de la audiencia. Así que quiero agradecerte, Tom. E invitamos a cualquiera que tenga más preguntas a ir a spatial chat a la sala de conferencias de Tom. Puedes hacer más preguntas allí. Pero por ahora, quiero agradecerte de nuevo, Tom, y luego pasaremos a nuestro próximo tema. Muchas gracias. De acuerdo.

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 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 Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.