Cómo Bun Hace que Construir Aplicaciones React Sea Más Simple y Rápido

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

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

En BUN v0.3.0, añadimos instalaciones automáticas de paquetes NPM al entorno de ejecución de JavaScript de BUN. Eso significa que puedes simplemente importar paquetes y se instalan. No hay—no tienes que ejecutar realmente un paso de instalación. Esto se habilita automáticamente cuando—no hay una carpeta de node modules. Así que todavía funciona con node modules, solo significa que cuando no tienes node modules, si tienes un script rápido que solo quieres ejecutar y no quieres tener que lidiar con la instalación de paquetes, simplemente funciona. Lo otro que es realmente interesante sobre eso es que puedes—no—porque no necesitas una carpeta de node modules, puedes simplemente—ahorra mucho espacio en disco y te ahorra mucho tiempo porque no tienes que pasar este tiempo instalando los paquetes. Utiliza una caché global compartida.

En BUN, JSX es soportado nativamente. Hay un transpilador automático de JSX y TypeScript, JSX incluso está habilitado para archivos .JS por cierto, y también puedes tener paquetes npm que usan JSX y BUN simplemente los transpila automáticamente. Puedes console.log JSX, puedes hacer punting de propiedades JSX y tenemos una renderización del lado del servidor de React extremadamente optimizada.

Esto es lo que parece cuando haces console.log a un elemento JSX en BUN. Puedes ver que en lugar de imprimir la representación del objeto con los símbolos y todo eso en realidad simplemente lo imprime como HTML un poco. Puedes ver que todavía preserva que esto es una función, o resalta el componente para que sea azul en lugar de verde para indicar que es un elemento frente a un componente. Y luego esto es lo que parece el punting de propiedades JSX en BOTnets. 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, puedes simplemente emitir el valor. De esa manera, es el equivalente a la sintaxis de desestructuración de objetos, pero para JSX. No creo que haya otras herramientas que soporten esto todavía. En la próxima versión de React, están añadiendo un nuevo renderizado de servidor en streaming de bun, y eso ayuda a hacer que bun sea tres veces y media más rápido en la renderización del lado del servidor en comparación con cuando se usa la compilación server.browser, que es la que bun usa actualmente. En general, esto suma hasta cuatro veces más rápido la renderización del lado del servidor en bun en comparación con node.

Este benchmark aquí es un benchmark de Hello World para una aplicación React muy simple. Si has usado cualquier framework en el pasado, para construir cosas de front-end con React, probablemente has usado recarga de módulos en caliente. Usualmente, la recarga de módulos en caliente es algo que existe en el cliente, se ejecuta en navegadores. Pero en bun, bun tiene soporte incorporado para la recarga de módulos en caliente en el servidor.

Así que, aquí hay una demostración rápida. Esta es una página que ya está cargada. Ten en cuenta que esto se está ejecutando en el servidor. En realidad está recargando toda la página en el servidor aquí. Hacemos que haga esta recarga en caliente mientras escribo. Puedes ver lo rápido que es en el video aquí. Estoy escribiendo y se está recargando inmediatamente. Y así es como se ve, puedes ver que está usando render to readable stream, la API de React para renderizar este componente de React. También puedes ver que está haciendo 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 también tiene soporte incorporado en Bunn. Esta es una API para enviar un archivo en Bunn. Así que eso es un poco sobre Bunn dash dash hot.

Las prioridades de hoy con Bunn, el runtime de Bunn aún no es estable. Y ese es realmente nuestro enfoque principal, lograr que Bunn sea estable. Nuestro segundo enfoque es mejorar la compatibilidad con node. Estamos haciendo ambas cosas al mismo tiempo. Y el objetivo allí es hacer que puedas ejecutar prácticamente cualquier paquete NPM en Bunn sin hacer cambios específicos para Bunn.

Tampoco tenemos una gran documentación o ejemplos todavía. Nuestra documentación actual es un readme realmente largo, probablemente sea el readme más largo que hayas visto. Y la parte buena de eso es que significa que puedes hacer comando más F para buscar prácticamente todos los documentos de Bunn muy rápidamente, pero significa que no es muy fácil de navegar. Así que necesitamos arreglar eso mientras preservamos la búsqueda de comando más F.

También necesitamos agregar algunas características faltantes a Bunn install. Le falta soporte para workspaces, le falta soporte para Git, y esos son realmente importantes para muchos proyectos. Lo que viene es que vamos a agregar la API de plugin AST, vamos a agregar soporte nativo para Windows. Actualmente soportamos el subsistema de Windows para Linux, eso funciona muy bien, pero es una mejor experiencia usar el Windows real. Hoy nuestro Bundler y Minifier no está optimizado para producción. De hecho, no hay Minifier, pero necesitamos construir eso. La otra cosa con la que necesitamos ayudar es hacer más fácil el despliegue de Bunn en producción. Así que ese es el siguiente paso.

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

Esto ahorra una llamada de red. Así es como se ve un plugin de relay usando 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 tenemos un identificador aquí que insertamos, que es la función GraphQL.

Todavía es muy temprano para esta API de plugin AST. Probablemente vamos a hacer 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 bundle, y creemos que tal vez inspirará nuevos frameworks de JavaScript.

Y eso es todo. Espero que hayas disfrutado de esta demo. Y nos veremos en la próxima. Adiós. De hecho, voy a tener más cosas en el sitio web ahora mismo. Así que si quieres llegar a esto, tendrás un enlace al sitio web en la descripción. Así que si quieres agregar preguntas o cualquier cosa a esto, también puedes preguntarnos en el sitio web. Estaremos llegando a la siguiente parte de esta demo. 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 presionar ese botón de suscripción, y nos vemos en el próximo video.