$30 off During Our Annual Pro Sale. View Details »

The power of Web-standards

Yusuke Wada
October 20, 2023

The power of Web-standards

Deno Fest - 2023.10.20 @Tokyo Akihabara
Yusuke Wada

Yusuke Wada

October 20, 2023
Tweet

More Decks by Yusuke Wada

Other Decks in Programming

Transcript

  1. The power of Web-standards
    Deno Fest - 2023.10.20 @Tokyo Akihabara


    Yusuke Wada

    View Slide

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

    View Slide

  3. ࠓ೔࿩͢͜ͱ
    8FCTUBOEBSETͱ)POPʢΠϯτϩʣ
    8FCTUBOEBSETͷ͍͢͝ͱ͜Ζ
    ελϯμʔυͰ͸ͳ͍΋ͷ
    4FSWJDF8PSLFS.BHJD
    Web-standardsͷ͢͝͞Λ͍͔ͨ͠


    Denoͱ͔Ͱಈ͘ΞϓϦΛͭ͘ΕΔΑ͏ʹͳΔʁ

    View Slide

  4. 1. Web-standardsͱHono

    View Slide

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

    View Slide

  6. fetch
    Request/URL/Response

    View Slide

  7. ͦͷଞ
    w )FBEFST
    w 63-4FBSDI1BSBNT
    w 'PSN%BUB
    w #MPC
    w 3FBEBCMF4USFBN
    w 5FYU%FDPEFS
    w BUPC
    CUPB

    w ʜ
    ࠷খݶͰ਌͠Έ΍͍͢API

    View Slide

  8. 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/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. ϑϨʔϜϫʔΫͱ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
    ͱ͹͠·͢…

    View Slide

  13. 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
    ͱ͹͠·͢…

    View Slide

  14. Web-standards API
    Deno
    workerd
    Bun
    Node.js
    Hono
    Remix
    Astro
    Fresh
    Web


    standards
    ͱ͹͠·͢…

    View Slide

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

    View Slide

  16. Plack::RequestʹΑΔ࣮૷
    ͱ͹͠·͢…

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. $MPVEGMBSF8PSLFST#VO

    View Slide

  22. 'BTUMZ$PNQVUF!&EHF

    View Slide

  23. -BHPO

    View Slide

  24. %FOP

    View Slide

  25. /PEFKT

    View Slide

  26. "84-BNCEB

    View Slide

  27. /FYUKT

    View Slide

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

    View Slide

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

    View Slide

  30. Honoͷςετ
    Honoͷςετʢ12,000ߦʣ͸͢΂ͯ͜Μͳײ͡


    ྫ: ϧʔςΟϯάɺϦΫΤετɺϨεϙϯεͷѻ͍ɺϛυϧ΢ΣΞͳͲͷςετ
    /helloʹGETϦΫΤετ͢ΔRequestΦϒδΣΫτ


    ΛΞϓϦʹ౉͍ͯ͠Δ
    ResponseΦϒδΣΫτ

    View Slide

  31. ૬ޓӡ༻Մೳ
    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΁มߋ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. 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ͱ͍͏ͷ͕͋ΔΒ͍͠

    View Slide

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

    View Slide

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

    View Slide

  38. ϥϯλΠϜΩʔ
    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 ʜ

    View Slide

  39. `getRuntimeKey()`

    View Slide

  40. `getRuntimeKey()` ͷ࣮૷

    View Slide

  41. 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

    View Slide

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

    View Slide

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


    Mainͷଞʹ8ͭͷϥϯλΠϜͷςετ͕૸Δ

    View Slide

  44. ελϯμʔυͳ͸͚ͣͩͲಉ͡͡Όͳ͍΋ͷ
    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ʁ

    View Slide

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

    View Slide

  46. 4. Service Worker Magic

    View Slide

  47. Hono͸ϒϥ΢βͰ΋ಈ͘
    ౰ͨΓલ͚ͩͲ໘ന͍ʂ


    14ߦͷHTMLͷதͰHonoΛಈ͔ͤΔʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. ·ͱΊ
    w 8FCTUBOEBSETͷ͢͝͞
    w ૬ޓӡ༻Մೳɺςετ͕͠΍͍͢ɺ%9͕Α͍
    w ελϯμʔυ͡Όͳ͍΋ͷ
    w ؀ڥม਺ɺϑΝΠϧγεςϜɺͦͷଞ
    Web-standardsΛཧղ͓ͯ͘͠ͱ


    ͦͷ͢͝͞Λ׆͔ͯ͠


    Deno΍ͦͷଞͷϥϯλΠϜͰಈ͘ΞϓϦέʔγϣϯΛ૬ޓӡ༻Մೳʹ࡞ΕΔʂ

    View Slide