A quick introduction to Bun

Monday, 09 October 2023 16:06

Introduction https://medium.com/@andrewrymaruk/v8-a-few-words-about-javascript-engines-882dc2cf6799
- Visit website https://bun.sh/ Bun vs Node.js - Everything You Need To Know!
○ Bun v1.0 was released Belajar NodeJS | 8. Apa Itu NPM?
On September 8th, version 1.0 was released, creating a buzz in the JavaScript community. You might be
wondering, 'What is Bun?' Why was it developed, and why are comparisons being drawn with Node.js?

○ Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner,
and Node.js-compatible package manager.
○ Supported on macOS, Linux, and WSL
- What is Bun:
○ Bun is a JavaScript runtime built from scratch to serve the modern JavaScript ecosystem.
○ Bun is not just a runtime; it's also a package manager, a bundler, and a test runner. Imagine having a Swiss
army knife for JavaScript development – that's Bun for you.
○ Written in the Zig programming language
○ Drop-In replacement for Node.js/Fully compatible Node APIs

- But why was Bun created? Project comparison (Node.js vs Bun)

The inception of Node.js in 2009 was groundbreaking, but as it expanded, its complexity grew. Consider it like a 1. Project Setup
city – as it grows, traffic congestion can become an issue. Bun aims to be the new infrastructure that alleviates this a. Node.js
congestion, making things run smoother and faster. It's not about reinventing the wheel but refining it, ensuring i. npm init
we get the speed and simplicity without losing the essence of what makes JavaScript unique and powerful. ii. node index.js
b. Bun
- JavaScript Runtime i. bun init
○ JavaScript runtime is an environment that allows JavaScript code to be executed ii. bun index.ts
○ Sample of JavaScript Runtime: 2. Transpiler
 Browser a. Node.js
 Node.js i. node index.ts
 Deno ii. npm install -D typescript ts-node
 Bun iii. npx ts-node add.ts
iv. ---------OORRRRR-----------
- JavaScript Engine v. tsc --init
○ One of component in the JavaScript Runtime vi. tsc
○ A program that converts JavaScript code we write into machine code that allows a computer to perform vii. node add.js
specific tasks. b. Bun
○ Sample: i. bun add.ts
 V8, JavaScript engine developed by Google for Chrome 3. Module Systems
□ It is primarily written in C++ a. Node.js
 JavaScriptCore (JSC), JavaScript engine developed by Apple for Safari i. npm i colors chalk
□ ReactNative used JSC seven years ago, and now it uses Hermes https://hermesengine.dev/ ii. node color.js
□ It is primarily written in C++ iii. Use .mjs or add "type": "module" in package.json
 SpiderMonkey, JavaScript engine used in Firefox b. Bun
□ It is written primarily in C++, Rust and JavaScript i. bun add colors chalk --dev
 Chakra, JavaScript engine developed by Microsoft for Edge, but now Edge uses V8 ii. bun color.ts
4. Web API
- 3 Major Design Goals a. Node.js
○ Speed i. node web-api.mjs
 Bun starts fast and runs fast. It extends JavaScriptCore, the performance-minded JS engine built for b. Bun
Safari. i. bun web-api.ts
○ Elegant APIs 5. Hot reloading
 Bun provides a minimal set of highly-optimized APIs for performing common tasks, like starting an a. Node.js
HTTP server and writing files. i. node --watch index.js, there is experimental warning message in the console
○ Cohesive Developer Experience ( DX ) b. Bun
 Bun is a complete toolkit for building JavaScript apps, including a package manager, test runner, and i. bun --hot index.ts
bundler. 6. Node.js compatibility
- Features and Advantages a. Node.js
○ Speed and Performance i. node node-compatibility.ts
○ Drop-in Node.js compatibility b. Bun
 Compatible with node.js APIs i. bun node-compatibility.ts
○ Works with node_modules 7. Package manager
○ Native NPM client 8. Bundler
○ No module madness a. Node.js
 Configure ESModule, edit package.json, update type module
b. Bun
○ Web standard APIs
i. bun build ./bundler.ts --outdir ./build
 Fetch, websocket, formdata
ii. bun build/bundler.js
○ TypeScript OOTB
9. Test Runner
 Simply use .ts or .tsx
a. Node.js
○ JSX
i. Bun test index.test.tsBun
 Copy https://bun.sh/docs/runtime/loaders#jsx
 Bun add react
 Bun add -d @types/react
○ Watch Mode
 No more tool like nodemon
○ Environment variables
 .env without installing .env
○ Integrated bundler
 Built in bundler that is faster than webpack
○ SQLite DB

- Transpiler
○ Node.js doesn't natively support TypeScript files
While Node.js is a powerful runtime for JavaScript, it doesn't natively support TypeScript files. In contrast,
Bun offers a more streamlined approach, as it comes with a built-in transpiler that seamlessly converts
TypeScript files to JavaScript, facilitating immediate execution without additional steps.
○ Bun comes with a JavaScript transpiler integrated into the runtime,
Bun offers a more streamlined approach, as it comes with a built-in transpiler that seamlessly converts
TypeScript files to JavaScript, facilitating immediate execution without additional steps.
○ With Bun we can directly run .js, .ts, .jsx and .tsx files

- Module Systems (CommonJS and ESModule)

○ A module system allows developers to organize code into reusable segments.
○ In JavaScript, the 2 primary module systems are CommonJS and ESModule (ESM)
○ CommonJS, originating fronm Node.js uses 'require' and 'module.exports' for syncrhonous module
handling, ideal for server-side operations
○ ESM, introduced in ES6, employs 'import' and 'export' statements providing a more static and asynchronous
approach, optimized for browsers and modern build tools.

TE Page 1
 approach, optimized for browsers and modern build tools.
○ Bun simplifies the module system by supporting both CommonJS and ESM without any special
configurations.
○ Bun standard feature is its ability to support both import and require() in the same file, something not
natively possible in Node.js
○ Node.js has traditionally used CommonJS modules, while Bun supports both CommonJS and ES modules
without any special configurations. You can run code using CommonJS syntax or ES module syntax or even
mix the two modules in the same file.

- Web APIs
○ Integral to browser based applications and offer tools like fetch and WebScoket for web interactions
○ In earlier versions of Node.js, Web standard APIs commonly available in browsers were not natively
supported
○ Developers had to rely on third party packages like node-fetch to replicate this functionality
○ However from Node.js v18 there is experimental support for the fetch API, potentially eliminating the need
for these packages
○ Bun offers built-in support for these Web Standard APIs
○ Developers can directly use stable 'fetch', 'Request', 'Response', 'WebSocket' and other browser like APIs
without any additional packages
○ Bun native implementation of these Web APIS ensures they are faster and more reliable compared to third
party alternatives

- Hot Reloading
○ It is the feature that instantly reflects code changes in the application without the need for a full restart
○ In the node.js ecosystems, we have a couple of options for achieving hot reloading
 One popular tool has been nodemon which hard-restart the entire process
○ Alternatively, starting from Node.js v18, there an experimental '--watch' flag introduced which you can use
○ By running Bun with the --hot flag, hot reloading is enabled
○ Unlike the Node.js methods that might require a full process restart, Bun reloads our code in place without
terminating the old process
○ This ensure that HTTP and WebSocket connections remain uninterrupted and the application state is
preserved, providing a smoother DX

- Node.js compatibility
○ While transitioning to the new environment, compatibility is really concerns to developer
○ Bun is a drop in replacement for Node.js
 Bun positioning itself as a drop-in replacement for Node.js
 This means that existing Node.js applications and npm packages can seamlessly integrate with Bun
without any modifications
 There is already support build-in Node.js modules suc as fs, path and net
 Recognition of global variables like __dirname, process, etc
 Adherence or inline to the Node.js module resolution algorithm, including the familiar node_modules
structure

- Package Manager
Bun NPM Purpose
bun install npm install Install all dependencies from package.json
bun add <package> npm install <package> Add a new package to the project
bun add <package> --dev npm install <package> --dev Add a new development-only package
bun remove <package> npm uninstall <package> Remove a package from the project
bun update <package> npm update <package> Update a sepecific package to its latest version
bun run <script> npm run <script> Execute a specified script from package.json
○ Bun boasts installation speeds that are orders of magnitude faster than npm
○ It achieves this by leveraging a global module cache, eliminating redundant downloads from the npm
registry
○ Bun employs the fastest system calls available for each operating system, ensuring optimal performance

- Bundler
○ Bundling is the process of taking multiple JavaScript files and merging them into one or more optimized
bundles
○ This process can also involve transformations, such as converting TypeScript to JavaScript or minifying the
code to reduce size.
○ In the Node.js ecosystem, bundling is typically handled by third-party tools such as Webpack rather than
Node.js itself
○ Bun on the other hand is designed to bundle JavaScript and TypeScript code for various platforms
○ To bundle with Bun, we can use a simple bun build command:
 Bun build ./index.ts --outdir .build

- Test Runner
○ Testing is a crucial aspects of software development, ensuring that code behaves as expected and catching
potential issues before they reach production
○ In addition to being a runtime, a package manager and a bundler, Bun is also a Test Runner
○ Node.js has traditionally relied on Jest for testing needs
○ Bun introduces a built-in test runner that promises speed, compatibility and a range of features
○ Bun's test runner, bun:test is designed to be fully compatible with Jest

- Demo
○ Bun init

TE Page 2