Bun’s builtin JSX transpiler, hot reloads on the server, JSX prop punning, macro api, automatic package installs, console.log JSX support, 4x faster serverside rendering and more make Bun the best runtime for building React apps
How Bun Makes Building React Apps Simpler & Faster
AI Generated Video Summary
1. Introduction to BUN
BUN dev is a front-end dev server that starts in 4 milliseconds. It's a command that's built into BUN. BUN install is an NPM package manager, and it installs NPM packages 20 times faster than any other NPM client that exists today. BUN run is an NPM package JSON scripts runner, and it starts package JSON scripts 30 times faster than NPM.
In BUN, JSX is natively supported. There's an automatic JSX slash TypeScript transpiler, JSX is even enabled for .JS files by the way, and you can also have npm packages which use JSX and BUN will just automatically transpile it. You can console.log JSX, you can do JSX prop punting and we have an extremely optimized React server-side render.
This is what it looks like when you console.log a JSX element in BUN. You can see that instead of printing the object representation with the symbols and all that stuff, it actually just pretty prints it like HTML a little bit. You can see it still preserves this is a function, or it highlights the component to be blue instead of green to indicate that it's an element versus a component. And then this is what JSX prop hunting looks like in BOTnets. There's more than one name for this, but the basic idea is that instead of having to type if the property name is the same identifier as the value, you can just emit the value. So that way, it's the equivalent of object destructuring syntax, but for JSX. I don't think there are other tools that support this yet. In the next version of React, they're adding a new bun streaming server render, and that helps make bun three and a half times faster at server-side rendering compared to when using the server.browser build, which is the one that bun currently uses. Overall, this adds up to four times faster server-side rendering in bun compared to node.
This benchmark here is a Hello World benchmark for a very simple React app. If you've used any framework in the past, for building front-end stuff with React, you've probably used hot module reloading. Usually hot module reloading is something that exists on the client, it's run in browsers. But in bun, bun has built-in support for hot module reloading on the server.
2. BUN Hot Reload Demo
BUN allows for hot reloading on the server, using render to readable stream and the React API. It supports JSX in JS files and has built-in support for web socket servers. Bunn also provides an API for sending files.
So, here's a quick demo. This is a page that's already loaded. Keep in mind, this is running on the server. It's actually reloading the whole page on the server here. We have it do this hot reload as I type. You can see just how fast this is in the video here. I'm typing and it's immediately reloading. And that's what it looks like, you can see that it's using render to readable stream, the react API to render this react component. You can also see that it's doing JSX but it's a JS file. We have a little web socket here to send over the new styles, which web socket server is also built in support in Bunn. This is an API for sending a file in Bunn. So that's a little bit about Bunn dash dash hot.
3. BUN Priorities and AST Plugin API
Today's priorities with Bunn, Bunn's runtime is not stable yet. And that's really our main focus is getting Bunn to be stable. Our second focus is to improve node compatibility. We're doing both of those at the same time. And the goal there is to make it so you can run virtually every NPM package in Bunn without making changes specific to Bunn.
We also don't have great documentation or examples yet. Our current documentation is one really long readme, it's probably the longest readme you've ever seen. And the good part about that is it means you can do command plus F to search pretty much all of Bunn's docs really quickly, but it means that it's not very easy to browse. So we need to fix that while still preserving the command plus F searching.
We also need to add a few missing features to Bunn install. It's missing a workspace support, it's missing Git support, and those are really important for a lot of projects. What's coming up is we're gonna be adding AST plugin API, we're gonna be adding native Windows support. Currently we support Windows subsystem for Linux, that works great, but it's a better experience to use the actual Windows. Today our Bundler and Minifier is not production optimized. There's no Minifier in fact, but we need to build that. The other thing that we need to help with is make it easier to deploy Bunn to production. So that's sort of the next step.
4. BUN Relay Plugin and Wrap-up
This saves a network call. This is what a relay plugin looks like using Bun's AST API. We have the import statement. We inject the import statement into the top of the file. And we have an identifier here that we insert, which is the GraphQL function.
And that's it. I hope you enjoyed this demo. And we'll see you in the next one. Goodbye. In fact, I'm actually going to have more things on the website right now. So if you want to get to this, you'll have a link to the website in the description. So if you want to add questions or anything to this, you can ask us on the website as well. We'll be getting to the next part of this demo. So we're going to wrap up now. And if you have any questions, feel free to speak to us in the Q and A session. And thank you again for watching. Remember to hit that subscribe button, and I'll see you in the next video.