Introduction
Let’s take a look at some key concepts to fully understand Bun runtime: the setting in which JavaScript code executes is referred to as the JavaScript runtime. It provides the event loop, memory allocation, and garbage collection architecture required to run JavaScript code.
Using a runtime environment like Node.js, JavaScript code can be run in a browser or on a server. We’ll examine some intriguing facts about Bun in this article, assess how it stacks up against competing JavaScript runtimes, and examine how to use Bun to launch a React project.
Finally, we’ll perform some performance tests to verify that Bun is as quick as it claims to be on its website.
What is Bun runtime
Bun is a runtime for modern applications that are designed to be faster and more efficient than traditional runtimes. A native bundler, transpiler, task runner, and npm client are all included in the brand-new, lightweight JavaScript runtime known as Bun. It enables the bundling, installation, and execution of TypeScript and JavaScript projects. Bun is designed to be an all-in-one alternative for Node, Webpack, Babel, and Yarn.
It asserts to be quicker and more feature-rich than Node.js and Deno. Bun was designed by Jarred Sumner and made available to the general public in 2021. Since then, it has quickly racked up more than 30k GitHub stars.
Features of Bun
Transpiling
The excellent transpiler in Bun translates TypeScript, JSX, and even plain JavaScript. Why, therefore, would you want to translate simple JavaScript?
What a wonderful question. Here, one of Bun’s performance-improving features is put to use. Before it is executed, Bun automatically optimizes JavaScript.
Although the transpile capability is still in development, the creators want to eventually add an efficient binary format for JavaScript. Edge applications and other transient processes may be significantly impacted by these changes.
Task running
Bun’s task runner is comparable to Node.js, however, it moves much more quickly. To benefit from its speed, you can use Bun’s task manager in a Node project. A necessary tool is a task runner, which both Node/npm and Deno come with by default. Additionally, whereas npm can only do this for a select few script names, Bun’s task manager can launch nearly any script without the requirement for the run subcommand.
Kubernetes integration
Bun is designed to be easy to deploy and manage, with support for containerization and orchestration using Kubernetes. This makes it a good choice for building modern, cloud-native applications that need to be scalable, resilient, and easy to manage.
Using Node.js with Bun without modification
Bun is designed to be compatible with the Node.js API, which means that many native Node modules can be used with Bun without modification. Bun uses a custom implementation of the V8 JavaScript engine, which provides a high degree of compatibility with the Node.js runtime. This allows developers to leverage existing Node.js modules and libraries in their applications, without having to rewrite them or find alternative solutions.
SQLite client
For interacting with SQLite databases, Bun comes with a quick and effective built-in SQLite3 client. The client is perfect for contexts with limited resources because it is speed-optimized and has a small memory footprint. It also includes an easy-to-use, straightforward API.
Why is Bun faster
Lightweight: Bun is a lightweight runtime, which means it has a smaller codebase and needs fewer resources, making it perform better than other Runtimes in terms of speed and memory utilization.
Compactness: Bun contains a native transpiler that allows you to write Typescript code right out of the box and a native bundler to take the place of tools like Webpack. Like Jest, Bun features a test runner. You don’t need to install dozens into each project; environment variables load automatically.
Low-level code: Zig, a low-level programming language that is more recent than C or Rust, is used to create the Bun runtime.
Performance: The v8 engine is not used by Bun. Instead, it makes use of Webkit’s Javascript core, which is typically thought to be quicker.
Installation and setup of Bun runtime
You can visit the website and see the official document on how to install Bun, although below is the command:
curl -fsSL https://bun.sh/install | bashCode language: JavaScript (javascript)This is supported on macOS, Linux, and Windows.
Bun, as a package manager
In fact, according to Bun’s official GitHub page, Bun can install packages 20 times to 100 times faster than npm install, and on macOS, you can record up to 4 times to 80 times faster than npm install.
You need Bun installed on your system and a project set up to use Bun install. The Bun install command has the following syntax:
<code>bun install</code>Code language: HTML, XML (xml)To add packages, use the following:
<code>bun add <package_name></code>Code language: HTML, XML (xml)To remove packages, use the following:
<code>bun remove <package_name></code>Code language: HTML, XML (xml)Combining Bun and React
Let’s set up React application with Bun.
<code>bun --version</code>Code language: HTML, XML (xml)The command above verifies that you have Bun runtime installed, your current version of Bun will be displayed on your terminal. Visit their website to see the official documentation for the installation guides on your system.
<code>bun create</code>Code language: HTML, XML (xml)The command above previews tools to create.
From the list above, you can see React command, now let’s run it:
<code>bun create react [app-name]</code>Code language: HTML, XML (xml)Now run a development build so your application can start running by using this command:
<code> bun dev</code>Code language: HTML, XML (xml)Bun runtime speed test
To determine which of these runtimes executes the code the quickest, let’s conduct a quick speed test. Our software consists of a single loop that we start at program startup and stop when the loop completes its iteration.
Below is our code block for the program:
console.time('test');
for (let i = 0; i < 10000; i++) console.log(i)
console.timeEnd("test");Code language: JavaScript (javascript)- Make a file and give it any name you like; for example, bun-runtime.js.
- In the file, paste the code above in the file.
- Navigate to your terminal, then go to the folder containing the file.
- Run the program below:
bun [file name]
See the outcomes below:
Bun completed its loop at 22.39ms
For Node.js run the command below:
node [file name]
Node completed its loop at 163.225ms
Bun speed test with react
Now that we have installed our Bun and its unique features, let’s test the speed of creating a React project using Bun and using create-react-app.
Go to your terminal and run the command below:
bun create react [your-app-name]
Creating the React app using Bun didn’t take up to 10 seconds.
For our create-react-app open the terminal and run the command below:
npx create-react-app [app-name]
It took React app over 60 seconds to finish installing all dependencies for a new React application.
Conclusion
In this article, we knew about Bun runtime, its installation method, features, and how to use it, Bun is a versatile and powerful tool that benefits web developers looking to build fast, efficient and scalable applications. You can also visit the GitHub page containing lots of benchmark tests you can take out on Bun.
Here are more posts about web and app performance for you:
Why is Web Performance More Important Than Ever?
Boosting Performance with Lazy Loading
