[JavaScript] Bun 소개 / 자바스트립트 런타임 비교

 

 

---

 

 

Incredibly fast JavaScript runtime, bundler, test runner, and package manager -- all in one
(믿을 수 없을 정도로 빠른 JavaScript 런타임, Bundler, Test Runner 및 Package Manager - 모두 하나로)

 

 

개요

• 최근에 Bun 이라는 도구를 발견했다. 알고보니 이미 2023년 인기 오픈소스로 선정 된 Bun !

• 웹 서버 성능이 매우 우수하다는 평가를 들었고, 번들링과 테스팅 기능도 함께 갖추고 있다고 해서 호기심이 생겨 공식 홈페이지를 찾아보고 동작 방식을 간단히 이해를 기반으로 Bun 포스팅을 작성하고자 한다.

 

 

** 오픈 소스 트랜드는 어디서 알 수 있는가! 

https://risingstars.js.org/2023/en#section-all

2023 JavaScript Rising Stars

https://npmtrends.com/

npm trends: Compare NPM package downloads

 

 

자바스크립트 런타임

• 자바스크립트로 작성된 프로그램을 실행시켜주는 소프트웨어
  • 웹 브라우저(크롬, 사파리, 파이어폭스 등)
  • Node.js
  • Deno
  • Bun
  • just-js (V8)
  • react native (Hermnes)
• 자바스크립트 런타임은 자바스크립트 엔진과 함께 필요한 라이브러리, API 및 다른 구성 요소를 포함한다.

 

자바스크립트 엔진

• 자바스크립트 런타임의 구성 요소
  • Google V8 (Chrome/Brave/Edge/Opera, Node.js, Deno)
  • JavaScriptCore (Safari, Bun)
  • SpiderMonkey (Firefox) : 최초의 자바스크립트 엔진
  • Chakra (Edge/IE)
• 자바스크립트 엔진은 스크립트 명령을 가져와 실행하고 기계어로 변환하는 기능을 한다.

 

 

 

Bun 이란?

• Jarred Sumner가 Node.js를 즉시 대체하기 위한 목적으로 설계되었다.
• 단일 실행 파일로 제공되는현대식 JavaScript 생태계 앱을 위한 올인원 툴킷이다.
  1. runtime
  2. Node.js 호환 Package Manager
  3. Bundler
  4. Test Runner
• Node.js의 드롭 인 교체로 설계되어, FS, Path, Buffer 등을 포함하여 수백 개의 Node.js 및 웹 API를 기본적으로 구현하고 있다.
• 서버 측 JavaScript를 실행시 성능을 향상시키고 복잡성을 줄이며 개발자 생산성을 높힐 수 있는 도구를 제공하기 위한 목적을 가지고 있다.

 

Bun 설계 목표

• 속도
  • Node.js를 더 빠르고, 더 간결하고, 현대적으로 대체하도록 설계되어, 현재 Node.js보다 4배 빠른 런타임 제공
• 사용하기 쉽고 직관적인 API
  • HTTP 서버 시작, fetch, WebSocket 등 같은 일반적인 작업을 수행하기위한 최소 최적화 된 표준 웹 API 세트를 제공
  • 사용자 경험을 향상뿐 아니라 브라우저 및 서버 간의 호환성을 높혀준다.
• 일관된 개발 경험
  • JavaScript 앱을 구축하는 데 필요한 모든 도구를 포함을 위해 1,000개의 node_modules 대신 내장 도구 제공
  • Bun의 내장 도구는 기존 옵션보다 훨씬 빠르며 변경 사항이 거의 또는 전혀 없이 기존 Node.js 프로젝트에서 사용이 가능하다.

 

Bun Toolkit

runtime	Package Manager	Bundler	Test Runner	Package Runner	API
bun run File types TypeScript JSX Environment variables Bun APIs Web APIs Node.js compatibility Single-file executable Plugins Watch mode Module resolution Auto-install bunfig.toml Debugger Framework API	bun install bun add bun remove bun update bun link bun pm Global cache Workspaces Lifecycle scripts Filter Lockfile Scopes and registries Overrides and resolutions	Bun.build Loaders Plugins Macros vs esbuild	bun test Writing tests Watch mode Lifecycle hooks Mocks Snapshots Dates and times DOM testing Code coverage	bunx	HTTP server WebSockets Workers Binary data Streams File I/O import.meta SQLite FileSystemRouter TCP sockets UDP sockets Globals $ Shell Child processes Transpiler Hashing Console FFI HTMLRewriter Testing Utils Node-API Glob Semver

 

 

Node.js vs. Bun

1. command-line - runtime, Package Manager, Bundler, Test Runner, Package Runner

Bun

bun run start                 # run the `start` script
bun install <pkg>             # install a package
bun build ./index.tsx         # bundle a project for browsers
bun test                      # run tests
bunx cowsay 'Hello, world!'   # execute a package

 

node.js

npm run start
npm install <pkg>
npm install webpack && npx webpack ./index.tsx
npm install Jest && npx Jest
npx cowsay 'Hello, world!'

 

 

2. Bundle for the browser - Bun.build

Bun

// build.js
try {
  await build({
    mode: 'production'
    entrypoints: ['./index.tsx'],
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
    },
    minify: true,
    plugins: [ /* ... */ ]
  });
  console.log('Build completed successfully!');
} catch (error) {
  console.error('Error during build:', error);
}

bun build ./build.js

node.js

npm install webpack

 

// webpack.config.js
const path = require('path');
module.exports = {
  mode: 'production',
  entry: './index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

npx webpack

 

3. API - Start an HTTP server

Bun

// index.js
Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response(Readable.from(["Welcome to Bun!]), {
      headers: { "Content-Type": "text/plain" },
    });
  },
});

node.js

// index.js
const http = require('http');
http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Welcome to Bun!');
}).listen(3000);

 

 

Node.js vs. Deno vs. Bun 자바스크립트 런타임 비교

	Node.js(노드)	Deno(데노)	Bun(번)
공통점	백엔드에서 사용하기 위해서 만들어진 자바스크립트 런타임
		Node.js 의 부족한 보안점을 도입하기 위해 탄생
탄생년도	2009	2018	2022
프로그래밍 언어	C++	Rust	Zig
자바스크립트 엔진	V8	V8	JavaScriptCore
장점	StateOfJS 결과 사용자 수가 가장 많아 지원 및 커뮤니티가 활성화 되어있다. 전세계 웹사이트 2.1% 사용할 정도로 안정되어 있다.	Node.js의 부족한 보안점을 개선했다. Dependency Inspector , Code Formatter 내장	성능이 가장 높다. 런타임 시간, 메모리 사용량이 줄어든다. 평균 쿼리속도가 가장 빠르고, 동시 커넥션을 가장 많보 Transpiler, Package Manager, bundler 내장 Safari에서 빠른 실행 속도를 제공
단점	성능이 가장 낮다. Deno, Bun과 비슷한 기능을 계속 도입중이지만 내장 기능이 부족하다.	Node 보다 빠르지만 Bun에 비해 약간 느린 정도 시장을 확보하지 못했다.	지원 및 커뮤니티가 비활성화 되어있다. 아직 개발중인 비안정되어 있는 상태이다. 보안 정보가 많이 없다.
적합한 상황	생태계 안정성	제공하는 Deno 내장 기능을 사용하고 싶은 경우	속도, 성능에 관심이 있는 경우

 

 

Bun 속도, 성능이 좋은 이유

1. Zig

• 메모리를 직접 조정할 수 있는 Zig 같은 로우레벨 언어를 사용였다.
• 비동기적으로 여러 작업을 처리할 수 있게 설정하여 작업을 블로킹하지 않는다.
• 메모리 할당 및 해제에 따른 오버헤드를 줄일수 있게 설정 하여 시작 시간과 메모리 사용량을 줄인다.

2. TS , JSX 지원

• 별도 모듈 없이 Bun의 트랜스파일러는 Typescript와 JSX 형식으로 작성된 코드들을 엔진에서 vanilla JavaScript로 변환해준다.
• 번들링이나 변환에 따른 부가 손실을 줄여준다.

3. CommonJS, ESM 호환성

• 자바스크립트가 ES Module 방향으로 진화하지만, Node.js는 CommonJS방식을 사용 중이다.
• Bun은 CommonJS 모듈을 지원하지만 기본적으로 ESM 사용을 권장하고 있다.
• ESM은 더 작은 모듈 단위로 코드를 분할하고 더 효율적으로 로드할 수 있게 해준다.

4. Bun의 내장 도구

• 노드 모듈을 웹 표준 API로 직접 구현하여 경량화 및 효율성을 높혔다.

 

 

Bun 커뮤니티

• https://bun.sh/

Bun — A fast all-in-one JavaScript runtime

• https://github.com/oven-sh/bun

GitHub - oven-sh/bun: Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one