2

0

By peter osah Following Unfollow Follow   4,451 March 25, 2023 Following Unfollow Follow

Category:

JavaScript

React

Bootstrap your next Preact application with Bun

Introduction

In recent times, runtimes like Node.js and Deno have increased in popularity due to their role in revolutionizing the JavaScript ecosystem. However, there is also increased consideration for speed and native features that the runtimes provide, as they aren’t as fast and also do not provide native features for certain actions like bundling, transpiling, and package management. These considerations pushed Jarred Sumner, an ex-software engineer at Stripe, and his team to build a highly fast and performant runtime called Bun, which caters to most of these considerations. In this article, I will illustrate the power of Bun by bootstrapping a Preact application using Bun.

The History of Runtimes

Before diving into what Bun entails, we will go through the history of runtimes. Traditionally, JavaScript was made to run in the browser. This was the paradigm until 2009 when a developer named Ryan Dahl eventually began developing a tool named Node.js that would allow JavaScript to run outside of the browser. He chose the V8 engine, which was used by Google’s Chromium to power this tool. This development revolutionized JavaScript as Node.js grew in popularity, becoming a vital tool in frontend and backend web development. Node.js drove many modern JavaScript standards like ES modules, fetch API, etc., that did not exist before its creation. However, in order to utilize the full capabilities of Node.js, like working with typescript, a superset of the JavaScript language, bundling, and transpiling, you will have to utilize third-party tools like Webpack and Babel, as Node.js wasn’t shipped with these features natively, and also, its package management system and module system weren’t as efficient as envisioned. This was Ryan Dahl’s concern when he left the Node.js project in 2012 and began developing Deno, a Node.js successor written in Rust. Deno provided faster performance, support for web standards, first-rate TypeScript (native support), and JSX support but didn’t include package management, as Deno manages dependencies using URLs. and by doing so, external modules are imported directly into local modules.

However, these runtimes were built using Chromium v8 engines, which have some performance pitfalls like slow startup times and memory management, amongst others. There have been efforts to create runtimes that offer increased speed and performance, and that led to the creation of Bun.

What is Bun

Bun is a JavaScript runtime that was built to offer increased speed and performance as well as features like bundling, transpiling, and package management natively. It is written in the Zig programming language and it employs the JavaScript Core engine created by Apple for Safari. The majority of Bun was written from scratch, including its NPM, SQLite, HTTP, and WebSocket clients, as well as its JSX/TypeScript transpiler.
Bun’s speed is due to the fact that it uses JavaScript Core as its core engine, unlike its counterparts, Node.js and Deno, which use the V8 Engine. Some of the advantages of the JavaScript Core engine include:

• prioritizing increase in the speed of startup times, as compared to V8 which prioritizes fast execution.
• Possession of three optimizing compilers which makes it much more complex but faster, as compared to V8 which only has two compilers with less consideration on speed but on ease of use.

Installing Bun

Before bootstrapping our application, we will install Bun. To install Bun for MacOS, Windows, or Linux, run the command below:

For macOS users, After running the command above, run this command below:

Bootstrapping our Application

Let’s look at how to set up a Preact application with Bun in this section. First, ensure that you have the Bun runtime installed. To do so, enter the command:

Typing this command will display the bun version. To get more information on the commands available in bun enter the command below:

Typing this command will display some helpful information about the commands that bun provides.

Commands that bun provides

Next, we will create a Preact application using the create command displayed above. Type the command below:

On typing this command, it displays some commands to create projects of different types, like a React project, an Apollo Server project, a svelte project, and many more.

Commands to create projects of different types

We will choose the method for developing a Preact application. To create a Preact app, type the command below:

On installing the app, you can start a development server of the application with the following command:

On running the command, it will launch the preact application at localhost:3000

Preact application at localhost:3000You can also build your application for production with the following command:

Features of Bun:

1- Bun as a package manager

As described previously, Bun can be used as a package manager as it supports it natively. In order to install packages with Bun, You must have Bun installed on your system and a project already set up with Bun.  The Bun install command is represented below:

To add a specific package to your project, type the command below:

To delete a specific package from your project, type the command below

2- Bun as a fast Runtime

Because Bun employs the JavaScript Core engine, which is said to be faster than the v8 engine used by its counterparts(Node and Deno), it outperforms them in the speed of bundling, transpiling, and installing packages. In order to ascertain these claims,  let’s compare the speed of creating a new preact app using Bun and the default preact-cli method. Let’s begin.

Firstly, we will start with creating a preact app with Bun. Navigate to your project directory and run the following command:

Installation of a Preact app using Bun took less than 4 seconds, as shown in the picture below:

Installation of a Preact app using Bun

Next, we will start with creating a Preact app with the preact-cli method. Navigate to your project directory and run the following command:

Installation of a Preact app using the preact-cli method took about a minute, as shown in the picture below:

Installation of a Preact app using the preact-cli method

From the test above, we can see that installing a Preact application with Bun proved to be much faster than using the preact-cli method.For more information, you can look at this GitHub repository, which contains a number of benchmark tests that you can run on Bun.

Reference Links

– https://medium.com/@gemma.croad/understanding-the-javascript-runtime-environment-4dd8f52f6fca
– https://hackernoon.com/why-deno-could-replace-node
– https://bun.sh/
– https://www.makeuseof.com/what-is-bunjs-why-the-javascript-community-excited/
– https://levelup.gitconnected.com/is-bun-js-the-node-js-killer-ffeb0f89196a

Conclusion

In this tutorial, we learned about the Bun runtime, how to install it, how to create a Preact app, and how to install and remove packages using Bun. We also did some tests to showcase the awesome features that Bun provides. That being said, I hope this article was able to convince you to bootstrap your next project using Bun and to take advantage of the awesome features that this new runtime provides.

About the author

peter osah

Registered 04-03-2023 | Last seen 8 months ago 3

0 Comments | 2 Publications