Construyendo aplicaciones Full Stack React con Bun

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content
Jarred Sumner
Jarred Sumner
14 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Bun es un runtime de JavaScript rápido que busca mejorar la compatibilidad con Node.js y agilizar la cadena de herramientas de desarrollo. Ofrece capacidades de desarrollo full-stack sin problemas con características como soporte para WebSocket y división de código. La gestión eficiente de paquetes en Bun optimiza los procesos de producción al reducir el tiempo de análisis y las llamadas al sistema. Los planes de colaboración de Bun incluyen mejorar el soporte para monorepos e integrarse con frameworks y routers para mejorar la funcionalidad y la eficiencia del runtime.

1. JavaScript Tooling with Bun

Short description:

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

Short description:

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

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

Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
React Day Berlin 2022React Day Berlin 2022
9 min
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.
Componentes de Servidor con Bun
Node Congress 2023Node Congress 2023
7 min
Componentes de Servidor con Bun
Top Content
Bun is a modern JavaScript runtime environment that combines a bundler, transpiler, package manager, and runtime. It offers faster installation of NPM packages and execution of package.json scripts. Bun introduces a new JavaScript and TypeScript bundler with built-in support for server components, enabling easy RPC with the client. This allows for code splitting and running code that streamingly renders React or any other library from the server and mixes it with client code, resulting in less JavaScript sent to the client.
Bun, Deno, Node.js? Recreando un tiempo de ejecución de JavaScript desde cero - Comprende la magia detrás de Node.js
Node Congress 2023Node Congress 2023
29 min
Bun, Deno, Node.js? Recreando un tiempo de ejecución de JavaScript desde cero - Comprende la magia detrás de Node.js
The Talk explores the magic behind Node.js and delves into its components, including V8, libuv, and the C++ bridge. It discusses the workflow and execution process, the use of NodeMod, and the understanding of console functions. The Talk also covers Node.js functions and scheduling, the introduction of runtimes, and the collaboration between JavaScript runtimes. It concludes with insights on content production, the choice of Node.js, and the inspiration behind it.
¿Es Bun 'Realmente' Más Rápido?
React Advanced 2024React Advanced 2024
24 min
¿Es Bun 'Realmente' Más Rápido?
Welcome to React Advanced London. Today's agenda: what is bun? Features, benchmark, demo, key takeaways. Bun provides a better developer experience, faster CI, and decreased app file size. Building bun on top of Zig prioritizes performance, stability, and compatibility. Install bun with npm or download the binary from the official website. Bun is a comprehensive development toolkit with a fast and efficient package manager. Learn how to benchmark CLI commands using Hyperfine with flags. Compare different package managers. Bond is fast and provides a few features in its package manager: install, add, remove, update, link. Test the bond test runner against vtest and jest using hyperfine. Discover the features supported by the test runner and the importance of bundling in JavaScript applications. Learn about the main.js code, the performance comparison of different bundlers, and the features offered by Bun, including loaders and macros. Explore macros in Bonn and how to optimize the code by including the type macro. Discover the benefits of Bonn, such as reducing CPU usage and fast installation of node dependencies.

Workshops on related topic

Advanced TypeScript for Bun and Node.js
JSNation US 2024JSNation US 2024
103 min
Advanced TypeScript for Bun and Node.js
Workshop
Adrian Hajdin
Adrian Hajdin
Aprende el potencial completo de TypeScript utilizando características avanzadas como Type Inference, Type Guards, Generics, Transformers y Utility Types con programación asíncrona tanto en Node.js (usando Express.js) como en Bun.js (usando Hono.js), todo mientras entiendes las mejores prácticas para construir APIs fuertemente tipadas con diferentes bases de datos.Visión GeneralEn esta masterclass, comenzaremos con una discusión sobre las actualizaciones recientes en Node.js y Bun.js, centrándonos en su soporte incorporado para TypeScript. Aprenderás cómo configurar TypeScript en ambos entornos de ejecución y crear APIs estrictamente tipadas usando Express.js y Hono.js. A través de demostraciones prácticas, exploraremos la integración con varias bases de datos como MongoDB y Postgres, aprovechando las características avanzadas de TypeScript para construir aplicaciones robustas. Al final de la masterclass, estarás equipado con el conocimiento para optimizar el código TypeScript para el rendimiento y los patrones de diseño, asegurando que tus APIs sean tanto eficientes como mantenibles.Objetivos de Aprendizaje- Introducción al soporte de TypeScript en Node.js y Bun.js- Características Avanzadas de TypeScript: Generics, Type Guards, Mapped Types, etc.- Middleware e Inyección de Dependencias con Express.js y Hono.js- Mejora de Patrones de Diseño y Rendimiento en TypeScript- Pruebas Unitarias e Integración con TypeScript- Integración de Bases de Datos: MongoDB, Postgres, Prisma y otros- Mejores Prácticas para el Desarrollo de APIs Robustas tanto en Node.js como en Bun.js