본문 바로가기
WEB

Bun 소개 / JavaScript 런타임 비교

by 신림쥐 2024. 5. 31.
728x90
반응형

 


 

 

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

A complete overview of the JavaScript landscape in 2023: trends about frontend, fullstack and Node.js frameworks, React and Vue.js ecosystems, build tools, state management...

risingstars.js.org

https://npmtrends.com/

 

npm trends: Compare NPM package downloads

Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner.

npmtrends.com

 

 

자바스크립트 런타임

  • 자바스크립트로 작성된 프로그램을 실행시켜주는 소프트웨어
    • 웹 브라우저(크롬, 사파리, 파이어폭스 등)
    • 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
  • bunx

 

 

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 커뮤니티

 

Bun — A fast all-in-one JavaScript runtime

Bun implements the Web-standard APIs you know and love, including fetch, ReadableStream, Request, Response, WebSocket, and FormData.

bun.sh

 

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

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

github.com

 

728x90
반응형