Hono v3 and v4

JSConf JP
Nov 19, 2023. Yusuke Wada

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