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

JavaScript Server Runtime History

JavaScript Server Runtime History

2023/10/20 虎の穴ラボで発表した JavaScript Server Runtime の歴史です。

Yosuke Furukawa
PRO

October 20, 2023
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. JavaScript Server
    Runtime History
    2023/10/20 @ toranoana

    View Slide

  2. X(Twitter): @yosuke_furukawa


    GitHub: yosuke-furukawa

    View Slide

  3. +4$POGKQ͸͡·Γ·͢ʔʂ

    View Slide

  4. ߽՚εϐʔΧʔਞ

    View Slide

  5. NodeֶԂࡇ 2011
    Ryan Dahl changed my life.

    View Slide

  6. JavaScript Server Runtime ͷ
    ྺ࢙ʹ͍ͭͯ
    • 90೥୅͔Βݱ୅·ͰৼΓฦΔ


    • ࠓޙͲ͏͍͏ྲྀΕ͕͋Δ͔ɺͲ͏ͳΔ͔Λ༧ଌ
    ͢Δ


    • ྺ࢙ͬͯ໘ന͍ͷͰݟͯཉ͍͠


    • ࿩͍ͨ͜͠ͱΛ࿩͢ɺͳΜ͔ͨΊʹͳΔ࿩͕ฉ͚
    Δͱࢥͬͯ͸͍͚ͳ͍

    View Slide

  7. 1995:


    JavaScript was born

    View Slide

  8. 1995೥
    • JavaScript ஀ੜ


    • Netscape Navigator 2.0 Beta ൛ʹಉࠝ


    • ޙʹ 1996೥ʹਖ਼ࣜϦϦʔε൛͕ൃද

    View Slide

  9. #SFBOEBO&JDIࢯͷϗʔϜϖʔδ
    ྺ࢙Λײ͡ΔσβΠϯ

    View Slide

  10. 1995೥
    • ͔͜͜Β࠷ॳͷ Browser War ͕ى͖Δ


    • ͍ΘΏΔ Internet Explorer ਞӦ vs Netscape
    ਞӦ


    • ྺ࢙Ͱݴ͏ͱؔέݪͷઓ͍΍੺นͷઓ͍


    • ·͊ͳΜͱ͍͏͔өըͰݴ͏ͱݟͲ͜Ζͷ෦෼

    View Slide

  11. 1996:


    Netscape Livewire was
    born

    View Slide

  12. 1996೥
    • ϒϥ΢βઓ૪ͷཪͰͻͬͦΓͱग़͖ͯͨ Netscape
    Livewire ͱ͍͏αʔόαΠυ JavaScript ٕज़


    • ͳΜͱ HTML λάͷதʹ λάΛॻ͍ͯͦ͜
    ʹεΫϦϓτΛॻ͘ͱ࣮ߦ͞ΕΔͱ͍͏࢓༷


    • ॻ͍ͨhtmlΛίϯύΠϧ͢ΔͱόΠτίʔυ͕͍ͭͨ
    ࣮ߦՄೳͳܗࣜʹม׵͞ΕɺWebαʔόΛىಈͰ͖Δ

    View Slide

  13. Netscape Livewire
    • HTMLͱಉ͡৔ॴʹॲཧΛॻ͍ͯɺίϯύΠϧ
    ͢Δ
    # jsac ͱ͍͏ίϯύΠϥͰίϯύΠϧ͢Δ
    $ jsac -i app.html -o app.web

    View Slide

  14. 1996೥
    • ͳΜͱ͜ͷଞʹ΋ Java ͷΫϥεΛݺͼग़ٕ͢
    ज़ʢࠓͰݴ͏C++ native codeݺͼग़͢Α͏ͳ
    ײ͡ʣ΋͋ͬͨΓ


    • Database ઀ଓ͢Δٕज़΋͋ͬͨ


    • ͨͩ·͊ΈΜͳ΋஌ͬͯͷ௨Γɺ͜Ε͕ϝΠϯ
    ετϦʔϜʹͳΔ͜ͱ͸ͳ͔ͬͨ

    View Slide

  15. 1996೥
    • ཪͰߦΘΕͯΔϒϥ΢βઓ૪͸։ൃ؀ڥͷઓ૪Ͱ΋͋Δ


    • Microsoft ASP ͱਅͬ޲͔Βରཱ͕ͨ͠ɺ ASP ͸ίϯύ
    Πϧεςοϓ͕ͳͯ͘΋ಈ͘ͷʹରͯ͋͠·Γʹ΋ݪ࢝



    • ࠓͰͦ͜ JavaScript ͸ϓϩάϥϛϯάݴޠͱͯ͠ͷ஍Ґ
    Λཱ֬Ͱ͖͍ͯΔ͕͜ͷ࣌఺Ͱ͸·ͩए͗ͨ͢


    • ݁ہྲྀߦΒͳ͔ͬͨɻɹ

    View Slide

  16. 2009: Node.js was born

    View Slide

  17. 2009೥
    • αʔόαΠυ JavaScript ݩ೥


    • Node.js ͕஀ੜ


    • ಉ೥ळʹ JSConf.EU Ͱ Ryan ͕ൃද

    View Slide

  18. 2009೥
    • ͜ͷ࣌ͷ Node.js ͷಛ௃


    • Event-driven / Non-blocking IO


    • Built on Google V8


    • CommonJS


    • ·ͩ͜ͷͱ͖͸ npm ΋ Windows αϙʔτ΋ͳ͍

    View Slide

  19. 2009೥
    • Apache HTTP Server ͕ C10K ໰୊ͱ͍͏൷൑ΛཋͼͤΒΕ͍ͯͨ
    ࣌୅


    • Non blocking IO / Event driven ͳΞʔΩςΫνϟ͸ nginx / event
    machine ͱ͔Ͱطʹྲྀߦͬͯͨɻ


    • ͡Ό͋ͦΕΛ JavaScript Ͱ΍ͬͯΈͨΒͲ͏͔ʁͱ͍͏ΞΠσΞ͸
    ޭΛ૗ͨ͠


    • JavaScript ʹ͸ File IO ॲཧ͕ͳ͘ɺαʔόαΠυͷAPI͸ະ։୓
    ͩͬͨ

    View Slide

  20. 2010: npm was born

    View Slide

  21. 2010೥
    • 3rd party ͷϥΠϒϥϦΛެ։͠ɺಡΈࠐΉ͜
    ͱ͕Ͱ͖Δ࢓૊ΈΛ npm ͱ࣮ͯ͠૷


    • ͦΕΛಉࠝ͢Δ͜ͱͰϥΠϒϥϦ։ൃΛ͠΍
    ͘͢ɺ·ͨίΞʹ଍Γ͍ͯͳ͍ػೳΛ௥Ճ͠
    ΍ͨ͘͢͠


    • ΤίγεςϜ͕ੜ·Ε͍ͯͬͨ࣌୅

    View Slide

  22. 2010೥
    • Express ͕ొ৔


    • socket.io v0.1΋ޙ൒ʹొ৔


    • ͔͜͜ΒϒʔϜʹՐ͕͍͍ͭͯ͘


    • Yeoman/grunt/gulp ͱ͔͸ 2013೥ʹొ৔

    View Slide

  23. 2011-2014೥
    • 2011: Windows αϙʔτ


    • 2011: Joyent ͕ग़ࢿ


    • 2012: Node.js Ϧʔμʔަ୅ Ryan => isaacs


    • 2014: Node.js Ϧʔμʔަ୅ isaacs => TJ
    Fontaine

    View Slide

  24. 2014: Node.js were forked
    as io.js

    View Slide

  25. 2014೥
    • มԽ͕ى͖ͣɺӢߦ͖͕ո͘͠ͳΔ


    • ৽͍͠ػೳ͕௥Ճ͞Εͳ͍ɺόʔδϣϯ͕Ϧ
    Ϧʔε͞Εͳ͍


    • ΤϯλʔϓϥΠζͳ҆ఆੑ͹͔Γ௥ٻ͞Εɺ
    ৽͍͠ػೳ͕ग़ͯ͜ͳ͍

    View Slide

  26. 2014೥͔ΒίΞͷ։
    ൃ͕ఀ଺͢Δɻ

    View Slide

  27. 2015೥
    • io.js ͕ Node.js ΛϑΥʔΫͯ͠ϦϦʔε


    • ҰؾʹίΞίϛολʔͷେ੎͕ io.js ଆ΁Ҡಈ


    • io.js ͱ Node.js ͕༥߹͠ɺγϯ Node.js ͱͯ͠։ൃऀ
    ίϛϡχςΟ͕ओಋ͢Δํ޲΁ Node.js Foundation ൃ



    • Node.js v4.0 ͕ϦϦʔε

    View Slide

  28. 2015೥
    • ES2015 ͳͲͷ׆ಈ΋༗Γɺ class, let, const, ESM, ͜͏͍ͬ
    ͨػೳΛਖ਼౰ਐԽ͍ͤͯͨ͘͞Ίʹ͸ඞཁͳվֵͩͬͨ


    • ͔͜͜Β React ͳͲͷՐ෇͚໾΋ੜ·ΕɺϑϩϯτΤϯυ
    ϒʔϜ͕ى͖Δ


    • Browserify ͱ͔͕ྲྀߦΓɺ server ͱ client ͷ͕֞ࠜಥഁ͞
    Ε͍ͯ͘


    • Isomorphic / universal ͱ͔ͷݴ༿΋͜͜Ͱੜ·ΕΔ

    View Slide

  29. Ұ୴͜͜·ͰͰৼΓฦΓ

    View Slide

  30. The rise of Node.js
    (2009-2015)
    • ϦϦʔε͔Βౖ౭ͷ6೥ؒ


    • ৽ػೳ͕೥୯ҐͰ௥Ճ͞ΕΔΘ


    • ΤίγεςϜ͕Ͱ͖ͯେྔͷ3rd party lib͸ੜ·Ε
    ΔΘ


    • ϦʔμʔมΘͬͯɺ։ൃओମ΋ίϛϡχςΟओಋ
    ʹมΘΔΘ

    View Slide

  31. The rise of Node.js
    (2009-2015)
    • ES2015ͱbabel, React/Vue.js ͳͲͷίϯϙʔωϯτ
    ࢦ޲ϥΠϒϥϦͷຄڵ, ਐԽͨ͠ Node.js ͦΕͧΕ͕
    Ұݸͷ೾ʹͳͬͯϒʔϜ͕ੜ·ΕΔ


    • ͜Ε͕୭͔ʹࢦ޲͞Ε͔ͨͷΑ͏ͳಈ͖ͰৼΓฦΔͱ
    ͳΜ͔ࢥ͏΋ͷ͕͋Δɻ


    • 2015೥ʹෳ਺ͷϒϨΠΫεϧʔ͕ى͖ͨΑ͏ʹࢥ͑
    Δɻ

    View Slide

  32. 2016-2018

    View Slide

  33. 2016-2018೥
    • ͜ͷ͋ͨΓ͔ΒաڈʹऔΓೖΕ͖ͯͨϥΠϒϥϦ
    ͷதͰ ES ΍ Web Standard ͱ͸ҧ͏࢓૊ΈΛͲ
    ͏౷߹͢Δ͔͕ٞ࿦ʹͳ͍ͬͯ͘


    • ESModule ͱ CommonJS


    • Stream / Event Emitter ͱ Promise / WHATWG
    Stream

    View Slide

  34. 2016-2018
    • 2016೥: Leftpad ࣄ͕݅ൃੜ


    • Npm ͕উखʹϥΠϒϥϦΛফ͢


    • ౖͬͨ࡞ऀ͕શͯͷϥΠϒϥϦΛফ͢


    • Leftpad ͱ͍͏ϥΠϒϥϦ͕ webpack ͕࢖͍ͬͯͨΓɺ babel
    ͷҰ෦Ͱ࢖ΘΕ͍ͯͨΓͱ৭ΜͳॴͰϥΠϒϥϦ͕յΕΔ


    • ͔͜͜ΒɺʮࢲୡɺϥΠϒϥϦґଘ͗͢͠͡ΌͶʁʯ͍ͬͯ͏งғ
    ؾ͕ྲྀΕΔɻ

    View Slide

  35. 2016-2018
    • 2018೥: npm ࢿۚ೉Ͱ৭ʑͱ࿩͕͠ग़ͯ͘Δ


    • ϨΠΦϑ͕͋ͬͨΓͱք۾͕͟Θͭ͘


    • Ұ୴ github ͱ౷߹͞Εͯམͪண͘ (2020೥)

    View Slide

  36. 2016-2018೥
    • 2017: Node.js ͕ CommonJS ͱ ESM ͷ૒ํΛ૬
    ޓޓ׵ੑΛอͬͨ··ղܾ͢Δͱ͍͏ํ๏Λ࣮
    ૷ɺ֦ுࢠʹΑΔ΍Γํ͕೾໲ΛݺͿ


    • 2017: React ΍ Vue.js Ͱ SSR ͢Δͱ͍͏ํ๏͕Ұ
    ఆͷྲྀߦͷஹ͠ΛݟͤΔɺ͜ͷࠒ Next.js ͕ϦϦʔ
    ε͞ΕΔ΋ɺΫΤϦʔύϥϝʔλͰ͔͠ routing
    Ͱ͖ͳ͔ͬͨͷͰ͋Μ·Γྲྀߦͬͯͳ͔ͬͨ

    View Slide

  37. 2016-2018೥
    • 2016: TypeScript ͕ @types ͳͲͷ࢓૊ΈΛ
    Ҿͬఏ͛ͯܕͷࢀরΛղܾ͢ΔखஈΛఏڙ͠ɺ
    VS Code ͳͲͷΤσΟλͱͱ΋ʹਐԽ


    • 2018: Deno ͕ jsconf.eu Ͱൃද͞ΕΔɻ໿10೥
    Λܦͯ Ryan ͔Β࠶ͼͷൃදɻಛʹ TypeScript
    native αϙʔτͳͲͷηϯε͸ྲྀੴɻ

    View Slide

  38. ݱ୅(2019-2023)

    View Slide

  39. ݱ୅
    • 2019: Node.js 10प೥ɺࠓޙͷϩʔυϚοϓͱͯ͠ ESM ڧԽɺ
    fetchɺ single executable appsɺ TS ͱͷ਌࿨ੑ޲্ͳͲͷ deno
    Λҙࣝͨ͠ײ͡ʹͳΔɻ


    • 2020: deno v1.0 ϦϦʔε


    • 2021: Node.js ʹ΋ web standard ͱͷ਌࿨ੑΛڧԽ͢Δ࿩͕૿͑
    Δɺ atob / btoa ͱ͔URLͱ͔ͷػೳ͕૿͍͑ͯ͘


    • 2021: Node.js ΋ Promise Λओମʹͨ͠APIʹมΘΔ

    View Slide

  40. ݱ୅
    • 2022: WINTER CG ൃ଍ɺ Node.js, Deno,
    Bun ͳͲͷϒϥ΢βҎ֎ͷϥϯλΠϜͷͨΊ
    ͷ࢓༷Խஂମ


    • Fetch ͷ minimum spec ͱ͔ ৭ʑܾ·ͬͨ

    View Slide

  41. Ұ୴͜͜·ͰͰৼΓฦΓ

    View Slide

  42. ྲྀߦͱڝ૪
    • npmҰ࣌ظࢿۚ೉͕͕͋ͬͨɺ GitHub ʹΑΔ
    ౷߹ͰҰ୴໰୊͸ղܾ͞Εͨ


    • TypeScript ͸ VS CodeͳͲͷπʔϧपΓ͕ਐԽ
    ͯ͠ɺେྲྀߦ


    • Next.js ͕େྲྀߦɺ Vercel ͳͲͷେ͖ͳελʔ
    τΞοϓ͕ੜ·Εͨ

    View Slide

  43. ྲྀߦͱڝ૪
    • ྲྀߦʹΑΓɺ݈શͳڝ૪͕૿͖͑ͯͨΑ͏ʹ
    ײ͡Δ


    • Node.js vs Deno vs Bun Έ͍ͨͳ


    • ݈શͳڝ૪ͱޓ׵ੑͱ࢓༷Խͱ͍͏ਐԽ͸Τ
    ϯυϢʔβʔʹҰ൪ར఺Λ΋ͨΒͯ͘͠ΕΔ
    ͱࢥ͑Δ

    View Slide

  44. ྲྀߦͱڝ૪
    • Node.js͸ίϛϡχςΟͷ੠͕ओಋ͞ΕΔɺྲྀߦͬͨ΍ͭΛޙ͔ΒऔΓೖΕ͍ͯ͘ํ਑


    • Test ͷ࢓૊Έ͕ೖͬͨ


    • Permission ͕αϙʔτ͞Εͨ


    • Experimental Ͱ͸͋Δ͕ɺ module ղܾͷ default ͕ มߋͰ͖ΔΑ͏ʹͳͬͨ
    ʢdefault Λ esm ʹม͍͑ͯ͜͏ͱͯ͠Δʣ


    • Single executable
    fi
    le ͕࡞ΕΔΑ͏ʹͳͬͨ


    • Web Standard ͱͷ਌࿨ੑΛ্͍͛ͯ͜͏ͱͯ͠Δʢnavigator͕ೖͬͨΓʣ


    • ࠓϚείοτΩϟϥΫλʔืूͯ͠Δͱͷ͜ͱ

    View Slide

  45. ྲྀߦͱڝ૪
    • Deno ͸ Node.js ͱͷ compat Λ্͍͖͍͛ͯͨํ਑


    • npm support


    • ͦͷ্ͰπʔϧνΣΠϯɺಈ࡞؀ڥΛݩʹ։ൃશମΛ
    ੝Γ্͍͛ͯ͘


    • Deno Deploy


    • Deno fresh

    View Slide

  46. ࠓޙͷ༧૝

    View Slide

  47. ࠓޙ
    • Node.jsޓ׵ੑ্͕͕Γɺ Deno ΍ Bun ͳͲͱͷ
    ڝ૪͕΋ͬͱ૿͑Δ


    • ΤίγεςϜΛͲ͜·Ͱࣗ෼ͷਞӦʹ࣋ͬͯ͜Ε
    Δ͔উෛʹͳΓͦ͏ɻ


    • ޓ׵ੑ্͕͕Ε͹ޙ͸ੑೳ΍ηΩϡϦςΟ΍։ൃ
    ऀମݧ΍ӡ༻҆ఆੑͳͲͷඇػೳཁ݅Ͱͷউෛʹ
    ͳΔ

    View Slide

  48. ࠓޙ
    • Denoଆ͔ΒݟΔͱɺNode.jsΤίγεςϜͱͷ਌࿨ੑ
    Λ্͛ͯɺ೗Կʹૣ͘ Node.js ͷγΣΞΛୣ͑Δ͔


    • Node.js ଆ͔ΒݟΔͱɺଞͷϥϯλΠϜͱͷػೳࠩΛ
    ແͯ͘͠ɺطଘγΣΞΛҡ࣋Ͱ͖Δ͔


    • Bun ଆ͔ΒݟΔͱɺΤίγεςϜͷ਌࿨ੑΛ্͛Δͱ
    ͱ΋ʹѹ౗తͳύϑΥʔϚϯεͰੑೳࠩͰѹ౗͍ͨ͠

    View Slide

  49. ࠓޙ
    • ࡾऀࡾ༷


    • ͜͏͍͏݈શͳڝ૪͕͠͹Β͘ଓ͖ɺڝ૪ঢ়
    ଶͷ··ۉߧͦ͠͏ͳؾ΋͍ͯ͠Δɻ

    View Slide

  50. ࠓޙ
    • ͜ͷଞͷํ޲ੑͱͯ͠:


    • ΤοδίϯϐϡʔςΟϯάํ޲ͰCDN಺Ͱಈ͘αʔ
    όαΠυܰྔJSͷྲྀߦ


    • ϑϧελοΫͳ JS ϑϨʔϜϫʔΫͷོ੝ͱਐԽ


    • ΢Σϒ։ൃͷਐԽͱͱ΋ʹԼճΓΛࢧ͑Δπʔϧͱ
    ͯ͠ਐԽ͠ଓ͚ͦ͏

    View Slide

  51. ·ͱΊ

    View Slide

  52. ·ͱΊ
    • JavaScript Server Runtime ͷྺ࢙ΛৼΓฦͬͨɻ


    • ίϛϡχςΟͱྗΛ࣋ͬͨاۀ͕࿈ಈ͠ͳ͕Βൃల͖ͯͨ͠
    ྺ࢙ͩͬͨΑ͏ʹײ͡Δɻ


    • ݈શͳڝ૪ʹΑΔػೳͱඇػೳͷࠩผԽ͕ܹԽͯ͠Δ


    • ҰํͰڞ௨ԽΛWinterCGΛத৺ʹߦΘΕ͍ͯΔ


    • ·ͩ·ͩൃల͍͖ͯͦ͠͏ɺ։ൃऀʹ༏͍͠ൃల͕ࠓޙ΋๬
    ·ΕΔ

    View Slide

  53. 12೥લʹ๻ͷਓੜΛม͑ͨΑ
    ͏ʹࠓ೔ͷ Ryan ͷൃදͰ୭
    ͔ͷਓੜ͕มΘΔͱ͍͍ͳͱ
    ࢥ͍·͢ɻ

    View Slide

  54. Thanks!!

    View Slide

  55. ࢀߟࢿྉ
    • https://webdevelopmenthistory.com/1995-the-birth-of-javascript/


    • https://webdevelopmenthistory.com/1996-javascript-annoyances-and-
    meeting-the-dom/


    • https://dev.to/macargnelutti/server-side-javascript-a-decade-before-node-js-
    with-netscape-livewire-l72


    • https://philip.greenspun.com/wtr/livewire.html


    • http://sunsite.uakom.sk/sunworldonline/swol-08-1999/swol-08-
    webmaster.html


    • https://en.wikipedia.org/wiki/Node.js


    • https://yosuke-furukawa.hatenablog.com/entry/2022/04/08/111651

    View Slide