Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yusuke Wada
November 26, 2022

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

More Decks by Yusuke Wada

Other Decks in Programming

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 [email protected] • Deno • Bun • Node.js • and more... 11
  12. The same code runs on all platforms 12

  13. Cloudflare Workers and Bun

  14. Fastly [email protected] 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/[email protected]/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
  35. None
  36. RegExpRouter • Match the route with using one big Regex

    made before dispatch. • By @usualoma • https://speakerdeck.com/usualoma/ultrafast-js-router 36
  37. 37

  38. StaticRouter • Optimized for static routings • Does not support

    dynamic routings such as "path parameters" 38
  39. None
  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