Por qué Redwood Adoptó los Componentes del Servidor React

Rate this content
Bookmark

Redwood, un marco de aplicaciones de pila completa de código abierto, se ha volcado completamente en React y los Componentes del Servidor React. ¿Por qué? A pesar de la etapa temprana de RSC y su compleja implementación, Redwood está en una posición única para capitalizar las capacidades de RSC, permitiendo nuevas características, posibilidades y DX emocionantes.

33 min
13 Nov, 2023

AI Generated Video Summary

Redwood es un marco de aplicaciones web de pila completa construido con React, GraphQL y Prisma. Prioriza las convenciones y la mantenibilidad, y colabora estrechamente con el equipo de React. Redwood ofrece características de pila completa, incluyendo funcionalidad en tiempo real sin WebSockets. La Época de Bighorn es una nueva fase en el roadmap de Redwood. Redwood está emocionado por las posibilidades de los Componentes del Servidor React y quiere colaborar con la comunidad.

1. Introducción a Redwood y React

Short description:

Me toca el público después del almuerzo. Vamos a aprender sobre Redwood. Hablemos del elefante en la habitación. Algunos de ustedes no saben qué es Redwood, así que vamos a abordar eso. También vamos a hablar mucho sobre RSCs. Estoy en el equipo de liderazgo de Redwood. Nos encanta ayudar a las personas a tener éxito. React Server Components definitivamente está haciendo eso por Redwood. Redwood está totalmente comprometido con React. Hay mucho por venir. Estamos realmente emocionados con lo que está sucediendo con React.

Me toca el público después del almuerzo. Y eso es porque voy a hacer que seas interactivo. Vamos a pasar un buen rato. Vamos a aprender sobre Redwood.

Hablemos del elefante en la habitación. Algunos de ustedes no saben qué es Redwood, así que vamos a abordar eso. También vamos a hablar mucho sobre RSCs. Estoy en el equipo de liderazgo de Redwood. Mencioné un par de cosas que hago. Y la parte más importante del tema que une otras cosas es que amo, y los equipos con los que trabajo, nos encanta ayudar a las personas a tener éxito. Nos encanta ayudar a otros a tener éxito, para que eso pueda hacer que el Proyecto Redwood tenga éxito. Y eso es mucho de lo que estamos haciendo. Y React Server Components definitivamente está haciendo eso por Redwood. Y también esperamos que podamos avanzar algunas cosas con React Server Components. Pero primero, vamos a cortar por lo sano aquí. ¿Estamos obteniendo el... Ahí vamos. Voy a ir al grano. En realidad, voy a decirte el punto antes de hacer ninguna presentación, porque quién sabe qué va a pasar realmente después? Todo lo que necesitas recordar es que Redwood está totalmente comprometido con React. Así que todo lo que estoy a punto de hablar, el resumen al final es que estamos totalmente comprometidos con React, y hay mucho por venir. Estamos realmente emocionados con lo que está sucediendo con React, y eso es donde Red... Debido a donde React está yendo, eso es a donde va Redwood.

2. Tu viaje con React

Short description:

Tu viaje con React. Esto requerirá un poco de participación del público. Reflexiona sobre ese momento en tu viaje con React en el que sentiste posibilidad creativa. El ecosistema de JavaScript nos emociona sobre lo que es posible.

Muy bien. Aquí vamos. Parte interactiva. Muy bien. Tu viaje con React. Así que esto requerirá un poco de participación del público. Es cierto que en realidad no puedo ver a ninguno de ustedes en este momento debido a la luz brillante, así que no sabré si están participando, pero podré escuchar, y será divertido, vamos a pasar un buen rato. Así que si puedes recordar hace mucho tiempo, quiero que reflexiones sobre ese momento en tu viaje con React muy al principio donde podrías haber sentido esa posibilidad creativa. ¿Verdad? JavaScript ecosistema, nos encantan este tipo de cosas, nos emocionamos mucho con las cosas brillantes. ¿Por qué? Porque nos emociona lo que es posible. Así que piensa mucho atrás.

3. Reflexión sobre la Creatividad en React

Short description:

Levántate y evalúa tu creatividad y posibilidad ilimitada con React. Si eras un 1 cuando te encontraste con React por primera vez, siéntate. Si eras un 2, siéntate. Si eras un 3, permanece de pie. Reflexiona sobre tu entusiasmo y posibilidades con React. Ahora, imagina tu relación con React y las posibilidades creativas la semana pasada.

Muy bien. Todos de pie. Sé que tienen portátiles. Puedo ver el portátil. Levántate, eso está bien. Sí, estas personas en el frente, me gustan estos chicos. Ese es Tom, por cierto. Muy bien. Levántate, eso está bien. Voy a ir al lado para poder dirigir un poco.

Esto es lo que vas a hacer. Muy bien. Si eras un 1, 1 va a significar, espera, ¿la gente puede ser creativa, verdad? 1 es el más bajo en la escala. Podría ser mejor. Podría ser peor. Esa es la escala media. 3 es esa sensación de posibilidad ilimitada. Quizás no tan alto, pero, ya sabes, en algún lugar de allí. Así que piensa en cuando descubriste React, interfaces de usuario interactivas en el cliente. Ahora, adelante y siéntate. Si estabas calificando a ti mismo, tu relación con la creatividad y la posibilidad ilimitada en el Si eras un 1 cuando te encontraste con React por primera vez, adelante y siéntate. ¿Significa que la gente puede ser creativa? Vale. Muy bien. Gente honesta. No estoy señalando a nadie, pero vi eso, gracias. Si eras un 2, cuando empezaste tu viaje con React, siéntate. Vale. Bien. Si eras un 3, estás de pie. Genial. Alguien, una persona que es un 3. ¿Qué era algo que te emocionaba mucho hacer? Una sensación de posibilidad ilimitada, grítalo. Algo que te emocionaba hacer con React la primera vez. Nadie. Escribir un reconciliador y para cosas diferentes, como React 3 fiber y como, KC fiber, esas tecnologías eran realmente geniales y me metieron en la mentalidad de que, tú realmente podrías hacer cualquier cosa. Podrías hacer cualquier cosa. Me gusta. Super nerd, gran ejemplo. Muy bien.

Vale. Todos, levántense de nuevo. Levántense de nuevo. Una vez más. Ahora, quiero que imagines la semana pasada. Ahora, estás emocionado porque estás en la masterclass, esto no es sobre la masterclass, así que hace una semana, o el último proyecto en el que estuviste, ¿cuál era tu relación con React y la posibilidad creativa para ello, ¿verdad? Así que, esto es como hace una semana. Esto es reciente ahora. Así que, adelante y siéntate si eras un uno. Oh, vaya. Si eras un dos. Si eras un tres.

4. Redwood: Un Marco de Aplicaciones Web de Pila Completa

Short description:

Redwood es un marco de aplicaciones web de pila completa de JavaScript. Su objetivo es ser el marco de aplicaciones web de pila completa y está construido con React, GraphQL y Prisma. Redwood proporciona un conjunto de pruebas, soporte para TypeScript, una CLI de Vite y generadores. También incluye características como habilitación de caché, seguridad de autenticación e implementación de storybook. Redwood prioriza las convenciones y la mantenibilidad, y considera la base de datos, el servidor backend y la colaboración como ciudadanos de primera clase. El equipo de Redwood colabora estrechamente con el equipo de React en Meta.

Vale. Y luego adelante y siéntate si eres un tres, ¿verdad? Eso resuena mucho conmigo. Entonces, para aquellos que no vieron en la sala, la mayoría de las personas se sentaron en dos, ¿verdad? Como, la creatividad y la posibilidad cambian con el tiempo. Pero, vaya. Estoy emocionado de mostrarles lo que está sucediendo con los React server components porque espero que podamos abrir para ustedes no cómo funcionan los componentes del servidor, nerd, muy interesante. Pero eso no es a lo que vamos. ¿Cuáles son las oportunidades y posibilidades que tenemos?

Vale. Entonces, primero, ¿qué es Redwood? Elfo en la sala, no sabemos qué es. Así que quería pasar por estas diapositivas muy rápidamente. Redwood es... ¿Tenemos la diapositiva correcta? No, esta era la diapositiva. Redwood, cuando lo lanzamos por primera vez, pila completa para el Jamstack. Eso era cierto, cierto hace unos tres años cuando lo lanzamos. Eso no es tan cierto hoy. Redwood es un marco de aplicaciones web de pila completa de JavaScript. En el futuro, vamos a ser el marco de aplicaciones web de pila completa. Así es. Vamos por el título. Y Tom Preston Warner, quien concibió Redwood, lo inició. Construyó una de las aplicaciones Ruby on Rails más grandes que existen. ¿Sabes? Siento que tenemos un contendiente. Aún no estamos allí, pero eso es a donde queremos ir.

Ciudadanos de primera clase. Lo que queremos decir cuando decimos pila completa, lo que necesitas saber es que Redwood es todas estas cosas reciben toda la atención, integración completa. Obtienen el estatus de ser ciudadanos de primera clase de Redwood. Voy a leer estos muy rápidamente. React, GraphQL, y Prisma. Tenemos un conjunto de pruebas de front end a back. TypeScript. Todos aquellos que yolo, sí, puedes ir estricto. Tenemos Vite CLI. Tienes generadores. Todo tipo de cosas que puedes hacer con un CLI. Muy parecido a Rails. Habilitado para caché. De serie. Authentication security. Redwood es seguro por defecto. Consideramos separaciones de preocupaciones. Tenemos una implementación de storybook de serie. Muy importante para un marco de pila completa de serie. Y también, Redwood está lleno de convenciones y un camino dorado para que comiences rápidamente y para permitirte mantener la mantenibilidad a medida que escalas. Todo esto está incorporado en Redwood. Esto es realmente importante para nosotros en la Cumbre de React. La database es un ciudadano de primera clase en Redwood. El servidor backend es un ciudadano de primera clase en Redwood. Y otro ciudadano de primera clase es la colaboración. Somos altamente colaborativos. Estamos trabajando con los equipos, construyendo todas estas herramientas todos los días. Estamos trabajando con el equipo de React en Meta semanalmente.

5. Redwood: Independiente y Emocionante

Short description:

Redwood es un proyecto independiente y de código abierto. Aún no estamos ganando dinero con Redwood, pero queremos que la gente lo use. Tiene tres años de antigüedad y cuenta con una comunidad sólida. Las startups que utilizan Redwood han recaudado más de $75 millones. Echa un vistazo a Puzzmo.com, una aplicación de juegos construida con Redwood. GraphQL es una herramienta poderosa, pero no es genial para todo. Redwood ofrece características de pila completa, incluyendo funcionalidad en tiempo real sin WebSockets. Prueba la aplicación de chat y el temporizador de cuenta regresiva en Realtime.RedwoodJS.com.

Se unen a nosotros para sesiones de trabajo. Y también colaboramos con nuestra community. Así que también te invitamos a colaborar con nosotros.

Redwood hoy. Es un proyecto independiente y de código abierto. Es gratis para usar. No estamos ganando dinero con Redwood, lo que plantea la pregunta, ¿cómo ganaremos dinero? No estamos ganando dinero hoy. No sé, Tom. ¿Tenemos una respuesta para eso? No, no sabemos. Quiero que la gente use Redwood primero. Tiene tres años. Tenemos más de 16K estrellas en GitHub. Ya estamos en la versión 6.4. Puedes hacer un despliegue de primera clase a Fastify. Así que somos Fastify primero, para el servidor completo. También puedes desplegar en AWS Lambdas. Lo que sabemos de las startups que usan Redwood y la infraestructura crítica, han recaudado más de $75 millones. Están escalando. Una nueva que debería emocionarte se llama Puzzmo.com. Eso es Orta Therix, y Orta está usando Redwood y Puzzmo. Y es super divertido. Es una pequeña aplicación de juegos. Piensa como los crucigramas del New York Times, solo que con todo tipo de otras cosas. Eso es Puzzmo.com. Creemos que Redwood es el mejor en su clase hoy. Marco SPA y marco GraphQL listo para usar. ¿Dónde está mi apartado? Haré un apartado aquí. Así que aparte. Te han mentido sobre GraphQL. ¿Lo sé, verdad? ¿Qué? GraphQL no es terrible. ¿Quién lo sabía? Ahora, hay cosas que son realmente difíciles sobre GraphQL, pero si puedes implementar esas cosas listas para usar y empezar con GraphQL y hacerlo fácil, resulta que GraphQL es una herramienta realmente poderosa. Simplemente no es genial para todo. Aquí hay algunas características de pila completa para Redwood. Podría hacer 20 minutos en cada una de estas. Pero esto es lo que queremos decir cuando decimos pila completa. ¡Hombre, estoy tan emocionado con estas! Solo puedo mostrar diapositivas, pero tengo una página que voy a enviarles al final, y ustedes pueden probar todas estas cosas por ustedes mismos, incluyendo nuestros experimentos y demos de RSE. ¿De acuerdo? Así que eso viene al final. Manténganse en sintonía. Características de pila completa, estas son las nuevas en Redwood, y estamos super emocionados con ellas. Redwood Realtime. Redwood Realtime, sin WebSockets. Pregúntame cómo en la sesión de preguntas y respuestas. Redwood JS Realtime. Ve a Realtime.RedwoodJS.com y tenemos cinco aplicaciones en una. Puedes probar nuestra aplicación de chat. Puedes probar nuestro temporizador de cuenta regresiva. Estos están usando suscripciones y lo que se llama consultas en vivo con GraphQL. Tenemos toneladas de documentation sobre esto. Es realmente divertido de usar. Esto es genial.

6. OpenAI API, Redwood Mailer y Redwood Studio

Short description:

Esto está utilizando la API de OpenAI. Lo clavó a la primera. Puede llevar mucho tiempo obtener respuestas cuando estás golpeando ese mágico generador de IA. Esto también está utilizando suscripciones, por lo que crea una película basada en un mashup. ¿Quién sabía que un mailer podría ser increíble? El mailer de Redwood es increíble. Redwood Studio te ofrece una visibilidad total y una introspección de lo que está sucediendo en tiempo de desarrollo. Redwood es un marco de trabajo de pila completa. Somos los mejores en la clase SPA.

Esto está utilizando la API de OpenAI. Lo clavó a la primera. Lo arruinaré antes de terminar con esta sección. API de OpenAI. Puede llevar mucho tiempo obtener respuestas cuando estás golpeando ese mágico generador de IA. Puedes elegir algunas palabras y te cuenta una historia. Es realmente divertido. Hora de dormir con tus hijos. Este también es bueno. Elige dos películas. API de OpenAI. Dos veces seguidas, Jack. Clavado eso.

Esto también está utilizando suscripciones, por lo que crea una película basada en un mashup. Esta es una aplicación de licitación que utiliza consultas en vivo. Ve a probarlas. Son realmente divertidas. Esto está desplegado en fly. Creo que eso está utilizando superbase para el back end. Altamente performante. Realmente bien.

Vale. ¿Quién sabía que un mailer podría ser increíble? El mailer de Redwood es increíble. Porque resulta que, si puedes hacer tu plantilla dentro de tu marco de trabajo y luego previsualizarlas mientras estás desarrollándolas, ¿entonces el correo vuelve a ser divertido? ¿Quién lo sabía? Así que eso es lo que es el mailer de Redwood. Hay una API. Puedes alojarlo tú mismo. Puedes conectarte a otros proveedores. Esto es Redwood mailer. Y estás viendo la previsualización de la plantilla justo ahí. Y también, hacemos proxy de las solicitudes durante el desarrollo local. Así que puedes enviar correos electrónicos localmente para probar sin molestar a todos en tu base de datos de suscripción de correo. ¿Verdad? Así que no más pasantes enviarán su correo a todos en la lista. Es un correo electrónico de prueba. De todos modos, eso es Redwood mailer.

Redwood Studio. ¿No sería agradable si pudieras encender una aplicación de desarrollo local que te diera una visibilidad total y una introspección de lo que está sucediendo en tiempo de desarrollo. Así que esto está mostrando que tenemos telemetría abierta. Puedes ver rastreos de telemetría abierta durante el tiempo de desarrollo con Redwood Studio. Enciendes Redwood Studio ejecutando Redwood Studio. ¿Verdad? Así que esto está disponible para ti en la línea de comandos con Redwood. Más cosas sobre rastreos. Puedes hacer cosas con Prisma. Gráfico. Todo está ahí dentro de Redwood Studio. Redwood Studio es increíble. Y esto es lo que queremos decir cuando decimos pila completa. ¿Hasta ahora tiene sentido? Muy bien. Así que Redwood es un marco de trabajo de pila completa. Hay algunas cosas que son difíciles con Redwood. Resulta que somos los mejores en la clase SPA.

7. Desafíos con Redwood y la Época Bighorn

Short description:

Hay razones por las que las personas podrían no haber utilizado Redwood hoy. Una razón es la dificultad de comenzar con GraphQL. Redwood lo ha facilitado, pero aún puede ser una barrera para algunos. Otro desafío con Redwood es que puede no cumplir con todas las expectativas de los desarrolladores de React. Redwood ahora está introduciendo la Época Bighorn, una nueva fase en su hoja de ruta.

Hay muchos casos de uso para los que decimos a las personas que no usen Redwood si no es SPA. Probablemente algunas de las razones por las que podrías no haber usado Redwood hoy. Vale. No a todo el mundo le encanta GraphQL. Y lo entiendo. Hay algunas cosas que no quieres hacer con GraphQL que lo hacen difícil. Me estoy refiriendo a mis notas aquí. Una de ellas es... Oh, las notas son para el otro... No importa. Sin notas. Cosas que son difíciles con GraphQL. Una, comenzar con GraphQL. Si no necesitas GraphQL porque eres un cliente único o un equipo pequeño, no necesitas GraphQL para esas cosas. Y también, resulta que todavía hay una curva de aprendizaje. Y Redwood lo hizo realmente fácil para comenzar con GraphQL. Nos encargamos de todo el código de plantilla por ti. Manejamos los resolvers. Pero aún es difícil comenzar con GraphQL. Y francamente, esta es la razón número uno por la que creemos que las personas no usan Redwood hoy. Es porque no quiero usar GraphQL. Totalmente justo. Totalmente justo. Otra cosa que es difícil con Redwood es... Ah, ahí vamos. ¿Sabes qué? Seré honesto. Hicimos una implementación de React lo suficientemente buena para Redwood porque no éramos desarrolladores Reactivos. El secreto está fuera. Algunos de nosotros no éramos exactamente desarrolladores de Javascript cuando comenzamos el proyecto Redwood. Venimos de Ruby on Rails. Hemos trabajado en Python. Otros frameworks. Y entramos y trajimos lo mejor de la clase que amamos y dijimos... Queremos hacer esto dentro de Javascript, y queremos hacerlo con node. Así que teníamos mucho que aprender. Y francamente, no hicimos todo lo que esta community de desarrolladores de React, desarrolladores de marcos de trabajo React primero querían que hiciéramos en Redwood. Y por lo tanto, hay muchas opciones geniales para las cosas que quieres poder hacer en React que están disponibles ahora mismo. Y por eso algunas personas aún no han elegido Redwood. Funcionó realmente bien. Nuestras convenciones fueron increíbles. Pero todavía tenemos trabajo por hacer. Así que presentamos la Época Bighorn de Redwood. ¿No es esa una foto hermosa? Eso es realmente bonito. Así que no hacemos marketing alrededor de las versiones principales. ¿Verdad? Así que 6.7... Resulta que conocemos al tipo que hizo las standards SimVer. Así que rompemos cosas. Mejoramos. Pero tenemos lo que llamamos Épocas. Y eso es un poco nuestro marketing y nuestra hoja de ruta.

8. La Época Bighorn de Redwood

Short description:

La Época Bighorn de Redwood está sucediendo ahora mismo. Redwood está totalmente comprometido con React. Nos estamos poniendo al día y yendo más allá del marco de React. Estamos colaborando con el equipo de React y la comunidad. Consulta nuestra hoja de ruta en Redwoodjs.com/Roadmap.

Y la Época Bighorn de Redwood está sucediendo ahora mismo. ¿Y cuál era la única cosa que quería que te llevaras de esta charla? Redwood está totalmente... Totalmente comprometido con React. ¿Ves? Jack lo entendió. Redwood está totalmente comprometido con React. Entonces, ¿de qué crees que trata la Época Bighorn? Redwood está totalmente comprometido con React. ¡Hombre! Puedo ver que estás aquí. Sé que es... Estoy ciego. En fin. Redwood está totalmente comprometido con React. Eso significa que nuestro código y nuestras características, nos estamos poniendo al día y luego yendo más allá. Nos estamos poniendo al día con el marco de React... Lo siento, con la hoja de ruta de React. Así que Redwood está totalmente comprometido con React. Vamos a colaborar con todos ustedes. Estamos colaborando con el equipo de React. Estamos colaborando... Tenemos a Lens del equipo de Apollo. Estamos trabajando en canales día a día, semana a semana con personas para colaborar en hacer que Redwood esté totalmente comprometido con React y qué significa eso, y también estamos colaborando con la comunidad. Así que estamos uniendo nuestras comunidades con otras comunidades y eso es lo que significa para Redwood estar totalmente comprometido con React. Puedes ver nuestra hoja de ruta allí abajo. Si escaneas esa cosa, te llevará allí. Pero ve a Redwoodjs.com/Roadmap.

9. Redwood y los Componentes del Servidor de React

Short description:

Finalmente, hablemos de por qué Redwood eligió los Componentes del Servidor de React. Es lo que viene después del streaming y suspense. Estamos a favor de los Componentes del Servidor de React, al igual que el equipo de React. Los conceptos y el diseño arquitectónico para RSC se combinan bien con Redwood. RSC combina un modelo mental de solicitud-respuesta de aplicaciones multipágina centradas en el servicio con la interactividad de las aplicaciones de una sola página centradas en el cliente.

Bien. Finalmente, el tipo va a hablar de lo que estaba en el título. ¿Verdad? Entonces, todo eso era ¿qué es Redwood? Y también, por qué — Estoy preparando las cosas aquí para mostrarte por qué Redwood y los Componentes del Servidor de React encajan muy bien. Entonces, ¿por qué Redwood eligió los Componentes del Servidor de React? Estas son las tres cosas de las que voy a hablar a continuación. Es lo que viene después del streaming y suspense. Construimos una solución para el streaming y suspense. Te lo mostraré. Y resulta que si vamos a seguir el ritmo de la hoja de ruta de React, estamos dentro. Estamos a favor de los Componentes del Servidor de React, al igual que el equipo de React. Pero solo estamos — estamos en la hoja de ruta ahora. Además, creo que fue Sebastian quien escribió un artículo sobre lo que viene después de GraphQL. Hay algunas cosas que voy a mostrarte sobre cómo, cuando has construido un marco que da ciudadanía de primera clase para GraphQL, resulta que los conceptos y parte del diseño arquitectónico para RSC — se combina muy, muy bien, porque están altamente relacionados. Y luego, también, vamos a hablar de esta cosa que simplemente estoy llamando Fetch Anything por Ahora. No voy a hacer una inmersión profunda en qué es RSC, cómo implementarlo. Nuestra creencia es que el marco va a hacer mucho de eso por ti. Necesitarás entender cómo funciona, pero no voy a entrar en el código. Tengo algo más sobre eso más tarde. Puedes ver cómo funciona el código. Tenemos algunas buenas demostraciones. Pero hablemos de cómo el equipo de React habla de qué es RSC. RSC combina un modelo mental de solicitud-respuesta simple de aplicaciones multipágina centradas en el servicio — hablaron de esto en el panel antes del almuerzo, si lo recuerdas — con la interactividad sin fisuras de las aplicaciones de una sola página centradas en el cliente, dándote lo mejor de ambos mundos. ¿Verdad? Entonces, poder cambiar de ese modelo centrado en el servidor a el modelo centrado en el cliente y poder, en algunos casos, fusionar esos dos modelos mentales en un caso de uso es realmente agradable. Te voy a mostrar lo que eso significa para Redwood.

10. Redwood SSR y RSC

Short description:

Redwood tiene capacidades de SSR con el streaming y suspense de React. Construyeron una aplicación de entradas y credenciales utilizando SSR de Redwood. La aplicación permite la autenticación con GitHub y proporciona la generación de credenciales personalizadas. Redwood ahora soporta la renderización completa del lado del servidor y ha cambiado a VEET para el empaquetado, utilizando un enrutador suspense. SSR y RSC son una combinación natural para Redwood.

Entonces, primero, streaming y suspense — probablemente no lo sepas pero Redwood tiene capacidades de SSR. Así que, déjame mostrarte — construimos esto para la Conferencia de Redwood, que fue hace un mes — esta era nuestra aplicación de entradas y credenciales. Y esto es Redwood SSR utilizando el streaming y suspense de React. Habíamos estado trabajando en esto a finales del año pasado. Bueno, déjame mostrarte lo que es, y luego te diré lo que hicimos con ello. Pero mira esto. Ticket.redwoodjs.com. Entonces, ya está ahí, pero se transmitió — esa era en realidad una página pre-renderizada. ¿Bonita interactividad, verdad? Es tu dirección de correo electrónico, y te va a permitir autenticarte en segundo plano con GitHub. Y ahora tengo una aplicación de credenciales personalizadas. Nota que acabo de copiar esa URL para compartir, y con Redwood antes, ¿qué esperarías ver aquí? Nada. ¿Y qué ves ahora? Ves todas tus etiquetas OG de cabecera. Y todo eso fue en tiempo real. Es así de rápido, está desplegado en fly, y está utilizando Neon para la database en esto. Y esto está disponible ahora. Así que, puedes hacer SSR con Redwood. Teníamos una función de pre-renderizado disponible antes, pero ahora puedes hacer una renderización completa del lado del servidor con Redwood. Construimos esto antes de decidir hacer RSC. Pero resulta que todos los bloques de construcción que necesitas para RSC, ya los manejamos porque cambiamos a VEET para nuestro bundler. Estamos ejecutando VEET en el servidor, así que ahora tenemos un servidor frontend. Tenemos nuestro propio enrutador, el enrutador de Redwood. Cambiamos y re-arquitecturamos bajo el capó para usar un enrutador suspense. Y nos encanta lo que somos capaces de hacer con SSR, y RSC es una combinación natural porque va a vivir justo encima de eso.

11. RSC, Fragmentos de GraphQL y Acción del Servidor de Redwood

Short description:

RSC y GraphQL son complementarios en términos de conceptos y convenciones en Redwood. Redwood integra RSC sin problemas, eliminando la necesidad de un enrutador adicional. Discutamos el Patrón de Fragmentos de GraphQL, que funciona de manera similar a Relay. Los fragmentos te permiten obtener datos para todos los componentos en una página con una consulta raíz, permitiendo la caché y actualización automática. Las startups de Redwood han utilizado con éxito este patrón a gran escala. También exploraremos la funcionalidad de acción del servidor de Redwood, que permite la interacción entre los componentes del servidor y del cliente.

Entonces, hablé de esto antes. En segundo lugar, RSC y GraphQL, son muy complementarios tanto en términos de conceptos, lo que puedes hacer, pero también debido a las formas en que incorporamos convenciones y este camino dorado en Redwood con GraphQL. RSC simplemente tiene sentido en el contexto de Redwood, por lo que, por ejemplo, no necesitamos crear otro enrutador para Redwood, simplemente integraremos RSC directamente en él y encima de él.

Quiero mostrarte, muy rápidamente, este Patrón de Fragmentos de GraphQL. Esto podría tener sentido para ti. Para aquellos que trabajan en Apollo Client en la sala, por favor tapen sus oídos y cierren sus ojos por un segundo. Y luego quiero mostrarte una implementación de Redwood de Componentes del Servidor con Acciones del Servidor, porque creo que es cierto que somos el segundo marco de trabajo para implementar Acciones del Servidor después de Next. Entonces, sí, adelante Redwood. Toby, en realidad, adelante con Toby. Ese chico es increíble. ¿Verdad, Tom? Toby lo está matando.

Bueno, entonces, rápido, hablemos sobre los Fragmentos de GraphQL. Lo sé, ya estás pensando, no vine por GraphQL. Pero esta es una idea realmente interesante a alto nivel. Y para aquellos que usan Next y para aquellos que usan Remix, esto debería parecer realmente similar. Así es como funcionan los Fragmentos. Así es como funciona Relay. Tienes un componente padre, y tienes una consulta raíz dentro de él. Todos los datos que necesitas para todos los componentes en esa página, vas a obtenerlos con ese componente raíz. Así es como funcionan los fragmentos, ¿vale? Entonces, el componente padre, va a obtener los datos, renderizar, y ahora tiene todos los datos que necesita en la página, porque sabe acerca de estas consultas de fragmentos dentro de los componentes hijos, hijo uno e hijo dos. Entonces, ¿qué sucede? Obtiene la consulta raíz, obtiene todos los datos, los pasa. Los fragmentos saben qué campos solicitar, por lo que los datos están allí, y luego en los Fragmentos y en el modelo de GraphQL, toda tu caché, todas tus actualizaciones, simplemente ocurren automáticamente detrás de escena. Apollo Client hace esto muy bien. Hay startups de Redwood que están utilizando este patrón a gran escala, y funciona realmente bien. Altamente eficiente, increíblemente rápido. Y de nuevo, supongamos que actualizas esa consulta raíz con una mutación, por lo que hay una actualización de los datos en tu página, y luego todo, en un bonito flujo detrás de escena, se actualiza y se vuelve a renderizar automáticamente. Eso suena genial, ¿verdad? Puede ser realmente difícil, pero eso suena genial. Entonces, ¿qué pasaría si pudiéramos hacer eso con algo que no fuera GraphQL y tuviera un poco más de sentido dentro del mundo de React? Bueno, échale un vistazo. Esto es, y solo tengo 30 segundos para mostrarte, esta es una aplicación real con la que puedes jugar más tarde. Esta es la acción del servidor de Redwood. Y un par de cosas que quiero señalar antes de ejecutar la demostración. Observa que ya está renderizando un componente del servidor y un componente hijo. Esta es una funcionalidad que está funcionando en Redwood en este momento. Y lo que estás a punto de ver es cómo podemos interactuar con un componente del cliente. Quédate en el componente del cliente y mira lo que sucede. Lo estoy ejecutando ahora. Mira lo que sucede con el componente del servidor, ¿verdad? Entonces, el cuadro rojo, el padre exterior es el componente del servidor. Componente hijo, componente del cliente dentro. Bien, entonces hablaremos de un par de cosas aquí muy rápido. Pero observa, los dos contadores están subiendo por separado. ¿Viste la obtención de datos cuando se incrementó el componente del servidor? ¿Alguien notó lo que acaba de suceder allí cuando la página se volvió a renderizar? Voy a ejecutar esto dos veces. Bueno, la página se vuelve a renderizar. Eso es todo. Y lo voy a ejecutar una vez más. Bueno, un par de cosas suceden aquí. De hecho, Tom habló de esto durante 20 minutos en una masterclass. Te diré cómo llegar a esto y pasar por la presentación completa aquí. Correcto, se está gestionando el estado en el cliente para el componente del cliente. Cuando disparas la acción del servidor, estás viendo una obtención de datos allí, esa es una acción del servidor, se actualiza en el servidor, y eso actualiza el componente del servidor, ¿verdad?, que luego pasa todo lo que necesitas, ¿verdad?, tanto el componente como los datos se pasan desde el servidor.

12. Celda de Redwood y Celda del Servidor

Short description:

Voy a ejecutar esto una vez más. Entonces, ¿alguien nota qué sucede cuando se actualiza la página? ¿Dónde está ocurriendo el estado para el componente del cliente? En el cliente. Las acciones del servidor son increíbles, vas a querer usarlas. A continuación, obtén cualquier cosa. Una convención de celda de Redwood es efectivamente un componente de orden superior que hace todo lo que necesitas en un componente para obtener y el estado del componente. Esto es lo que las startups están utilizando cuando construyen con Redwood hoy. Este es un componente de celda de Redwood. ¿Qué sucede si usas una celda del servidor? Esto es absolutamente posible. De repente, con los componentes del servidor, Redwood pasa de GraphQL a poder obtener de cualquier lugar, de cualquier fuente de datos, incluyendo solo una consulta de datos directa desde tu base de datos o cualquier otra fuente de datos. Entonces, ¿qué viene para Redwood con RSCs? ¿Qué sucede si no necesitas GraphQL para empezar? ¿O GraphQL en absoluto? Gracias.

Voy a ejecutar esto una vez más. Entonces, ¿alguien nota qué sucede cuando se actualiza la página, verdad? Ese es el modelo mental que quiero que comprendas. Junto con esto es solo como magia en general. Así que los componentes del cliente están siendo integrados. ¿Dónde está ocurriendo el estado para el componente del cliente? En el cliente. ¿Vale? La página está a punto de ser actualizada. Observa el contador del servidor. El contador del servidor no cambió. ¿Por qué? ¿Dónde está el estado para el contador del servidor? ¿Cómo llamamos a menudo al estado en un servidor? Una database. Bien, vas a necesitar una database. Redwood tiene una database. Pero, ¿no es eso increíble? Bueno, lo siento. Solo creo que pensamos que esto es realmente genial. Bien. Entonces, resulta que RSC va genial con GraphQL y las acciones del servidor son increíbles, vas a querer usarlas. Son geniales. Bueno, a continuación, obtén cualquier cosa. Tenemos una convención llamada una celda de Redwood. Permíteme mostrarte esto con GraphQL. Bueno, ¿qué sucede si creamos una celda del servidor de Redwood con punto, punto, punto? Esto es lo que quiero mostrarte a continuación. Así que obtener cualquier cosa tendrá sentido aquí en un segundo. Bien. Ni siquiera puedo ver tus manos. Iba a pedirte que levantaras la mano. Una convención de celda de Redwood es efectivamente un componente de orden superior que hace todo lo que necesitas en un componente para obtener y el estado del componente. Bien, lo que estás viendo aquí, mucho código. Muy simple. Tienes una consulta GraphQL. Esa es tu obtención. Y luego tienes, ves, los componentes para cargar, vacío, fallo y éxito. ¿Correcto? Así que todos estos están manejados. Así que todo el ciclo de vida del estado se maneja dentro de un componente del cliente. Esto es real. Esto es lo que las startups están utilizando cuando construyen con Redwood hoy. Este es un componente de celda de Redwood. ¿Vale? Observa dónde está eso. Entonces, ¿qué sucede si usas una celda del servidor? Digamos, por ejemplo, que quieres importar el cliente de la database. Y luego, en lugar de hacer una consulta a través de GraphQL, simplemente haces una consulta a la database justo allí dentro de un componente del servidor. ¿Correcto? Esto es absolutamente posible. Este es un gran momento de revelación para nosotros con las celdas del servidor de Redwood, tal vez. Aquí es donde empezamos a pensar, ¿qué pasaría si? Así que esto es posible. Probablemente esto no es lo que vas a querer hacer. Pero de repente, con los componentes del servidor, Redwood pasa de GraphQL a poder obtener de cualquier lugar, de cualquier fuente de data, incluyendo solo una consulta directa de data desde tu database o cualquier otra fuente de data. ¿Tiene sentido? Probablemente no quieras hacer esto, sin embargo. Entonces, ¿qué viene para Redwood con RSCs? Esto es enorme para nosotros, porque te dije ¿cuál es una de las razones por las que la gente no usa Redwood ahora mismo? GraphQL. Entonces, ¿qué sucede si no necesitas GraphQL para empezar? ¿O GraphQL en absoluto? ¿Probarías Redwood entonces? Vamos, levanta la mano. Sé que lo harás. Bueno, de todos modos, gracias.

13. Componentes del Servidor de Redwood y Colaboración

Short description:

Estamos emocionados por las posibilidades de los componentes del servidor de Redwood y la API transparente. Permite obtener datos de cualquier fuente, manteniéndolo sensato y habilitando varios casos de uso. La nueva API transparente está en camino, y queremos escuchar tus ideas. Los componentes del servidor de React han despertado nuestra creatividad y entusiasmo, abriendo posibilidades para Redwood. Queremos colaborar con la comunidad y aprender lo que imaginas para los componentes del servidor de React. Conéctate con nosotros en Twitter o LinkedIn y únete a nosotros en la sesión de preguntas y respuestas.

Jack está conmigo aquí arriba. Eso es bueno. Es bueno que esté en la primera fila. Primero, estamos realmente emocionados por lo que es posible aquí. Esto es algo en lo que nos topamos. Esta API transparente, además de GraphQL, es algo que vamos a descubrir y hacer muy poderoso en los componentes del servidor de Redwood.

Esta idea de obtener datos de cualquier data fuente, queremos mantenerla sensata, es lo que realmente hará posible hacer todo tipo de cosas con la implementación de los Componentes del Servidor de React de Redwood. Y solo para aclarar, así es como vemos mantenerlo sensato. ¿Cómo podría fluir tu data? Si tienes una database, que podrías no necesitar una database, tus servicios, tus data para tu database irán a tus servicios. Ese es un concepto en Redwood. Tenemos una convención para los servicios. Ahí es donde va toda tu lógica de back end. Así que eso existe en Redwood hoy, tus servicios donde irá tu lógica de back end para cualquier fuente de data que estés golpeando, pero los data fluirían desde la database, en este caso servicios. Y tus servicios, ahí es donde el flujo de data fluiría a tu web. Así que vas a importar una función de tus servicios. Será seguro en todo tu aplicación y tendrás algunas formas sensatas de trabajar con cualquier fuente de data que quieras dentro de tus Componentes del Servidor de React de Redwood. Estamos súper emocionados por eso.

Muy bien. Así que una nueva API transparente está llegando a Redwood. No sabemos cómo será el design de eso, pero nos encantaría que nos dijeras qué quieres que haga. Y la persona con la que hablar es Tom, él está en la sala. Así que la última, última cosa. Esto es el bonus. Como esto es realmente por qué Redwood, esto es el por qué, por qué, por qué Redwood está eligiendo los Componentes del Servidor de React. Porque los Componentes del Servidor de React nos hicieron empezar a preguntar, ¿qué pasaría si? Y recuerdas esa cosa de posibilidad creativa de la que hablé al principio? Como los Componentes del Servidor de React han sido eso para el equipo de Redwood. Nos ha hecho preguntar ¿qué pasaría si? Nos ha hecho emocionarnos mucho, a ser creativos sobre las posibilidades. Ha abierto para el marco de Redwood. Y de nuevo, Redwood define su éxito haciendo que otros tengan éxito. Así que ver lo que las startups van a poder hacer y lo que van a poder construir, o cualquier constructor va a poder hacer con Redwood debido a los Componentes del Servidor de React, eso es nuestro rollo. Así que estamos realmente emocionados por eso. Así que si nos haces el honor, esto es parte de colaborar con la community. Como dije, este no ha sido nuestro mundo, React en esta community. Todos ustedes han estado inmersos aquí. Y saben mucho más profundamente lo que es posible con React incluso que nosotros. Entonces, ¿nos dirías, como ahora mismo? No sé, saca ese teléfono o ese gadget contigo. Y ¿te gustaría, como, si estás en la aplicación del foro, y tu nombre es Twitter, ese es el mío, David Price y Tom en Majumbo. ¿Nos dirías, cuál es tu ¿qué pasaría si? Como, ¿qué pasaría si los Componentes del Servidor de React pudieran hacer factura en el punto, nos enviarías eso? Como, queremos saber. Envíanoslo en Twitter. También estoy en LinkedIn. No sé cómo etiquetarme allí, pero soy David S. Price. No soy el jugador de béisbol. No soy el orador motivacional de Australia. No soy el futbolista británico ni el congresista estadounidense. Soy David Price. Suena pretencioso, pero es en tono de broma. Pero queremos escuchar. Quédate con nosotros después en la sesión de preguntas y respuestas, queremos saber. Un par de próximos pasos para cómo puedes unirte a nosotros.

14. Masterclass de Redwood y Elección de Redwood sobre Next.js

Short description:

Amy Dutton presentará una masterclass sobre React y Redwood de pila completa. El documento de Notion tiene todos los detalles y demostraciones. Redwood apuesta todo por React. Si quieres convenciones, un camino dorado y hackathonabilidad, elige Redwood. Los componentes del servidor de React encajan naturalmente en Redwood, y el enrutador de Redwood fue construido para ello. Redwood es un proyecto de código abierto independiente.

Amy Dutton, quien también forma parte del equipo de liderazgo de Redwood, va a presentar una masterclass en dos días el jueves. Esa es una de las masterclasses gratuitas, si compraste una entrada aquí. Es cómo hacer pila completa para React, pero ella va a hablar sobre Redwood, cómo hacer pila completa React, y también lo que viene con los React server components. Ella hablará de eso.

Y luego está esto, ¿ves eso de ahí abajo? Redwoodjs adelante barra React Summit. Eso es un documento de Notion que tiene todo de lo que acabo de hablar. Tenemos demostraciones rápidas que puedes iniciar para cada ejemplo de servidor de React que tenemos ahora mismo. Si quieres jugar con las acciones del servidor, ve allí. Tom hizo una increíble presentación en nuestra conferencia. Él va a estar escribiendo. Tendremos un blog próximamente. Así que podrás ver, si quieres las inmersiones profundas, estamos publicando todo eso en el documento de Notion. Así que ve a Redwoodjs.com, React Summit.

Y me tomó tres minutos menos de lo que pensé. Así que tenemos tiempo para preguntas. Tenemos tres minutos. Muchas gracias. Espero que sepas que estamos totalmente comprometidos con los React server components. ¿Captaste ese punto? Oh, lo siento. Estamos totalmente comprometidos con React. Eso es. Eso es todo lo que quería que supieras. Muy bien. Bueno, hay otro marco RSC por ahí. Sí, Next.js. Entonces, para todas estas personas en la audiencia, ¿cuál es tu discurso de ascensor sobre por qué deberían elegir Redwood.js sobre Next.js? Sí. Entonces, permíteme empezar desde aquí. Podrías terminar usando ambos. Así que ahora mismo, hay muchas aplicaciones de Next que en realidad están alimentadas por la API de Redwood. Así que eso es real. Si quieres usar la plataforma Vercel, es imposible de superar, ¿verdad? Como, la plataforma de Vercel. Entonces, cuando pienso en, como, ¿cómo se ve una aplicación de pila completa de Next? Realmente, es como Next más Vercel, ¿verdad? Como, eso es pila completa para Next. Y quiero decir, francamente, son los únicos. Pero si vas a empezar... Entonces, uno, si quieres convenciones y quieres un camino dorado y quieres lo que ahora estamos llamando, como, algo que Next ha hecho realmente, realmente bien es lo que llamo hackathonabilidad. Eso estaba en mis notas, debería haber llegado allí. Como, Redwood no es muy hackathonable ahora mismo, ¿verdad? Pero habrá cosas que puedes hacer con Redwood de la caja con los React server components que lo hacen mucho más de una, como, aplicación de inicio temprano. Entonces, ¿por qué elegir Redwood? Creemos que los React server components van a encajar más naturalmente en Redwood que en cualquiera de los frameworks existentes ahora mismo. Y una de las razones para eso que puedes ver ahora mismo es, como, el enrutador de Redwood fue construido para ello. No hablé de eso. No necesitas otro enrutador de aplicación. Como, no vas a tener opciones. No vas a tener que elegir el enrutador de página o el enrutador de la aplicación. Como, eso será una sola cosa. Puedes hacer ambas cosas dentro de un contexto con Redwood. Además, Redwood es, Remix va a tener algunos desafíos similares también. Ahora llegarán allí, esos son todos grandes frameworks. Y entonces la otra cosa es, como, Redwood es un proyecto de código abierto independiente, ¿verdad? Así que creo que eso va a hablar a mucha gente en términos de, como, querer sentir, quiero ser parte del código abierto, quiero impulsar parte de la visión detrás de él. Somos mucho más pequeños. Quiero decir, NeXT está abriendo el camino, y no quiero decir nada.

15. Involucrándote con Redwood.js

Short description:

Si quieres involucrarte, Redwood ofrece un ambiente diferente y una experiencia única de participación en la comunidad. Puedes influir en la dirección del proyecto. Para empezar con Redwood.js, la mejor manera es seguir el tutorial de Redwood, que es como un curso de desarrollo de pila completa. Consulta los foros de Redwood para ejemplos y actualizaciones sobre las últimas características, incluyendo los componentes del servidor de React. Únete a la comunidad y prueba las nuevas características siguiendo los pasos y comandos de configuración proporcionados en los foros.

De hecho, estamos aprendiendo de ellos cómo hacer esto, ¿verdad? Así que para poner eso ahí. Pero, sí, si quieres, va a sentirse diferente. Va a haber un ambiente diferente, y vas a poder tener un tipo diferente de participación en la community, que es algo que nos importa mucho. Y vas a tener una sensación diferente de cómo puedes realmente influir en la dirección del proyecto, también. Así que creo que esas son algunas razones realmente geniales para involucrarte.

Y, francamente, no lo sé. Sé que después de la fiesta, la gente va a estar de vuelta en el hotel. No van a tener sueño. Van a decir, hey, quiero probar algo. ¿Cómo van a empezar con Redwood.js? ¿Deberían ir a ese documento de Notion? ¿Hay algunas buenas aplicaciones de muestra allí para empezar? Sí. ¿Cómo empiezan con esto?

Gracias, Jack, esa es otra gran pregunta. Así que, en este momento, la mejor manera de empezar con Redwood es el tutorial de Redwood, que es más como un curso. Es realmente increíble si quieres aprender desarrollo de pila completa y GRaphQL. Estamos en medio de esto ahora mismo. Tenemos el mismo problema que el equipo de React en una escala mucho, mucho menor, que es que todo esto está funcionando en Canaries y Experimental. Te recomiendo mucho que vayas a nuestros foros. Así que, community.redwoodjs.com, y ahí es donde verás estos ejemplos. Verás una publicación en el foro que trata solo sobre RSC. Toby está dejando allí todo el registro de cambios de desarrollo. Las aplicaciones de ejemplo están allí. Así que, en este momento, si vas a nuestra documentación, lo mismo que está pasando en React. Todos nuestros documentos son para la versión estable 6.4. Si quieres jugar con todas estas cosas nuevas que están sucediendo con los componentes del servidor de React, esos están en nuestras versiones Experimental Canary, y todo eso está sucediendo en tiempo real en nuestros foros. Pero ahí es donde nos comprometemos con la community para darte actualizaciones de lo que está sucediendo en este momento. El mejor lugar para probar esas cosas es entrar en nuestros foros y seguir los pasos y los comandos de configuración desde allí.

Muy bien, fantástico. ¿Fue esa una buena respuesta? Sí, estuvo genial. Muy bien. A Jack le gustó. Aplaudan de nuevo a Dave Price. Gracias. Muy bien, amigo. Gracias. Muy bien hecho, señor.

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

GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.
TestJS Summit 2022TestJS Summit 2022
25 min
CCTDD: Cypress Component Test Driven Design
The first part of the talk will focus on a variety of patterns when using Cypress Component Testing and TDD to create React components. The code samples will be from Angular's Tour of Heroes to make the content relatable to a wider community. Currently I am working on a GitBook rewriting it in React using Cypress Component Tests, there should be plenty of content to distill into the talk.The second part of the talk will focus on test strategies, types of testing and where to apply them, and finally compare & contrast them to the familiar industry approaches.We will finish with key takeaways, sample application repos to help with learning, and rollout strategies.

Workshops on related topic

React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A
React Summit 2022React Summit 2022
98 min
Crash Course into TypeScript for content from headless CMS
WorkshopFree
In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:- Generate strongly typed models and structure for the fetched content.- Use the content in components- Resolve content from rich text fields into React components- Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production
You will learn:- How to work with content from headless CMS- How content model can be leveraged to generate TS types and what benefits it brings to your project- How not to use string literals for content in code anymore- How to do rich text resolution into React components- How to minimize or avoid content-related issues before hitting production