JavaScript Server Runtime History

by Yosuke Furukawa

Embed

Start on current slide

Slide 1

Slide 1 text

JavaScript Server Runtime History 2023/10/20 @ toranoana

Slide 2

Slide 2 text

X(Twitter): @yosuke_furukawa GitHub: yosuke-furukawa

Slide 3

Slide 3 text

+4$POGKQ͸͡·Γ·͢ʔʂ

Slide 4

Slide 4 text

߽՚εϐʔΧʔਞ

Slide 5

Slide 5 text

NodeֶԂࡇ 2011 Ryan Dahl changed my life.

Slide 6

Slide 6 text

JavaScript Server Runtime ͷ ྺ࢙ʹ͍ͭͯ • 90೥୅͔Βݱ୅·ͰৼΓฦΔ • ࠓޙͲ͏͍͏ྲྀΕ͕͋Δ͔ɺͲ͏ͳΔ͔Λ༧ଌ ͢Δ • ྺ࢙ͬͯ໘ന͍ͷͰݟͯཉ͍͠ • ࿩͍ͨ͜͠ͱΛ࿩͢ɺͳΜ͔ͨΊʹͳΔ࿩͕ฉ͚ Δͱࢥͬͯ͸͍͚ͳ͍

Slide 7

Slide 7 text

1995: JavaScript was born

Slide 8

Slide 8 text

1995೥ • JavaScript ஀ੜ • Netscape Navigator 2.0 Beta ൛ʹಉࠝ • ޙʹ 1996೥ʹਖ਼ࣜϦϦʔε൛͕ൃද

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

1995೥ • ͔͜͜Β࠷ॳͷ Browser War ͕ى͖Δ • ͍ΘΏΔ Internet Explorer ਞӦ vs Netscape ਞӦ • ྺ࢙Ͱݴ͏ͱؔέݪͷઓ͍΍੺นͷઓ͍ • ·͊ͳΜͱ͍͏͔өըͰݴ͏ͱݟͲ͜Ζͷ෦෼

Slide 11

Slide 11 text

1996: Netscape Livewire was born

Slide 12

Slide 12 text

1996೥ • ϒϥ΢βઓ૪ͷཪͰͻͬͦΓͱग़͖ͯͨ Netscape Livewire ͱ͍͏αʔόαΠυ JavaScript ٕज़ • ͳΜͱ HTML λάͷதʹ λάΛॻ͍ͯͦ͜ ʹεΫϦϓτΛॻ͘ͱ࣮ߦ͞ΕΔͱ͍͏࢓༷ • ॻ͍ͨhtmlΛίϯύΠϧ͢ΔͱόΠτίʔυ͕͍ͭͨ ࣮ߦՄೳͳܗࣜʹม׵͞ΕɺWebαʔόΛىಈͰ͖Δ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

1996೥ • ͳΜͱ͜ͷଞʹ΋ Java ͷΫϥεΛݺͼग़ٕ͢ ज़ʢࠓͰݴ͏C++ native codeݺͼग़͢Α͏ͳ ײ͡ʣ΋͋ͬͨΓ • Database ઀ଓ͢Δٕज़΋͋ͬͨ • ͨͩ·͊ΈΜͳ΋஌ͬͯͷ௨Γɺ͜Ε͕ϝΠϯ ετϦʔϜʹͳΔ͜ͱ͸ͳ͔ͬͨ

Slide 15

Slide 15 text

1996೥ • ཪͰߦΘΕͯΔϒϥ΢βઓ૪͸։ൃ؀ڥͷઓ૪Ͱ΋͋Δ • Microsoft ASP ͱਅͬ޲͔Βରཱ͕ͨ͠ɺ ASP ͸ίϯύ Πϧεςοϓ͕ͳͯ͘΋ಈ͘ͷʹରͯ͋͠·Γʹ΋ݪ࢝ త • ࠓͰͦ͜ JavaScript ͸ϓϩάϥϛϯάݴޠͱͯ͠ͷ஍Ґ Λཱ֬Ͱ͖͍ͯΔ͕͜ͷ࣌఺Ͱ͸·ͩए͗ͨ͢ • ݁ہྲྀߦΒͳ͔ͬͨɻɹ

Slide 16

Slide 16 text

2009: Node.js was born

Slide 17

Slide 17 text

2009೥ • αʔόαΠυ JavaScript ݩ೥ • Node.js ͕஀ੜ • ಉ೥ळʹ JSConf.EU Ͱ Ryan ͕ൃද

Slide 18

Slide 18 text

2009೥ • ͜ͷ࣌ͷ Node.js ͷಛ௃ • Event-driven / Non-blocking IO • Built on Google V8 • CommonJS • ·ͩ͜ͷͱ͖͸ npm ΋ Windows αϙʔτ΋ͳ͍

Slide 19

Slide 19 text

2009೥ • Apache HTTP Server ͕ C10K ໰୊ͱ͍͏൷൑ΛཋͼͤΒΕ͍ͯͨ ࣌୅ • Non blocking IO / Event driven ͳΞʔΩςΫνϟ͸ nginx / event machine ͱ͔Ͱطʹྲྀߦͬͯͨɻ • ͡Ό͋ͦΕΛ JavaScript Ͱ΍ͬͯΈͨΒͲ͏͔ʁͱ͍͏ΞΠσΞ͸ ޭΛ૗ͨ͠ • JavaScript ʹ͸ File IO ॲཧ͕ͳ͘ɺαʔόαΠυͷAPI͸ະ։୓ ͩͬͨ

Slide 20

Slide 20 text

2010: npm was born

Slide 21

Slide 21 text

2010೥ • 3rd party ͷϥΠϒϥϦΛެ։͠ɺಡΈࠐΉ͜ ͱ͕Ͱ͖Δ࢓૊ΈΛ npm ͱ࣮ͯ͠૷ • ͦΕΛಉࠝ͢Δ͜ͱͰϥΠϒϥϦ։ൃΛ͠΍ ͘͢ɺ·ͨίΞʹ଍Γ͍ͯͳ͍ػೳΛ௥Ճ͠ ΍ͨ͘͢͠ • ΤίγεςϜ͕ੜ·Ε͍ͯͬͨ࣌୅

Slide 22

Slide 22 text

2010೥ • Express ͕ొ৔ • socket.io v0.1΋ޙ൒ʹొ৔ • ͔͜͜ΒϒʔϜʹՐ͕͍͍ͭͯ͘ • Yeoman/grunt/gulp ͱ͔͸ 2013೥ʹొ৔

Slide 23

Slide 23 text

2011-2014೥ • 2011: Windows αϙʔτ • 2011: Joyent ͕ग़ࢿ • 2012: Node.js Ϧʔμʔަ୅ Ryan => isaacs • 2014: Node.js Ϧʔμʔަ୅ isaacs => TJ Fontaine

Slide 24

Slide 24 text

2014: Node.js were forked as io.js

Slide 25

Slide 25 text

2014೥ • มԽ͕ى͖ͣɺӢߦ͖͕ո͘͠ͳΔ • ৽͍͠ػೳ͕௥Ճ͞Εͳ͍ɺόʔδϣϯ͕Ϧ Ϧʔε͞Εͳ͍ • ΤϯλʔϓϥΠζͳ҆ఆੑ͹͔Γ௥ٻ͞Εɺ ৽͍͠ػೳ͕ग़ͯ͜ͳ͍

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

2015೥ • io.js ͕ Node.js ΛϑΥʔΫͯ͠ϦϦʔε • ҰؾʹίΞίϛολʔͷେ੎͕ io.js ଆ΁Ҡಈ • io.js ͱ Node.js ͕༥߹͠ɺγϯ Node.js ͱͯ͠։ൃऀ ίϛϡχςΟ͕ओಋ͢Δํ޲΁ Node.js Foundation ൃ ଍ • Node.js v4.0 ͕ϦϦʔε

Slide 28

Slide 28 text

2015೥ • ES2015 ͳͲͷ׆ಈ΋༗Γɺ class, let, const, ESM, ͜͏͍ͬ ͨػೳΛਖ਼౰ਐԽ͍ͤͯͨ͘͞Ίʹ͸ඞཁͳվֵͩͬͨ • ͔͜͜Β React ͳͲͷՐ෇͚໾΋ੜ·ΕɺϑϩϯτΤϯυ ϒʔϜ͕ى͖Δ • Browserify ͱ͔͕ྲྀߦΓɺ server ͱ client ͷ͕֞ࠜಥഁ͞ Ε͍ͯ͘ • Isomorphic / universal ͱ͔ͷݴ༿΋͜͜Ͱੜ·ΕΔ

Slide 29

Slide 29 text

Ұ୴͜͜·ͰͰৼΓฦΓ

Slide 30

Slide 30 text

The rise of Node.js (2009-2015) • ϦϦʔε͔Βౖ౭ͷ6೥ؒ • ৽ػೳ͕೥୯ҐͰ௥Ճ͞ΕΔΘ • ΤίγεςϜ͕Ͱ͖ͯେྔͷ3rd party lib͸ੜ·Ε ΔΘ • ϦʔμʔมΘͬͯɺ։ൃओମ΋ίϛϡχςΟओಋ ʹมΘΔΘ

Slide 31

Slide 31 text

The rise of Node.js (2009-2015) • ES2015ͱbabel, React/Vue.js ͳͲͷίϯϙʔωϯτ ࢦ޲ϥΠϒϥϦͷຄڵ, ਐԽͨ͠ Node.js ͦΕͧΕ͕ Ұݸͷ೾ʹͳͬͯϒʔϜ͕ੜ·ΕΔ • ͜Ε͕୭͔ʹࢦ޲͞Ε͔ͨͷΑ͏ͳಈ͖ͰৼΓฦΔͱ ͳΜ͔ࢥ͏΋ͷ͕͋Δɻ • 2015೥ʹෳ਺ͷϒϨΠΫεϧʔ͕ى͖ͨΑ͏ʹࢥ͑ Δɻ

Slide 32

Slide 32 text

2016-2018

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

2016-2018 • 2016೥: Leftpad ࣄ͕݅ൃੜ • Npm ͕উखʹϥΠϒϥϦΛফ͢ • ౖͬͨ࡞ऀ͕શͯͷϥΠϒϥϦΛফ͢ • Leftpad ͱ͍͏ϥΠϒϥϦ͕ webpack ͕࢖͍ͬͯͨΓɺ babel ͷҰ෦Ͱ࢖ΘΕ͍ͯͨΓͱ৭ΜͳॴͰϥΠϒϥϦ͕յΕΔ • ͔͜͜ΒɺʮࢲୡɺϥΠϒϥϦґଘ͗͢͠͡ΌͶʁʯ͍ͬͯ͏งғ ؾ͕ྲྀΕΔɻ

Slide 35

Slide 35 text

2016-2018 • 2018೥: npm ࢿۚ೉Ͱ৭ʑͱ࿩͕͠ग़ͯ͘Δ • ϨΠΦϑ͕͋ͬͨΓͱք۾͕͟Θͭ͘ • Ұ୴ github ͱ౷߹͞Εͯམͪண͘ (2020೥)

Slide 36

Slide 36 text

2016-2018೥ • 2017: Node.js ͕ CommonJS ͱ ESM ͷ૒ํΛ૬ ޓޓ׵ੑΛอͬͨ··ղܾ͢Δͱ͍͏ํ๏Λ࣮ ૷ɺ֦ுࢠʹΑΔ΍Γํ͕೾໲ΛݺͿ • 2017: React ΍ Vue.js Ͱ SSR ͢Δͱ͍͏ํ๏͕Ұ ఆͷྲྀߦͷஹ͠ΛݟͤΔɺ͜ͷࠒ Next.js ͕ϦϦʔ ε͞ΕΔ΋ɺΫΤϦʔύϥϝʔλͰ͔͠ routing Ͱ͖ͳ͔ͬͨͷͰ͋Μ·Γྲྀߦͬͯͳ͔ͬͨ

Slide 37

Slide 37 text

2016-2018೥ • 2016: TypeScript ͕ @types ͳͲͷ࢓૊ΈΛ Ҿͬఏ͛ͯܕͷࢀরΛղܾ͢ΔखஈΛఏڙ͠ɺ VS Code ͳͲͷΤσΟλͱͱ΋ʹਐԽ • 2018: Deno ͕ jsconf.eu Ͱൃද͞ΕΔɻ໿10೥ Λܦͯ Ryan ͔Β࠶ͼͷൃදɻಛʹ TypeScript native αϙʔτͳͲͷηϯε͸ྲྀੴɻ

Slide 38

Slide 38 text

ݱ୅(2019-2023)

Slide 39

Slide 39 text

ݱ୅ • 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ʹมΘΔ

Slide 40

Slide 40 text

ݱ୅ • 2022: WINTER CG ൃ଍ɺ Node.js, Deno, Bun ͳͲͷϒϥ΢βҎ֎ͷϥϯλΠϜͷͨΊ ͷ࢓༷Խஂମ • Fetch ͷ minimum spec ͱ͔ ৭ʑܾ·ͬͨ

Slide 41

Slide 41 text

Ұ୴͜͜·ͰͰৼΓฦΓ

Slide 42

Slide 42 text

ྲྀߦͱڝ૪ • npmҰ࣌ظࢿۚ೉͕͕͋ͬͨɺ GitHub ʹΑΔ ౷߹ͰҰ୴໰୊͸ղܾ͞Εͨ • TypeScript ͸ VS CodeͳͲͷπʔϧपΓ͕ਐԽ ͯ͠ɺେྲྀߦ • Next.js ͕େྲྀߦɺ Vercel ͳͲͷେ͖ͳελʔ τΞοϓ͕ੜ·Εͨ

Slide 43

Slide 43 text

ྲྀߦͱڝ૪ • ྲྀߦʹΑΓɺ݈શͳڝ૪͕૿͖͑ͯͨΑ͏ʹ ײ͡Δ • Node.js vs Deno vs Bun Έ͍ͨͳ • ݈શͳڝ૪ͱޓ׵ੑͱ࢓༷Խͱ͍͏ਐԽ͸Τ ϯυϢʔβʔʹҰ൪ར఺Λ΋ͨΒͯ͘͠ΕΔ ͱࢥ͑Δ

Slide 44

Slide 44 text

ྲྀߦͱڝ૪ • Node.js͸ίϛϡχςΟͷ੠͕ओಋ͞ΕΔɺྲྀߦͬͨ΍ͭΛޙ͔ΒऔΓೖΕ͍ͯ͘ํ਑ • Test ͷ࢓૊Έ͕ೖͬͨ • Permission ͕αϙʔτ͞Εͨ • Experimental Ͱ͸͋Δ͕ɺ module ղܾͷ default ͕ มߋͰ͖ΔΑ͏ʹͳͬͨ ʢdefault Λ esm ʹม͍͑ͯ͜͏ͱͯ͠Δʣ • Single executable fi le ͕࡞ΕΔΑ͏ʹͳͬͨ • Web Standard ͱͷ਌࿨ੑΛ্͍͛ͯ͜͏ͱͯ͠Δʢnavigator͕ೖͬͨΓʣ • ࠓϚείοτΩϟϥΫλʔืूͯ͠Δͱͷ͜ͱ

Slide 45

Slide 45 text

ྲྀߦͱڝ૪ • Deno ͸ Node.js ͱͷ compat Λ্͍͖͍͛ͯͨํ਑ • npm support • ͦͷ্ͰπʔϧνΣΠϯɺಈ࡞؀ڥΛݩʹ։ൃશମΛ ੝Γ্͍͛ͯ͘ • Deno Deploy • Deno fresh

Slide 46

Slide 46 text

ࠓޙͷ༧૝

Slide 47

Slide 47 text

ࠓޙ • Node.jsޓ׵ੑ্͕͕Γɺ Deno ΍ Bun ͳͲͱͷ ڝ૪͕΋ͬͱ૿͑Δ • ΤίγεςϜΛͲ͜·Ͱࣗ෼ͷਞӦʹ࣋ͬͯ͜Ε Δ͔উෛʹͳΓͦ͏ɻ • ޓ׵ੑ্͕͕Ε͹ޙ͸ੑೳ΍ηΩϡϦςΟ΍։ൃ ऀମݧ΍ӡ༻҆ఆੑͳͲͷඇػೳཁ݅Ͱͷউෛʹ ͳΔ

Slide 48

Slide 48 text

ࠓޙ • Denoଆ͔ΒݟΔͱɺNode.jsΤίγεςϜͱͷ਌࿨ੑ Λ্͛ͯɺ೗Կʹૣ͘ Node.js ͷγΣΞΛୣ͑Δ͔ • Node.js ଆ͔ΒݟΔͱɺଞͷϥϯλΠϜͱͷػೳࠩΛ ແͯ͘͠ɺطଘγΣΞΛҡ࣋Ͱ͖Δ͔ • Bun ଆ͔ΒݟΔͱɺΤίγεςϜͷ਌࿨ੑΛ্͛Δͱ ͱ΋ʹѹ౗తͳύϑΥʔϚϯεͰੑೳࠩͰѹ౗͍ͨ͠

Slide 49

Slide 49 text

ࠓޙ • ࡾऀࡾ༷ • ͜͏͍͏݈શͳڝ૪͕͠͹Β͘ଓ͖ɺڝ૪ঢ় ଶͷ··ۉߧͦ͠͏ͳؾ΋͍ͯ͠Δɻ

Slide 50

Slide 50 text

ࠓޙ • ͜ͷଞͷํ޲ੑͱͯ͠: • ΤοδίϯϐϡʔςΟϯάํ޲ͰCDN಺Ͱಈ͘αʔ όαΠυܰྔJSͷྲྀߦ • ϑϧελοΫͳ JS ϑϨʔϜϫʔΫͷོ੝ͱਐԽ • ΢Σϒ։ൃͷਐԽͱͱ΋ʹԼճΓΛࢧ͑Δπʔϧͱ ͯ͠ਐԽ͠ଓ͚ͦ͏

Slide 51

Slide 51 text

·ͱΊ

Slide 52

Slide 52 text

·ͱΊ • JavaScript Server Runtime ͷྺ࢙ΛৼΓฦͬͨɻ • ίϛϡχςΟͱྗΛ࣋ͬͨاۀ͕࿈ಈ͠ͳ͕Βൃల͖ͯͨ͠ ྺ࢙ͩͬͨΑ͏ʹײ͡Δɻ • ݈શͳڝ૪ʹΑΔػೳͱඇػೳͷࠩผԽ͕ܹԽͯ͠Δ • ҰํͰڞ௨ԽΛWinterCGΛத৺ʹߦΘΕ͍ͯΔ • ·ͩ·ͩൃల͍͖ͯͦ͠͏ɺ։ൃऀʹ༏͍͠ൃల͕ࠓޙ΋๬ ·ΕΔ

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Thanks!!

Slide 55

Slide 55 text

ࢀߟࢿྉ • 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