Presentando Waku: El Framework React Mínimo

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

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.

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.

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.

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.