Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida

Me llamo Jared y voy a hablar sobre BUN. BUN es un entorno de ejecución de JavaScript moderno todo en uno. Está diseñado para iniciarse rápidamente, alcanzar nuevos niveles de rendimiento, ser una gran y completa herramienta, y ser un reemplazo directo de Node.js.

BUN dev es un servidor de desarrollo de front-end que se inicia en 4 milisegundos. Es un comando integrado en BUN. BUN install es un gestor de paquetes NPM y instala paquetes 20 veces más rápido que cualquier otro cliente de NPM que exista hoy en día. BUN run es un ejecutor de scripts JSON de paquetes NPM y inicia los scripts 30 veces más rápido que NPM.

En BUN v0.3.0, agregamos la instalación automática de paquetes NPM al entorno de ejecución de JavaScript de BUN. Esto significa que simplemente puedes importar paquetes y se instalarán. No es necesario ejecutar un paso de instalación. Esto se habilita automáticamente cuando no hay una carpeta de módulos de Node. Aún funciona con los módulos de Node, simplemente significa que cuando no tienes módulos de Node, si tienes un script rápido que quieres ejecutar y no quieres lidiar con la instalación de paquetes, simplemente funciona. Lo interesante de esto es que no necesitas una carpeta de módulos de Node, lo que ahorra mucho espacio en disco y tiempo, ya que no tienes que pasar tiempo instalando los paquetes. Utiliza una caché global compartida.

En BUN, JSX es compatible de forma nativa. Hay un transpilador automático de JSX/TypeScript, incluso se habilita JSX para archivos .JS, y también puedes tener paquetes NPM que usen JSX y BUN los transpilará automáticamente. Puedes usar console.log con JSX, puedes hacer JSX prop punting y tenemos una renderización optimizada de React en el servidor.

Así es como se ve cuando usas console.log en un elemento JSX en BUN. Puedes ver que en lugar de imprimir la representación del objeto con los símbolos y todo eso, lo muestra de forma legible como HTML. Aún conserva la función o resalta el componente en azul en lugar de verde para indicar que es un elemento en lugar de un componente. Y así es como se ve JSX prop hunting en BUN. Hay más de un nombre para esto, pero la idea básica es que en lugar de tener que escribir si el nombre de la propiedad es el mismo identificador que el valor, simplemente puedes omitir el valor. Es equivalente a la sintaxis de desestructuración de objetos, pero para JSX. No creo que haya otras herramientas que admitan esto aún. En la próxima versión de React, están agregando un nuevo renderizado de servidor de transmisión de BUN, lo que ayuda a que BUN sea tres veces más rápido en la renderización en el servidor en comparación con cuando se usa la compilación server.browser, que es la que BUN usa actualmente. En general, esto se traduce en una renderización en el servidor cuatro veces más rápida en BUN en comparación con Node.

Esta prueba de referencia es una prueba de Hello World para una aplicación muy simple de React. Si has utilizado algún framework en el pasado para construir cosas de front-end con React, probablemente hayas usado la recarga de módulos en caliente. Por lo general, la recarga de módulos en caliente es algo que existe en el cliente y se ejecuta en los navegadores. Pero en BUN, BUN tiene soporte incorporado para la recarga de módulos en caliente en el servidor.

Entonces, aquí hay una demostración rápida. Esta es una página que ya se ha cargado. Ten en cuenta que esto se está ejecutando en el servidor. En realidad, está recargando toda la página en el servidor aquí. Lo hacemos recargar en caliente mientras escribo. Puedes ver lo rápido que es en el video aquí. Estoy escribiendo y se recarga inmediatamente. Y así es como se ve, puedes ver que está utilizando render para transmitir legible, la API de React para renderizar este componente de React. También puedes ver que está utilizando JSX pero es un archivo JS. Tenemos un pequeño web socket aquí para enviar los nuevos estilos, el cual el servidor de web socket está también incorporado en Bunn. Esta es una API para enviar un archivo en Bunn. Así que eso es un poco sobre Bunn -- hot.

Las prioridades actuales con BUN, el runtime de BUN aún no es estable. Y ese es realmente nuestro enfoque principal, hacer que BUN sea estable. Nuestro segundo enfoque es mejorar la compatibilidad con Node. Estamos trabajando en ambos al mismo tiempo. Y el objetivo es poder ejecutar virtualmente todos los paquetes de NPM en BUN sin realizar cambios específicos para BUN.

Tampoco tenemos una documentación o ejemplos excelentes todavía. Nuestra documentación actual es un readme muy largo, probablemente el readme más largo que hayas visto. Y lo bueno de eso es que significa que puedes usar Comando + F para buscar prácticamente toda la documentación de BUN muy rápidamente, pero significa que no es muy fácil de navegar. Así que necesitamos solucionar eso mientras mantenemos la búsqueda con Comando + F.

También necesitamos agregar algunas características faltantes a BUN install. Le falta soporte para espacios de trabajo, le falta soporte para Git y eso es realmente importante para muchos proyectos. Lo que viene es que vamos a agregar la API de complemento AST, vamos a agregar el soporte nativo de Windows. Actualmente, admitimos el subsistema de Windows para Linux, que funciona muy bien, pero es una mejor experiencia usar Windows real. Hoy en día, nuestro Bundler y Minifier no están optimizados para producción. De hecho, no hay Minifier, pero necesitamos construirlo. Otra cosa en la que necesitamos ayuda es facilitar la implementación de BUN en producción. Así que ese es el siguiente paso.

Aquí tienes un poco sobre la API de complemento AST. La idea aquí es que puedes agregar tiempo de agrupación, ejecutar JavaScript arbitrario y incrustarlo en tu código. Así que aquí tenemos Moment ejecutándose en tiempo de compilación. Y como puedes ver en la salida del archivo de fuerza, puedes ver que devolvió la hora exacta sin renderizar nada, y eso está incrustado en el código. No hubo un viaje de red adicional allí. Otra cosa que puedes hacer, BUN tiene una API de transpilador incorporada y esta es una prueba en la base de código de BUN que te permite incrustar, pero la API de transpilador de BUN te permite incrustar objetos JavaScript en el resultado transpilado. Y realizará una eliminación de código muerto para incluir solo la parte que realmente utilizaste. Así que puedes ver que hay un gran objeto JSON que estamos enviando y solo incrustó la URL. No incrustó el objeto JSON completo. Esto significa que puedes incluir datos en línea en tiempo de agrupación. Así que aquí tienes otro ejemplo donde tenemos un montón de filas de componentes de React. Puedes ver esta función rows.map. Y en la salida, simplemente toma todas las filas allí.

Esto ahorra una llamada de red. Así es como se ve un complemento de relay utilizando la API AST de Bun. Tenemos la declaración de importación. Inyectamos la declaración de importación en la parte superior del archivo. Y aquí tenemos un identificador que insertamos, que es la función GraphQL.

Aún es muy temprano para esta API de complemento AST. Probablemente haremos algunos cambios más antes de agregar documentación y comenzar a tener más ejemplos. Pero la idea es que puedes tener ejecución de JavaScript en tiempo de agrupación y creemos que tal vez inspire nuevos marcos de JavaScript.

Y eso es todo. Espero que hayas disfrutado de esta demostración. Y nos vemos en la próxima. Adiós. De hecho, ahora mismo voy a tener más cosas en el sitio web. Así que si quieres acceder a esto, tendrás un enlace al sitio web en la descripción. Entonces, si quieres hacer preguntas o cualquier cosa sobre esto, también puedes preguntarnos en el sitio web. Nos pondremos con la siguiente parte de esta demostración. Así que vamos a concluir ahora. Y si tienes alguna pregunta, no dudes en hablar con nosotros en la sesión de preguntas y respuestas. Y gracias de nuevo por ver. Recuerda hacer clic en ese botón de suscripción y nos vemos en el próximo video. Adiós.