Honoとhtmx - Speaker Deck

Slide 1

Slide 1 text

Honoͱhtmx Yusuke Wada - 2024/3/15 Ya8 2024 - Ϡύνʔ ྩ࿨࿡೥࠷৽൛(Ծ)

Slide 2

Slide 2 text

Honoͱhtmxʹ͍ͭͯ࿩͠·͢ 1. αʔόʔαΠυJSXʹ͍ͭͯ 2. Hono+htmxελοΫʹ͍ͭͯ 3. HonoͷClient Componentsʹ͍ͭͯ

Slide 3

Slide 3 text

1. αʔόʔαΠυJSXʹ͍ͭͯ

Slide 4

Slide 4 text

Honoʹ͸ϏϧυΠϯͷJSX͕͋Δ • `hono/jsx` • ࠷ۙ·ͰαʔόʔαΠυͷΈͩͬͨ • React͕ϑϩϯτΤϯυ͔ΒͰ͖ͯͨͷͰαʔόʔαΠυ͚ͩ͸௝͍͠ͱࢥ͏ • ͜ͷJSX͕htmxͱ૬ੑ͕͍͍ͱऔΓࠫଡ͞Ε͍ͯΔ

Slide 5

Slide 5 text

hono/jsxͷྺ࢙1 • ࠷ॳ͸HTMLग़ྗͰ͸Mustache͕͋ͬͨ

Slide 6

Slide 6 text

hono/jsxͷྺ࢙2 • ଞͷςϯϓϨʔτΤϯδϯʢHandlebarsɺejsͱ͔ʣΛೖΕ͔ͨͬͨ • ͔͠͠eval͕࢖͑ͳ͍ ← Τοδɺͱ͍͏͔Cloud fl are Workersͱ૬ੑ͕ѱ͍ • micro-template.js Λ࢖͏ͱ͢Δ΋…

Slide 7

Slide 7 text

hono/jsxͷྺ࢙3 • @usualoma͞Μ͕JSXΛఏҊ

Slide 8

Slide 8 text

hono/jsxͷྺ࢙4 • 2022-06-05஀ੜʂ • 2022-07-10ʹ͸Mustache Middleware͕ഇࢭ

Slide 9

Slide 9 text

hono/jsxͷྺ࢙5 • ͦͷࠒ͔ΒHotwireͷ࿩୊Λ͍ͩͯ͠Δ • ʮJSXͷSSRͱHotwireͷ૊Θͤ͸Αͦ͞͏ɻHono+JSX͸ReactΑΓRailsͬΆ͍ ͔ΒɺHotwire͸૬ੑ͍͍ͱࢥ͏ʯ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

`hono/jsx` • JSX͸JavaScriptؔ਺ͷγϯλοΫεγϡΨʔ • jsx(component, props, children) Λݺͼग़͢ • `hono/jsx`͸stringΛDOMͰ͸ͳ͘stringΛग़ྗ͢Δ • ReactͷrenderToString()૬౰͕ͳͯ͘΋จࣈྻʹͳΔ • ͳͷͰԼͷίʔυ͸ಈ͘

Slide 12

Slide 12 text

͜Ε͚ͩͰॻ͚Δ

Slide 13

Slide 13 text

ίϯϙʔωϯτ΋ॻ͚ΔͷͰ͍͍͍͚ͩͨΔ

Slide 14

Slide 14 text

`hono/jsx`ศརʂ

Slide 15

Slide 15 text

2. Hono+htmxελοΫʹ͍ͭͯ

Slide 16

Slide 16 text

htmx͕੝Γ্͕ΔͱHono+htmxʹ஫໨͕ • ελοΫʹͳΔ ← ࠷ۙ͸΍ͨΒͱελοΫʹ͕ͨ͠Δ • ྫ:T3 Stack = Next.jsɺtRPCɺTailwind CSSɺTypeScript… • HonoʢಛʹJSX͕͋Δ͔ΒʣͱhtmxͷελοΫ

Slide 17

Slide 17 text

6࣌ؒલʹ΋ʮCHHATʯͳΔελοΫʂ

Slide 18

Slide 18 text

CloudflareͱͷελοΫͷݩ૆

Slide 19

Slide 19 text

ϒϩάॻ͍ͨʮHono + htmx + Cloudflare is a new stackʯ • ελοΫ • Hono + ૊ΈࠐΈJSX • htmx • Zod • Tailwind CSS • Cloud fl are Workers • Cloud fl are D1

Slide 20

Slide 20 text

Zod + Zod Validator͍͍Α

Slide 21

Slide 21 text

͜ͷTODOΞϓϦ͕100ߦͰͰ͖Δ

Slide 22

Slide 22 text

MPAͰ΋ΤοδͰಈ͔ͤ͹଎͍ͷͰSPAΈ͍ͨͳಈ͖͢Δ

Slide 23

Slide 23 text

ΫϥΠΞϯτ͕ඞཁͳ͍ • ΫϥΠΞϯτϏϧυ͕ඞཁͳ͍ • wrangler/bun/denoίϚϯυ͚ͩͰ͍͚Δʂ • ΫϥΠΞϯτΛؚΊΔͱͲ͏ͯ͠΋Ϗϧυ͠ͳ͍ͱ͍͚ͳ͍ • ΊͪΌͪ͘Όϙʔλϒϧʂ

Slide 24

Slide 24 text

Hono+htmx ͍͍Αʂ

Slide 25

Slide 25 text

3. HonoͷClient Componentsʹ ͍ͭͯ

Slide 26

Slide 26 text

htmx͍͍Μ͚ͩͲ… • ઌఔͷBlogͭ͘Δͷʹۤ࿑ͨ͠ • ঢ়ଶΛ࣋ͭͷ͕Ͱ͖ͳ͍ => Alpine.jsΛ࢖͏͜ͱʹͳΔ • αʔόʔαΠυJSXͱૉͷJavaScript͕ΊͪΌͪ͘Ό૬ੑѱ͍ • ΠϯϥΠϯͰॻ͘͜ͱʹͳΔɺͦΕ͔֎෦ϑΝΠϧ

Slide 27

Slide 27 text

͜͏͍͏ͷ͕ਏ͍

Slide 28

Slide 28 text

HonoͷJSXͰ΋ΫϥΠΞϯτΛαϙʔτ • Client Components => `hono/jsx/dom` • useState/useE ff ect/useRef/useͳͲReactޓ׵ͷϑοΫΛ౥ࡌ • αʔόʔαΠυ࢖Θͣͱ΋;ͭʔʹΫϥΠΞϯτ͚ͩͰ΋ಈ͘

Slide 29

Slide 29 text

DOMʹϋΠυϨʔτͰ͖Δ

Slide 30

Slide 30 text

HonoXͱ࢖͏ͱڧྗ • HonoX͸BYOR͚ͩͲσϑΥϧτ͸hono/jsx • IslandsίϯϙʔωϯτΛSSR/ϋΠυϨʔτ͢Δ • αʔόʔαΠυͰSSRͯ͠ɺΫϥΠΞϯτͷDOM͕஫ೖɺΠϯλϥΫςΟϒ ʹͳΔ • ඞཁͳϖʔδ͚͔ͩ͠JavaScript͕഑৴͞Εͳ͍ • SEOʹ༗རͩ͠ɺͪΒ͖͕ͭͳ͍

Slide 31

Slide 31 text

Honoͷ৔߹ αʔόαΠυͱΫϥΠΞϯτ͕͍ۙͱ ͞Βʹਪ͠ϙΠϯτ͕͋ͬͨ

Slide 32

Slide 32 text

RPC-mode • αʔόʔͱΫϥΠΞϯτؒͰAPIͷSpecΛTypeScriptͷܕͱͯ͠ڞ༗͢Δ • Islandsͱ͍͑ͲɺΫϥΠΞϯτ<=>αʔόʔͷAPIݺͼग़͠͸ൃੜ͢Δ • ͦ͜ͰHono RPCͰ͢Α

Slide 33

Slide 33 text

Next.jsͷதͰHono • ࣮͸Next.jsͷAPIͷதͰHono͕࢖ΘΕΔέʔε͕͋Δ • ͦΕ͸͜ͷRPC-modeΛ࢖͏ͨΊɺಉ͡Α͏ͳ͜ͱ͕HonoXͰΑΓ૬ੑྑ͘ Ͱ͖Δ ͓·؀͸ͪΐͬͱ͓͍ͱ͍ͯ௒ਪ͠͞Ε͍ͯΔ

Slide 34

Slide 34 text

app/routes/index.tsx • HonoXͷϧʔτʹ͸Classical app΋ॻ͚Δ

Slide 35

Slide 35 text

app/islands/todo.tsx • `hono/client`Λ࢖͏

Slide 36

Slide 36 text

`hono/jsx/dom` + HonoX ΘΓͱ͍͍

Slide 37

Slide 37 text

ࠓߟ͍͑ͯΔ͜ͱ • ͱΓ͋͑ͣαεςʔλεͳͷͰυοάϑʔσΟϯά͢Δ • Islands/Client Components/͸ͪΐͬͱෆ҆ఆ͔΋͚ͩͲSSR͸҆ఆ͍ͯ͠Δ • SSG͸ϒϩάΛͭ͘Δͷʹศརʢhono/jsx/dom͡Όͳ͍͚Ͳʣ

Slide 38

Slide 38 text

package by feature • σΟϨΫτϦʹ͢Δ͔͸͓͍ͱ͍ͯྑͦ͞͏ʢͳؾ͕ͯ͠Δʣ

Slide 39

Slide 39 text

Islands͚ͩͰ΋ۙ͘ʹ͋Δͱ࢖͍΍͍͢ • ͜Μͳͷ͸Ͳ͏ͩΖ͏͔

Slide 40

Slide 40 text

Α͍͖ͯ͘͠· ͢

Slide 41

Slide 41 text

·ͱΊ 1. αʔόʔαΠυJSXʹ͍ͭͯ 2. Hono+htmxελοΫʹ͍ͭͯ 3. HonoͷClient Componentsʹ͍ͭͯ React/Next.jsͱ͸ҧ ͏ΞϓϩʔνͰ໘ന͍