Hono v3 and v4 - Speaker Deck

Hono v3 and v4

by Yusuke Wada

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

GitHub Stars ⭐

Slide 6

Slide 6 text

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!

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

AWS Lambda Adapter • AWS LambdaʹରԠ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ͲͷPresetΛ࢖͏΂͖͔ hono ଎͍ DenoɺBunɺNode.js  Cloud fl are Workers hono/quick ొ࿥͕଎͍ Fastly Compute hono/tiny খ͍͞ Ϧιʔε͕ݶΒΕ͍ͯΔ؀ڥ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

1. ZodͰεΩʔϚΛॻ͘

Slide 36

Slide 36 text

2. ϧʔτΛ࡞Δ

Slide 37

Slide 37 text

3. ΞϓϦʹ͢Δ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

ܕ͕ͭ͘

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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