$30 off During Our Annual Pro Sale. View Details »

Hono v3 and v4

Yusuke Wada
November 19, 2023

Hono v3 and v4

JSConf JP
Nov 19, 2023. Yusuke Wada

Yusuke Wada

November 19, 2023
Tweet

More Decks by Yusuke Wada

Other Decks in Programming

Transcript

  1. Hono v3 and v4
    JSConf JP
    Nov 19, 2023. Yusuke Wada

    View Slide

  2. ࣗݾ঺հ
    • Yusuke Wada
    • Web framework developer
    • Developer Advocate @Cloud
    fl
    are
    • Bokete co-founder
    • Creator of Hono
    • https://github.com/yusukebe

    View Slide

  3. ࠓ೔ͷτϐοΫ
    1. Hono v3.*ͷػೳ
    2. Hono v4ͰͲ͏ͳΔͷ͔ʁ

    View Slide

  4. Honoͱ͸ʁ
    • Web-framework runs on any JavaScript runtime.
    • Fast, Lightweight, Web-standards.
    • Works on…
    • Cloud
    fl
    are Workers
    • Deno
    • Bun
    • Node.js
    • Fastly Compute
    • AWS Lambda
    • Vercel
    • Others!
    https://hono.dev

    View Slide

  5. GitHub Stars ⭐

    View Slide

  6. Who is using Hono?
    • cdnjs API Server
    • Poly
    fi
    ll.io
    • Deno Docs
    • Ultra
    • Cloud
    fl
    are Blog
    • Workers SDK
    • Cloud
    fl
    are D1
    • Drivly
    • SticAI
    • Skill Struck
    • Reejs
    • toddle
    • LanderLab
    • OpenStatus
    • Loglib
    • repeat.dev
    • Nodecraft
    • Hwy
    • Unkey
    • AI.LS
    • ExpenSee
    • Others!

    View Slide

  7. v2·ͰͷҰൠతͳػೳ
    • ϧʔςΟϯά
    • Request/ResponseΛѻ͏
    • Text/JSON/HTMLϨεϙϯεΛฦ͢
    • ϛυϧ΢ΣΞΛ࢖͏
    • Bindingsɺม਺Λѻ͏
    • Cloud
    fl
    are WorkersɺDenoɺBunͰಈ͔͢

    View Slide

  8. v3.*ͰೖͬͨػೳΛ঺հ͠·͢
    • v3.0.0 => 2023/02/18ʹϦϦʔε
    • v.3.10.0 => 2023/11/13ʹϦϦʔε
    • جຊతʹsemverΛक͍ͬͯΔͷͰminorϦϦʔεΛ঺հ
    • ͋ͳ͕ͨ஌Βͳ͍͔΋͠Εͳ͍Hono

    View Slide

  9. v3.0.0 - 2023/02/18
    • HonoRequest
    • RegExpRouter becomes the fastest router
    • Good-bye StaticRouter
    • New Validator
    • RPC
    • Adapter
    • Muti-runtime CI Support
    • Support WinterCG Runtime Keys
    • create-hono
    • @honojs to @hono

    View Slide

  10. RegExpRouter becomes the fastest router
    2023೥2݄࣌఺ͷϕϯνϚʔΫͰ͢
    • RegExpRouter͕
    JavaScriptքͰ1൪
    ଎͍ϧʔλʔͷͻͱ
    ͭʹͳͬͨ

    View Slide

  11. New Validator
    • ബ͘ͳͬͨ
    • ZodɺValibotɺTypeBox
    ͳͲ֎෦ͷValidatorΛ࢖
    ༻͢Δ3rd-partyϥΠϒ
    ϥϦ
    • ܕ෇͚

    View Slide

  12. RPC-mode
    • ΫϥΠϯτΛੜ੒͢Δ`hc()`Λಋೖ
    • αʔόʔଆͷܕΛड͚౉͠ɺAPIεϖοΫΛڞ༗͢Δ
    • tRPCͷΑ͏͕ͩɺ͍ͭ΋ͷΞϓϦΛ؆୯ʹҠߦͰ͖Δ
    • ྫ͑͹Zod/Zod Validator/hcͷελοΫͰͰ͖Δ

    View Slide

  13. View Slide

  14. Multi-runtime CI Support
    2023೥11݄ݱࡏɺMainͷଞʹ7ͭͷϥΠϯλΠϜͷςετ͕૸Δ

    View Slide

  15. 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.

    View Slide

  16. `env` for getting environment variables for multi-runtimes
    • ϥϯλΠϜʹґଘͤͣಁաతʹ؀ڥม਺Λऔಘ͢ΔͨΊͷ`env()`

    View Slide

  17. AWS Lambda Adapter
    • AWS LambdaʹରԠ

    View Slide

  18. 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

    View Slide

  19. New Routers
    • LinearRouter
    • ϧʔςΟϯάͷొ࿥͕଎͍ϧʔλʔ
    • PatternRouter
    • ͱʹ͔͘খ͍͞ϧʔλʔ
    ܭ5ͭͷϧʔλʔʹͳͬͨ
    TrieRouter
    RegExpRouter
    SmartRouter
    LinearRouter
    PatternRouter

    View Slide

  20. Presets: `hono/tiny`, `hono/quick`
    • `hono/tiny`
    • PatternRouterͷΈ
    • খ͍͞
    • 13KB
    • `hono/quick`
    • LinearRouterͱTrieRouter
    • ϧʔτͷొ࿥͕଎͍

    View Slide

  21. ͲͷPresetΛ࢖͏΂͖͔
    hono ଎͍
    DenoɺBunɺNode.js

    Cloud
    fl
    are Workers
    hono/quick ొ࿥͕଎͍ Fastly Compute
    hono/tiny খ͍͞ Ϧιʔε͕ݶΒΕ͍ͯΔ؀ڥ

    View Slide

  22. app.mount()
    • ͲΜͳ`fetch` ΞϓϦέʔγϣϯͰ΋mountͰ͖Δ

    View Slide

  23. itty-router, Remix, Qwik City, Solid StartͳͲ͍͚Δ

    View Slide

  24. ֤ϑϨʔϜϫʔΫ͕ΞμϓλΛ࡞͍ͬͯͨ

    View Slide

  25. HonoʹϚ΢ϯτͤ͞Ε͹ͲΜͳϓϥοτϑΥʔϜͰ΋ಈ͘

    View Slide

  26. Node.js adapter server v1.0.0
    • Poly
    fi
    llͳ͠ɺNode.jsωΠςΟϒͳWeb-standards APIͷΈΛ࢖༻

    View Slide

  27. v3.3.0 - 2023/07/11
    • Server-Timing Middleware
    • Lambda@Edge Adapter

    View Slide

  28. Server-Timing Middleware
    • Server-Timing APIΛ࢖ͬͯύ
    ϑΥʔϚϯεܭଌ͕Ͱ͖Δ

    View Slide

  29. v3.4.0 - 2023/08/08
    • Netlify Adapter
    • Cookie Middleware supports Signed Cookies

    View Slide

  30. v3.5.0 - 2023/08/21
    • Secure Headers Middleware
    • Introduce “Helpers”
    • Zod OpenAPI Hono

    View Slide

  31. Secure Headers Middleware
    • ηΩϡϦςΟʹ·ͭΘΔϔο
    μͷઃఆ͕Ͱ͖Δ
    • ExpressͷHelmet૬౰

    View Slide

  32. Introduce “Helpers”
    • ϛυϧ΢ΣΞͱ͸ҧ͍ศརϝιουΛఏڙ͢Δ

    View Slide

  33. ࠓ͋ΔHelpers
    • Adapter
    • Cookie
    • Factory
    • html
    • JWT
    • Streaming
    • Testing

    View Slide

  34. Zod OpenAPI Hono
    • ଴๬ͷOpenAPIαϙʔτ
    • HonoΛϥοϓͨ͠Ϋϥε
    • Zodͱ”Zod to OpenAPI”Λ࢖͍ͬͯΔ

    View Slide

  35. 1. ZodͰεΩʔϚΛॻ͘

    View Slide

  36. 2. ϧʔτΛ࡞Δ

    View Slide

  37. 3. ΞϓϦʹ͢Δ

    View Slide

  38. 4. JSONͷυΩϡϝϯτ͕ు͚Δ

    View Slide

  39. View Slide

  40. 5. Swagger UI Middlewareͱ૊Έ߹ΘͤΔ

    View Slide

  41. View Slide

  42. ܕ͕ͭ͘

    View Slide

  43. 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

    View Slide

  44. Introduce `c.render()`
    • HTMLͷϨΠΞ΢τΛ؆୯ʹͭͬͯ͘దԠ͠΍͘͢
    Middleware
    Handler
    Result

    View Slide

  45. Vite dev-server for Hono
    • `@hono/vite-dev-server`
    • Viteͷಠࣗdev serverΛఏڙ͢ΔVite plugin
    • Viteܦ༝Ͱ`fetch`ΞϓϦΛ։ൃͰ͖Δ
    • ࠶ىಈɺϦϩʔυ͕଎͍
    • ϑϩϯτ΋ରԠ
    • Cloud
    fl
    areͷBindings΋αϙʔτ͍ͯ͠Δ

    View Slide

  46. View Slide

  47. v3.7.0 - 2023/09/21
    • `c.stream()` and `c.streamText()`
    • Testing Helper
    • JWT helper

    View Slide

  48. `c.stream()` and `c.streamText()`
    • ଴๬ͷStreamରԠ
    • Zod OpenAPIͱ߹ΘͤͯAI readyʹ

    View Slide

  49. View Slide

  50. 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

    View Slide

  51. JSX Renderer Middleware
    • `c.render()`Ͱ࢖͏ͨΊͷϨΠΞ΢τΛ
    JSXͰఆٛ͠΍͘͢
    • `useRequestContext()`ͰContextΦ
    ϒδΣΫτ͕औΕΔΑ͏ʹͳΔ

    View Slide

  52. Streaming Helper
    • `streamSSE()`ͰServer-Sent Events͕ు͚Δ

    View Slide

  53. Factory Helper
    • `createMiddleware()`͕஍ຯʹศར
    • ܕղܾΛ΍ͬͯ͘Δ

    View Slide

  54. v3.9.0 - 2023/10/27
    • Improving the Developer Experience for JSX
    • Clerk Middleware
    • New Starter Template for Cloud
    fl
    are Pages

    View Slide

  55. Improving the Developer Experience for JSX
    • λάʹܕ͕͍ͭͨɻΤσΟλͰิॿͯ͘͠ΕΔ

    View Slide

  56. New Starter Template for Cloudflare Pages
    • `@hono/vite-dev-server`Λར༻ͨ͠৽͍͠ελʔλʔ

    View Slide

  57. v3.10.0 - 2023/11/13
    • JSX supports Async Components
    • Introduce `Suspense` and `renderToReadableStream()`
    • JSX Renderer Middleware supports `stream`
    • Support `@jsx precompile` for Deno

    View Slide

  58. JSX supports Async Components
    • JSXͷίϯϙʔωϯτͷதͰasync/awaitͰ͖Δ

    View Slide

  59. Introduce `Suspense` and `renderToReadableStream()`
    • AsyncComponent͸`fetch`͕ऴΘΔ·Ͱawait͢Δ
    • SuspenseΛ`renderToReadableStream()`ͱ࢖͏ͱ`fetch`͕ऴΘΔؒ͸
    fallbackΛදࣔɺղܾ͞ΕͨΒ݁ՌΛදࣔ

    View Slide

  60. View Slide

  61. View Slide

  62. JSX Renderer Middleware supports `stream`
    • `stream: true`ʹ͢Δ͜ͱͰ
    StreamingͷϨεϙϯεʹͳΔ

    View Slide

  63. v3.*Ͱಋೖ͞ΕͨػೳΛΈ͖ͯ·ͨ͠
    • v3.0.0 => 2023/02/18
    • v3.1.0 => 2023/03/17
    • v3.2.0 => 2023/05/19
    • v3.3.0 => 2023/07/11
    • v3.4.0 => 2023/08/08
    • v3.5.0 => 2023/08/21
    • v3.6.0 => 2023/09/11
    • v3.7.0 => 2023/09/21
    • v3.8.0 => 2023/10/19
    • v3.9.0 => 2023/10/27
    • v3.10.0 => 2023/11/13

    View Slide

  64. ࢖ͬͯΈͯͩ͘
    ͍͞

    View Slide

  65. v4?

    View Slide

  66. v4?
    When? What?

    View Slide

  67. What is
    introduced in v4?

    View Slide

  68. File-base
    Routing??

    View Slide

  69. Thanks

    View Slide