Waktu eksekusi pipeline Continuous Integration (CI) berdampak langsung pada siklus feedback loop tim pengembang. Pada proyek React Native skala menengah hingga besar, tahap code quality verification yang mengandalkan kombinasi ESLint dan Prettier sering kali menjadi bottleneck. Biome hadir sebagai toolchain terpadu berbasis Rust yang menggantikan fungsi linting, formatting, dan import sorting ke dalam satu eksekusi tunggal yang sangat efisien.

Overhead Arsitektural ESLint dan Prettier pada React Native

Kombinasi ESLint dan Prettier pada basis kode React Native menghasilkan inefisiensi komputasi akibat pemrosesan bertingkat:

  • Double AST Parsing: ESLint membaca file TypeScript/JSX dan mengonversinya menjadi Abstract Syntax Tree (AST) menggunakan parser seperti @typescript-eslint/parser atau @babel/eslint-parser. Setelah linting selesai, Prettier mengulang proses membaca file dari disk dan mem-parse AST kedua kalinya untuk memformat kode.
  • Node.js Runtime Overhead: Eksekusi ratusan plugin ESLint (seperti eslint-plugin-react, eslint-plugin-react-hooks, dan eslint-plugin-react-native) berjalan di atas runtime V8. Manajemen memori, garbage collection, dan event loop Node.js menimbulkan overhead signifikan pada basis kode dengan ribuan komponen.
  • Resolusi Konflik Rule: Integrasi Prettier dengan ESLint sering membutuhkan eslint-config-prettier untuk mematikan rule format yang bertabrakan, menambah kompleksitas dependensi.

Biome mengeliminasi lapisan tersebut dengan memproses parsing, validasi rule, dan formatting dalam satu lintasan (single pass) menggunakan bahasa Rust yang dikompilasi langsung ke native binary multi-threaded.

Konfigurasi biome.json untuk Proyek React Native

Inisialisasi Biome pada proyek React Native dilakukan dengan memasang package Biome sebagai devDependencies:

npm install --save-dev --save-exact @biomejs/biome
# atau
yarn add --dev --exact @biomejs/biome

Buat file biome.json di root direktori proyek. Konfigurasi ini menangani file TypeScript, JSX, hook dependencies, serta mengabaikan artefak kompilasi platform iOS dan Android:

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false,
    "ignore": [
      "ios/**",
      "android/**",
      "node_modules/**",
      "build/**",
      "dist/**",
      "Pods/**",
      "*.bundle",
      "coverage/**"
    ]
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "double",
      "trailingCommas": "all",
      "semicolons": "always"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "useHookAtTopLevel": "error",
        "useExhaustiveDependencies": "warn"
      },
      "style": {
        "noNonNullAssertion": "warn"
      }
    }
  }
}

Rule useHookAtTopLevel dan useExhaustiveDependencies menggantikan fungsionalitas inti dari eslint-plugin-react-hooks secara bawaan tanpa memerlukan modul tambahan.

Integrasi Pipeline CI GitHub Actions

Biome menyediakan perintah biome ci yang dirancang khusus untuk lingkungan otomasi. Perintah ini mengeksekusi format check, linting, dan validasi struktur import secara atomik tanpa memodifikasi file di disk.

Berikut konfigurasi workflow minimal pada .github/workflows/ci.yml:

name: Code Quality CI

on:
  pull_request:
    branches: [main, master]
  push:
    branches: [main, master]

jobs:
  biome-check:
    name: Lint & Format Check
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install Dependencies
        run: npm ci

      - name: Run Biome Validation
        run: npx @biomejs/biome ci .

Perintah npx @biomejs/biome ci . membaca langsung konfigurasi biome.json dan mengembalikan exit code non-zero apabila ditemukan pelanggaran linting atau inkonsistensi format.

Perbandingan Performa Eksekusi (Benchmark)

Pengujian dilakukan pada basis kode React Native berisi ~1.800 file (kombinasi .tsx dan .ts) menggunakan mesin runner standar GitHub Actions (2 vCPU, 7 GB RAM):

  • ESLint + Prettier: Waktu eksekusi rata-rata berkisar antara 42 hingga 65 detik. Beban utama berasal dari inisialisasi plugin TypeScript-ESLint dan proses traversal file bertingkat.
  • Biome (biome ci): Waktu eksekusi terpangkas menjadi 0,8 hingga 1,5 detik untuk lintasan penuh terhadap seluruh basis kode.

Peningkatan efisiensi mencapai lebih dari 95% pada tahap analisis statis kode. Penghematan ini juga berlaku saat tim menjalankan pre-commit hook melalui husky atau lint-staged, mengurangi latensi saat developer melakukan commit lokal.

Batasan Biome pada Ekosistem React Native dan Mitigasinya

Meskipun Biome memberikan akselerasi masif, terdapat beberapa keterbatasan fungsional yang perlu diperhitungkan sebelum migrasi total:

1. Ketiadaan Rule Spesifik Platform (eslint-plugin-react-native)

Biome belum menyediakan padanan langsung untuk aturan spesifik React Native seperti react-native/no-inline-styles atau react-native/no-color-literals.

Mitigasi: Gunakan pendekatan sistem desain yang ketat melalui komponen abstraksi (misal: primitives seperti Box atau Text) atau utility-first styling seperti NativeWind/StyleSheet terpusat. Untuk audit gaya inline, manfaatkan TypeScript strict typing pada properti style.

2. Analisis Berbasis Tipe Penuh (Type-Aware Linting)

ESLint mendukung aturan berbasis tipe data yang memerlukan kompilasi proyek TypeScript (misal: @typescript-eslint/no-floating-promises). Biome mengevaluasi AST murni tanpa melakukan type checking menyeluruh demi menjaga performa.

Mitigasi: Pisahkan tanggung jawab penegakan tipe ke tahap tsc --noEmit di dalam pipeline CI. Eksekusi biome ci dan tsc --noEmit dapat dijalankan secara paralel di GitHub Actions untuk menjaga kecepatan proses:
# Menjalankan type-check dan linting secara simultan
npx @biomejs/biome ci . & npx tsc --noEmit

Kesimpulan

Penggantian ESLint dan Prettier dengan Biome pada proyek React Native memangkas waktu validasi CI secara drastis dari skala menit menjadi hitungan detik. Dengan memusatkan konfigurasi pada biome.json dan mendelegasikan pemeriksaan tipe data ke tsc, tim pengembang memperoleh lingkungan pengembangan yang jauh lebih responsif tanpa mengorbankan konsistensi kode.