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

Node.js + Web Compatibility

Node.js + Web Compatibility

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

Masashi Hirano

May 26, 2021
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

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