JavaScript Server Runtime History

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

1. JavaScript Server Runtime History 2023/10/20 @ toranoana
2. X(Twitter): @yosuke_furukawa GitHub: yosuke-furukawa
3. 
   +4$POGKQ
   ͸͡·Γ·͢ʔʂ
4. ߽՚εϐʔΧʔਞ
5. NodeֶԂࡇ 2011 Ryan Dahl changed my life.
6. JavaScript Server Runtime ͷ ྺ࢙ʹ͍ͭͯ • 90೥୅͔Βݱ୅·ͰৼΓฦΔ • ࠓޙͲ͏͍͏ྲྀΕ͕͋Δ͔ɺͲ͏ͳΔ͔Λ༧ଌ ͢Δ • ྺ࢙ͬͯ໘ന͍ͷͰݟͯཉ͍͠ • ࿩͍ͨ͜͠ͱΛ࿩͢ɺͳΜ͔ͨΊʹͳΔ࿩͕ฉ͚ Δͱࢥͬͯ͸͍͚ͳ͍
7. 1995: JavaScript was born
8. 1995೥ • JavaScript ஀ੜ • Netscape Navigator 2.0 Beta ൛ʹಉࠝ • ޙʹ 1996೥ʹਖ਼ࣜϦϦʔε൛͕ൃද
9. #SFBOEBO
   &JDI
   ࢯͷϗʔϜϖʔδ
   ྺ࢙Λײ͡ΔσβΠϯ
10. 1995೥ • ͔͜͜Β࠷ॳͷ Browser War ͕ى͖Δ • ͍ΘΏΔ Internet Explorer ਞӦ vs Netscape ਞӦ • ྺ࢙Ͱݴ͏ͱؔέݪͷઓ͍΍੺นͷઓ͍ • ·͊ͳΜͱ͍͏͔өըͰݴ͏ͱݟͲ͜Ζͷ෦෼
11. 1996: Netscape Livewire was born
12. 1996೥ • ϒϥ΢βઓ૪ͷཪͰͻͬͦΓͱग़͖ͯͨ Netscape Livewire ͱ͍͏αʔόαΠυ JavaScript ٕज़ • ͳΜͱ HTML λάͷதʹ <server> λάΛॻ͍ͯͦ͜ ʹεΫϦϓτΛॻ͘ͱ࣮ߦ͞ΕΔͱ͍͏࢓༷ • ॻ͍ͨhtmlΛίϯύΠϧ͢ΔͱόΠτίʔυ͕͍ͭͨ ࣮ߦՄೳͳܗࣜʹม׵͞ΕɺWebαʔόΛىಈͰ͖Δ
13. Netscape Livewire • HTMLͱಉ͡৔ॴʹॲཧΛॻ͍ͯɺίϯύΠϧ ͢Δ # jsac ͱ͍͏ίϯύΠϥͰίϯύΠϧ͢Δ $ jsac -i app.html -o app.web
14. 1996೥ • ͳΜͱ͜ͷଞʹ΋ Java ͷΫϥεΛݺͼग़ٕ͢ ज़ʢࠓͰݴ͏C++ native codeݺͼग़͢Α͏ͳ ײ͡ʣ΋͋ͬͨΓ • Database ઀ଓ͢Δٕज़΋͋ͬͨ • ͨͩ·͊ΈΜͳ΋஌ͬͯͷ௨Γɺ͜Ε͕ϝΠϯ ετϦʔϜʹͳΔ͜ͱ͸ͳ͔ͬͨ
15. 1996೥ • ཪͰߦΘΕͯΔϒϥ΢βઓ૪͸։ൃ؀ڥͷઓ૪Ͱ΋͋Δ • Microsoft ASP ͱਅͬ޲͔Βରཱ͕ͨ͠ɺ ASP ͸ίϯύ Πϧεςοϓ͕ͳͯ͘΋ಈ͘ͷʹରͯ͋͠·Γʹ΋ݪ࢝ త • ࠓͰͦ͜ JavaScript ͸ϓϩάϥϛϯάݴޠͱͯ͠ͷ஍Ґ Λཱ֬Ͱ͖͍ͯΔ͕͜ͷ࣌఺Ͱ͸·ͩए͗ͨ͢ • ݁ہྲྀߦΒͳ͔ͬͨɻɹ
16. 2009: Node.js was born
17. 2009೥ • αʔόαΠυ JavaScript ݩ೥ • Node.js ͕஀ੜ • ಉ೥ळʹ JSConf.EU Ͱ Ryan ͕ൃද
18. 2009೥ • ͜ͷ࣌ͷ Node.js ͷಛ௃ • Event-driven / Non-blocking IO • Built on Google V8 • CommonJS • ·ͩ͜ͷͱ͖͸ npm ΋ Windows αϙʔτ΋ͳ͍
19. 2009೥ • Apache HTTP Server ͕ C10K ໰୊ͱ͍͏൷൑ΛཋͼͤΒΕ͍ͯͨ ࣌୅ • Non blocking IO / Event driven ͳΞʔΩςΫνϟ͸ nginx / event machine ͱ͔Ͱطʹྲྀߦͬͯͨɻ • ͡Ό͋ͦΕΛ JavaScript Ͱ΍ͬͯΈͨΒͲ͏͔ʁͱ͍͏ΞΠσΞ͸ ޭΛ૗ͨ͠ • JavaScript ʹ͸ File IO ॲཧ͕ͳ͘ɺαʔόαΠυͷAPI͸ະ։୓ ͩͬͨ
20. 2010: npm was born
21. 2010೥ • 3rd party ͷϥΠϒϥϦΛެ։͠ɺಡΈࠐΉ͜ ͱ͕Ͱ͖Δ࢓૊ΈΛ npm ͱ࣮ͯ͠૷ • ͦΕΛಉࠝ͢Δ͜ͱͰϥΠϒϥϦ։ൃΛ͠΍ ͘͢ɺ·ͨίΞʹ଍Γ͍ͯͳ͍ػೳΛ௥Ճ͠ ΍ͨ͘͢͠ • ΤίγεςϜ͕ੜ·Ε͍ͯͬͨ࣌୅
22. 2010೥ • Express ͕ొ৔ • socket.io v0.1΋ޙ൒ʹొ৔ • ͔͜͜ΒϒʔϜʹՐ͕͍͍ͭͯ͘ • Yeoman/grunt/gulp ͱ͔͸ 2013೥ʹొ৔
23. 2011-2014೥ • 2011: Windows αϙʔτ • 2011: Joyent ͕ग़ࢿ • 2012: Node.js Ϧʔμʔަ୅ Ryan => isaacs • 2014: Node.js Ϧʔμʔަ୅ isaacs => TJ Fontaine
24. 2014: Node.js were forked as io.js
25. 2014೥ • มԽ͕ى͖ͣɺӢߦ͖͕ո͘͠ͳΔ • ৽͍͠ػೳ͕௥Ճ͞Εͳ͍ɺόʔδϣϯ͕Ϧ Ϧʔε͞Εͳ͍ • ΤϯλʔϓϥΠζͳ҆ఆੑ͹͔Γ௥ٻ͞Εɺ ৽͍͠ػೳ͕ग़ͯ͜ͳ͍
26. 2014೥͔ΒίΞͷ։ ൃ͕ఀ଺͢Δɻ
27. 2015೥ • io.js ͕ Node.js ΛϑΥʔΫͯ͠ϦϦʔε • ҰؾʹίΞίϛολʔͷେ੎͕ io.js ଆ΁Ҡಈ • io.js ͱ Node.js ͕༥߹͠ɺγϯ Node.js ͱͯ͠։ൃऀ ίϛϡχςΟ͕ओಋ͢Δํ޲΁ Node.js Foundation ൃ ଍ • Node.js v4.0 ͕ϦϦʔε
28. 2015೥ • ES2015 ͳͲͷ׆ಈ΋༗Γɺ class, let, const, ESM, ͜͏͍ͬ ͨػೳΛਖ਼౰ਐԽ͍ͤͯͨ͘͞Ίʹ͸ඞཁͳվֵͩͬͨ • ͔͜͜Β React ͳͲͷՐ෇͚໾΋ੜ·ΕɺϑϩϯτΤϯυ ϒʔϜ͕ى͖Δ • Browserify ͱ͔͕ྲྀߦΓɺ server ͱ client ͷ͕֞ࠜಥഁ͞ Ε͍ͯ͘ • Isomorphic / universal ͱ͔ͷݴ༿΋͜͜Ͱੜ·ΕΔ
29. Ұ୴͜͜·ͰͰৼΓฦΓ
30. The rise of Node.js (2009-2015) • ϦϦʔε͔Βౖ౭ͷ6೥ؒ • ৽ػೳ͕೥୯ҐͰ௥Ճ͞ΕΔΘ • ΤίγεςϜ͕Ͱ͖ͯେྔͷ3rd party lib͸ੜ·Ε ΔΘ • ϦʔμʔมΘͬͯɺ։ൃओମ΋ίϛϡχςΟओಋ ʹมΘΔΘ
31. The rise of Node.js (2009-2015) • ES2015ͱbabel, React/Vue.js ͳͲͷίϯϙʔωϯτ ࢦ޲ϥΠϒϥϦͷຄڵ, ਐԽͨ͠ Node.js ͦΕͧΕ͕ Ұݸͷ೾ʹͳͬͯϒʔϜ͕ੜ·ΕΔ • ͜Ε͕୭͔ʹࢦ޲͞Ε͔ͨͷΑ͏ͳಈ͖ͰৼΓฦΔͱ ͳΜ͔ࢥ͏΋ͷ͕͋Δɻ • 2015೥ʹෳ਺ͷϒϨΠΫεϧʔ͕ى͖ͨΑ͏ʹࢥ͑ Δɻ
32. 2016-2018
33. 2016-2018೥ • ͜ͷ͋ͨΓ͔ΒաڈʹऔΓೖΕ͖ͯͨϥΠϒϥϦ ͷதͰ ES ΍ Web Standard ͱ͸ҧ͏࢓૊ΈΛͲ ͏౷߹͢Δ͔͕ٞ࿦ʹͳ͍ͬͯ͘ • ESModule ͱ CommonJS • Stream / Event Emitter ͱ Promise / WHATWG Stream
34. 2016-2018 • 2016೥: Leftpad ࣄ͕݅ൃੜ • Npm ͕উखʹϥΠϒϥϦΛফ͢ • ౖͬͨ࡞ऀ͕શͯͷϥΠϒϥϦΛফ͢ • Leftpad ͱ͍͏ϥΠϒϥϦ͕ webpack ͕࢖͍ͬͯͨΓɺ babel ͷҰ෦Ͱ࢖ΘΕ͍ͯͨΓͱ৭ΜͳॴͰϥΠϒϥϦ͕յΕΔ • ͔͜͜ΒɺʮࢲୡɺϥΠϒϥϦґଘ͗͢͠͡ΌͶʁʯ͍ͬͯ͏งғ ؾ͕ྲྀΕΔɻ
35. 2016-2018 • 2018೥: npm ࢿۚ೉Ͱ৭ʑͱ࿩͕͠ग़ͯ͘Δ • ϨΠΦϑ͕͋ͬͨΓͱք۾͕͟Θͭ͘ • Ұ୴ github ͱ౷߹͞Εͯམͪண͘ (2020೥)
36. 2016-2018೥ • 2017: Node.js ͕ CommonJS ͱ ESM ͷ૒ํΛ૬ ޓޓ׵ੑΛอͬͨ··ղܾ͢Δͱ͍͏ํ๏Λ࣮ ૷ɺ֦ுࢠʹΑΔ΍Γํ͕೾໲ΛݺͿ • 2017: React ΍ Vue.js Ͱ SSR ͢Δͱ͍͏ํ๏͕Ұ ఆͷྲྀߦͷஹ͠ΛݟͤΔɺ͜ͷࠒ Next.js ͕ϦϦʔ ε͞ΕΔ΋ɺΫΤϦʔύϥϝʔλͰ͔͠ routing Ͱ͖ͳ͔ͬͨͷͰ͋Μ·Γྲྀߦͬͯͳ͔ͬͨ
37. 2016-2018೥ • 2016: TypeScript ͕ @types ͳͲͷ࢓૊ΈΛ Ҿͬఏ͛ͯܕͷࢀরΛղܾ͢ΔखஈΛఏڙ͠ɺ VS Code ͳͲͷΤσΟλͱͱ΋ʹਐԽ • 2018: Deno ͕ jsconf.eu Ͱൃද͞ΕΔɻ໿10೥ Λܦͯ Ryan ͔Β࠶ͼͷൃදɻಛʹ TypeScript native αϙʔτͳͲͷηϯε͸ྲྀੴɻ
38. ݱ୅(2019-2023)
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ʹมΘΔ
40. ݱ୅ • 2022: WINTER CG ൃ଍ɺ Node.js, Deno, Bun ͳͲͷϒϥ΢βҎ֎ͷϥϯλΠϜͷͨΊ ͷ࢓༷Խஂମ • Fetch ͷ minimum spec ͱ͔ ৭ʑܾ·ͬͨ
41. Ұ୴͜͜·ͰͰৼΓฦΓ
42. ྲྀߦͱڝ૪ • npmҰ࣌ظࢿۚ೉͕͕͋ͬͨɺ GitHub ʹΑΔ ౷߹ͰҰ୴໰୊͸ղܾ͞Εͨ • TypeScript ͸ VS CodeͳͲͷπʔϧपΓ͕ਐԽ ͯ͠ɺେྲྀߦ • Next.js ͕େྲྀߦɺ Vercel ͳͲͷେ͖ͳελʔ τΞοϓ͕ੜ·Εͨ
43. ྲྀߦͱڝ૪ • ྲྀߦʹΑΓɺ݈શͳڝ૪͕૿͖͑ͯͨΑ͏ʹ ײ͡Δ • Node.js vs Deno vs Bun Έ͍ͨͳ • ݈શͳڝ૪ͱޓ׵ੑͱ࢓༷Խͱ͍͏ਐԽ͸Τ ϯυϢʔβʔʹҰ൪ར఺Λ΋ͨΒͯ͘͠ΕΔ ͱࢥ͑Δ
44. ྲྀߦͱڝ૪ • Node.js͸ίϛϡχςΟͷ੠͕ओಋ͞ΕΔɺྲྀߦͬͨ΍ͭΛޙ͔ΒऔΓೖΕ͍ͯ͘ํ਑ • Test ͷ࢓૊Έ͕ೖͬͨ • Permission ͕αϙʔτ͞Εͨ • Experimental Ͱ͸͋Δ͕ɺ module ղܾͷ default ͕ มߋͰ͖ΔΑ͏ʹͳͬͨ ʢdefault Λ esm ʹม͍͑ͯ͜͏ͱͯ͠Δʣ • Single executable fi le ͕࡞ΕΔΑ͏ʹͳͬͨ • Web Standard ͱͷ਌࿨ੑΛ্͍͛ͯ͜͏ͱͯ͠Δʢnavigator͕ೖͬͨΓʣ • ࠓϚείοτΩϟϥΫλʔืूͯ͠Δͱͷ͜ͱ
45. ྲྀߦͱڝ૪ • Deno ͸ Node.js ͱͷ compat Λ্͍͖͍͛ͯͨํ਑ • npm support • ͦͷ্ͰπʔϧνΣΠϯɺಈ࡞؀ڥΛݩʹ։ൃશମΛ ੝Γ্͍͛ͯ͘ • Deno Deploy • Deno fresh
46. ࠓޙͷ༧૝
47. ࠓޙ • Node.jsޓ׵ੑ্͕͕Γɺ Deno ΍ Bun ͳͲͱͷ ڝ૪͕΋ͬͱ૿͑Δ • ΤίγεςϜΛͲ͜·Ͱࣗ෼ͷਞӦʹ࣋ͬͯ͜Ε Δ͔উෛʹͳΓͦ͏ɻ • ޓ׵ੑ্͕͕Ε͹ޙ͸ੑೳ΍ηΩϡϦςΟ΍։ൃ ऀମݧ΍ӡ༻҆ఆੑͳͲͷඇػೳཁ݅Ͱͷউෛʹ ͳΔ
48. ࠓޙ • Denoଆ͔ΒݟΔͱɺNode.jsΤίγεςϜͱͷ਌࿨ੑ Λ্͛ͯɺ೗Կʹૣ͘ Node.js ͷγΣΞΛୣ͑Δ͔ • Node.js ଆ͔ΒݟΔͱɺଞͷϥϯλΠϜͱͷػೳࠩΛ ແͯ͘͠ɺطଘγΣΞΛҡ࣋Ͱ͖Δ͔ • Bun ଆ͔ΒݟΔͱɺΤίγεςϜͷ਌࿨ੑΛ্͛Δͱ ͱ΋ʹѹ౗తͳύϑΥʔϚϯεͰੑೳࠩͰѹ౗͍ͨ͠
49. ࠓޙ • ࡾऀࡾ༷ • ͜͏͍͏݈શͳڝ૪͕͠͹Β͘ଓ͖ɺڝ૪ঢ় ଶͷ··ۉߧͦ͠͏ͳؾ΋͍ͯ͠Δɻ
50. ࠓޙ • ͜ͷଞͷํ޲ੑͱͯ͠: • ΤοδίϯϐϡʔςΟϯάํ޲ͰCDN಺Ͱಈ͘αʔ όαΠυܰྔJSͷྲྀߦ • ϑϧελοΫͳ JS ϑϨʔϜϫʔΫͷོ੝ͱਐԽ • ΢Σϒ։ൃͷਐԽͱͱ΋ʹԼճΓΛࢧ͑Δπʔϧͱ ͯ͠ਐԽ͠ଓ͚ͦ͏
51. ·ͱΊ
52. ·ͱΊ • JavaScript Server Runtime ͷྺ࢙ΛৼΓฦͬͨɻ • ίϛϡχςΟͱྗΛ࣋ͬͨاۀ͕࿈ಈ͠ͳ͕Βൃల͖ͯͨ͠ ྺ࢙ͩͬͨΑ͏ʹײ͡Δɻ • ݈શͳڝ૪ʹΑΔػೳͱඇػೳͷࠩผԽ͕ܹԽͯ͠Δ • ҰํͰڞ௨ԽΛWinterCGΛத৺ʹߦΘΕ͍ͯΔ • ·ͩ·ͩൃల͍͖ͯͦ͠͏ɺ։ൃऀʹ༏͍͠ൃల͕ࠓޙ΋๬ ·ΕΔ
53. 12೥લʹ๻ͷਓੜΛม͑ͨΑ ͏ʹࠓ೔ͷ Ryan ͷൃදͰ୭ ͔ͷਓੜ͕มΘΔͱ͍͍ͳͱ ࢥ͍·͢ɻ
54. Thanks!!
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