So sánh kiến trúc Biome và Oxc

Trong thế giới phát triển JavaScript/TypeScript hiện đại, Biome ↗ và Oxc ↗ là hai công cụ Rust nổi bật mang lại hiệu suất cao cho linting và formatting. Cả hai đều được viết bằng Rust nhưng có triết lý thiết kế và kiến trúc khác nhau. Bài viết này sẽ đi sâu vào kiến trúc của từng công cụ và so sánh chúng.

Biome là gì?#

Biome là một toolchain toàn diện cho các dự án web, cung cấp formatter và linter có thể sử dụng qua CLI và LSP. Nó được thiết kế để thay thế Prettier và ESLint với hiệu suất cao hơn trong một gói tích hợp duy nhất.

Kiến trúc Biome#

Biome sử dụng kiến trúc server-client với một daemon chạy trong nền:

graph TB
    subgraph "Biome Architecture"
        CLI[CLI Interface]
        LSP[LSP Server]
        Daemon[Daemon Process]
        Workspace[WorkspaceServer]
        Handlers[Language Handlers]
        Foundation[Foundation Layer]
    end
    
    CLI --> Daemon
    LSP --> Daemon
    Daemon --> Workspace
    Workspace --> Handlers
    Handlers --> Foundation

Các lớp kiến trúc#

Foundation Layer (biome_rowan, biome_parser, biome_formatter, biome_analyze)
- Cung cấp các nguyên tái sử dụng
- Rowan-based parsing infrastructure
- Định dạng IR chung
Language Layer (per-language crates)
- biome_js_parser, biome_js_formatter, biome_js_analyze
- biome_json_parser, biome_json_formatter, biome_json_analyze
- Tương tự cho CSS, HTML, GraphQL
Service Layer (biome_service)
- Orchestrates operations qua WorkspaceServer
- Quản lý state và cache
Interface Layer (biome_cli, biome_lsp, biome_wasm)
- Cung cấp nhiều phương thức sử dụng

Formatter của Biome#

Biome sử dụng hệ thống two-stage formatting:

graph LR
    CST[CST from Parser] --> Lowering[Lowering Stage]
    Lowering --> IR[FormatElement IR]
    IR --> Printer[Printing Stage]
    Printer --> Output[Formatted Text]

Lowering Stage: Chuyển đổi CST thành IR ngôn ngữ bất kỳ (FormatElement)
Printing Stage: Printer tiêu thụ IR và quyết định layout, line breaks dựa trên options

Oxc là gì?#

Oxc (The Oxidation Compiler) là tập hợp các công cụ JavaScript/TypeScript hiệu suất cao viết bằng Rust. Nó được thiết kế như một bộ thành phần compiler module có thể sử dụng độc lập hoặc cùng nhau để xây dựng toolchain hoàn chỉnh.

Kiến trúc Oxc#

Oxc sử dụng kiến trúc layered design với các thành phần module:

graph TB
    subgraph "Oxc Architecture"
        Apps[Applications]
        Core[Core Libraries]
        Foundation[Foundation Libraries]
    end
    
    Apps --> Core
    Core --> Foundation
    
    Apps --> oxlint[oxlint]
    Apps --> LSP[Language Server]
    Apps --> NAPI[NAPI Bindings]
    
    Core --> Parser[Parser]
    Core --> Semantic[Semantic]
    Core --> Linter[Linter]
    Core --> Transformer[Transformer]
    Core --> Minifier[Minifier]
    Core --> Codegen[Codegen]
    
    Foundation --> AST[AST]
    Foundation --> Allocator[Allocator]
    Foundation --> Diagnostics[Diagnostics]
    Foundation --> Span[Span]
    Foundation --> Syntax[Syntax]

Nguyên tắc kiến trúc#

Zero-Copy: Sử dụng arena allocator (oxc_allocator) cho zero-copy operations
Visitor Pattern: AST traversal với automatic visitor generation
Shared Foundation: Chia sẻ error reporting, source positions, syntax definitions

Linter của Oxc#

Oxlint sử dụng kiến trúc parallel execution với dual branch strategy:

graph TB
    LintService[LintService] --> Runtime[Runtime]
    Runtime --> process_source[process_source]
    process_source --> Parser[Parser]
    Parser --> AST[AST]
    AST --> LintContext[LintContext]
    LintContext --> Linter[Linter]
    Linter --> execute_rules[execute_rules]
    
    execute_rules --> strategy1[Strategy 1: nodes → rules]
    execute_rules --> strategy2[Strategy 2: rules → nodes]
    
    strategy1 --> RULE_BUCKETS[RULE_BUCKETS]
    strategy2 --> RULE_BUCKETS

Dual Branch Strategy: Chuyển đổi giữa (nodes → rules) hoặc (rules → nodes) dựa trên kích thước file
Parallel Execution: Sử dụng rayon để xử lý song song nhiều files
Type-Aware Linting: Hỗ trợ linting có nhận thức type

Formatter của Oxc (oxfmt)#

Oxc formatter sử dụng hệ thống three-stage formatting:

graph LR
    AST[AST from Parser] --> IRGen[IR Generation]
    IRGen --> IR[FormatElement IR]
    IR --> Transform[IR Transformation]
    Transform --> sort_imports[sort_imports]
    sort_imports --> Printer[Printing]
    Printer --> Output[Formatted Text]

IR Generation: Traversal AST và sử dụng Format trait
IR Transformation: Áp dụng transformations như sort_imports
Printing: Printer tiêu thụ IR và render kết quả

[!NOTE] Oxc formatter core được port từ Biome’s biome_formatter crate, nhưng với thiết kế language-agnostic hoàn toàn.

So sánh chi tiết#

1. Triết lý thiết kế#

Đặc điểm	Biome	Oxc
Mục tiêu	All-in-one toolchain thay thế Prettier + ESLint	Modular components có thể dùng độc lập
Multi-language	Hỗ trợ JS/TS, JSON, CSS, HTML, GraphQL	Tập trung JS/TS với kế hoạch mở rộng
Deployment	Daemon process cho IDE integration	Traditional CLI với NAPI bindings

2. Memory Management#

Đặc điểm	Biome	Oxc
Allocator	Rowan-based infrastructure	Arena allocator (`oxc_allocator`)
Zero-Copy	Có, nhưng không rõ ràng	Có, là nguyên tắc thiết kế chính
AST Storage	Rowan syntax tree	Arena-based AST nodes

3. Performance Optimization#

Đặc điểm	Biome	Oxc
Parallel Execution	Có, qua WorkspaceServer	Có, sử dụng rayon
Caching	Daemon process cache	Runtime cache trong LintService
Rule Execution	Sequential execution	Dual branch strategy based on file size

4. Extensibility#

Đặc điểm	Biome	Oxc
Plugin System	Hỗ trợ plugins	JS plugins (alpha) cho ESLint compatibility
Language Support	ExtensionHandler pattern	Module crates per language
Custom Rules	Qua biome configuration	Qua rule configuration

5. Formatting Architecture#

Đặc điểm	Biome	Oxc
Stages	2 stages (Lowering + Printing)	3 stages (IR Gen + Transform + Printing)
IR Design	`FormatElement` trong `biome_formatter`	`FormatElement` trong `oxc_formatter_core`
Comment Handling	Integrated trong formatter	Cursor-based comment system
Prettier Compatibility	Có, với testing	Có, là mục tiêu thiết kế

Khi nào nên dùng cái nào?#

Chọn Biome khi#

Bạn muốn all-in-one solution thay thế cả Prettier và ESLint
Cần multi-language support (CSS, HTML, GraphQL)
Muốn daemon process cho IDE integration tốt hơn
Team muốn unified toolchain với configuration đơn giản

Chọn Oxc khi#

Bạn muốn modular components có thể dùng riêng lẻ
Cần maximum performance cho CI/CD environments
Muốn type-aware linting với TypeScript semantics
Đang xây dựng custom toolchain từ các components

Ví dụ sử dụng#

Biome#

# Cài đặt
npm install -D @biomejs/biome

# Format và lint một file
biome check src/file.ts

# Format và lint toàn bộ dự án
biome check .

# Watch mode cho development
biome check --watch .

bash

Oxc#

# Cài đặt oxlint
npm install -D oxlint

# Lint một file
oxlint src/file.ts

# Lint toàn bộ dự án với parallel execution
oxlint src/

# Type-aware linting
oxlint --tsconfig tsconfig.json src/