ゆーすけべー日記

天然パーマです。

Honoの今の状況

2023-12-20 Hono

この記事は2023 JSConf JPで発表したHono v3 and v4を元に11月17日に書いたCloudflare社内のブログ記事「Current Status of Hono」を日本語に訳した記事です。

Honoの「Initial commit」からおおよそ2年が経ちました。このプロジェクトは2021年の12月15日に始まりました。

当初、私はCloudflare WorkersのみのためにHonoを作りました。itty-routerはよかったものの、私が欲しかった多くの機能が欠落していました。また、私は勉強のためにTrie木構造のルーターを作りたかったのです。それがHonoの生まれた理由です。

それから多くのことが起こりました。私がCloudflareにいるのもHonoのおかがです！HonoはCloudflare開発者コミュニティで認知されていきました。Honoの人気が出ることで、DaneとGlenが私に連絡をくれました。Honoは私の人生を変えました。

しかし、今、Honoはとても多くの開発者のものとなっています。この記事では、Honoの現在の状況をまとめます。

Honoとはなにか？

Honoのキャッチフレーズはこれです。

速い, 軽い, Web標準

これがHonoの全てを表現しています。

HonoはCloudflare Workersのためのフレームワークの中で1番速いです。さらに、Cloudflare Workers、Fastly Compute、Deno、Bun、Node.jsといったどんなJavaScriptランタイム上で動きます。これらの環境でも他の高性能なフレームワークと比べても1番速いものの一つです。

備考1: Node.js上ではNode.jsのincoming/outgoing messagesをWeb標準のAPIを橋渡しするためのアダプタが必要になるために、オーバーヘッドが発生します。それゆえ、Node.js上ではHonoは遅くなります。例えば、速いとされているフレームワーク、Fastifyよりは遅いです。しかし、Expressよりは速いです。しかし、改善するための可能性はあり、HonoはFastifyに近づくかもしれません。

備考2: この記事を書いたのち、Node.jsアダプタで大幅は改善が行われました。ベンチマーク次第ではFastifyと同程度のパフォーマンスでるようになりました。また、Expressより3倍速くなりました。

HonoはMinifyしてバンドルしたサイズは20.7KB（2023年12月20日現在は21.7KB）とすごく小さいです。比較するとExpressは573KBです。

HonoはWeb標準のAPIのみを使っていて、それがサイズを小さくしています。また、このアプローチはHonoがFastlyやDeno、Bun、さらにはブラウザ（！）上で動くことを可能にしています。Web標準のAPIに注目したはHonoのとても興味深い一面です。

GitHubのスター

OSSソフトウェア、コミュニティにとってGitHubのスターは重要な指標です。Honoは他のフロントエンドのフレームワークには敵わないものの、いい位置につけています。Honoは8,700のスターを獲得しています（2023年12月現在では9,400）。比べるわけではありませんが、例えば、itty-routerは1,400スターです。しかし、他のフレームワーク、例えばRemixは25,000スターで、そのレベルに達していません。しかし、私達はそこへ近づくことができると思っています。

図は2023年12月20日のもの。

誰がHonoを使っているか？

今、多くの開発者がHonoを使っています。

一番最初は、cdnjsがAPIサーバーとしてCloudflare Workers上でHonoを使いだしました。似たようなJavaScriptファイルをCDNで配信するPolyfill.ioもFastify Compute上でHonoを使っています（現在はRustベースへ移行しました）。刺激的なのはDenoが公式のドキュメントサイトDeno DocsでHonoを使っていることです。一方、最近出てきたJavaScriptのランタイムBunではHonoをExpressやKoaと並ぶフレームワークとして、彼らのYouTubeビデオで紹介しています。

私はHonoのGitHub Discussionで「Who is using Hono in Production?」というアンケートのようなものをとりました。すると多くのユーザーがコメントしてくれました。

  • Nodecraft
  • Ponder.ly
  • SticAI
  • Skill Struck
  • Reejs
  • toddle
  • LanderLab
  • OpenStatus
  • Loglib
  • AI.LS
  • Equator Analytics
  • ExpenSee
  • DolarApi.com
  • UseScraper
  • Say My Name

こんなにたくさん！これらはCloudflare Workers、そしてNode.js/Bun/Denoを使っています。作者冥利に尽きます。

備考: Cloudflare社内でもWorkers SDK他、D1でも使われています。

どこでも動くことはいいことだ！

あなたはこう思うかもしれない。

HonoはCloudflareだけのものじゃないの？なぜCloudflareの従業員が他のプラットフォームでも動くHonoを作っているの？

とてもいい指摘です。しかし、HonoがCloudflare Workers以外のランタイム上で動くことは大きな利点をもたらしています。私達がバージョン「2.0.0」をリリースする時、私はHonoをDenoに対応させるかという問題に直面しました。私達はDenoをサポートすることを選択し、それがとても有益でした。複数のランタイムで動くことはHonoを有名で安定したものにしました。多くの人に使われることで多くのバグを発見でき、ソフトウェアの品質を上げることになるのです。

v3.*の機能

Honoでは他のフレームワークにあるような一般的な機能を提供しています。例えば、ルーティング、リクエストとレスポンスの扱い、JSONやHTMLを返す、ミドルウェアをつかう、Bindingsや環境変数を扱う、などです。

それに加え、小さなサイズを保ちつつ、パフォーマンス劣化せずに、新しいユニークな機能を使うことができます。そこで今回は、今年の2月18日にv3.0.0として導入された機能から、現在の11月13日にリリースされたv3.10.0のものまでを紹介していきます（2023年12月20日現在はv3.11.8が最新）。

v3.0.0 - 2023/02/18

  • HonoRequest
  • RegExpRouter becomes the fastest router
  • Good-bye StaticRouter
  • New Validator
  • RPC
  • Adapter
  • Multi-runtime CI Support
  • Support WinterCG Runtime Keys
  • create-hono
  • @honojs to @hono

RegExpRouterは1番速いルーターになった

Honoの中で使われいてるルーターの一つRegExpRouterがJavaScript界で1番速いルーターになりました。

新しいバリデーター

とても薄くなりました。ZodやValibot、TypeBoxなどの外部のバリデーターを使うようにしました。賢いタイプヒントも提供しています。

RPCモード

クライントオブジェクトを作るためのhc()を導入します。サーバーサイドとクライントサイドでTypeScriptの型を「APIの仕様として」共有することができます。このアプローチはtRPCと似ていますが、それより気軽に実装することができます。

v3.1.0 - 2023/03/17

  • Improve RPC-mode
  • env() for getting environment variables for multi-runtimes
  • AWS Lambda Adapter
  • basePath()
  • c.req.path
  • Allow passing RequestInit to c.json() etc.

マルチランタイムで環境変数を取得するためのenv()

env()を使うとどのラインタイムで実行されているかを意識せずに透過的に環境変数を取得することができます。

v3.2.0 - 2023/05/19

  • New Routers
  • Presets: hono/tiny, hono/quick
  • app.mount()
  • Node.js adapter server v1.0.0 has been released
  • Support for routing includes a hostname

新しい2つのルーター

新しい2つのルーターを導入します。まずLinearRouter。これはルーティングの登録が1番速いです。次に1番サイズが小さいPatternRouterです。

これにより我々は以下の5つのルーターを持つことになります。

  • TrieRouter
  • RegExpRouter
  • SmartRouter
  • LinearRouter
  • PatternRouter

プリセット: hono/tiny、hono/quick

典型的なユースケースのために複数のルーターを組み合わせたプリセットを作りました。

  • hono/tiny
    • PatternRouterのみを仕様
    • すごい小さい
    • アプリケーションのサイズはminifyして14KB
  • hono/quick
    • LinearRouterとTrieRouterの組み合わせ
    • ルートの登録が1番速い

app.mount()

itty-routerやRemixなどを使ったfetch APIに基づくアプリケーションならどんなものでも、マウントできます。

Node.jsアダプタがv1.0.0に

Node.jsアダプタの最初のメジャーリリースです。Node.jsネイティブのWeb標準APIのみを使うようにしました。すると外部のfetchライブラリをポリフルしていた以前と比べて、非常に小さくなりました。

v3.3.0 - 2023/07/11

  • Server-Timing Middleware
  • Lambda@Edge Adapter

v3.4.0 - 2023/08/08

  • Netlify Adapter
  • Cookie Middleware supports Signed Cookies

v3.5.0 - 2023/08/21

  • Secure Headers Middleware
  • Introduce “Helpers”
  • Zod OpenAPI Hono

ヘルパーの導入

ミドルウェアとはまた別でヘルパーは便利なメソッドを提供します。現在あるヘルパーは以下です。

  • Adapter
  • Cookie
  • Factory
  • html
  • JWT
  • Streaming
  • Testing

備考: 2023年12月20日にはこれに加え、Devヘルパーがある。

Zod OpenAPI Hono

“Zod OpenAPI Hono"はOpenAPIをサポートするHonoのラッパーです。以下に使い方を紹介します。

  1. Zodでスキーマを書く

  1. ルートを作る

  1. アプリにする

  1. OpenAPI/SwaggerのドキュメントをJSONとして出力するようになる

  1. Swagger UIミドルウェアと組み合わせることができます

v3.6.0 - 2023/09/11

  • Introduce c.render()
  • Introduce c.var
  • FC for JSX
  • $url() in Hono Client
  • Vite dev-server for Hono
  • Deprecate some properties in HonoRequest
  • Replaced Jest with Vitest

c.render()の導入

レイアウトを使ってHTMLのレスポンスを簡単に返すことができます。

HonoのためのVite dev-server

hono/vite-dev-serverはHonoを開発するためのカスタムDevサーバーをViteのプラグインとして提供します。これを使うとフロントエンドも含んだ素早いリロードと共にHonoのアプリを開発できます。Cloudflare Bindingsもサポートしています。

v3.7.0 - 2023/09/21

  • c.stream() and c.streamText()
  • Testing Helper
  • JWT helper

c.stream()とc.streamText()

Honoはストリーミングをサポートしました。これとOpenAIで使われているOpenAPIもあるので、Honoは"AI Ready"であると言えます。

v3.8.0 - 2023/10/19

  • JSX Context API
  • JSX Renderer Middleware
  • Streaming Helper
  • Factory Helper
  • parseBody() supports multi values
  • Improve path matching in the router

JSX Rendererミドルウェア

HonoのJSXを使ったレイアウトの定義を簡単にします。ReactのuseContext()と似たような機能、useRequestContext()を使ってContextオブジェクトにアクセスできます。

Streamingヘルパー

streamSSE()を通じてServer-Sent-Eventのレスポンスを簡単に返せるようになりました。

v3.9.0 - 2023/10/27

  • Improving the Developer Experience for JSX
  • Clerk Middleware
  • New Starter Template for Cloudflare Pages

JSXの開発者体験の向上

HonoのJSXのタグに型が追加されました。これでエディタの自動補完と共にJSXを書くことができます。

Cloudflare Pagesのための新しいスターターテンプレート

Cloudflare Pagesのスターターテンプレートが@hono/vite-dev-serverを使った新しいものになりました。

v3.10.0 - 2023/11/13

  • JSX supports Async Components
  • Introduce Suspense and renderToReadableStream()
  • JSX Renderer Middleware supports stream
  • Support @jsx precompile for Deno

JSXが非同期コンポーネントをサポート

HonoのJSXコンポーネントの中でasync/awaitを使えます。

SuspenseとrenderToReadableStream()の導入

通常、非同期コンポーネントはfetchが終わるまで待ちます。新しいSuspenseとrenderToReadableStream()を使うと、最初にfallbackで指定した内容を表示して、Promiseが解決されたのちfetchの結果のコンテンツを表示します。

JSX Rendererミドルウェアがstreamをサポート

もしstream: trueをセットすると、レスポンスがストリーミングになります。

v4へ向けて

正直、v4に向けての具体的なプランはありません（現在はないわけではありません）。非推奨の機能を消したいという消極的な理由はあります。

ひとつ考えているのはファイルベースのルーティングです。この機能を導入すると、ユーザーは意識せずともベストプラクティスのプロジェクト構造でアプリケーションを作ることができるようになるでしょう。そして、IslandアーキテクチャとReactやPreactなどのUIライブラリを統合することで、動的なクライアントサイドの機能もサポートすることになります。

それが実現されれば、RemixやNext.jsとは違った新しいエッジに焦点をあわせたフルスタックなフレームワークとなるでしょう！

コントリビューター

我々には多くのコントリビューターがいます！Honoのコアリポジトリでは91人のコントリビューターがいます。他のリポジトリと合わせると100人以上でしょう！

備考: 2023年12月20日現在、Honoコアのリポジトリのコントリビューター数は100人。

特にTaku Amanoさんは革新的で賢いアイデアで重要な貢献をしています。彼なくしてはHonoの今はありません。ありがとう。

Daneとの約束

私がCloudflareに入る前、ちょうど1年くらい前（つまり2022年の10月頃）、DaneとTwitterのDMでやりとりをしました。私は彼がこんなことを言っていたのを覚えています。

HonoをRuby on RailsやDjangoのようなフレームワークにするつもりはないか？

今、HonoはまだRuby on RailsやDjangoのように大きくはありません。しかし、あるインフルエンサーは「Expressは新しいJQueryだ。それをHonoのことを考えていて思いついた」と言っています。おそらく、それは現実になりつつあります。そして私はそうであってほしいです。なぜなら、本当に素晴らしいものを作っているからです。私達の旅は続きます。