
If you've had your ear to the ground over the last few weeks, you'll probably have heard lots of chatter about [Bun](https://bun.sh/), a new Javascript runtime. Or at the very least, you'll have seen its cute mascot. There have been reports all over the internet on how fast Bun is, claiming it to be the all-in-one tool to take down Node. 

## What is Bun?

Bun is a Javascript runtime that uses the JavascriptCore engine. For context, when we talk about a runtime we mean _where_ your code is executed. For example, if you're using Node you're using **Chrome's V8 JavaScript engine**. Bun is ambitiously aiming to replace that, and its creator [Jarred](https://github.com/Jarred-Sumner) Sumner](https://github.com/Jarred-Sumner) has some lofty goals. The core focus is:

* Start fast
* Be as performant as possible
* Offer a complete package

<Quote author="Jarred Sumner">
I’ve been frustrated by how slow everything is in JavaScript and I think, rather, I know, that JavaScript can get a lot faster
</Quote>

And he means it. Bun can reportedly serve around three times as many HTTP requests per second, over double the number of SQLite queries, and hash nearly twice as fast as either Node or Deno. That's some impressive stats, and if true will have a huge impact on the web. Whether that's via increased developer productivity or enhanced site performance, Bun is promising.

But that's not all that Jarred is trying to achieve. Let's dive into the "complete package" that Bun offers.

### Package manager

Because Bun implements Node.js’ module resolution algorithm, installing npm packages works out of the box. The setup is super simple, and as you'd expect, is a similar syntax to yarn/npm:

Install packages from package.json:
```bash
bun install
```

Add or remove packages from package.json:
```bash
# add
bun add react

# remove
bun remove react
```

### Transpiler

Bun has a great out-of-the-box offering. The great news for Typescript fans is that you can drop in your `.ts` or `.tsx` files and _it just works_. It'll pick up your `tsconfig.json` as usual, and even transpile any `.ts` and `.tsx` files found in your `node_modules`. You've probably noticed the mention of `.tsx``. But what about JSX? Not a problem, that'll get transpiled too!

If you want to access the transpiler directly, they also offer a [delicious API](https://github.com/oven-sh/bun#buntranspiler). Pass in your configuration (loader, target platform, tsconfig etc.) and instantiate your class. Pass your string to the `transform` or `transformAsync` methods, and Bun will take care of the rest.

### Bundler

Bun's main focus at the moment is on the Javascript runtime itself. That hasn't stopped them from offering a bundler, however. It's important to note that at the moment, **Bun cannot minify or tree-shake**. This will probably rule it out for anyone looking to build for browsers. They do state that in the future, they wish "to replace Node.js, Webpack, Babel, yarn, and PostCSS".

For now, you can simply run `bun bun ./path-to-your-file.js`, and a `node_modules.bun` will be generated that contains all dependencies.  

## Can I use Bun in production?

At the time of writing this article, Bun is currently at version `0.1.8`. It's far from complete and is still missing some of Node's API functions (although they claim they're at ~90% parity!). It's also worth noting that it still doesn't support minification or tree-shaking, and therefore for frontend at least, you'd still need to introduce a build tool. However, their long-term goal is to replace all of these tools - Webpack, Babel, PostCSS and so on!

Check out [Bun's Github](https://github.com/oven-sh/bun#not-implemented-yet) for a list of features that are still yet to be implemented.

## Conclusion

Bun has exploded out of the gate with some impressive stats. However, it still has a little way to go before we can consider it production-ready. If Bun's promises are to be believed, our development experience is about to be majorly improved soon!

If you're as excited as we are about the future of Bun, you can [check out their roadmap on Github](https://github.com/oven-sh/bun/issues/159)!

The Javascript landscape is constantly evolving. Enter Bun, boasting incredible performance with a tonne of batteries-included features

Bun - The new Javascript runtime trying to take on Node & Deno


The async/await keywords are a relatively new addition to Javascript, and they are often used in conjunction with Promises to provide a more convenient and readable way of handling asynchronous operations. However, some important differences between the two should be understood to use them effectively.

## What is async/await?

Async/await is a syntax that allows for asynchronous operations to be written in a more synchronous-looking style. This can make code that would otherwise be difficult to read and understand much more manageable. Please look at the example below for syntax:

```js
async function fetchData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}
```

## What is a Promise?

A Promise is an object that represents the eventual result of an asynchronous operation. Promises can be used to chain together multiple asynchronous operations, and they provide a way to handle errors that may occur during those operations. The following is an example of a function using Promises:

```js
function fetchData() {
  return fetch('https://example.com/data')
    .then(response => response.json())
}
```

## The difference between async/await and Promises

Firstly, async functions always return a Promise, even if the operation they are performing is synchronous. This means that you can always use .then() and .catch() methods on the return value of an async function, even if you are not using Promises explicitly.

Secondly, await can only be used inside an async function. It causes the function to pause execution until the Promise that it is waiting on is resolved and then returns the result of that Promise. This can be useful for making sure that asynchronous operations are completed in the correct order, but it also means that you need to be careful about error handling, as any errors that occur inside an async function will be wrapped in a Promise and will be handled by the .catch() method.

Finally, while Promises can be used inside an async function, they can also be used independently of async/await. This means that you can use Promises to write code that is compatible with older versions of Javascript or to use alternative libraries that provide Promise-like functionality.

## Which one should you use?

There is no definitive answer to this question, as it depends on your personal preferences and the specific situation that you are working in. However, there are some general guidelines that you can follow.

If you need to perform a series of asynchronous operations and you want to make sure that they are completed in a specific order, then async/await is probably the best option. This is because you can use the await keyword to pause the execution of the function until the Promise that you are waiting on is resolved.

If you are working with code that is already using Promises, then you may want to continue using Promises rather than switching to async/await. This is because Promises are a well-established way of handling asynchronous operations, and they are compatible with a wide range of existing code.

Finally, if you are starting a new project from scratch, then you may want to consider using async/await, as it can make your code simpler and more readable.

What's the difference between async/await and Promise, how can they be used, and which should I use?

async/await vs. Promises - Which should I use?

## The basics

The web development ecosystem is a complex and ever-changing landscape. It can be difficult for new developers to get started. I've received a lot of questions about my process and how to get started. The truth is, I rarely ever write vanilla CSS, or basic HTML and what not. I use tools and libraries such as [Tailwind CSS](/posts/a-tailwind-css-crash-course), React, and more.

There's a thing called `NPM`. NPM is a JavaScript package manager that helps developers install, share, and manage code libraries. It is the default package manager for the Node.js runtime environment. NPM makes it easy to work with code libraries, whether they are your own or someone else’s.

To use NPM, you need to set up your environment. You need to install NodeJS on your computer. You can download NodeJS from the [NodeJS website](https://nodejs.org/en/download/). Or you can use something like [homebrew](https://brew.sh/) (macOS), [apt-get](https://www.debian.org/doc/manuals/apt-getting-started-en/ch-manuals.en.html) (Linux) or [Scoop](https://scoop.sh/) (Windows).

This article assumes you went with the first option, you installed it via the NodeJS website. Once you install NodeJS, you will automatically get `npm`.

## Setting up your project

The most basic way to start a project is to create a new directory and add a `package.json` file, or run the `npm init` within that directory using a terminal.

```bash
mkdir my-project

cd my-project

npm init
```

The process will prompt you with a few questions, on which you can mostly just press enter to go through with it all.

Open the `package.json` file and look at the contents.

```json
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC"
}
```

## Installing your first package

You've installed NodeJS and NPM, and you've created a new directory, where you ran the `npm init` command. Now you need to install a package.

Let's go with Vite, since it's one of the easiest packages to start working building with.

```bash
# npm
npm install vite --save-dev

# yarn
yarn add vite --dev
```

Let's look at that command.

The first argument is the package manager you want to use to install the package. That can be `npm` or `yarn`, or any other package manager for javascript. The second parameter is the command we want to give to the package manager (`install` / `add`).

The `--save-dev` / `--dev` flag tells the package manager to install the package as a dev dependency. This means that the package will be installed, but it will not be available to your application. It will only be used for development.

## The package.json file

If you inspect the package.json file now, you will see that it has a few more properties.
Also, the `start` script has been updated.

```diff
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
-  "main": "index.js",
+  "type": "module"
  "scripts": {
-   "start": "node index.js"
+   "start": "vite"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^x.y.z"
  }
}
```

This will change the `start` script to call `vite` to run your code. Also, the `main` file has been removed, and the `type` property has been added.

## Finding packages

The internet has already creaded hundreds of thousands of packages that can be used to build your application. You can search for packages on [npmjs.com](https://www.npmjs.com/). Go and explore!

## Bonus

To have a fully functional Vite project, you'll need to add a few files.

Add `index.html` in the project root folder:

```html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
```

Add `style.css` in the project root folder:

```css
/* style.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#app {
  min-height: 100vh;
}

/* Then the rest of your styles */
```

Create a file called `counter.js` in the project root folder:

```js
// counter.js
export function setupCounter(element) {
  let counter = 0
  const setCounter = (count) => {
    counter = count
    element.innerHTML = `count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(++counter))
  setCounter(0)
}
```

Add `main.js` in the project root folder:

```js
// main.js
import './style.css'
import javascriptLogo from './javascript.svg'
import { setupCounter } from './counter.js'

document.querySelector('#app').innerHTML = `
  <div>
    <h1>Hello world!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
  </div>
`

setupCounter(document.querySelector('#counter'))
```

Then run the command

```bash
# Npm
npm run start

# Yarn
yarn start
```

This should open up a website on localhost with a heading and a button that displays a counter. When you click the button, the counter should increase.

You can follow some of the basic guides for Vite on the [Vite website](https://vitejs.dev/guide/).

## To wrap it up

The npm website is a great resource for learning about the tool and the registry. The website also provides a way for developers to share their own code packages.

The npm ecosystem is a vibrant and growing community of developers. There are many ways to get involved, such as writing code, contributing to the registry, or writing articles like this one.

If you’re a web developer, npm is an essential tool. It can help you install, share, and manage code libraries. It can also help you stay up-to-date with the latest tools and best practices.

We don't always write the raw html and css. We use tools and libraries to make our lives easier. This is a brief overview of the web development ecosystem.

Delving Developer

Javascript Archives

Posts found under the category "Javascript"

Bun - The new Javascript runtime trying to take on Node & Deno

async/await vs. Promises - Which should I use?

An intro to the web development ecosystem