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

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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  5. GitHub Stars ⭐

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

  16. AWS Lambda Adapter
    • AWS LambdaʹରԠ

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 2. ϧʔτΛ࡞Δ

    View full-size slide

  36. 3. ΞϓϦʹ͢Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. 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 full-size slide

  56. ࢖ͬͯΈͯͩ͘
    ͍͞

    View full-size slide

  57. v4?
    When? What?

    View full-size slide

  58. What is
    introduced in v4?

    View full-size slide

  59. File-base
    Routing??

    View full-size slide