---
# System prepended metadata

title: The Seven Concepts of Hono - Yusuke Wada
tags: [JSDC2025]

---

# 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/
```js=
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

```js=
export default {
    fetch(req: Request) {
        return new Reponse(`Hello ${req.url}`);
    }
}
```
Get the High quality from Web API

```js=
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
```js=
import app from './app';

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

```

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

```js=
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

```js=
import { streamText } from 'hono/stream';
```

15 bultin

not include in, bundle when use it
```js=

```

# Adapter
bridge to adapt to any runtime

```js=
import { handle } from 'hono/aws-lambda'

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

```js=
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 %}