# The Seven Concepts of Hono - Yusuke Wada

{%hackmd @JSDC-tw/B1loEcwJZl %}
###### tags: `JSDC2025`

Slido：https://app.sli.do/event/dQvWykLu8r4o89XNHY1mCu

Greet to Taiwan
- from Yokonama

# Hono
Any JS runtime, since 2024-12-21

https://hono.dev/

import { Hono } from 'hono';

const app = new Hono();

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

export default app

Getting Popular
users:
- Cloudflare !

Hono conference
- Share the tech experience

# Web Standards
API for Web, adapt to **deno**, **bun**, cloudflare workers
Web API to server

Request, Response, Headers, URL, URLSearchParams, FormData

export default {
    fetch(req: Request) {
        return new Reponse(`Hello ${req.url}`);
    }
}

Get the High quality from Web API

const rawRequest = c.req.raw;
return new Response(`Hello ${rawRequest}`);

0 dependencies!

# Lightweight
bundle 11KB vs 790KB of express
1. only rely on Web API
2. Add middleware + helpers -> the library handle only core

# Fast
x8 > express
1. don't do many things, 6 files in core
2. Designed as the minimal app
3. Routing is fast
- RegExpRouter
- (What they focus on, the algorithm of router)
-
- vs Linear router

# Developer Experience
1. No `import`
2. TypeScript powerfully
3. Infer path params to Literal union, not pure `string`
3. Validator use zod + zod-validator, fully external library

TypeScript + DX

## Supports JSX
- template engine: mustache
- eval does not work on Cloudflare workers
- .tsx, write jsx directly, pass to c.html()

## Unit Test

import app from './app';

it('should ...', () => {
    const res = app.request('a') // directly trigger
});

# Middleware
middleware

app.get('/', async (c, next) => {
    // before
    await next(); // usage
    // after
});

await next();
c.header('X-powered-by', 'JSDC 2025');

## Bulitin
22 middlewares
- Basic Auth
- Bearer
- JSX
- ...

`hono/basic-auth`

## External
`@hono/*` in [honojs/middleware](https://github.com/honojs/middleware/tree/main)

e.q. `@hono/ua-blocker`

# Helper
useful helper functions

import { streamText } from 'hono/stream';

15 bultin

not include in, bundle when use it

# Adapter
bridge to adapt to any runtime

import { handle } from 'hono/aws-lambda'

const app = new Hono()
...
export const handler = handle(app)

import { serve } from '@hono/node-server';

serve(new Hono());

switch between dev and production env!

## Demo

src
| app.js
| entry-dev.js
| entry-prodv.ts

app use `new Hono`
entry-* adapt runtime bridge

# Q&A

1. I like how oRPC it infer input, output and maintain the type information between middleware, handler etc. And it's composible. Hono too, I wanna know your think
- Ans

# Slides

[Link to Slides]

---

# Slido Remaining Question

1. Can Hono be used to support edge-side computation for meta-frameworks like Nuxt?

---

> 聊天區
> - NOT A HOTEL 好神奇的公司

---

{%hackmd @JSDC-tw/jsdc2025_sponsor %}