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
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
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.
3. Componentes de React y objetivos de Waku
Waku utiliza componentes de React basados en RSC para capacidades como la obtención de datos, la división de código y el enrutamiento. El mayor beneficio es la reutilización, ya que RSC funciona con diferentes marcos. Waku proporciona una experiencia rápida con VIT, recarga en caliente y reemplazo de módulos en caliente. El diseño de la API tiene como objetivo ser simple y minimalista para una mejor experiencia de desarrollo. Waku tiene como objetivo ser minimalista para una curva de aprendizaje más fácil.
RSC. Waku se basa en componentes de React. Y fue mi motivación para comenzar a desarrollar un marco. Entonces, ¿qué proporcionan los componentes de React? Como mencioné, Waku utiliza la biblioteca de React para algunas capacidades. Esas capacidades se basan en RSC. Un buen ejemplo es la obtención de datos. RSC admite componentes asíncronos y podemos obtener datos a nivel de componente. RSC también permite la división de código y el enrutamiento hasta cierto punto. Todas esas capacidades son buenas. Pero el mayor beneficio de RSC, supongo, es la reutilización. RSC está definido por React, y si los marcos siguen la convención de RSC de React, la diferencia entre los marcos no es perceptible para los desarrolladores. Eso significa que si un desarrollador crea un componente con RSC, funciona con diferentes marcos de RSC sin modificaciones. Por lo tanto, cuando se trata de RSC, el uso de Waku no resulta en un bloqueo. Creo que la interoperabilidad entre diferentes marcos de React sería maravillosa, y espero que ese futuro llegue.
Otro aspecto es la experiencia del desarrollador. Uno de los objetivos de Waku es proporcionar una experiencia rápida. Para ello, Waku aprovecha VIT. El servidor de desarrollo de VIT nos permite evitar empaquetar todo de una vez. Compila las cosas de forma perezosa según sea necesario. Waku y VIT se encargan de la recarga en caliente o el reemplazo de módulos en caliente. Entonces, si editas archivos, el resultado se mostrará sin recargar manualmente. Actualmente, la recarga en caliente es para los componentes del servidor, y el reemplazo de módulos en caliente es para los módulos del cliente. Waku también se preocupa por la curva de aprendizaje. Nuestra API tiene como objetivo ser simple y minimalista, para que los desarrolladores se sientan cómodos. No diría que ha alcanzado el objetivo aún. Hay mucho margen de mejora, y debemos seguir trabajando para una mejor experiencia del desarrollador.
Waku tiene como objetivo ser minimalista. ¿Por qué es así? Hay dos pensamientos principales detrás de esto. El primero es, como acabo de decir, sobre la curva de aprendizaje. Aprender algo pequeño sería más fácil que aprender algo más grande. La API debe ser pequeña, al igual que la implementación.
4. El Ecosistema de Waku y el Desarrollo Futuro
Waku adopta un enfoque minimalista y tiene como objetivo hacer crecer el ecosistema. Actualmente en desarrollo activo, Waku está trabajando hacia la versión V1 alfa y explorando características específicas de Waku. La versión 0.20 tiene características básicas para sitios web tipo blog, mientras que la versión 0.21 admitirá acciones del servidor para sitios web más interactivos. Se está considerando la integración con bibliotecas de gestión de estado del cliente como Jotai. Waku tiene como objetivo ser independiente del enrutador y se enfoca en la estabilidad y mantenibilidad. Comenzar un nuevo proyecto de Waku implica usar el comando npm create-waku-at-latest y proporcionar un nombre de proyecto.
Me doy cuenta de que los primeros adoptantes leen el código de Waku. Creo que la legibilidad y comprensión del propio marco son importantes para una adopción más amplia. El segundo aspecto se refiere al ecosistema. Somos un equipo pequeño y no podemos implementar todas las características requeridas, por lo que Waku adopta un enfoque minimalista. Solo proporcionamos un conjunto limitado de características, pero las hacemos extensibles para que los colaboradores puedan construir nuevas características alrededor de las características principales. En realidad, el objetivo es hacer crecer el ecosistema.
Actualmente, Waku está en desarrollo activo. Estamos trabajando arduamente hacia la versión V1 alfa. En ese momento, habremos completado la mayoría de las características de RST y comenzaremos a explorar más características específicas de Waku. La versión 0.20 ya tiene características básicas para construir sitios web utilizando un enrutador basado en archivos. Es adecuado para sitios web tipo blog. La versión 0.21 admitirá acciones del servidor para sitios web más interactivos. Aún quedan algunos problemas de compatibilidad con bibliotecas que deben resolverse y se han solicitado más características para Waku. Después de resolver esos problemas, me gustaría explorar la posibilidad de integrar una biblioteca de gestión de estado del cliente. Mi primer objetivo será Jotai. Otro intento sería desarrollar una implementación de enrutador alternativa que admita características específicas de Waku para construir sitios web. De esa manera, podemos confirmar que Waku es un marco independiente del enrutador. Por supuesto, necesitaremos trabajar en una mayor estabilidad. Podríamos refactorizar para una mayor mantenibilidad y para ayudar a hacer crecer el ecosistema. Espero alcanzar la versión V1 en un futuro no muy lejano, pero requiere la ayuda de la comunidad, por lo que cualquier comentario y contribución es muy bienvenida.
En el resto de la charla, me gustaría mostrarte cómo podemos comenzar un nuevo proyecto de Waku. Solo es para mostrar cómo usar Waku. No se trata de cómo se implementa Waku o qué son los Componentes de Servidor de React. Si estás interesado, por favor mira mi charla anterior, en la que hablé sobre los fundamentos de los Componentes de Servidor de React. Para crear un nuevo proyecto de Waku, ejecuta npm create-waku-at-latest. Además de npm, también admitimos yarn y pnpm. Después de ejecutar el comando de creación, se te pedirá el nombre del proyecto, que será el nombre de la carpeta. El valor predeterminado, Proyectos Waku, debería funcionar bien la primera vez. Después de eso, ingresa a la carpeta y ejecuta el comando npm install. ¡Y listo!
5. Desarrollo y Construcción de Aplicaciones Waku
Para desarrollar tu aplicación, inicia un servidor de desarrollo con npm run dev. Realiza modificaciones en la carpeta de origen y aprovecha la recarga en caliente. Comprender los Componentes de Servidor de React es esencial para el desarrollo de aplicaciones Waku. Después del desarrollo, construye la aplicación con npm run build. La compilación resultante se puede ejecutar en modo de producción con npm start. Waku también admite la construcción de sitios estáticos, que se pueden implementar en cualquier servicio de alojamiento. Los sitios estáticos aún pueden ser interactivos con componentes del cliente. Waku admite la implementación en Vercel.
Para desarrollar tu aplicación, debes iniciar un servidor de desarrollo. Simplemente ejecuta npm run dev en la carpeta del proyecto. De forma predeterminada, escuchará en el puerto 3000. Abre localhost:3000 en tu navegador y verás la aplicación en ejecución. Luego puedes modificar los archivos en la carpeta de origen. La mayoría de los cambios en los archivos se detectan y el navegador se recargará automáticamente. En algunos casos, es posible que necesites una recarga manual o reiniciar el servidor. No dudes en informarnos si ocurren casos como estos.
El desarrollo de una aplicación Waku requiere una comprensión básica de los Componentes de Servidor de React. Puedes aprenderlo en el sitio web de Waku, así como en el sitio web de React. Cuando hayas terminado de desarrollar tu proyecto, es hora de construirlo. El comando es npm run build. Toma un tiempo, pero una vez que haya terminado, el resultado estará en la carpeta dist dentro de tu proyecto. Por cierto, la razón por la que lleva tiempo es que ejecutamos el proceso de compilación cuatro veces. Creo que esto se puede mejorar y planeamos trabajar en ello en un futuro cercano.
Ahora, ¿qué podemos hacer con el resultado de la compilación? Puedes ejecutar el resultado de la compilación en modo de producción. Simplemente ejecuta el comando npm start y escuchará en el puerto 8080. Si abres localhost:8080, verás la aplicación ejecutándose exactamente como la viste en el modo de desarrollo. Si tienes un servidor en algún lugar donde puedas ejecutar Node.js, es posible cargar la carpeta del proyecto y ejecutar tu aplicación en el servidor. Waku también admite la construcción de sitios estáticos. Si todos tus componentes del servidor son estáticos, el resultado de la compilación es básicamente un sitio estático. Se encuentra en la carpeta dist/public. Para probarlo localmente, puedes ejecutar npx serve dist/public. Servirá los archivos de la carpeta que puedes abrir en tu navegador. Puedes implementar la carpeta dist/public en cualquier servicio de alojamiento y publicarla como un sitio estático. Para marcar un componente del servidor como estático, debes configurarlo explícitamente. Se hace exportando la función getConfig. Ten en cuenta que los sitios estáticos no significa que no haya interactividad. Aún podemos hacerlos interactivos con componentes del cliente. Waku admite la implementación en Vercel de forma nativa.
6. Desplegando Aplicaciones Waku y Conclusión
Para implementar tu aplicación Waku en Vercel, simplemente ejecuta el comando de Vercel. La función sin servidor se encarga tanto de RST como de SSR. Waku también admite otros servicios en la nube y se está considerando un sistema de complementos para brindar soporte extendido. Después de esta descripción general, visita waku.gg para aprender los conceptos básicos y comenzar a desarrollar tu proyecto pequeño. Mantente atento para obtener más detalles técnicos y sigue mi actividad en GitHub.
Todo lo que necesitas hacer es ejecutar el comando de Vercel. Esto construye el proyecto e implementa los archivos estáticos y la función sin servidor. La función sin servidor se encarga tanto de RST como de SSR. Puedes visitar demo.waku.gg para ver una aplicación de demostración implementada en Vercel.
Si tu aplicación es un sitio estático, puedes agregar la opción estática withVercel a tu comando de compilación en package.json. Y seguirá implementando una función sin servidor en Vercel. Además de Vercel, Waku actualmente admite una variedad de otros servicios en la nube hasta cierto punto, incluyendo Netlify, Cloud Fireworkers, DenoDeploy, PartyKit y AWS Lambda. Aunque podemos agregar más opciones, estoy considerando crear un sistema de complementos para permitir a los colaboradores ampliar fácilmente el soporte para servicios en la nube adicionales.
A medida que nos acercamos al final de esta charla, vamos a concluir las cosas. En esta charla, he explicado una descripción general de Waku y cómo comenzar a usarlo. Espero que esto te anime a probarlo. Lo primero que debes hacer es visitar waku.gg y aprender algunos conceptos básicos de Waku. Una vez que estés familiarizado con los fundamentos, puedes comenzar a desarrollar un proyecto pequeño. Espero que lo encuentres agradable. Dado el alcance de esta charla, no he explicado los detalles técnicos de Waku. Planeo compartirlos en algún momento, pero mientras tanto, puedes seguir mi actividad en GitHub. Eso es todo. Gracias por tu atención. Espero que lo hayas disfrutado.
Comments