Tujuan Pembelajaran

Memahami filosofi Hono
Bisa membuat routing dan handlers
Mengerti middleware system di Hono

Analogi

Diagram


      Express.js vs Hono:
Express: app.get('/', (req, res) => res.send('OK'))
Hono: app.get('/', (c) => c.text('OK'))

Hono lebih ringan, lebih cepat, dan support TypeScript native.

Hono = web framework yang dirancang untuk edge runtime — ringan, cepat, dan modern

Penjelasan Konsep

Express.js adalah framework backend Node.js yang paling populer selama satu dekade.

Tapi Express punya beberapa kelemahan: tidak support TypeScript dengan baik, middleware pattern yang outdated, dan performa yang bisa lebih baik.

Hono datang sebagai alternatif modern.

Apa Itu Hono?

Hono (bahasa Jepang untuk ‘api/flame’) adalah web framework yang ultra-lightweight,

Ultra-fast, dan berjalan di berbagai runtime: Node.js, Bun, Deno, Cloudflare Workers, Vercel Edge, dan lainnya.

Filosofinya: cepat, ringan, dan developer-friendly.

Kenapa Hono?

Multi-runtime: Kode yang sama berjalan di Node, Bun, dan edge platforms
TypeScript native: Dibuat dengan TypeScript, types sudah built-in
Ultra-lightweight: Hanya ~15KB, zero-dependency
Middleware: Pattern middleware yang modern dan intuitif
Built-in helpers: JSON, HTML, redirect, cookie, JWT, validation

Perbedaan dengan Express

Fitur	Express	Hono
Size	~60KB	~15KB
TypeScript	Manual setup	Native
Runtime	Node only	Multi-runtime
Context	req,

Context Object: c

Di Hono, semua informasi request dan response ada di satu objek: c (context).

Ini lebih bersih daripada Express yang memisahkan req dan res.

app.get('/user/:id', (c) => {
  const id = c.req.param('id');     // URL parameter
  const name = c.req.query('name');  // Query string
  const body = await c.req.json();   // Request body
  return c.json({ id,

Name });       // Response JSON
});

Installation

npm install hono
# atau
bun add hono

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami filosofi Hono., bisa membuat routing dan handlers., dan mengerti middleware system di Hono. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Hono, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Hono = web framework yang dirancang untuk edge runtime — ringan, cepat, dan modern. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Hono app.fetch adalah handler yang compatible dengan web standard fetch API — bisa dipakai di Bun, Deno, Cloudflare Workers, dan Vercel Edge.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// Basic Hono app
import { Hono } from 'hono';

const app = new Hono();

// Routing
app.get('/', (c) => c.text('Hello Hono!'));

app.get('/json', (c) => c.json({ message: 'Hello', status: 'ok' }));

// Path parameters
app.get('/users/:id', (c) => {
  const id = c.req.param('id');
  return c.json({ userId: id });
});

// Query parameters
app.get('/search', (c) => {
  const q = c.req.query('q');
  const page = c.req.query('page') || '1';
  return c.json({ query: q, page });
});

// Request body
app.post('/users', async (c) => {
  const body = await c.req.json();
  return c.json({ created: body }, 201);
});

// HTML response
app.get('/page', (c) => c.html('<h1>Hello World</h1>'));

// Redirect
app.get('/old', (c) => c.redirect('/new', 301));

// Bun serve
export default {
  port: 3000,
  fetch: app.fetch,
};

// atau untuk Node/Deno/Bun
// Bun.serve({ fetch: app.fetch });

Penjelasan Kode

Hono app.fetch adalah handler yang compatible dengan web standard fetch API — bisa dipakai di Bun, Deno, Cloudflare Workers, dan Vercel Edge.

Prompt AI

Install Hono dan buat REST API untuk resource 'books' dengan endpoint: GET /books, GET /books/:id, POST /books, PUT /books/:id, DELETE /books/:id.

Pertanyaan Reflektif

Bandingkan boilerplate code antara Express dan Hono untuk endpoint yang sama. Mana yang lebih bersih?