Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hono - Ultrafast web framework for Cloudflare W...
Search
Yusuke Wada
November 26, 2022
Programming
3
8.2k
Hono - Ultrafast web framework for Cloudflare Workers, Deno, Bun, and Node.js
Yusuke Wada 2022.11.26 JSConf JP
Yusuke Wada
November 26, 2022
Tweet
Share
More Decks by Yusuke Wada
See All by Yusuke Wada
Honoをフロントエンドで使う 3つのやり方
yusukebe
8
4.4k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
2
340
MCP with Cloudflare Workers
yusukebe
2
400
Remix on Hono on Cloudflare Workers
yusukebe
3
710
僕がつくった48個のWebサービス達
yusukebe
21
18k
Honoの来た道とこれから
yusukebe
20
7k
JS RPCを理解する
yusukebe
5
870
Honoとhtmx
yusukebe
6
2k
Cloudflare Workersの環境を再現することについて
yusukebe
7
1.1k
Other Decks in Programming
See All in Programming
ふつうの技術スタックでアート作品を作ってみる
akira888
0
360
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
2.4k
童醫院敏捷轉型的實踐經驗
cclai999
0
210
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
340
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.8k
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
560
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Rails Girls Zürich Keynote
gr2m
94
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Transcript
Yusuke Wada 2022.11.26 JSConf JP Hono Ultrafast web framework for
Cloud fl are Workers, Deno, Bun, and Node.js
Me • Yusuke Wada • Supervisor at TravelBook Inc. •
Web developer, Web framework developer • https://yusukebe.com/ • https://github.com/yusukebe 2
Today's topics • Core concepts of Hono 1. Multi-runtimes 2.
Ultrafast 3. Middleware 4. Experience 3
Hono in 1min. 4
Initial Commit • 2021-12-15 5
Star History 6
Who is using Hono • cdnjs API Server • Drivly
- Commerce infrastructure for the automotive industry • Ultra - Zero-Legacy Deno/React Suspense SSR Framework • Deno cli/bench/http 7
Workers Launchpad 8 ref: https://blog.cloud fl are.com/launchpad-fall-22/
Deno benchmarks 9 https://deno.land/benchmarks
Concept 1 Multi-runtimes 10
Hono works on... • Cloud fl are Workers / workerd
• Vercel Edge Runtime • Fastly Compute@Edge • Deno • Bun • Node.js • and more... 11
The same code runs on all platforms 12
Cloudflare Workers and Bun
Fastly Compute@Edge and Vercel Edge Runtime
Deno
Node.js
Thanks to Web standards • Zero-dependencies / No poly fi
ll • Web-interoperable Runtimes will be powered by WinterCG 17
Cloudflare Workers 18 ref: https://developers.cloud fl are.com/workers/runtime-apis/
Deno 19 ref: https://deno.land/
[email protected]
/runtime/web_platform_apis
Bun 20 ref: https://github.com/oven-sh/bun#Reference
Node.js 21 ref: https://github.com/honojs/node-server • Using `@remix-run/web-fetch`
context.ts 22 Discussion in WinterCG => https://github.com/wintercg/runtime-keys/pull/2
Great 👍 23
Concept 2 Ultrafast 24
Cloudflare Workers 25 ref: https://github.com/honojs/hono/tree/main/benchmarks/handle-event
Deno 26 ref: https://github.com/denosaurs/bench
Bun 27 ref: https://github.com/SaltyAom/bun-http-framework-benchmark
Node.js • Fastify • Reqs/sec 63417.00 5358.22 67487.06 • Express
• Reqs/sec 20709.94 1683.03 23045.34 • Hono with @honojs/node-server • Reqs/sec 32054.95 2642.04 35583.36 28
Node.js - router 29 Decode URI, Handle Query strings Does
not support regexp Does not support regexp
Why so fast? 30
3+1 Routers 1. StaticRouter • Fastest, supports only static routes.
2. RegExpRouter • Faster, supports almost routes. 3. TrieRouter • Slowest, supports all routes. But it's faster than other routers in the world. 31
"Linear" router 32
ref: https://github.com/yusukebe/pico
TrieRouter • Using Trie Tree structure • Support all patterns
34
None
RegExpRouter • Match the route with using one big Regex
made before dispatch. • By @usualoma • https://speakerdeck.com/usualoma/ultrafast-js-router 36
37
StaticRouter • Optimized for static routings • Does not support
dynamic routings such as "path parameters" 38
None
SmartRouter • The default router • Automatically picks the best
router from the three routers. 40 • StaticRouter • RegExpRouter • TrieRouter
Great 👍 41
Concept 3 Middleware 42
Small core • hono.ts • context.ts • compose.ts • request.ts
43 Basic app with Wrangler: Total Upload: 34.15 KiB / gzip: 8.26 KiB
Three types of Middleware • Built-in Middleware - including the
package • Custom Middleware - created by the users • Third-party Middleware - depends on external libraries 44
Built-in Middleware • Basic Auth • Bearer Auth • Cache
• Compress • CORS • Etag • html • JSX • JWT Auth • Logger • Pretty JSON • Serve Static • Validator 45
JSX Middleware 46
Validator Middleware 47
Custom Middleware 48
Third-party Middleware 49 • GraphQL Server • Firebase Auth •
Sentry • tRPC (?) ref: https://github.com/honojs/hono/issues/582
Great 👍 50
Concept 4 Experience 51
TypeScript • Wrangler, Deno, and Bun fi rst-class support TypeScript.
52
Path parameters 53
Validator Middleware 54
Easy to write tests • With `jest-environment-mini fl are` •
We can do test `Request` to `Response` 55
Great 👍 56
Example: Blog 57
import 58
Model 59
Logic 60
JSX 61
GET / 62
POST /post 63
Use cases in the real world 64
With Cloudflare R2 65 • github.com/yusukebe/r2-image-worker • Store and Deliver
images with R2 backend Cloud fl are Workers. ref: https://github.com/yusukebe/r2-image-worker
With Cloudflare D1 66 ref: https://blog.cloud fl are.com/making-static-sites-dynamic-with-cloud fl are-d1/
Cache control 67 ref: https://yusukebe.com/posts/2022/wsh/
Express alternative on Bun 68
Feature plans 69
Ecosystem • For Third-party Middleware • monorepo • API specs
as Types • tRPC like, but integrated 70
API specs as Types 71 ref: https://github.com/honojs/hono/issues/582
And... 72
Going to Standard web framework for Web standards 73
One more thing 74
Pico 75 Pico is ultra-tiny (about 1kB) web framework using
URLPattern. Pico works on Cloud fl are Workers and Deno. Pico is compatible with Hono.
Love 76
Thanks • Thanks to all contributors, all supporters, and all
users!! 77
Try Hono! 78 https://honojs.dev