
Construyendo aplicaciones Full Stack React con Bun


1. JavaScript Tooling with Bun
Bun es un runtime de JavaScript rápido diseñado como un reemplazo directo para Node.js. Incluye un gestor de paquetes y un ejecutor de pruebas. La herramienta está mejorando continuamente la compatibilidad con Node.js y tiene como objetivo simplificar la cadena de herramientas de desarrollo.
Gracias a todos. A lo largo de los años, las herramientas de JavaScript se volvieron demasiado lentas y complicadas. Nuestra respuesta a eso es Bun. Bun es un runtime de JavaScript increíblemente rápido. En cada commit, ejecutamos más de 2,000 pruebas del conjunto de pruebas de Node.js. Diseñamos Bun desde el principio para ser un reemplazo directo para Node.js. Todavía estamos trabajando en eso. En eso es en lo que la mayoría del equipo pasa la mayor parte de su tiempo, en la compatibilidad con Node.js.
Pero está mejorando básicamente cada día. El porcentaje total está aumentando aproximadamente un 1 por ciento cada semana o así del conjunto de pruebas de Node.js pasando en Bun. Bun también es un gestor de paquetes. Es realmente rápido. Mucha gente ha dicho que si puedes RM-RF Node modules, eso es más lento que instalar paquetes con Bun install. Para hacer eso, hicimos mucho trabajo en cuál es la forma más rápida de copiar archivos en cada plataforma objetivo, y también, a veces, como el sistema de archivos.
Bun test es un ejecutor de pruebas compatible con jest realmente rápido. Puedes usarlo con JSX, TSX, todo eso está integrado. Puedes importar y requerir en el mismo archivo. Esta es la comparación. Es 20 veces más rápido que jest para SSR, 1,000 componentes de React, pero luego solo para imprimir el menú de ayuda, es tres o cuatro veces más rápido. Esto es como, Bun es cuatro cosas diferentes en una. Es un gestor de paquetes, es un empaquetador, es un runtime, es un ejecutor de pruebas. Tenemos la intención de reemplazar gran parte de la cadena de herramientas con una herramienta simple.
2. Full-Stack Development with Bun
El runtime de Bun, el ejecutor de pruebas, el gestor de paquetes y el empaquetador funcionan juntos sin problemas. Se incluyen APIs como WebSocket, cliente S3, cliente Postgres y hashing de contraseñas. El empaquetador cuenta con soporte rápido para React, analizadores de CSS y HTML, tree-shaking y code-splitting. La próxima versión de Bun soportará el desarrollo full-stack con importaciones de HTML y configuraciones de rutas.
Cada una de estas cosas funciona en conjunto, así que, por ejemplo, el runtime utiliza el empaquetador. El ejecutor de pruebas también utiliza el empaquetador y el transpiler. El runtime utiliza el gestor de paquetes para instalar automáticamente paquetes. Si no lo haces, tienes una carpeta de Node modules. El gestor de paquetes utiliza el shell para tener scripts de shell multiplataforma, de modo que tus scripts JSON empaquetados con comandos como RM o CD o LS o cualquiera de esos comandos simplemente funcionen, ya sea en Windows o Postix, de modo que no necesites instalar RimRath, por ejemplo. Y hemos incorporado muchas APIs. Esta lista va a crecer. Todavía hay mucho más que queremos hacer. Tenemos un servidor WebSocket, tenemos un cliente S3, tenemos un cliente Postgres, tenemos hashing y verificación de contraseñas. Se pueden construir muchas aplicaciones sin dependencias. Y también está el empaquetador.
Hoy en día, el empaquetador de Bun tiene soporte rápido para React integrado. Tiene un analizador de CSS. También tiene un analizador de HTML con re-escritor de HTML. También tenemos tree-shaking, un minificador, code-splitting. Una característica un poco menos común que tenemos, o menos común en comparación con otros empaquetadores es que puedes hacer echo de console.log desde el navegador al terminal. Esto es realmente útil para agentes de IA donde normalmente no pueden depurar cosas en tu navegador muy fácilmente. Normalmente necesitas instalar alguna cosa MCP, pero simplemente hicimos que console.log transmita al navegador sobre la misma conexión WebSocket que hace para HMR. También tenemos plugins que esperarías. Puedes usarlo con Tailwind y Svelte.
¿Cómo construyes una aplicación React full-stack cuando la mayoría de lo que acabo de describir está muy enfocado en el front-end o el back-end, pero, para un full-stack, necesitas tanto el front-end como el back-end juntos? En la próxima versión de Bun, puedes simplemente importar HTML, y eso funciona tanto por adelantado como en desarrollo. Así es como se ve hoy. Hay rutas en bun.serve. Especificas dónde quieres que se renderice el archivo HTML, y luego también puedes tener rutas de API allí también. Así que entonces estás ejecutando tu aplicación React en desarrollo, o potencialmente en producción de esta manera. Y puedes ver que las rutas también soportan parámetros de solicitud. Esto sería para un acortador de URL. Utiliza APIs de solicitud y respuesta, los estándares web. Y puedes ver que casi no hay configuración aquí. Eso es todo lo que tenías que hacer.
QnA
Available in other languages:
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
Workshops on related topic

Comments