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

Rate this content
Bookmark

El transpilador JSX incorporado de Bun, las recargas en caliente en el servidor, el punning de propiedades JSX, la API de macros, las instalaciones automáticas de paquetes, el soporte de console.log JSX, el renderizado en el servidor 4 veces más rápido y más hacen de Bun el mejor entorno de ejecución para construir aplicaciones React

9 min
05 Dec, 2022

Video Summary and Transcription

BUN es un entorno de ejecución de JavaScript todo en uno y moderno que alcanza nuevos niveles de rendimiento. Incluye BUN dev, un servidor de desarrollo de front-end rápido, BUN install, un gestor de paquetes rápido, y BUN run, un ejecutor de paquetes rápido. BUN admite JSX, tiene un renderizado en el servidor optimizado de React y ofrece recargas de módulos en caliente en el servidor. Las prioridades para BUN incluyen estabilidad, compatibilidad con Node, mejora de la documentación, características faltantes en BUN install, API de complementos AST, soporte nativo de Windows, optimización de Bundler y Minifier, y una implementación más fácil en producción. La API de complementos AST de BUN permite la ejecución de JavaScript en tiempo de agrupación e incrustación de código, lo que potencialmente inspira nuevos frameworks.

Available in English

1. Introducción a BUN

Short description:

BUN es un entorno de ejecución de JavaScript moderno todo en uno que se inicia rápidamente y alcanza nuevos niveles de rendimiento. Incluye BUN dev, un servidor de desarrollo de front-end que se inicia en 4 milisegundos, BUN install, un gestor de paquetes NPM que instala paquetes 20 veces más rápido que otros clientes, y BUN run, un ejecutor de scripts JSON de paquetes NPM que inicia los scripts 30 veces más rápido. BUN también admite JSX, tiene una renderización optimizada de React en el servidor y ofrece recarga de módulos en caliente en el servidor.

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.

2. Demo de Recarga en Caliente de BUN

Short description:

BUN permite la recarga en caliente en el servidor, utilizando render para transmitir legible y la API de React. Admite JSX en archivos JS y tiene soporte incorporado para servidores de web socket. Bunn también proporciona una API para enviar archivos.

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.

3. Prioridades de BUN y API de complemento AST

Short description:

Las prioridades actuales con BUN son hacer que el tiempo de ejecución sea estable, mejorar la compatibilidad con Node, mejorar la documentación, agregar características faltantes a BUN install, introducir la API de complemento AST y el soporte nativo de Windows, optimizar el Bundler y Minifier, y facilitar la implementación de BUN en producción. La API de complemento AST permite ejecutar JavaScript en tiempo de agrupación e incrustarlo en el código. La API de transpilador de BUN permite incrustar objetos JavaScript en el resultado transpilado, optimizando el tamaño del código. También se admite la inclusión de datos en línea en tiempo de agrupación.

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í.

4. BUN Relay Plugin y Conclusión

Short description:

Un complemento de relay utilizando la API AST de Bun puede ahorrar una llamada de red. La API de complemento AST permite la ejecución de JavaScript en tiempo de agrupación, lo que potencialmente inspira nuevos marcos de JavaScript. Gracias por ver la demostración y estén atentos para la próxima parte. Visite nuestro sitio web para obtener más información y hacer preguntas. Suscríbase a nuestro canal para futuras actualizaciones.

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.

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

JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Top Content
Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion