Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Honoとhtmx
Search
Yusuke Wada
March 15, 2024
Programming
6
1.8k
Honoとhtmx
Yusuke Wada - 2024/3/15
Ya8 2024 - ヤパチー 令和六年最新版(仮)
Yusuke Wada
March 15, 2024
Tweet
Share
More Decks by Yusuke Wada
See All by Yusuke Wada
MCP with Cloudflare Workers
yusukebe
2
220
Remix on Hono on Cloudflare Workers
yusukebe
3
430
僕がつくった48個のWebサービス達
yusukebe
20
17k
Honoの来た道とこれから
yusukebe
20
4.8k
JS RPCを理解する
yusukebe
5
720
Cloudflare Workersの環境を再現することについて
yusukebe
7
1k
Hono v4
yusukebe
11
5k
Hono v3 and v4
yusukebe
4
3.9k
The power of Web-standards
yusukebe
4
1.7k
Other Decks in Programming
See All in Programming
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
2
110
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
340
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
nekko cloudにおけるProxmox VE利用事例
irumaru
3
430
暇に任せてProxmoxコンソール 作ってみました
karugamo
2
720
Recoilを剥がしている話
kirik
5
6.8k
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
3
480
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
130
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
140
Kaigi on Railsに初参加したら、その日にLT登壇が決定した件について
tama50505
0
100
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
220
Featured
See All Featured
A designer walks into a library…
pauljervisheath
204
24k
GitHub's CSS Performance
jonrohan
1030
460k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Building Your Own Lightsaber
phodgson
103
6.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Transcript
Honoͱhtmx Yusuke Wada - 2024/3/15 Ya8 2024 - Ϡύνʔ ྩ࠷৽൛(Ծ)
Honoͱhtmxʹ͍ͭͯ͠·͢ 1. αʔόʔαΠυJSXʹ͍ͭͯ 2. Hono+htmxελοΫʹ͍ͭͯ 3. HonoͷClient Componentsʹ͍ͭͯ
1. αʔόʔαΠυJSXʹ͍ͭͯ
HonoʹϏϧυΠϯͷJSX͕͋Δ • `hono/jsx` • ࠷ۙ·ͰαʔόʔαΠυͷΈͩͬͨ • React͕ϑϩϯτΤϯυ͔ΒͰ͖ͯͨͷͰαʔόʔαΠυ͚͍ͩ͠ͱࢥ͏ • ͜ͷJSX͕htmxͱ૬ੑ͕͍͍ͱऔΓࠫଡ͞Ε͍ͯΔ
hono/jsxͷྺ࢙1 • ࠷ॳHTMLग़ྗͰMustache͕͋ͬͨ
hono/jsxͷྺ࢙2 • ଞͷςϯϓϨʔτΤϯδϯʢHandlebarsɺejsͱ͔ʣΛೖΕ͔ͨͬͨ • ͔͠͠eval͕͑ͳ͍ ← Τοδɺͱ͍͏͔Cloud fl are Workersͱ૬ੑ͕ѱ͍
• micro-template.js Λ͏ͱ͢Δ…
hono/jsxͷྺ࢙3 • @usualoma͞Μ͕JSXΛఏҊ
hono/jsxͷྺ࢙4 • 2022-06-05ੜʂ • 2022-07-10ʹMustache Middleware͕ഇࢭ
hono/jsxͷྺ࢙5 • ͦͷࠒ͔ΒHotwireͷΛ͍ͩͯ͠Δ • ʮJSXͷSSRͱHotwireͷΘͤΑͦ͞͏ɻHono+JSXReactΑΓRailsͬΆ͍ ͔ΒɺHotwire૬ੑ͍͍ͱࢥ͏ʯ
None
`hono/jsx` • JSXJavaScriptؔͷγϯλοΫεγϡΨʔ • jsx(component, props, children) Λݺͼग़͢ • `hono/jsx`stringΛDOMͰͳ͘stringΛग़ྗ͢Δ
• ReactͷrenderToString()૬͕ͳͯ͘จࣈྻʹͳΔ • ͳͷͰԼͷίʔυಈ͘
͜Ε͚ͩͰॻ͚Δ
ίϯϙʔωϯτॻ͚ΔͷͰ͍͍͍͚ͩͨΔ
`hono/jsx`ศརʂ
2. Hono+htmxελοΫʹ͍ͭͯ
htmx͕Γ্͕ΔͱHono+htmxʹ͕ • ελοΫʹͳΔ ← ࠷ۙͨΒͱελοΫʹ͕ͨ͠Δ • ྫ:T3 Stack = Next.jsɺtRPCɺTailwind
CSSɺTypeScript… • HonoʢಛʹJSX͕͋Δ͔ΒʣͱhtmxͷελοΫ
6࣌ؒલʹʮCHHATʯͳΔελοΫʂ
CloudflareͱͷελοΫͷݩ
ϒϩάॻ͍ͨʮHono + htmx + Cloudflare is a new stackʯ •
ελοΫ • Hono + ΈࠐΈJSX • htmx • Zod • Tailwind CSS • Cloud fl are Workers • Cloud fl are D1
Zod + Zod Validator͍͍Α
͜ͷTODOΞϓϦ͕100ߦͰͰ͖Δ
MPAͰΤοδͰಈ͔͍ͤͷͰSPAΈ͍ͨͳಈ͖͢Δ
ΫϥΠΞϯτ͕ඞཁͳ͍ • ΫϥΠΞϯτϏϧυ͕ඞཁͳ͍ • wrangler/bun/denoίϚϯυ͚ͩͰ͍͚Δʂ • ΫϥΠΞϯτΛؚΊΔͱͲ͏ͯ͠Ϗϧυ͠ͳ͍ͱ͍͚ͳ͍ • ΊͪΌͪ͘Όϙʔλϒϧʂ
Hono+htmx ͍͍Αʂ
3. HonoͷClient Componentsʹ ͍ͭͯ
htmx͍͍Μ͚ͩͲ… • ઌఔͷBlogͭ͘Δͷʹۤ࿑ͨ͠ • ঢ়ଶΛ࣋ͭͷ͕Ͱ͖ͳ͍ => Alpine.jsΛ͏͜ͱʹͳΔ • αʔόʔαΠυJSXͱૉͷJavaScript͕ΊͪΌͪ͘Ό૬ੑѱ͍ •
ΠϯϥΠϯͰॻ͘͜ͱʹͳΔɺͦΕ͔֎෦ϑΝΠϧ
͜͏͍͏ͷ͕ਏ͍
HonoͷJSXͰΫϥΠΞϯτΛαϙʔτ • Client Components => `hono/jsx/dom` • useState/useE ff ect/useRef/useͳͲReactޓͷϑοΫΛࡌ
• αʔόʔαΠυΘͣͱ;ͭʔʹΫϥΠΞϯτ͚ͩͰಈ͘
DOMʹϋΠυϨʔτͰ͖Δ
HonoXͱ͏ͱڧྗ • HonoXBYOR͚ͩͲσϑΥϧτhono/jsx • IslandsίϯϙʔωϯτΛSSR/ϋΠυϨʔτ͢Δ • αʔόʔαΠυͰSSRͯ͠ɺΫϥΠΞϯτͷDOM͕ೖɺΠϯλϥΫςΟϒ ʹͳΔ • ඞཁͳϖʔδ͚͔ͩ͠JavaScript͕৴͞Εͳ͍
• SEOʹ༗རͩ͠ɺͪΒ͖͕ͭͳ͍
Honoͷ߹ αʔόαΠυͱΫϥΠΞϯτ͕͍ۙͱ ͞Βʹਪ͠ϙΠϯτ͕͋ͬͨ
RPC-mode • αʔόʔͱΫϥΠΞϯτؒͰAPIͷSpecΛTypeScriptͷܕͱͯ͠ڞ༗͢Δ • Islandsͱ͍͑ͲɺΫϥΠΞϯτ<=>αʔόʔͷAPIݺͼग़͠ൃੜ͢Δ • ͦ͜ͰHono RPCͰ͢Α
Next.jsͷதͰHono • ࣮Next.jsͷAPIͷதͰHono͕ΘΕΔέʔε͕͋Δ • ͦΕ͜ͷRPC-modeΛ͏ͨΊɺಉ͡Α͏ͳ͜ͱ͕HonoXͰΑΓ૬ੑྑ͘ Ͱ͖Δ ͓·ͪΐͬͱ͓͍ͱ͍ͯਪ͠͞Ε͍ͯΔ
app/routes/index.tsx • HonoXͷϧʔτʹClassical appॻ͚Δ
app/islands/todo.tsx • `hono/client`Λ͏
`hono/jsx/dom` + HonoX ΘΓͱ͍͍
ࠓߟ͍͑ͯΔ͜ͱ • ͱΓ͋͑ͣαεςʔλεͳͷͰυοάϑʔσΟϯά͢Δ • Islands/Client Components/ͪΐͬͱෆ҆ఆ͔͚ͩͲSSR҆ఆ͍ͯ͠Δ • SSGϒϩάΛͭ͘Δͷʹศརʢhono/jsx/dom͡Όͳ͍͚Ͳʣ
package by feature • σΟϨΫτϦʹ͢Δ͔͓͍ͱ͍ͯྑͦ͞͏ʢͳؾ͕ͯ͠Δʣ
Islands͚ͩͰۙ͘ʹ͋Δͱ͍͍͢ • ͜ΜͳͷͲ͏ͩΖ͏͔
Α͍͖ͯ͘͠· ͢
·ͱΊ 1. αʔόʔαΠυJSXʹ͍ͭͯ 2. Hono+htmxελοΫʹ͍ͭͯ 3. HonoͷClient Componentsʹ͍ͭͯ React/Next.jsͱҧ ͏ΞϓϩʔνͰ໘ന͍
ͬͯΈ͍ͯͩ͘͞
͓͠·͍