Hono - Ultrafast web framework for Cloudflare Workers, Deno, Bun, and Node.js

Yusuke Wada 2022.11.26 JSConf JP

Transcript

1. Yusuke Wada 2022.11.26 JSConf JP Hono Ultrafast web framework for Cloud fl are Workers, Deno, Bun, and Node.js
2. Me • Yusuke Wada • Supervisor at TravelBook Inc. • Web developer, Web framework developer • https://yusukebe.com/ • https://github.com/yusukebe 2
3. Today's topics • Core concepts of Hono 1. Multi-runtimes 2. Ultrafast 3. Middleware 4. Experience 3
4. Hono in 1min. 4
5. Initial Commit • 2021-12-15 5
6. Star History 6
7. 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
8. Workers Launchpad 8 ref: https://blog.cloud fl are.com/launchpad-fall-22/
9. Deno benchmarks 9 https://deno.land/benchmarks
10. Concept 1 Multi-runtimes 10
11. Hono works on... • Cloud fl are Workers / workerd • Vercel Edge Runtime • Fastly Compute@Edge • Deno • Bun • Node.js • and more... 11
12. The same code runs on all platforms 12
13. Cloudflare Workers and Bun
14. Fastly Compute@Edge and Vercel Edge Runtime
15. Deno
16. Node.js
17. Thanks to Web standards • Zero-dependencies / No poly fi ll • Web-interoperable Runtimes will be powered by WinterCG 17
18. Cloudflare Workers 18 ref: https://developers.cloud fl are.com/workers/runtime-apis/
19. Deno 19 ref: https://deno.land/manual@v1.28.2/runtime/web_platform_apis
20. Bun 20 ref: https://github.com/oven-sh/bun#Reference
21. Node.js 21 ref: https://github.com/honojs/node-server • Using `@remix-run/web-fetch`
22. context.ts 22 Discussion in WinterCG => https://github.com/wintercg/runtime-keys/pull/2
23. Great 👍 23
24. Concept 2 Ultrafast 24
25. Cloudflare Workers 25 ref: https://github.com/honojs/hono/tree/main/benchmarks/handle-event
26. Deno 26 ref: https://github.com/denosaurs/bench
27. Bun 27 ref: https://github.com/SaltyAom/bun-http-framework-benchmark
28. 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
29. Node.js - router 29 Decode URI, Handle Query strings Does not support regexp Does not support regexp
30. Why so fast? 30
31. 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
32. "Linear" router 32
33. ref: https://github.com/yusukebe/pico
34. TrieRouter • Using Trie Tree structure • Support all patterns 34
36. RegExpRouter • Match the route with using one big Regex made before dispatch. • By @usualoma • https://speakerdeck.com/usualoma/ultrafast-js-router 36
38. StaticRouter • Optimized for static routings • Does not support dynamic routings such as "path parameters" 38
40. SmartRouter • The default router • Automatically picks the best router from the three routers. 40 • StaticRouter • RegExpRouter • TrieRouter
41. Great 👍 41
42. Concept 3 Middleware 42
43. Small core • hono.ts • context.ts • compose.ts • request.ts 43 Basic app with Wrangler: Total Upload: 34.15 KiB / gzip: 8.26 KiB
44. Three types of Middleware • Built-in Middleware - including the package • Custom Middleware - created by the users • Third-party Middleware - depends on external libraries 44
45. Built-in Middleware • Basic Auth • Bearer Auth • Cache • Compress • CORS • Etag • html • JSX • JWT Auth • Logger • Pretty JSON • Serve Static • Validator 45
46. JSX Middleware 46
47. Validator Middleware 47
48. Custom Middleware 48
49. Third-party Middleware 49 • GraphQL Server • Firebase Auth • Sentry • tRPC (?) ref: https://github.com/honojs/hono/issues/582
50. Great 👍 50
51. Concept 4 Experience 51
52. TypeScript • Wrangler, Deno, and Bun fi rst-class support TypeScript. 52
53. Path parameters 53
54. Validator Middleware 54
55. Easy to write tests • With `jest-environment-mini fl are` • We can do test `Request` to `Response` 55
56. Great 👍 56
57. Example: Blog 57
58. import 58
59. Model 59
60. Logic 60
61. JSX 61
62. GET / 62
63. POST /post 63
64. Use cases in the real world 64
65. 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
66. With Cloudflare D1 66 ref: https://blog.cloud fl are.com/making-static-sites-dynamic-with-cloud fl are-d1/
67. Cache control 67 ref: https://yusukebe.com/posts/2022/wsh/
68. Express alternative on Bun 68
69. Feature plans 69
70. Ecosystem • For Third-party Middleware • monorepo • API specs as Types • tRPC like, but integrated 70
71. API specs as Types 71 ref: https://github.com/honojs/hono/issues/582
72. And... 72
73. Going to Standard web framework for Web standards 73
74. One more thing 74
75. 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.
76. Love 76
77. Thanks • Thanks to all contributors, all supporters, and all users!! 77
78. Try Hono! 78 https://honojs.dev