The power of Web-standards

by Yusuke Wada

Slide 1

Slide 1 text

The power of Web-standards Deno Fest - 2023.10.20 @Tokyo Akihabara Yusuke Wada

Slide 2

Slide 2 text

ࣗݾ঺հ w :VTVLF8BEB࿨ా༟հ w %FWFMPQFS"EWPDBUF!$MPVE fl BSF w $SFBUPSPG)POP w $PGPVOEFSPG#PLFUF w 8FCGSBNFXPSLEFWFMPQFS w IUUQTHJUIVCDPNZVTVLFCF

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ 8FCTUBOEBSETͱ)POPʢΠϯτϩʣ 8FCTUBOEBSETͷ͍͢͝ͱ͜Ζ ελϯμʔυͰ͸ͳ͍΋ͷ 4FSWJDF8PSLFS.BHJD Web-standardsͷ͢͝͞Λ͍͔ͨ͠ Denoͱ͔Ͱಈ͘ΞϓϦΛͭ͘ΕΔΑ͏ʹͳΔʁ

Slide 4

Slide 4 text

1. Web-standardsͱHono

Slide 5

Slide 5 text

Web-standards w +BWB4DSJQUͷ؀ڥͰڞ௨Ͱ࢖ΘΕΔͭͭ͋Δ8FCܥͷ"1* w ΋ͪΖΜ%FOP΋ʂ w ϒϥ΢βͷ"1*ΛαʔόʔαΠυͰ΋࢖͑ΔΑ͏ʹ͠Α͏ͱ͍ͯ͠Δ w 8JOUFS$(ͰσΟεΧογϣϯ͞Ε͍ͯΔ w 8FCJOUFSPQFSBCMF3VOUJNFT$PNNVOJUZ(SPVQ w ϒϥ΢βҎ֎ͷ؀ڥ w ʮ8FC૬ޓӡ༻ՄೳʯΛ໨ࢦ͢ IUUQTXJOUFSDHPSHΑΓ ٞ࿦ʹࢀՃͯ͠Δͷ͸͜Ε͚ͩͰ͸ͳ͍

Slide 6

Slide 6 text

fetch Request/URL/Response

Slide 7

Slide 7 text

ͦͷଞ w )FBEFST w 63-4FBSDI1BSBNT w 'PSN%BUB w #MPC w 3FBEBCMF4USFBN w 5FYU%FDPEFS w BUPC CUPB w ʜ ࠷খݶͰ਌͠Έ΍͍͢API

Slide 8

Slide 8 text

Hono w 8FCTUBOEBSETͷ"1*ͷΈΛ࢖ͬͨ8FCϑϨʔϜϫʔΫ w ֎෦ϥΠϒϥϦ΁ͷґଘ͸ w ೥݄͔Β։ൃͯ͠໿೥ w ౰ॳ͸$MPVE fl BSF8PSLFSTͰಈ͔ͨ͢Ίʹͭ͘ΒΕͨ w ͦͷޙɺ'BTUMZ$PNQVUF!&EHFɺ%FOPɺ#VOɺ/PEFKTͷॱ൪ͰରԠ w ͦͷܦݧ͔Βɺ8FCTUBOEBSETʹ͍ͭͯޠΔ Hono - The Web Framework built on Web Standards https://hono.dev/

Slide 9

Slide 9 text

2. Web-standardsͷ͍͢͝ͱ͜Ζ

Slide 10

Slide 10 text

Web-standardsͷ͍͢͝ͱ͜Ζ ଞݴޠͰۤ࿑͍ͯͨ͠΋ͷ͕͢Ͱʹ͋Δࠓճ͸ͱ͹͠·͢ʜ ΄ͱΜͲͷϥϯλΠϜͰ࣮૷͞ΕͯΔ ςετ͕͠΍͍͢

Slide 11

Slide 11 text

1. ֤ݴޠͰۤ࿑͍ͯͨ͠΋ͷ͕͢Ͱʹ͋Δ w ྫ1FSM14(* w ೥ͷ:"1$"TJBͰॳΊͯޠΒΕΔ w ϑϨʔϜϫʔΫͱ8FCαʔόʔؒͷ໿ଋࣄ w 1ZUIPOͰ͍͏84(*ɺ3VCZͷ3BDL ͱ͹͠·͢…

Slide 12

Slide 12 text

ϑϨʔϜϫʔΫͱWebαʔό Catalyst CGI::Application Jifty Mojo Perl Hackers Hub #1 -WEB+DB PRESS 2010.02.24 https://gihyo.jp/dev/serial/01/perl-hackers-hub/000101 Apache lighttpd nginx HTTP::Server::Simple ͱ͹͠·͢…

Slide 13

Slide 13 text

PSGIʹΑΔΠϯλʔϑΣʔεڞ௨Խ Catalyst CGI::Application Jifty Mojo Apache lighttpd nginx HTTP::Server::Simple PSGI Perl Hackers Hub #1 -WEB+DB PRESS 2010.02.24 https://gihyo.jp/dev/serial/01/perl-hackers-hub/000101 ͱ͹͠·͢…

Slide 14

Slide 14 text

Web-standards API Deno workerd Bun Node.js Hono Remix Astro Fresh Web standards ͱ͹͠·͢…

Slide 15

Slide 15 text

Plack w 14(*ͷ࣮૷ͷͻͱͭ w 8FCΞϓϦϑϨʔϜϫʔΫΛ࡞ΔͨΊͷΩοτ w γϯϓϧͳ"1* w ͦΕ͕΋͏ඪ४Ͱ࢖͑Δ ͱ͹͠·͢…

Slide 16

Slide 16 text

Plack::RequestʹΑΔ࣮૷ ͱ͹͠·͢…

Slide 17

Slide 17 text

΄΅ಉ͡API͕ϥϯλΠϜඪ४Ͱ͋Δ ͱ͹͠·͢…

Slide 18

Slide 18 text

͍͍࣌୅ʹͳͬͨ w ࠓʹͳͬͯ͸౰ͨΓલʁ w աڈʹ֤ݴޠʢྫ1FSMɺ3VCZɺ1ZUIPOʣ͕ۤ࿑͖ͯͨ͠΋ͷ͕͢Ͱʹ͋Δ w ෇͚Ճ͑Δͱɺͦͷ෼"1*͕ચ࿅͞Ε͍ͯΔ ͱ͹͠·͢…

Slide 19

Slide 19 text

2. ΄ͱΜͲͷϥϯλΠϜͰ࣮૷͞Ε͍ͯΔ w ຊ౰ʹ)POP͸Ͳ͜Ͱ΋ಈ͘ $MPVE fl BSF8PSLFST 'BTUMZ$PNQVUF!&EHF %FOP #VO -BHPO /PEFKT 7FSCBM "84-BNCEB -BNCEB!&EHF create-hono Ͱ͸12ͷςϯϓϨʔτ͕࢖͑Δ

Slide 20

Slide 20 text

ImportͱΤϯτϦϙΠϯτ͕ҧ͏͚ͩ import ΤϯτϦϙΠϯτ

Slide 21

Slide 21 text

$MPVEGMBSF8PSLFST#VO

Slide 22

Slide 22 text

'BTUMZ$PNQVUF!&EHF

Slide 23

Slide 23 text

-BHPO

Slide 24

Slide 24 text

%FOP

Slide 25

Slide 25 text

/PEFKT

Slide 26

Slide 26 text

"84-BNCEB

Slide 27

Slide 27 text

/FYUKT

Slide 28

Slide 28 text

Ͳ͜Ͱ΋ಈ͘ͷ͍͢͝ w ଞʹ΋ w -BNCEB!&EHF w /FUMJGZ w 7FSDFM w ͳͲͰಈ͘

Slide 29

Slide 29 text

3. ςετ͕͠΍͍͢ w ॻ͖΍͍͢ w 3FRVFTU3FTQPOTFΛॻ͍ͯ͢΂ͯͷέʔεΛΧόʔͰ͖Δ w αʔόʔΛ্ཱͪ͛ͳͯ͘΋FFͬΆ͍ w ૬ޓӡ༻Մೳ

Slide 30

Slide 30 text

Honoͷςετ Honoͷςετʢ12,000ߦʣ͸͢΂ͯ͜Μͳײ͡ ྫ: ϧʔςΟϯάɺϦΫΤετɺϨεϙϯεͷѻ͍ɺϛυϧ΢ΣΞͳͲͷςετ /helloʹGETϦΫΤετ͢ΔRequestΦϒδΣΫτ ΛΞϓϦʹ౉͍ͯ͠Δ ResponseΦϒδΣΫτ

Slide 31

Slide 31 text

૬ޓӡ༻Մೳ https://github.com/honojs/hono/pull/1558 w )POPͷςετ͸$MPVE fl BSFͷ؀ڥΛ࢖͍ͬͯͨ w ͦΕΛ֎ͨ͠/PEFKT΁ͷҠߦ w ΍ͬͨ͜ͱ͸ҎԼ͚ͩ w OPEFDSZQUPΛDSZQUP΁Ϛοϐϯά w $BDIF"1*ͷϞοΫ w .%ͷςετΛεΩοϓ w XPSLFSEʹ͸͋Δ͕8FC$SZQUPελϯμʔυͰ͸ͳ͍ w ϥϯλΠϜΩʔΛXPSLFSE͔ΒOPEF΁มߋ

Slide 32

Slide 32 text

Ҏ্ɺWeb-standardsͷ͍͢͝ͱ͜ΖͰͨ͠ ଞݴޠͰۤ࿑͍ͯͨ͠΋ͷ͕͢Ͱʹ͋Δ ΄ͱΜͲͷϥϯλΠϜͰ࣮૷͞ΕͯΔ ςετ͕͠΍͍͢ ʢ"1*͕ચ࿅͞Ε͍ͯΔʣ ʢ"1*͕ϛχϚϜ͔ͩΒ֮͑Δ͜ͱ͕গͳ͍ʣ ʢ։ൃମݧ͕Α͍ʣ

Slide 33

Slide 33 text

3. ελϯμʔυͰ͸ͳ͍΋ͷ

Slide 34

Slide 34 text

ελϯμʔυͰ͸ͳ͍΋ͷΛ೺Ѳ͠ͳͯ͘͸͍͚ͳ͍ w ϚϧνϥϯλΠϜରԠͰ໰୊ʹͳΔͷ͸ͭ ؀ڥม਺ ϑΝΠϧγεςϜ

Slide 35

Slide 35 text

1. ؀ڥม਺ w ͍ΘΏΔγεςϜͷ؀ڥม਺͚ͩͰ͸ͳ͍ʢྫ$MPVE fl BSF8PSLFSTʣ w $MPVE fl BSFADFOW50,&/A w %FOPA%FOPFOWA w #VOAQSPDFTTFOWAPSA#VOFOWA w /PEFKTAQSPDFTTFOWA w 'BTUMZͦ΋ͦ΋Ϣʔβʔ͕஋Ληοτ͢Δ΋ͷͰ͸ͳ͍ w A'"45-:@)045/".&A A'"45-:@101A A'"45-:@3&(*0/Aʜ w Ҏલɺ&EHF%JDUJPOBSZΛ࢖ͬͯ50,&/Λѻͬͨ͜ͱ͕͋Δ w A$PO fi H4UPSFAͱ͍͏ͷ͕͋ΔΒ͍͠

Slide 36

Slide 36 text

Adapterϔϧύʔͷ `env()` w ֤ϥϯλΠϜґଘΛٵऩͯ͠ɺಁաతʹ؀ڥม਺ʹΞΫηεͰ͖Δ

Slide 37

Slide 37 text

`env()` ͷ࣮૷ w ʮϥϯλΠϜΩʔʯΛΩʔʹ஋Λऔಘ͢Δ

Slide 38

Slide 38 text

ϥϯλΠϜΩʔ w 8JOUFS$(͕ʮ3VOUJNF,FZT4QFDJ fi DBUJPOʯΛ͍ͭͬͯ͘Δ w IUUQTSVOUJNFLFZTQSPQPTBMXJOUFSDHPSH w OPEF w EFOP w CVO w XPSLFSE$MPVE fl BSF8PSLFST w GBTUMZ w FEHFMJHIU7FSDFM&EHF'VODUJPOT w MBHPO w ʜ

Slide 39

Slide 39 text

`getRuntimeKey()`

Slide 40

Slide 40 text

`getRuntimeKey()` ͷ࣮૷

Slide 41

Slide 41 text

2. ϑΝΠϧγεςϜ w ֤ϥϯλΠϜ͝ͱʹϑΝΠϧγεςϜ΁ͷΞΫηεํ๏͕ҧ͏ w %FOPA%FOPPQFO A w #VOA#VO fi MF A w ͦ΋ͦ΋ϑΝΠϧγεςϜ͕ͳ͍ʜ w $MPVE fl BSF7FSDFM"84ʜ w ϑΝΠϧγεςϜ͡Όͳ͍ετϨʔδ w $MPVE fl BSF,73 w 7FSDFM#MPC w "NB[PO4

Slide 42

Slide 42 text

֤ϥϯλΠϜ͝ͱʹ`serveStatic()`Λ࣮૷͢Δ w ϥϯλΠϜϓϥοτϑΥʔϜ͝ͱͷ"EBQUFSͰATFSWF4UBUJD AΛ࣮૷ w %FOP w #VO w /PEFKT w $MPVE fl BSF8PSLFST

Slide 43

Slide 43 text

ςετΛ͢Δ w ϥϯλΠϜͰ͕ࠩͰΔͱ͜Ζ͚ͩ$*Ͱςετ w #BTJDೝূ$SZQUPܥʢ࠷ۙ͸ฏؾʣ w AFOW A w AHFU3VOUJNF,FZ A w ATFSWF4UBUJD A HonoͷCI Mainͷଞʹ8ͭͷϥϯλΠϜͷςετ͕૸Δ

Slide 44

Slide 44 text

ελϯμʔυͳ͸͚ͣͩͲಉ͡͡Όͳ͍΋ͷ w ελϯμʔυͬΆ͍͚ͲϛχϚϜίϞϯʹ͸ೖͬͯͳ͍΋ͷ w IUUQTDPNNPONJOBQJQSPQPTBMXJOUFSDHPSH w $BDIF"1*$MPVE fl BSFɺ%FOPͷΈ w 63-1BUUFSO#VOͰ͸࣮૷͠ͳ͍ w ࣮૷͕ϛεͬͯΔ w #VO3FRVFTUΦϒδΣΫτΛDMPOF ͯ͠KTPO ͢Δͱى͖Δόά w ಠ࣮ࣗ૷ w $MPVE fl BSF3FRVFTUΠϯελϯεͷDG w 3FBDUͷGFUDIʁ

Slide 45

Slide 45 text

ͱ͸͍͑ҙࣝ͢Ε͹OK w ؀ڥม਺ͱϑΝΠϧγεςϜ w ʮϝΠϯʯ͸͔ͬ͠Γςετ w ϥϯλΠϜґଘ͸͚ͦͩ͜$*Ͱอূ͢Δ

Slide 46

Slide 46 text

4. Service Worker Magic

Slide 47

Slide 47 text

Hono͸ϒϥ΢βͰ΋ಈ͘ ౰ͨΓલ͚ͩͲ໘ന͍ʂ 14ߦͷHTMLͷதͰHonoΛಈ͔ͤΔʂ

Slide 48

Slide 48 text

Playground w ࡢ೔࡞ͬͨ w εΫϦϓτຒΊࠐΈ)5.-͚ͩ w ߦͰͦΕͳΓʹಈ͘ w IUUQTQMBZHSPVOEIPOPEFW

Slide 49

Slide 49 text

ͦͯ͠ɺHono͸Service WorkerͰ΋ಈ͘ w 4FSWJDF8PSLFSϒϥ΢β಺Ͱಈ͘ϫʔΧʔɺΦϑϥΠϯΩϟογϡͳͲ w ͦΕΛར༻ͨ͠ʮϚδοΫʯ w αʔόʔ͕ࣗ෼ࣗ਎ͱಉ͡ϓϩάϥϜΛ഑৴ͯ͠ɺͦΕΛϒϥ΢β͕ϩʔυ͠ ͯɺͲͪΒͰ΋ಉ͡ίʔυ͕࣮ߦ͞Εɺαʔόʔ͚ͩͰ͸ͳ͘ϒϥ΢β͔Β ΋ϨεϙϯεΛฦ͢

Slide 50

Slide 50 text

αʔόʔ͸$MPVE fl BSF8PSLFSTɺϒϥ΢β͸4FSWJDF8PSLFSͷϓϩάϥϜΛࢦ͢ αʔόʔͷϓϩάϥϜ͸TXKTɺϒϥ΢βͰಈ͘ϓϩάϥϜ΋TXKT શ͘ಉ͡಺༰͔ͭಉ͡ϦιʔεΛࢀরͯ͠ɺಉ͡Α͏ʹಈ͘ αʔόʔTXKT͕ࣗ෼ࣗ਎ͷίʔυTXKTΛTXKTͱ͍͏ύεͰ഑৴͢Δ ʹΞΫηε͢ΔͱTXKT͕4FSWJDF8PSLFSͱͯ͠ొ࿥͞ΕΔ TXΛ4FSWJDF8PSLFSͷείʔϓʹ͢Δ TFSWFSIFMMPʹΞΫηε͢Δͱαʔόʔ͔ΒϨεϙϯε͕ฦΔ TXIFMMPʹΞΫηε͢Δͱ4FSWJDF8PSLFS͕Πϯλʔηϓτͯ͠ɺϒϥ΢β͔Β Ϩεϙϯε͕ฦΔ

Slide 51

Slide 51 text

σϞ https://user-images.githubusercontent.com/10682/153455595-77fea6e5-93d7-4698-8d75-85896edd995b.gif

Slide 52

Slide 52 text

Ҏ্ 8FCTUBOEBSETͱ)POP 8FCTUBOEBSETͷ͍͢͝ͱ͜Ζ ελϯμʔυͰ͸ͳ͍΋ͷ 4FSWJDF8PSLFS.BHJD

Slide 53

Slide 53 text

·ͱΊ w 8FCTUBOEBSETͷ͢͝͞ w ૬ޓӡ༻Մೳɺςετ͕͠΍͍͢ɺ%9͕Α͍ w ελϯμʔυ͡Όͳ͍΋ͷ w ؀ڥม਺ɺϑΝΠϧγεςϜɺͦͷଞ Web-standardsΛཧղ͓ͯ͘͠ͱ ͦͷ͢͝͞Λ׆͔ͯ͠ Deno΍ͦͷଞͷϥϯλΠϜͰಈ͘ΞϓϦέʔγϣϯΛ૬ޓӡ༻Մೳʹ࡞ΕΔʂ