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

🔥 Hono v4 やってみた

Avatar for circled9 circled9
February 23, 2024
Technology
250
1

🔥 Hono v4 やってみた

Avatar for circled9

circled9

February 23, 2024

More Decks by circled9

See All by circled9
キースイッチ入門
Avatar for circled9 circled9
0
120
CloudflareのAI関連の機能さわってみた
Avatar for circled9 circled9
0
970
0.0.0.0 day
Avatar for circled9 circled9
0
140
小数の丸め誤差の話
Avatar for circled9 circled9
0
160
数値の文字列をパースしよう
Avatar for circled9 circled9
0
290
JetBrains AI Assistant を試してみた
Avatar for circled9 circled9
1
610
Fresh
Avatar for circled9 circled9
0
280
React Hooks 勉強会 vol.3
Avatar for circled9 circled9
2
470
JSON.stringify()
Avatar for circled9 circled9
2
510

Other Decks in Technology

See All in Technology
Android skills に学ぶ
Avatar for kokiko kokiko
0
160
2027年のMetricKit
Avatar for Kanta Oikawa kantacky
0
160
Flutter × BLE Centralを自前Pluginで実装する設計パターン - MethodChannel / EventChannelで作る双方向ブリッジの実践 / Building Custom Flutter BLE Central Plugins: Bidirectional Bridging with Method & Event Channels
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
240
生成 AI の基礎 〜 サンプル実装で学ぶ基本原理
Avatar for Etsuji Nakai enakai00
7
4.6k
Kiro Crew で始める マルチエージェント開発
Avatar for Kazuki Miura miu_crescent
PRO
0
170
関東Kaggler会発表資料
Avatar for takoi takoi
1
290
巨大気象データと戦う ― サロゲートモデル学習を高速化する圧縮技術
Avatar for GPU UNITE gpuunite_official
0
250
What's new in Go 1.27?
Avatar for Koya IWAMURA ciarana
0
380
医療の現場を変革に挑戦した半年間の軌跡 - PythonとAIで現場を変える / From Code to Care
Avatar for soudai sone soudai
PRO
1
590
AIで変わるエンジニアの働き方（仮）
Avatar for naoinaoi naoinaoi
0
480
AIに狂うスタートアップが、あえて「人との協働」に全振りした新卒エンジニア研修 / New Graduate Engineer Training at a Startup Accelerating AI Adoption
Avatar for akira ohno ohnoeight
0
200
Model Studio CLI × Token Plan
Avatar for 尾関将樹 | めい maigo999
0
210

Featured

See All Featured
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
380
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4.4k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
360
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
480
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
4.5M
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
210
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
400
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
250

Transcript

  1. 🔥 Hono v4 ΍ͬͯΈͨ Niigata 5min Tech #5 in Nagaoka

    @circled9 1

  2. ࣗݾ঺հ @circled9 দҪɹਖ਼ࢤʢMatsui Masashiʣ גࣜձࣾϞχΫϧ ࣾ಺޲͚ͷࡒ຿γεςϜ࡞ͬͯ·͢ 60%ΩʔϘʔυ͓͡͞Μ 2

  3. ࠓ೔࿩͍ͨ͜͠ͱ • Hono͸͍͍ͧͱ͍͏࿩ • v4Ͱ৽͘͠૿͑ͨػೳͷ࿩ • ࣮ࡍʹࢼͨ͠ײ૝ 3

  4. 🔥 Hono 4

  5. 🔥 Hono is Կ ? • JavaScriptͷWebϑϨʔϜϫʔΫ • "Hono -

    Ultrafast web framework for the Edges" 5

  6. 🔥 Hono is ... • 🚀 Ultrafast & Lightweight •

    🌍 Multi-runtime • 🔋 Batteries Included • 😃 Delightful DX 6

  7. 🚀 Ultrafast & Lightweight • ΊͬͪΌ଎͍ɺ͍ͦͯܰ͠ • "The router RegExpRouter

    is really fast. Not using linear loops. Fast." • "The hono/tiny preset is under 14kB. Hono has zero dependencies and uses only the Web Standard API." 7

  8. 🌍 Multi-runtime • େମͲ͜Ͱ΋ಈ͘ • "Works on Cloud fl are

    Workers, Fastly Compute, Deno, Bun, AWS Lambda, or Node.js. The same code runs on all platforms." 8

  9. 🔋 Batteries Included • ඞཁͳ΋ͷ͸େମ͋Δ • "Hono has built-in middleware,

    custom middleware, third-party middleware, and helpers. Batteries included." 9

  10. 😃 Delightful DX • TypeScriptͰ΋όονϦ • "Super clean APIs. First-class

    TypeScript support. Now, we've got "Types"." 10

  11. 💪 ͦΕҎ֎ͷಛ௃ 11

  12. JSX const View = () => { return ( <html>

    <body> <h1>Hello Hono!</h1> </body> </html> ) } app.get('/page', (c) => { return c.html(<View />) }) 12

  13. hono/css const buttonClass = css` background-color: #fff; &:hover { background-color:

    red; } ` 13

  14. 🔥 Hono v4 14

  15. 🔥 Hono v4 • Static Site Generation • Client Components

    • File-based Routing 15

  16. Static Site Generation • ੩తͳWebϖʔδΛॻ͖ग़ͤΔΑ͏ʹͳͬͨ • viteΛ࢖ͬͯΊͬͪΌշదʹ։ൃͰ͖Δ • Β͍͠ɺ·ͩࢼ͍ͯ͠ͳ͍ 16

  17. Client Components • hono/jsx͕ΫϥΠΞϯτͰ΋ಈ͘Α͏ʹͳͬͨ • ΫϥΠΞϯτͰಈ͘͠hooks΋࢖͑Δ • ReactΛ૊ΈࠐΜͩͷͰ͸ͳࣗ͘લ࣮૷Β͍͠ʢʂʁʣ • ΊͪΌͪ͘Ό͍ܰ

    17

  18. εήʔʂ 18

  19. File-based Routing • HonoXͱ͍͏ผύοέʔδ • ϑΝΠϧͷஔ͖৔ॴΛݩʹΑ͠ͳʹϧʔςΟϯάͯ͘͠ΕΔ • ϋΠυϨʔγϣϯ͢Δɾ͠ͳ͍Λ෼͚ΒΕΔ 19

  20. ✅ ΍ͬͯΈͨ 20

  21. ✅ ΍ͬͯΈͨ • TodoAppΛ࡞ͬͯΈͨ • DB΁ͷอଘ͸໘౗ͳͷͰׂѪɺϝϞϦ্ʹอଘ͢Δ͚ͩ 21

  22. ૉࡐͷຯΛੜ͔ͨ͠TodoApp 22

  23. ✅ Ͱ͖ͨʂ 23

  24. ✨ վળͯ͠ΈΔ • ݟͨ໨͕ΠϚΠνͳͷͰhono/cssͰ͖Ε͍ʹ͢Δ • νΣοΫϘοΫεͷ࣮૷ΛαϘͬͯͨͷͰɺνΣοΫͨ͠Βอଘ͢Δ Α͏ʹ͢Δ 24

  25. ✨ Ͱ͖ͨʂ 25

  26. γϟϨΦπͳTodoApp 26

  27. 😭 ϑΥʔϜΘ͔ΒΜ໰୊ • ϑΥʔϜΛ࢖͏ػձ͕গͳ͔ͬͨͷͰϑΥʔϜͷ͜ͱ͕Θ͔Βͳ͍ • PUT/DELETEͰ͖ͳ͍ͷʁ • νΣοΫϘοΫεԡͨ࣌͠ʹformΛૹ৴͢ΔͷͲ͏͢Μͷʁ • etc...

    27

  28. ൓ল • HTMLΛษڧ͠௚͢͜ͱʹͨ͠ • جૅతͳ஌͕͓ࣝΖ͔ͦʹͳͬͯ ͍ΔͷΛײͨ͡ • HTML5ͷࠒ͔Β஌͕ࣝࢭ·ͬͯ ͍Δͷ΋ײͨ͡ 28

  29. 📚 ·ͱΊ • Hono͸͍͍ͧ • ଎͍ɺ͍ܰɺΘ͔Γ΍͍͢ • Web Standardͱͯ΋େࣄ 29