Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node.js + Web Compatibility

Node.js + Web Compatibility

TechFeed Summit#6 - v16リリース記念!Node.jsの最新動向を語り尽くす! - connpass
https://techfeed.connpass.com/event/213218/

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

May 26, 2021
Tweet

Transcript

  1. Node.js + Web Compatibility Node.js v16Ͱ௥Ճ͞Εͨ Web APIɺWebͱͷޓ׵ੑʹ͍ͭͯ 
 TechFeed

    Summit #6 @shisama_
  2. ฏ໺ ণ࢜ / Masashi Hirano @shisama_ shisama Node.js Core Collaborator

  3. Agenda • Node.js v16Ͱ࢖͑ΔWeb APIͷ঺հ • Webඪ४΍ϒϥ΢βޓ׵ʹର͢ΔNode.jsͷऔΓ૊Έ

  4. Web΍ϒϥ΢βͱͷޓ׵ੑ͸ॏཁ https://github.com/nodejs/node/blob/master/doc/guides/technical-values.md technical-values.md͔Βൈਮ

  5. Node.js v14 -> v16 Web APIͷҰྫ • Web Crypto API:

    ௥Ճ • AbortController: ҆ఆ൛΁ • EventTarget & Event: ҆ఆ൛΁ • Blob: ௥Ճ • BroadcastChannel: ௥Ճ &YQFSJNFOUBM &YQFSJNFOUBM ʢશ෦v15͔Β࢖͑Δ͚Ͳ…v15͸6݄ͰEOLʣ …etc &YQFSJNFOUBM
  6. Web Crypto API • ҉߸Խ΍෮߸ɺॺ໊ͷݕূͳͲͷ҉߸ॲཧΛߦ͏API • Node.jsʹ͸ੲ͔ΒCrypto API͸͋Δ͕ϒϥ΢βͱͷޓ׵ੑ͸ͳ͍ • Promiseϕʔε

    • Node.jsͷCrypto API͸ίʔϧόοΫϕʔε
  7. AbortController & AbortSignal • DOMϦΫΤετΛதஅͰ͖Δ • Promise • Event •

    ReadableStream • Web Locks API • Ճ͑ͯNode.jsͰ͸ඇಉظͳॲཧͷதஅʹར༻Մೳ https://dom.spec.whatwg.org/#interface-abortcontroller const controller = new AbortController(); const signal = controller.signal; abortButton.addEventListener('click', function() { controller.abort(); }); try { await fetch('https://site.example', { signal }); } catch(err) { console.error(err.name); }
  8. AbortControllerʹରԠ͢ΔNode.js Core API • Child Process • Events • File

    System • HTTP • HTTP/2 • Net • Readline • Stream • Timers • UDP/datagram sockets const controller = new AbortController(); const { signal } = controller; const promise = fs.readFile(fileName, { signal }); setTimeout(() => { controller.abort(); }, 10000); await promise; import { setTimeout, } from 'timers/promises'; const ac = new AbortController(); const signal = ac.signal; await setTimeout(10000, 'timeout', {signal}); ac.abort();
  9. EventTarget • ΠϕϯτॲཧΛ͢ΔͨΊͷΠϯλϑΣʔε • addEventListenerΛඋ͍͑ͯΔ • Node.js ʹੲ͔ΒEventEmitter͸͋Δ͕ɺϒϥ΢βͱͷޓ׵ੑ͸ͳ͍ https://dom.spec.whatwg.org/#interface-eventtarget const

    target = new EventTarget(); target.addEventListener("foo", (event) => { console.log("foo is called"); }); target.dispatchEvent(new Event("foo"));
  10. EventTarget + AbortController • AbortControllerͰEventTargetʹొ࿥ͨ͠ΠϕϯτϦεφʔΛ࡟আͰ ͖Δ const ac = new

    AbortController(); const { signal } = ac; et.addEventListener(‘click', handler, { signal }); // ΠϕϯτϦεφʔͷ࡟আɻremoveEventListener͸ෆཁ controller.abort(); et.addEventListener('event1', handler, { signal }); et.addEventListener(‘event2', handler, { signal }); // Ұׅ࡟আ΋Ͱ͖Δ controller.abort();
  11. Node.js͔ΒWeb΁ͷ࢓༷ఏҊ • AbortControllerΛ࢖ͬͨΠϕϯτϦεφʔͷ࡟আ͸ݩʑWebͷ࢓ ༷ʹ͸ͳ͍΋ͷ • Node.js͔ΒWebඪ४ʹఏҊ → ࢓༷ೖΓ • Chrome,

    FirefoxͰ͸࣮૷ࡁ • WebͱNode.js͕૬ޓʹྑͯ͘͠ 
 ͍͍ͬͯΔ https://github.com/whatwg/dom/issues/911
  12. Ͳ͏΍ͬͯNode.js͸Webͱͷޓ׵ੑΛҡ͍࣋ͯ͠Δ͔ʁ • Node.jsͷRespository಺ͰWeb Platform Tests (WPT)͕࣮ߦͰ͖ΔΑ͏ʹͳ͍ͬͯΔ https://github.com/nodejs/node/tree/master/test/wpt

  13. Webඪ४Ͱ΋௥Ճ͸৻ॏ • എܠΛ஌Βͳ͍։ൃऀ͕ࠞཚ͢Δ͔΋͠Εͳ͍ͨΊΫϩʔζ https://github.com/nodejs/node/pull/37971

  14. ϒϥ΢βޓ׵Ͱ΋௥Ճ͸৻ॏ • UIʹؔ࿈͢Δػೳ͸Node.jsͷείʔϓ֎ͱ͍͏ҙݟ΋͋Δ https://github.com/nodejs/node/pull/38552#pullrequestreview-652840752

  15. Node.jsʹ࣮૷͢Δ͔ٞ࿦தͷWeb API • Fetch API https://github.com/nodejs/node/issues/19393 • WHATWG Stream Full

    Support https://github.com/nodejs/node/issues/36566 • HTTPS Imports https://github.com/nodejs/node/pull/36328 • Web Locks API https://github.com/nodejs/node/pull/36502 • MIME Type https://github.com/nodejs/node/pull/21128
  16. ·ͱΊ • Webͱͷޓ׵ੑ͸Node.jsʹͱͬͯॏཁ • Node.js v16ʹWeb API͕௥Ճ͞Ε͍ͯΔ • ࠓޙ΋Webͷ࢓༷มߋ΍௥Ճʹରͯ͠Node.js΋௥ਵ͢Δ Webͷ੒௕ͱͱ΋ʹNode.js΋੒௕͢Δ

  17. Thanks