どこでも動くWebフレームワークをつくる

by Yusuke Wada

Slide 1

Slide 1 text

Ͳ͜Ͱ΋ಈ͘8FCϑϨʔϜϫʔΫ Λͭ͘Δ :"1$,ZPUP :VTVLF8BEB )POP 6MUSBGBTUXFCGSBNFXPSLGPSUIF&EHF

Slide 2

Slide 2 text

.F • Yusuke Wada • Supervisor@TravelBook  https://www.travelbook.co.jp • Creator of Bokete • YAPC::Asia 2012/2013 ϕεττʔΫ৆ड৆ • https://github.com/yusukebe • https://twitter.com/yusukebe

Slide 3

Slide 3 text

ࠓ೔ͷςʔϚ ʮͲ͜Ͱ΋ಈ͘8FCϑϨʔϜϫʔΫΛͭ͘Δʯ ˎ+BWB4DSJQUͷ࿩Ͱ͢

Slide 4

Slide 4 text

)POPͱ͍͏8FCϑϨʔϜϫʔΫΛ͍ͭͬͯ͘·͢ IUUQTIPOPEFW 6MUSBGBTUXFCGSBNFXPSLGPSUIF&EHF

Slide 5

Slide 5 text

)POP5SBDLT ʮHonoͷ3+1ͷϧʔλʔͱɺͦ͜ʹͭͳ͕ΔPR͕ ϓϩδΣΫτʹ΋ͨΒͨ͠΋ͷʯ by @usualoma

Slide 6

Slide 6 text

ڈ೥ͷ:"1$+BQBO0OMJOFͰ΋࿩͠·ͨ͠ ΩϟονϑϨʔζ͕มΘΓ·ͨ͠ YAPC::Japan::Online 2022  ʮUltrafast web framework for Cloud fl are Workersʯ YAPC::Kyoto 2023  ʮUltrafast web framework for the Edgeʯ

Slide 7

Slide 7 text

ͦΕͳΓʹେ͖͘ͳΓ·ͨ͠   (JU)VC4UBST

Slide 8

Slide 8 text

ͦΕͳΓʹ࢖ΘΕͯ·͢ • cdnjs - ϥΠϒϥϦͷCDN഑৴αʔϏεɺAPIͰ࢖ΘΕ͍ͯΔ • Poly fi ll.io - ϒϥ΢βͷUAΛΈͯPoly fi llΛฦ͢ • Ultra - Deno޲͚ͷReact SSRϑϨʔϜϫʔΫ • Driv.ly - ंͷΦϯϥΠϯചങͷͨΊͷAPIΛఏڙ • repeat.dev - webhook΍scheduleλεΫͳͲΛૉૣͭ͘͘ΕΔ • Convex - σʔλϕʔεαʔϏεɺHonoͷར༻Λਪ঑͍ͯ͠Δ • Cloud fl are D1 example - Cloud fl areެࣜͷϒϩά • subtats - ΞΧ΢ϯτͷϑΥϩʔϫʔ͕Կਓ͍Δ͔Θ͔ΔOSS

Slide 9

Slide 9 text

)POPͷͭͷಛ௃ • Ultrafast  The routers are really fast and smart. Not using linear loops. Fast. • Multi-runtime  Works on Cloud fl are Workers, Fastly Compute@Edge, Deno, Bun, Lagon, or Node.js. The same code runs on all platforms. • Batteries Included  Hono has built-in middleware, custom middleware, and third-party middleware. Batteries included. • Delightful DX  First-class TypeScript support. Now, we've got "Types". • Small  About 20kB. Zero-dependencies. Using only Web Standard API. 3FH&YQ3PVUFS +BWB4DSJQUքͰ࠷଎ͷϧʔλʔ CZ!VTVBMPNB ࠓճ͸͜͜ʹয఺Λ͋ͯ·͢

Slide 10

Slide 10 text

গͳ͘ͱ΋ͷϥϯλΠϜͰಈ͖·͢ $MPVE fl BSF8PSLFST 'BTUMZ$PNQVUF!&EHF %FOP #VO -BHPO 7FSDFM&EHF3VOUJNF /PEFKT

Slide 11

Slide 11 text

ʮ)POP͕ʰͲ͜Ͱ΋ಈ͘Α͏ʹͳΔʱ·ͰʯͷυϥϚ Λ঺հ͠·͢

Slide 12

Slide 12 text

$MPVEGMBSF8PSLFST

Slide 13

Slide 13 text

$MPVEGMBSF8PSLFST w ೥݄೔ʙ w ΞϓϦΛͭ͘Ζ͏ͱࢥͬͨΒ͍ͭͷؒʹ͔ϑϨʔϜϫʔΫΛ͍ͭͬͯͨ͘ w τϥΠ໦ߏ଄ͷϧʔλʔΛͭͬͯ͘Έ͔ͨͬͨ

Slide 14

Slide 14 text

ެࣜͷυΩϡϝϯτ௨Γʹॻ͍ͯΈΔ w ૉ͔Βॻ͘ w ύεΛநग़͠ͳͯ͘͸͍͚ͳ͍ w ϝιουΛจࣈྻͰ൑ఆ w +40/Λ࡞੒ w 3FTQPOTFΦϒδΣΫτΛ࡞੒ w /PU'PVOEΛ༻ҙ

Slide 15

Slide 15 text

)POPΛ࢖͏ͱʜ w &YQSFTTϥΠΫͳγϯλοΫε w ϧʔςΟϯά w +40/Ϩεϙϯεͷ࡞੒ w ΤϯτϦʔϙΠϯτ w /PU'PVOEΛॻ͔ͳ͍͍ͯ͘ w ίʔυྔ͕ݮΔ

Slide 16

Slide 16 text

ͦͷଞ͍͍͜ͱ͕͋Γ·͕͢লུ wϫΠϧυΧʔυɺਖ਼نදݱͳͲॊೈͳϧʔςΟϯά wΫΤϦύϥϝʔλɺύεύϥϝʔλͷऔಘ wϔομͷ௥Ճɺεςʔλεͷઃఆ w1MBJO5FYUɺ)5.-ɺ3FEJSFDUϨεϙϯε΁ͷγϣʔτΧοτ wϛυϧ΢ΣΞΛ࢖͑Δ wόΠϯσΟϯάͷऔಘ wΤϥʔϋϯυϦϯά w/PU'PVOEͷΧελϚΠζ wςετͷ؆қԽ wม਺ͷอ࣋

Slide 17

Slide 17 text

ઌʹωλόϥγ Ͳ͜Ͱ΋ಈ͘࢓૊Έ

Slide 18

Slide 18 text

8FC4UBOEBSEͷ͓͔͛ • Fetch APIͰ࢖༻͞ΕΔRequest/ResponseɺετϦʔϜɺ҉߸ԽͳͲ • Webϒϥ΢βͷAPIΛαʔόʔ(Ϩε)؀ڥͰ࢖͑ΔΑ͏ʹ͢Δ • WinterCGͰٞ࿦͞Ε͍ͯΔ • Web-interoperable Runtimes Community Group • W3CͷίϛϡχςΟʔάϧʔϓ • Cloud fl are / Deno / Vercel / Shopify / Netlify / Alibaba etc. ʮ֎෦ϥΠϒϥϦʹґଘͤͣɺ8FC4UBOEBSEͷ"1*ͷΈΛ࢖༻͍ͯ͠Δʯ 8FC4UBOEBSEͱ͸ʁ

Slide 19

Slide 19 text

w 3FRVFTU w 3FTQPOTF w 63- w 63-1BUUFSO w 63-4FBSDI1BSBNT w $SZQUP w 3FBEBCMF4USFBN w 8SJUBCMF4USFBN w 5FYU&ODPEFS w 5FYU%FDPEFS 8FC4UBOEBSEͷ"1* ͳͲ

Slide 20

Slide 20 text

)POP಺෦Ͱ΍ͬͯΔ͜ͱ 1. dispatch(request:Request) 2. [handlers, params] = match(method, path) 3. context = new Context(request, params) 4. composed = compose(handlers) 5. response = composed(context) 6. return response:Response

Slide 21

Slide 21 text

🔥 )POP͸8FC4UBOEBSEΛ࢖ͬͨ$MPVEGMBSF 8PSLFST༻ͷϑϨʔϜϫʔΫͱͯ͠஀ੜ͠·ͨ͠ɻ

Slide 22

Slide 22 text

خ͔ͬͨ͠ॠؒ $MPVE fl BSF8PSLFSTͷ$-*8SBOHMFSͷ ݩ ϝΠϯϝϯςφ !UISFFQPJOUPOF4VOJM͕πΠʔτͯ͘͠Εͨʂ This looks like a pretty neat batteries-included framework for Cloudflare Workers! Nice work @yusukebe

Slide 23

Slide 23 text

'BTUMZ$PNQVUF!&EHF

Slide 24

Slide 24 text

'BTUMZ$PNQVUF!&EHF w 3VTU+BWB4DSJQU(PʹରԠɺ8"4.ʹίϯύΠϧͯ͠࢖͏ w 8JOUFS$(ʹབྷΜͰ͸͍ͳ͍͕ɺجຊతͳ8FC4UBOEBSE͕࢖͑Δ w BUPCCUPBʹ΋ରԠͨ͠ w ಉ͡$%/αʔϏεͱͯ͠஫໨ͯͨ͠Β)POP΋࢖͑Δ͜ͱ͕ൃ֮ʂ

Slide 25

Slide 25 text

😄 ίʔυΛ΄ͱΜͲม͑ͣʹ'BTUMZͰ΋ಈ͖·ͨ͠ɻ ϛυϧ΢ΣΞͷࢿ࢈Λͦͷ··࢖͑·͢ɻ 7$-ͷ୅ΘΓʹͳΔ͔΋ʂ

Slide 26

Slide 26 text

%FOP

Slide 27

Slide 27 text

%FOP w /PEFKTͱ͸ผͷ+BWB4DSJQUϥϯλΠϜ w 5ZQF4DSJQUͷඪ४αϙʔτɺύʔϛογϣϯγεςϜɺϦϯλɾϑΥʔϚολ ͷఏڙ w 8FC4UBOEBSE͕࢖͑Δʂ w ͨͩ͠ɺJNQPSUͷ࢓૊Έ͕ҧ͏ ֎෦Ϟδϡʔϧ͸AIUUQTA͔ΒJNQPSU͢Δ ֦ுࢠ͕ඞཁ

Slide 28

Slide 28 text

%FOPରԠ͸᪳᪯͍ͯͨ͠ w JNQPSUपΓ͕େ͖͘ҧ͏ w ܕνΣοΫ͕ݫ͍͠ʢ౰࣌͸ΏΔ;Θͩͬͨʣ w 'BTUMZ$PNQVUF!&EHFͷ࣌ͷΑ͏ʹ͸͍͔ͳ͍ w $MPVE fl BSF8PSLFST$PNQVUF!&EHF͚ͩͰे෼Ͱ͸ͳ͍͔ʁ WͰରԠ͢Δ͜ͱʹͨ͠ w ७ਮʹʮָͦ͠͏ʯ

Slide 29

Slide 29 text

%FOPʹରԠͤ͞Δ w EFOPJGZ w AEFOPJGZAίϚϯυͰ%FOP༻ͷίʔυΛग़ྗͯ͘͠ΕΔ w AUTA֦ுࢠΛ͚ͭͯ͘ΕΔɺ1PMZ fi MMɺϞδϡʔϧͷϦϓϨΠε w EFOPMBOEYͰͷެ։ w AEFOPJGZAͰग़ྗͨ͠AEFOP@EJTUAΛࢦఆ͢Ε͹ެ։Ͱ͖ͨ ͨͩ͠Deno v1.28͔Β`npm: ` speci fi ers͕ಋೖ͞Εͨ `npm:hono` ͰimportͰ͖Δ

Slide 30

Slide 30 text

🦕 %FOPͰ࢖ͬͯ͘ΕΔਓ΋ଟ͔ͬͨɻ ϚϧνϥϯλΠϜΛҙࣝ͢Δ͖͔͚ͬʹͳͬͨɻ

Slide 31

Slide 31 text

#VO

Slide 32

Slide 32 text

)POP͕ਓؾΛಘΔେ͖ͳ͖͔͚ͬʹͳͬͨ

Slide 33

Slide 33 text

#VO w ೥݄͘Β͍͔ΒΫϩʔζυͰެ։͞Ε͍ͯͨ w ೥݄ެ։ w +BWB4DSJQU$PSFɺ;JHΛ࠾༻ w /PEFKTɺ%FOPΑΓ଎͍͜ͱΛചΓʹͨ͠

Slide 34

Slide 34 text

$MPVEGMBSF8PSLFSTͱશ͘ಉ͡ίʔυ͕ಈ͍ͨ • Web StandardΛ࠾༻ • `export { fetch }` ΋ಉ͡ #VO͕ެ։͞Εͨ࣌ʹ͸΋͏͢ͰʹରԠͰ͖ͯͨ • Bunjs support · Issue #344 · honojs/honoʯ  https://github.com/honojs/hono/issues/344

Slide 35

Slide 35 text

ͦͯ͠ʜ

Slide 36

Slide 36 text

#VOͰ͸&YQSFTT͕ಈ͔ͳ͍ • Web Standard͸࢖͑Δ͕Node.jsޓ׵͕ͳ͍ • ʮBunͰExpress͸࢖͑ͳ͍ͷ͔ʁʯͱ͍͏࣭໰͕DiscordͰଟ਺

Slide 37

Slide 37 text

ʮ&YQSFTT͸ݱࡏαϙʔτ͍ͯ͠·ͤΜɻ   ͦͷ୅ΘΓࠓ͸)POPΛ࢖͏͜ͱ͕Ͱ͖·͢ʯ

Slide 38

Slide 38 text

͏ͳ͗ͷ΅Γ #VO͕ొ৔͢Δ #VOͰ&YQSFTTΛ࢖͍͍ͨ #VOͰ͸&YQSFTT͕࢖͑ͳ͍ ͦͷ୅ΘΓ)POPΛ࢖͍ͬͯͩ͘͞ )POPΛ࢖͏ #VOొ৔

Slide 39

Slide 39 text

෬ઢ͕͋ͬͨ 4VOJMͷπΠʔτʹϦΞΫγϣϯ͍ͯͨ͠ͷ͕#VOͷ࡞ऀ+BSSFEͩͬͨ Ooh I wonder if it’ll work in bun since the api is basically the same

Slide 40

Slide 40 text

ޙ೔ஊ ʮ#VOʹ͓͚Δ࠷େͷࣦഊͷͻͱͭ͸ɺ&YQSFTTʹରԠͤ͞ͳ͔ͬͨ͜ͱͩʯ ͱ͸͍͑ࠓ͸&YQSFTT͕ಈ͖·͢

Slide 41

Slide 41 text

#VOυΩϡϝϯτʹ)POP

Slide 42

Slide 42 text

ͪͳΈʹʜ

Slide 43

Slide 43 text

%FOPຊମʹ)POP͕ೖ͍ͬͯΔ

Slide 44

Slide 44 text

ެࣜXFCTJUFʹ΋ IUUQTEFOPMBOECFODINBSLT

Slide 45

Slide 45 text

%FOPͱ#VO w %FOP͕ʮ#VOͱൺֱ͢ΔͨΊʹʯͲͪΒͰ΋ಈ͘)POP͕࢖ΘΕͨ w #VOᐌ͘ʮ#VO͸ʰ%FOPΑΓ଎͍ʱʯ w %FOPͰ͸ΑΓ଎͍ʮ fl BTIʯΛ͍ͭͬͯͨ͘ +BSSFE΋ίϝϯτ͍ͯ͠Δ

Slide 46

Slide 46 text

೥݄࣌఺ͷϕϯνϚʔΫ w ʮ)FMMP8PSMEʯ w #VOͷํ͕଎͍ w )POPW w %FOPɺVTJOH fl BTIA%FOPTFSWF A w #VO %FOP #VO

Slide 47

Slide 47 text

😲 XPSLFSE $MPVEGMBSF8PSLFST ɺ%FOPɺ#VO   ৽ڵ+BWB4DSJQUϥϯλΠϜͷਅΜத΁

Slide 48

Slide 48 text

-BHPO w Φʔϓϯιʔεͷ+BWB4DSJQU5ZQF4DSJQUαʔόʔϨεϥϯλΠϜ w %FWεςʔδ͕ͩ΋͏ಈ͘ ࡞ऀͷ5PN-JFOBSE͕$*ͳͲରԠͯ͘͠Εͨ

Slide 49

Slide 49 text

7FSDFM w /FYUKTΛͭͬͯ͘Δɻ/FYUKTΛϗεςΟϯά w /FYUKTͷ&EHF"1*3PVUFTͰಈ͘ w 7FSDFMͷόοΫΤϯυ͸$MPVE fl BSF8PSLFSTͰಈ͍͍ͯΔ

Slide 50

Slide 50 text

/PEFKT w /PEFKTͰಈ͔͢͜ͱ͸૝ఆ͍ͯ͠ͳ͔ͬͨ w "EBQUFSΛͭ͘Δ͜ͱͰରԠ w 1PMZ fi MMΛ͢Δ3FNJYͷGFUDIϥΠϒϥϦΛ࢖༻

Slide 51

Slide 51 text

🙆 ʮ)POP͸Ͳ͜Ͱ΋ಈ͘ʯ

Slide 52

Slide 52 text

੔ཧ͢Δͱʜ

Slide 53

Slide 53 text

XPSLFSE#VO 'BTUMZ$PNQVUF!&EHF&EHF3VOUJNF -BHPO /PEFKT %FOP

Slide 54

Slide 54 text

ϚϧνϥϯλΠϜ͔ͩΒͦ͜ͷ޻෉

Slide 55

Slide 55 text

$*Ͱ͸ͭͷϥϯλΠϜ্ͷςετ͕૸͍ͬͯΔ W͔Β͸"84-BNCEBͷςετ΋૸Γ·͢

Slide 56

Slide 56 text

3VOUJNF,FZT w ADSVOUJNFAͰݱࡏͲͷϥϯλΠϜͰಈ͍ͯΔ͔ΛऔಘͰ͖Δ w 8JOUFS$(ͷ3VOUJNF,FZTʹ४ڌIUUQTSVOUJNFLFZTQSPQPTBMXJOUFSDHPSH

Slide 57

Slide 57 text

"EBQUFS w ϥϯλΠϜɾϓϥοτϑΥʔϜݻ༗ͷॲཧΛABEBQUFSAʹಀͨ͠ w ඞཁʹԠͯ͡JNQPSU͢Ε͹Α͍ w ϑΝΠϧ ,7FUD ͷѻ͍͸֤ϥϯλΠϜ͹Β͹ΒͰ͋Δ

Slide 58

Slide 58 text

AFOWA w ؀ڥม਺Λಁաతʹѻ͏ؔ਺

Slide 59

Slide 59 text

DSFBUFIPOPίϚϯυͰ֤ϓϥοτϑΥʔϜͷ਽ܗΛͭ͘Δ w ࠷খݶͷϓϩδΣΫτΛͭ͘Δ w $MPVE fl BSF1BHFTΛؚΊͯͭͷςϯϓϨʔτ

Slide 60

Slide 60 text

)POPͷ໨ࢦ͢΋ͷ

Slide 61

Slide 61 text

8FC4UBOEBSEͷ4UBOEBSEXFCGSBNFXPSL 👍 ࢖ͬͯ͘ΕΔਓΛ૿΍͢͜ͱͰϓϩμΫτ΁ͷϑΟʔυόοΫΛ૿΍͢

Slide 62

Slide 62 text

0OFNPSFUIJOH ͞Βʹ͋ͷϓϥοτϑΥʔϜʹ΋ʂ

Slide 63

Slide 63 text

"84-BNCEB w W͔Β&YQFSJNFOUBMͰରԠɺ/PEFKTҎ্ w "EBQUFSͰରԠ w -BNCEB"1*(BUFXBZͷߏ੒ʹରԠ

Slide 64

Slide 64 text

·ͱΊ w )POP͕ +BWB4DSJQUͳΒ Ͳ͜Ͱ΋ಈ͘࢓૊Έ w ֤ϥϯλΠϜʹରԠͤ͞ΔͨΊͷυϥϚ w ϚϧνϥϯλΠϜ͔ͩΒͦ͜ͷ޻෉ w ͓޷͖ͳϥϯλΠϜͰ࢖ͬͯΈ͍ͯͩ͘͞ʂ

Slide 65

Slide 65 text

IUUQTIPOPEFW 6MUSBGBTUXFCGSBNFXPSLGPSUIF&EHF