Belajar HonoJS - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Setelah di episode 1 kita memahami sejarah dan mengapa Hono lahir, pada episode ini kita akan menyingkap arsitektur di balik framework ini. Memahami arsitektur penting karena akan menjelaskan mengapa Hono dirancang seperti ini — mulai dari RegExpRouter yang membuat routing sangat cepat, context object yang universal, hingga RPC mode untuk type safety.

#Arsitektur Hono

#Core: Routing Engine RegExpRouter

Hono menggunakan RegExpRouter — routing engine berbasis regular expression yang melakukan routing dalam waktu konstan (bukan linear scan seperti Express). Ini adalah rahasia di balik performa Hono yang luar biasa.

Core Hono: routing engine

import { Hono } from 'hono'
 
const app = new Hono()
app.get('/', (c) => c.text('Hello Hono!'))
app.get('/user/:id', (c) => c.json({ id: c.req.param('id') }))

#Context Object (c)

Context object c adalah abstraction untuk Request dan Response di semua runtime. Ia menyediakan methods universal untuk mengakses data request dan menghasilkan response:

Context object: universal abstraction

app.get('/user/:id', (c) => {
  // Request data
  const id = c.req.param('id')
  const q = c.req.query('format')
  const token = c.req.header('Authorization')
 
  // Response methods
  return c.json({ id, format: q })
})

#Middleware Composition

Hono mendukung middleware composition — chaining middleware secara sequential:

Middleware composition

import { Hono } from 'hono'
import { cors } from 'hono/cors'
import { logger } from 'hono/logger'
 
const app = new Hono()
  .use('*', logger())
  .use('*', cors())
  .get('/', (c) => c.text('Hello'))

#Cara Kerja di Balik Layar

#Web Standard Fetch API

Hono menggunakan Web Standard Fetch API — Request dan Response objects yang merupakan standar web. Ini berarti kode Hono berjalan di mana pun Fetch API didukung:

Web Standard API di balik Hono

// Hono pada dasarnya melakukan ini di bawah hood:
async function handleRequest(request: Request): Promise<Response> {
  // routing logic
  return new Response('Hello Hono!')
}

#Zero Dependencies

Tidak ada npm package yang di-bundle — hanya runtime APIs. Ini menjadikan Hono salah satu framework paling ringan yang pernah ada:

Bundle size Hono

# < 20KB total, zero external dependencies
ls node_modules/hono/dist/

#Perbandingan dengan Framework Lain

#Express vs Hono

Express punya > 1MB dependencies dan berjalan hanya di Node.js. Hono < 20KB dan berjalan di semua runtime.

#Fastify vs Hono

Fastify performa tinggi tapi Node-only. Hono edge-optimized dan multi-runtime.

#ElysiaJS vs Hono

Keduanya TypeScript-first. ElysiaJS Bun-only, Hono multi-runtime. ElysiaJS punya TypeBox integration native, Hono menggunakan Zod atau Valibot.

Tip

Hono adalah framework yang paling fleksibel di ekosistem JavaScript. Ia bisa berfungsi sebagai drop-in replacement untuk Express di Node.js, sekaligus framework utama untuk Cloudflare Workers. Pilihan yang menang di kedua dunia.

#Penutup

Pada episode 2 ini, kalian telah memahami arsitektur inti Hono — RegExpRouter, context object, middleware composition, dan RPC mode.

Inti yang harus dibawa pulang:

RegExpRouter: routing berbasis regex, waktu konstan.
Context object c: universal abstraction untuk Request/Response.
Web Standard API: berjalan di semua runtime modern.
Zero dependencies: < 20KB bundle size.

Di episode 3 selanjutnya kita akan membuat proyek pertama Hono — dari npm create hono hingga menjalankan server dan memahami anatomi aplikasi minimal. Sampai jumpa di episode 3!