Slide 1
Slide 1 text
One More Thing
Slide 2
Slide 2 text
We invent many things
Supporting mutilplaform
RPC with Types
Server-side JSX
HonoX
5 Routers
Many Middleware
Many Helpers
Built with Web Standards
Slide 3
Slide 3 text
Go with
Idea and implementation
Slide 4
Slide 4 text
Today we
(I and @usualoma)
will ship
Slide 5
Slide 5 text
Hono CLI
Slide 6
Slide 6 text
NOT create-*
NOT a command for dev&build&deploy
NOT a just wrapper of Vite
Slide 7
Slide 7 text
Completely new concept
Slide 8
Slide 8 text
CLI for
Human and AI
Slide 9
Slide 9 text
$ hono –help
Slide 10
Slide 10 text
Sub commands
Slide 11
Slide 11 text
$ hono docs
Slide 12
Slide 12 text
$ hono docs [path]
Slide 13
Slide 13 text
$ hono docs /docs/api/routing
Slide 14
Slide 14 text
Wait!
Only this??
Slide 15
Slide 15 text
Yes
But for AI
Slide 16
Slide 16 text
Display docs with Markdown
Slide 17
Slide 17 text
$ hono search
Slide 18
Slide 18 text
$ hono search
Slide 19
Slide 19 text
$ hono search middleware
Slide 20
Slide 20 text
Display docs with JSON
Slide 21
Slide 21 text
AI can search and read docs
Slide 22
Slide 22 text
$ hono search “basic auth”
$ hono docs \
/docs/middleware/builtin/basic-auth
/docs/middleware/builtin/basic-auth
Slide 23
Slide 23 text
Next
Slide 24
Slide 24 text
$ hono request
Slide 25
Slide 25 text
$ hono request [file]
Slide 26
Slide 26 text
$ hono request src/index.ts
Slide 27
Slide 27 text
Please imagine
app.request()
Slide 28
Slide 28 text
const res = await app.request(‘/’)
GET /
Response
You don't need run
an actual server!
Slide 29
Slide 29 text
const res = await app.request(‘/’)
$ hono request src/index.ts
Slide 30
Slide 30 text
Display the response with JSON
Slide 31
Slide 31 text
$ hono request \
-P /api/users \
-X POST \
-d '{"name":"Alice"}' \
src/index.ts
Slide 32
Slide 32 text
This means
Slide 33
Slide 33 text
$ hono search
$ hono docs
$ hono request
AI can
Search docs
Read docs
Test apps
Slide 34
Slide 34 text
CLAUDE.md / AGENTS.md etc.
Use the `hono` CLI for efficient development. View all
commands with `hono --help`.
Slide 35
Slide 35 text
Demo
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
These are for AI
Slide 38
Slide 38 text
Next
Slide 39
Slide 39 text
For Human
Slide 40
Slide 40 text
$ hono serve
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
$ hono serve src/index.ts
http://localhost:7070
Slide 43
Slide 43 text
Wait!
Only this??
Slide 44
Slide 44 text
No!
—use is super cool
Slide 45
Slide 45 text
Please imagine
app.use()
Slide 46
Slide 46 text
app.use(middleware)
app.use(logger())
Slide 47
Slide 47 text
app.use(logger())
Slide 48
Slide 48 text
$ hono serve \
–use “logger()” \
src/index.ts
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
$ hono serve \
--use "logger()" \
--use "basicAuth({username:'foo',password:'bar'})" \
src/index.ts
Slide 51
Slide 51 text
404 Not Found
Slide 52
Slide 52 text
$ hono serve \
--use "serveStatic({root:'./'})"
Slide 53
Slide 53 text
$ hono serve \
--use '(c) =>
proxy(`https://ramen-api.dev${new
URL(c.req.url).pathname}`)'
Slide 54
Slide 54 text
Last
Slide 55
Slide 55 text
$ hono optimize
Slide 56
Slide 56 text
$ hono optimize [entry]
Slide 57
Slide 57 text
Let’s talk about routers
before hono optimize
Slide 58
Slide 58 text
RegExpRouter is one of
the fastest routers in
JavaScript world
Slide 59
Slide 59 text
The idea
Routes (dynamic path)
RegExp
Request
Buid
Match
Slide 60
Slide 60 text
Weak points
1. Initialization is slow
2. The file size is large
Slide 61
Slide 61 text
The solutions
1. LinearRouter (hono/quick)
2. PatternRouter (hono/tiny)
Slide 62
Slide 62 text
But I want to use
RegExpRouter!
Slide 63
Slide 63 text
Now we introduce a
new (7th) router
Slide 64
Slide 64 text
PreparedRegExpRouter
Slide 65
Slide 65 text
The idea
Routes
Routing information with RegExp
new PreaparedRegExpRouter()
Create at preparing phase
Hard code!
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Benchmark with
initialization
Slide 69
Slide 69 text
https://github.com/honojs/hono/pull/1796
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
PreparedRegExpRoute
r is 16.5× faster than
RegExpRouter
Slide 72
Slide 72 text
Back to Hono CLI
Slide 73
Slide 73 text
$ hono optimize
will create optimized
Hono for your app
Slide 74
Slide 74 text
What is optimized
Hono?
Slide 75
Slide 75 text
This
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
$ hono optimize src/index.ts
$ wrangler deploy dist/index.js
Slide 78
Slide 78 text
How small has it become??
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Size drops from 18.0 kB to
11.14 kB (38% smaller!)
Slide 81
Slide 81 text
will your app fast and
small
$ hono optimize
Slide 82
Slide 82 text
That’s all
Slide 83
Slide 83 text
We introduce Hono CLI
with 5 sub commands
Slide 84
Slide 84 text
1. hono docs
2. hono search
3. hono request
4. hono serve
5. hono optimize
Slide 85
Slide 85 text
For Human and AI
Slide 86
Slide 86 text
github.com/honojs/cli
Slide 87
Slide 87 text
npm i @hono/cli
Slide 88
Slide 88 text
The end!