Presentando Waku: El Framework React Mínimo

Rate this content
Bookmark

Waku es un proyecto en curso destinado a desarrollar un framework React con soporte de primera clase para React Server Components. En esta charla, proporcionaré una visión general de Waku y te guiaré sobre cómo puedes comenzar a desarrollar un nuevo proyecto utilizando Waku.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

Daishi Kato
Daishi Kato
19 min
18 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Hablaré sobre mi proyecto reciente, Waku, y mis bibliotecas de React: Rustand, Jotai y Valisio. Waku es un framework React que depende en gran medida de React Server Components (RSC) y tiene como objetivo hacer que capacidades como la división de código, el enrutamiento, la obtención de datos y SSR estén disponibles para los desarrolladores. Utiliza componentes React basados en RSC para la reutilización y proporciona una experiencia rápida con VIT, recarga en caliente y reemplazo de módulos en caliente. Waku está en desarrollo activo, apuntando a la versión alfa V1 y explorando características específicas de Waku. Se admite la implementación de aplicaciones Waku en Vercel, y se está considerando un sistema de complementos para un soporte extendido.

1. Introducción a Waku y las bibliotecas de React

Short description:

Hablaré sobre mi proyecto reciente, Waku, y mis bibliotecas de React: Rustand, Jotai y Valisio. Rustand es el más popular, mientras que Jotai y Valisio tienen espacio para atraer más atención. A menudo me preguntan por qué desarrollo tres bibliotecas similares, y es porque me resulta interesante compararlas.

Hola. En primer lugar, gracias por esta gran oportunidad de dar una charla. Hablaré sobre mi proyecto reciente, Waku. Es un proyecto activo, así que ten en cuenta que lo que hable hoy puede que no sea preciso en el futuro, pero al menos es lo que es ahora.

Antes de adentrarnos en el tema principal, permíteme presentarme. Mi nombre es Daishi Kato, y me especializo en desarrollar bibliotecas de React. Es posible que ya estés utilizando o al menos hayas probado una de mis bibliotecas. La mayoría de ellas son para estados globales de React. Si aún no las has probado, creo que es una gran oportunidad para darles una oportunidad.

Rustand es una biblioteca de gestión de estados que es mínima y fácil de aprender. Es una biblioteca tan pequeña que realmente me pregunté si valía la pena ser una biblioteca. Sin embargo, ahora se utiliza ampliamente. Jotai es otra biblioteca de gestión de estados. Abstrae los estados como átomos. Los átomos son definiciones de estados. Con la abstracción de átomos, podemos definir la lógica de los estados. Es muy práctico. Y el ecosistema también está creciendo.

La tercera se llama Valisio. Permite que un objeto normal de JavaScript sea un estado de React. Por lo general, el estado de React debe ser inmutable. Pero un objeto de JavaScript es mutable. Para cerrar la brecha entre la inmutabilidad y la mutabilidad, Valisio utiliza proxies extensivamente. Funciona como magia. Para comparar la popularidad de estas bibliotecas, veamos rápidamente el número de descargas de NPM. Como puedes ver, Rustand es con mucho la biblioteca más popular. Jotai y Valisio tienen espacio para atraer más atención. Por cierto, a veces la gente me pregunta por qué desarrollo tres bibliotecas similares. Es una larga historia. Pero lo que encontré interesante es que

2. Waku: Un marco de React

Short description:

Waku es un marco de React que depende en gran medida de los Componentes del Servidor de React (RSC). Proporciona capacidades como la división de código, enrutamiento, obtención de datos y SSR. El trabajo del marco es hacer que estas capacidades estén disponibles para los desarrolladores. El empaquetado con RSC y SSR puede ser complicado.

Puedo comparar estas bibliotecas similares. No solo podemos comparar las estadísticas, sino que también obtenemos triple retroalimentación. Como puedes imaginar, esto resulta en triple carga de trabajo.

Bueno, eso es suficiente para mi introducción. Sigamos adelante.

Entonces, ¿qué es Waku? Comencé el proyecto en marzo de 2023. Waku es un marco de React. En realidad, significa marco en japonés. Waku depende en gran medida de los Componentes del Servidor de React, o RSC. Tanto en términos de diseño como de implementación. Nuestro objetivo actual son proyectos de tamaño pequeño a mediano. Y nos enfocamos en ofrecer una experiencia de desarrollo más rápida.

Ahora, hablemos un poco más en detalle de cada aspecto. ¿Qué es exactamente un marco de React? Sinceramente, no creo tener la respuesta correcta a esta pregunta. Pero de todos modos, en la documentación de React mencionan que React debe usarse con un marco. Y dicho marco debe proporcionar capacidades como la división de código, el enrutamiento, la obtención de datos y la generación de HTML. Waku proporciona esas capacidades. Admite la división de código. Hace enrutamiento. Podemos obtener datos. Y la generación de HTML, también conocida como SSR, está soportada. Sin embargo, eso no significa que implementemos todo en un marco. Las partes básicas de esas capacidades ya están implementadas por la biblioteca de React. Por lo tanto, el trabajo del marco es básicamente hacerlas disponibles para los desarrolladores.

Otro trabajo importante del marco es el empaquetado. Es generar la salida final para producción, que puede variar según el servicio en la nube utilizado para la implementación. Encontré que el empaquetado es complicado con RSC y SSR. Sinceramente, no creo que comprenda completamente cada detalle aún. Pasemos al siguiente tema, RSC.

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

Simplificando los Componentes del Servidor
React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplificando los Componentes del Servidor
Top Content
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
Explorando los fundamentos de los Componentes del Servidor React
React Day Berlin 2023React Day Berlin 2023
21 min
Explorando los fundamentos de los Componentes del Servidor React
Top Content
This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack
React Summit US 2023React Summit US 2023
160 min
La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack
Top Content
WorkshopFree
Amy Dutton
Amy Dutton
Esta masterclass te guiará a través del ciclo de vida del desarrollo de productos para crear una aplicación web del mundo real. Aprenderás sobre los Componentes del Servidor React, construyendo un sistema de diseño dentro de Storybook, y utilizando el desarrollo frontend para acercarte a convertirte en un desarrollador full-stack. La masterclass cubrirá el aumento de la confianza en tu aplicación con pruebas unitarias e implementando autenticación y autorización. Tendrás la oportunidad de trabajar a través de las características del producto y examinar un proyecto real de RedwoodJS, obteniendo valiosa experiencia en el desarrollo de productos del mundo real. RedwoodJS hace que sea simple acercarse al desarrollo full-stack, y esta masterclass te dará las habilidades que necesitas para crear tus propias aplicaciones web del mundo real.
Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)
React Summit US 2023React Summit US 2023
104 min
Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)
Top Content
WorkshopFree
 Greg Brimble
Greg Brimble
El ecosistema de desarrolladores siempre está avanzando rápidamente y este año no ha sido una excepción. Los Componentes de Servidor React pueden ofrecer una mejora significativa a la experiencia del desarrollador y al rendimiento de la aplicación. Pero creo que es justo decir que este nuevo paradigma de servidor primero puede ser complicado de entender!En la primera mitad de esta masterclass, exploraremos los Componentes de Servidor React desde cero: construyendo nuestro propio mini marco meta para ayudarnos a entender cómo funcionan los RSCs. Descubriremos exactamente qué se produce en una construcción RSC y conectaremos esas piezas para formar una aplicación completa.A continuación, ¡lo desplegaremos! Cloudflare también ha tenido un año ocupado — Smart Placement, en particular, es una nueva tecnología que hemos desarrollado que se ajusta perfectamente al modelo RSC. Exploraremos por qué eso tiene sentido para nuestra aplicación de masterclass, y realmente lo desplegaremos en la Plataforma de Desarrolladores de Cloudflare.Finalmente, ampliaremos un poco más nuestra aplicación, utilizando D1 (nuestra base de datos SQL sin servidor) para mostrar realmente el poder del Componente de Servidor React cuando se combina con Smart Placement.Deberías salir de esta masterclass con una mayor comprensión de cómo funcionan los Componentes de Servidor React (tanto detrás de las escenas como también cómo tú como desarrollador puedes usarlos día a día), así como una visión de algunos de los nuevos patrones de despliegue que ahora son posibles después de las recientes innovaciones en el espacio de la plataforma.
Construyendo Componentes de Servidor Reutilizables en NextJS
React Summit US 2023React Summit US 2023
88 min
Construyendo Componentes de Servidor Reutilizables en NextJS
Workshop
Will Bishop
Mettin Parzinski
2 authors
React continúa evolucionando su capacidad beta, los Componentes de Servidor de React, y continúan desarrollándolos en asociación con marcos como NextJS.En esta masterclass, los asistentes aprenderán qué son los Componentes de Servidor de React, cómo construirlos y usarlos eficazmente en NextJS, y se centrarán en una de las principales ventajas de React/NextJS: la reutilización a través de componentes.También cubriremos tecnologías beta relacionadas habilitadas por el directorio `app`, como los layouts anidados y las acciones del servidor (capacidad alfa/experimental).¡Únete a nosotros para esta masterclass práctica de 120 minutos!Tecnologías:
React, JavaScript/Typescript, NextJS, Miro