800+ IT
News
als RSS Feed abonnieren📚 Getting started with Bun and React
💡 Newskategorie: Programmierung
🔗 Quelle: dev.to
Written by Nelson Michael✏️
A JavaScript runtime environment allows a program to interact with the outside world by providing access to inbuilt libraries and objects. Simply put, a runtime environment is one in which your program can execute.
Bun is a relatively new, fast all-in-one JavaScript runtime. In this article, we'll look at some interesting facts about Bun, evaluate how it compares to other JavaScript runtimes, and see how to use Bun to bootstrap a React project. Lastly, we’ll run some speed tests to see if Bun is really as fast as its website claims!
Jump ahead:
- What is Bun?
- What can I do with Bun?
- Transpiling
- Task running
- Package management
- How does Bun compare to Node.js and Deno?
- Speed
- Extra features
- Compatibility
- Creating a React app with Bun
- Speed test: Bun vs. Node.js
- Speed test: Bun vs. Create React App
What is Bun?
Bun is a new, lightweight JavaScript runtime that includes a native bundler, transpiler, task runner, and npm client. It allows you to bundle, transpile, install, and run JavaScript and TypeScript projects.
Bun is the new kid on the block; it's all about speed, and it's a strong contender for the top JavaScript runtime spot right now. It claims to be more feature-rich and faster than Node.js and Deno. Jarred Sumner created Bun, which was released to the public in 2021. Since then, it has quickly accumulated over 30k stars on Github.
Bun comes with a boatload of features:
- Includes web APIs such as Fetch, WebSocket, and ReadableStream
- Transpiles every file, so both TypeScript and JSX work
- Implements the Node.js module resolution algorithm, meaning npm packages may be used
- Includes a lightning-fast SQLite3 client
- Implements the majority of the Node.js API, meaning that many native Node modules simply work
What can I do with Bun?
Bun’s website refers to it as a “fast all-in-one JavaScript runtime.” So what else can we do with Bun? Let’s take a look.
Transpiling
Bun's transpiler is a fantastic feature that converts TypeScript, JSX, and even vanilla JavaScript. Why would you need to transpile plain JavaScript, after all?
That’s a great question. This is where one of Bun's performance-enhancing features comes into play. Bun automatically optimizes JavaScript before it is executed.
The transpiling feature is still under development, but the developers intend to include an optimized binary format for JavaScript in the future. These optimizations could have significant implications for edge apps and other short-lived processes.
Task running
Bun's task runner is similar to that of Node.js, but it is noticeably faster. You can use Bun's task manager in a Node project to take advantage of its speed. A task runner is an essential tool; both Node/npm and Deno include one by default. Furthermore, Bun's task manager can run almost any script without the need for the run subcommand, whereas npm can only do so for a few script names.
Package management
Bun's package manager outperforms in terms of performance. In fact, Bun, should be faster than pnpm or Yarn, and here's why:
- Symlinks: Because Bun employs symlinks, packages for each project are linked to a centralized location. This means that modules used in subsequent projects do not have to be downloaded again
- Binary lockfile: Bun uses a binary lockfile; binary files are typically serialized and deserialized more quickly, thereby reducing the overall time required by the package manager
- Zig: Bun's package manager is written in Zig. This is a very fast language; much faster than JavaScript, which is used by the majority of other JavaScript package managers
How does Bun compare to Node.js and Deno?
Node.js and Deno are two of the most popular and widely used server-side JavaScript runtime environments. Let’s see how they compare to Bun.
Speed
According to benchmarks performed by Bun's creators, Bun can outperform both Node.js and Deno in I/O-intensive operations such as HTTP servers and SQL. Bun is built to be faster to start and run than either Node.js or Deno. It also claims to be significantly faster than both server-side JavaScript runtimes due to its use of JavaScriptCore instead of JavaScript V8, its use of Zig for API writing, and extensive tuning and benchmarking.
These claims may appear outlandish — after all, it's all JavaScript and JavaScript V8 is quite efficient. However, remember I mentioned Bun’s speed with I/O-intensive tasks? A significant percentage of execution time is spent in the runtime's API rather than the JavaScript engine itself. Bun is much faster in these cases because it has a much faster I/O implementation than either Node.js or Deno.
Extra features
Bun is not just a JavaScript runtime, it also comes with a host of extra features that make it a versatile and powerful tool for web developers. These features include a bundler, a TypeScript transpiler, and a test runner, which are similar to those found in Deno.
Bun also includes a CSS-in-JS tool, a template builder, and an environment variable loader. Bun does not have the same code weight constraints as web libraries, enabling it to offer both performance optimization and an impressive array of features.
Compatibility
Bun was built to be Node-compatible. It includes full support for CommonJS, Node-API, and some Node.js modules. This feature is extremely useful because it allows you to access the vast Node.js ecosystems.
Creating a React app with Bun
Now that we have a better understanding of Bun’s many features. Let’s see how we can create a React application on the Bun JavaScript runtime.
To start, install Bun on your computer:
curl https://bun.sh/install | bash
If you’re on a Mac, you’ll have to do some extra steps to get Bun working. After installation is successful you’ll get two export commands. Follow these steps to add those commands in a .zprofile file in your Users folder:
- Navigate to your computer's hard disk
- Navigate to the
Usersfolder - Navigate to your current logged in user
- Find a file called
.zprofile - Add the commands in the
zprofilefile and save
Use the following command to check that Bun was installed:
bun -v
Now, let’s install React. In your terminal, navigate to where you want to keep your React project, and then run the following command:
bun create react [app name]
Next, navigate to your project folder and then run the below command below to start a local development server:
bun dev
If you want to create a production build, run this command:
bun react-scripts build
Bun does not generate script commands for us like Create React App, but you can do that by simply installing react-scripts. These preconfigured React scripts run the build tools that are needed to programmatically transform React JSX syntax into JavaScript:
bun a react-scripts -d
Now, simply add the scripts in your package.json file. Then you can start running scripts just like you would in a Create React App project with npm.
Add the following scripts to your package.json file:
{
"scripts":{
"start": "bun dev",
"build": "react-scripts build"
}
}
Bun creates a React app with JavaScript by default. To use TypeScript instead, just change the file extension from .jsx to .tsx.
Speed test: Bun vs. Node.js
Let’s perform a simple speed test to see which of these runtimes executes the code the fastest. Our program is just a simple loop, at the start of the program we start a timer and when the loop finishes its iteration we end the timer.
Here’s the code for the program:
console.time('test');
for (let i = 0; i < 10000; i++) console.log(i)
console.timeEnd("test");
Let’s run our speed test:
- Create a file and call it whatever you want, let’s call it
bun-test.js. - Paste the code above into the file.
- Open your terminal and navigate to the folder where you have the file.
- Run the program on the terminal.
To run the program with Bun use this command:
bun [file name]
Here’s the result from running the program with Bun: 
It took Bun 22.39ms to complete the loop.
Now, let’s see how long it will take Node.js to complete the same program.
To run the program with Node use this command:
node [file name]
Here’s the result from running the program with Node: 
It took Node 163.225ms to complete the same program!
Speed test: Bun vs. Create React App
Now, let’s perform another type of speed test. Let’s see how long it will take for Bun to set up a React application compared to Create React App.
To set up a React application with Bun, open up your terminal and cd into the folder where you’d like to install your React project:
bun create react [app name]
As shown below, it took Bun 17.78s to finish installing all the dependencies for a brand new React application: 
Now, let’s see how long it would take Create React App to do the same thing. Again, open the terminal and cd into the folder that you’d like to install your React project in:
npx create-react-app [app name]
As shown below, it took Create React App 61s to finish installing all the dependencies for a new React application: 
N.B., internet speed was a major factor in the above tests, but the same internet speed was used for both tests
Conclusion
Bun is a powerful all-in-one JavaScript runtime that offers web developers a rich set of features and tools. In this article, we took an in-depth look at Bun's features and compared them to other popular JavaScript runtimes, such as Node.js and Deno. We also demonstrated how to create a simple React app with Bun, and ran tests to show just how fast and efficient it is compared to other runtimes. Overall, Bun is a versatile and powerful tool that offers a wealth of benefits to web developers looking to build fast, efficient, and scalable applications.
Cut through the noise of traditional React error reporting with LogRocket
LogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.
LogRocket automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.
Focus on the React bugs that matter — try LogRocket today.
...