Getting Started with BunJs

Bun is a Javascript runtime that claims to be four times faster than NodeJS. Bun is a Javascript runtime and toolkit in one. Bun comes as a single executable file that you can install on your computer. Bun is written in Zig, a low-level general-purpose programming language. Zig is a vital, general-purpose, statically typed, compiled system programming language meant to be an alternative to C and C++. Zig is designed to be smaller and less complicated to program in while also presenting new features, so you'd expect packages built with Zig to be pretty fast, a feature that is also present in Bun.

Bun additionally ships as a package manager that can be established with the npm install bun command, which Bun also claims may be the last npm command you will ever run. The bun package manager claims to be 33X quicker than npm while installing applications, and all existing npm applications can be installed with the bun package manager.

Bun is also a test runner, and it's a direct replacement for current test runners as it claims to be 32X faster than Jest+ Babel and 8X faster than Vitest. These are exceptional performance scores. A stable 1.0 model of Bun was launched in September 2023.

Bun is designed with three major goals in mind:

• Simplicity
• Speed
• Providing a full development environment 

Install and run a Bun React application

Bun is available as a native package for any operating system. You can also set it up as a global NPM package. It might feel a bit strange to install an NPM replacement with NPM, but it certainly does make the setup easy.

Install Bun with NPM

$ npm install -g bun
$ bun -v
0.5.5

The bun command has now been added to your command line. Let us make a new React app with Bun. This is similar to entering: npx create-react-app my-app. If you are familiar with using npx (which runs on NPM/Node), then you may quickly notice how quickly the use of Bun works. Run the command shown below to start a new project using the create-react-app libraries.

Run create-react-app

$ bun create react ./bun-react
[package.json] Detected React - added "react-refresh"
$ bun install // This happens automatically
[12.00ms] bun install
$ bun bun ./src/index.jsx // this happens automatically
[720.00ms] bun create react

Note that you don't enter the last two commands; it happens automatically as part of the first command. You may be surprised to learn that the whole command took less than a second, along with installing the Node modules. 

You can now cd into the bun-react/ directory and run bun-dev to start the development server. You can then visit the software at localhost:3000, where you’ll see a welcome screen.

If you take a look at the package.json file, you’ll see it is the same as it would be otherwise, with nothing specific to Bun added. Bun is doing simply what NPM does, but faster. 

Bun for edge and serverless deployments

Now you know that Bun can do the work of a package supervisor in addition to a script runner. You were performing the equivalent of npm run dev when you used bun dev. Again, the benefit of Bun is its speed, but that speed has implications in other areas. Bun is quick at running the task due to the fact that it's far faster at starting up. Most of the time required to run a task with Node/NPM is spent starting the Node process itself. 

The fact that Bun is quick to start is an important characteristic in edge and serverless deployments, where the expected scale is "scale to zero." For that method, you need a system that can spawn nodes to meet demand. Then, while that demand tapers off, it must cheaply drop nodes. A massive hurdle to such scalability is the rate at which nodes are able to spin up. So, the ability to quickly start and execute scripts means Bun is nicely applicable for edge and serverless computing environments.

Bun for Next, Svelte, and Vue

Bun can do the same thing with a Next application, starting with the command: bun create next./app. To get a list of all of the presently available create commands, type bun create. You’ll notice there are approximately a dozen supported templates in Bun.0.5.5.

To deal with use cases in which an integrated loader isn't always available, Bun.Js consists of pluggable loaders. This lets in for coping with documents for Svelte or Vue, like .svelte or .vue. 

To run SvelteKit in Bun, there is an experimental SvelteKit adapter. This is still in development since the Bun API itself is quickly evolving and SvelteKit relies on those APIs. (The SvelteKit template obtained with bun create doesn’t appear to be operating in the meantime.)

Bun transpiling and modules

One of Bun’s targets is to update the transpilation phase of the building. This is complicated because it involves so many different technologies, ranging from CSS to JSX. These are technologies that can be prone to change and, therefore, cause headaches like tree shaking and minification.

Bun also has to deal with JavaScript module resolutions, which the Bun documentation acknowledges are complicated. The complexity is too overwhelming; that is what prevents most people from attempting something like Bun. Rewriting what is already good enough (Node/NPM) with something even better is a high goal.

Bun as a server

Bun can run WASM binaries on the server. It can also manage HTTP requests with an integrated API; this is much like a serverless environment. Let’s take a quick look. If we create a file known as server.ts and upload the code below, we can then run it with Bun.

Use Bun as a simple server

export default {
  port: 3000,
  fetch(request: Request) {
    return new Response("Hello InfoWorld");
  }
};

To run the echo server, type bun server.ts. You can see the greeting by going to localhost:3000. This works because if Bun reveals a default export item with a fetch method, it assumes it’s a server. It wraps this up inside the Bun.serve API. A simple application of this API is shown below. Where suitable, the APIs found in Bun comply with web standards, so the request and response items are the familiar standards (i.e., Request). The code below uses the Request object to seize the fetched URL and output it.

Using the Bun.serve API

Bun.serve({
  fetch(req) {
    return new Response("You visited: " + JSON.stringify(req.url));
  },
});

Note that Bun's Node APIs (NAPI) are not entirely sufficient to run Express; however, there are some similar projects for Bun itself. One example is BunRest.

Compatibility of Bun with Node.Js

Node.Js compatibility is usually good for smaller, less difficult projects. You may be able to release some scripts using bun start in preference to npm begin without making any changes.

Bun supports:

• integrated Node.Js modules and APIs together with fs, path, HTTP, console, assert, and so on.
• the Node.Js module resolution algorithm to find files in node_modules
• global variables and objects, inclusive of __dirname and process

Bun 1.0 claims to be capable of running "virtually any Node.js software in existence." Complex programs, on the other hand, can fail due to obscure error messages generated deep within your third-party modules.

Summary

The Bun roadmap includes many open to-dos, which provides a sense of the scope and ambition of this project. Bun really seems to be a one-stop solution to carry out most server-aspect JavaScript tasks, consisting of everything from spawning processes to hosting an embedded SQLite instance to running native functions with Bun FFI (foreign feature interface). 

Although Bun is an accomplished JavaScript runtime, Node.Js remains the champion for mission-critical projects or legacy programs. You can try running your app using bun start; however, the larger your codebase, the less chance it'll execute without modification. Bun is amazing and is being actively advanced; however, it’s new. The runtime is solid; however, not many would vouch for its long-term future at this stage.

How much is a great User Experience worth to you?

Browsee helps you understand your user's behaviour on your site. It's the next best thing to talking to them.

Learn More Already have an account? Sign in.