Node.js + Web Compatibility

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

Transcript

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

   TechFeed Summit #6
   @shisama_
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Node.js v14 -> v16 Web APIͷҰྫ
   • Web Crypto API: ௥Ճ
   
   
   • AbortController: ҆ఆ൛΁
   
   
   • EventTarget & Event: ҆ఆ൛΁
   
   
   • Blob: ௥Ճ
   
   
   • BroadcastChannel: ௥Ճ
   &YQFSJNFOUBM
   &YQFSJNFOUBM
   ʢશ෦v15͔Β࢖͑Δ͚Ͳ…v15͸6݄ͰEOLʣ
   …etc
   &YQFSJNFOUBM
   

   View Slide

6. Web Crypto API
   • ҉߸Խ΍෮߸ɺॺ໊ͷݕূͳͲͷ҉߸ॲཧΛߦ͏API
   
   
   • Node.jsʹ͸ੲ͔ΒCrypto API͸͋Δ͕ϒϥ΢βͱͷޓ׵ੑ͸ͳ͍
   
   
   • Promiseϕʔε
   
   
   • Node.jsͷCrypto API͸ίʔϧόοΫϕʔε
   

   View Slide

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);
   }
   

   View Slide

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();
   

   View Slide

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"));
   

   View Slide

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();
    

    View Slide

11. Node.js͔ΒWeb΁ͷ࢓༷ఏҊ
    • AbortControllerΛ࢖ͬͨΠϕϯτϦεφʔͷ࡟আ͸ݩʑWebͷ࢓
    ༷ʹ͸ͳ͍΋ͷ
    
    
    • Node.js͔ΒWebඪ४ʹఏҊ → ࢓༷ೖΓ
    
    
    • Chrome, FirefoxͰ͸࣮૷ࡁ
    
    
    • WebͱNode.js͕૬ޓʹྑͯ͘͠
    

    ͍͍ͬͯΔ
    https://github.com/whatwg/dom/issues/911
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

16. ·ͱΊ
    • Webͱͷޓ׵ੑ͸Node.jsʹͱͬͯॏཁ
    
    
    • Node.js v16ʹWeb API͕௥Ճ͞Ε͍ͯΔ
    
    
    • ࠓޙ΋Webͷ࢓༷มߋ΍௥Ճʹରͯ͠Node.js΋௥ਵ͢Δ
    Webͷ੒௕ͱͱ΋ʹNode.js΋੒௕͢Δ
    

    View Slide

17. Thanks
    

    View Slide