Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
stream between nodejs and whatwg
Search
Jxck
August 08, 2016
Technology
5
2.1k
stream between nodejs and whatwg
Talk about Stream API difference between node.js and whatwg
at #tng11 2016/08/08
Jxck
August 08, 2016
Tweet
Share
More Decks by Jxck
See All by Jxck
IE Graduation (IE の功績を讃える)
jxck
22
16k
IE Graduation Certificate
jxck
6
6.1k
RFC 9111: HTTP Caching
jxck
1
710
tc39_study_2
jxck
1
11k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.2k
Web Components 元年 v3 / Web Components first year v3
jxck
1
1k
Periodic Background Sync
jxck
0
580
Podcast over PWA
jxck
0
280
Yearly Web 2019
jxck
0
200
Other Decks in Technology
See All in Technology
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
290
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
450
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
150
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
110
ビギナーであり続ける/beginning
ikuodanaka
3
760
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
170
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
How GitHub (no longer) Works
holman
314
140k
Facilitating Awesome Meetings
lara
54
6.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Experiences People Love
moore
142
24k
Transcript
Stream b/w node.js & whatwg Tokyo Node Gakuen #tng22 2016/8/8
Jxck
• id: Jxck • github: Jxck • twitter: @jxck_ •
blog: https://blog.jxck.io • podcast: http://mozaic.fm • Love: music Jack
mozaic.fm ep10 Node.js 3 https://mozaic.fm/episodes/10/nodejs.html
4 Node.js の Stream API で「データの流れ」を扱う方法 - Block Rockin’ Codes
“Stream を制す者は Node を制す” 5
“Stream を制す者は Node を制す” 6 から 5 年...
7 WHATWG Streams Stream API がブラウザにやってくる - Block Rockin’ Codes
先に結論 8 互換性など無い
Stream とは?(哲学) 9
Common Terminology 10
11 概念としての Stream File Process Network File Process Network Without
Stream(データをまとめて次に渡す) With Stream(データを得られた順に次に渡す) then(buffer) pipe(chunk) then(buffer) pipe(chunk)
12 両者の供述を聞く
• 非同期は Callback が基本 • 引数にルールを決めて扱いやすくしよう • 連続するイベントは EventEmitter •
EventEmitte の上位 API が Stream • Multi-Consumer • カスタマイズは継承 13 In Node.js Stream data data data data data data data data data data data data
14 In WHATWG • 非同期は Promise を返してこう • Async/Await でそれを便利にしよう
• もちろん Stream は Promise のジェネレータ • (≠ ES6 Generator) • Single-Consumer • カスタマイズはコンストラクタ Stream Promise
diff of Basic Async Handling 15 // Node.js - Callback
file.readFile(path, (error, data) => { console.log(error, data); }); // WHATWG(@2016) - Promise cache.match(req).then((res) => { console.log(res); }).catch((error) => { console.error(errror); });
node.js stream // ReadableStream extends Stream (extends EventEmitter) readableStream.on(‘data’, (value)
=> { console.log(value); }); readableStream.on(‘end’, () => { console.log(‘done’); }); readableStream.on(‘error’, (error) => { console.error(error); }); 16
whatwg stream let reader = readableStream.getReader(); // read() を呼ぶと chunk
を resolve する promise が返る reader.read().then(function processResult({done, value}) { if (done) return; console.log(value); // read() の呼び出しを再帰する return reader.read().then(processResult); }).catch((error) => { console.error(error); }); 17
node.js pipe readable .pipe(transform) // return readable .pipe(transform) // return
readable .pipe(writable) // return readable .on('end') .on('error'); 18
whatwg pipe readable .pipeThrough(transform1) // return readable .pipeThrough(transform2) // return
readable .pipeTo(writable) // return promise .then(done) .catch(fail); 19
whatwg tee() const [r1, r2] = readableStream.tee(); Promise.all([ r1.pipeTo(cache), //
データは同一参照 r2.pipeTo(upload) ]) .then(() => console.log('done')) .catch((err) => console.error(err)); 20
Push/Pull Source/Sync • Source ◦ underlying source ◦ データの生成元 •
Sink ◦ underlying sink ◦ データの渡す先 • Push Underlying Source ◦ 勝手に湧き出てくる ◦ TCP, Click, Timer etc • Pull Underlying Source ◦ 欲しい時に取り出す ◦ File, Random etc 21
backpressure • read の生成が write の消費より早い場合 ◦ そのままだと write が間に合わず溢れる
◦ write の buffer を見て read を止める方法 • いつ backpressure をかけるか ◦ queuing strategy で決める 22 File Process Network 速 遅 ちょっと待って!
queuing stragtegy • backpressure の戦略 ◦ 内部の queue の管理戦略 ◦
high-water mark を決める ◦ queue の空き < hwm だったら backpressure • 組み込み queuing strategy ◦ count queuing strategy (HWM == count) ◦ bytelength queuing strategy (HWM == size) 23 速 遅 二つ空くまでは ストップで HWM
独自 Stream socketStream = new ReadableStream({ start(controller) { socket.on('data', (e)
=> controller.enqueue(e.data)); socket.on('end', () => controller.close()); socket.on('error', (err) => controller.error(err)); }, cancel() { socket.close(); } }); 24
backpressure 付き readable socketStream = new ReadableStream({ start(controller) { socket.on('data',
(e) => { if (controller.desiredSize <= 0) { socket.readStop(); // backpressure } controller.enqueue(e.data); }); }, pull() { // resume socket.readStart(); }); 25
backpressure 付き writable fileStream = new WritableStream({ start() { return
fs.open(filename, "w").then(result => { this.fd = result; }); }, write(chunk) { // promise を返す return fs.write(this.fd, chunk, 0, chunk.length); } close() { return fs.close(this.fd); } }); 26
Observable ? 27 • Stream ◦ WHATWG Spec ◦ あくまで
I/O の抽象化 ◦ 伝達対象はデータの Chunk ◦ backpressure のサポート ◦ tee() を覗き、基本 single-comsumer • Observable ◦ ECMAScript Spec ◦ 連続イベントの抽象化 ◦ イベントそのものだから間引くなどの発想がある ◦ backpressure 無し ◦ multi-consumer 前提 How do readable streams relate to observables or EventTarget?
まとめ 28 • node - whatwg 間で Stream に互換はない ◦
非同期の表現(promise) から来る差 ◦ stream は promise のジェネレータ ◦ 変換するなら node2whawg の方が楽そう • 似てるけど違う用途 ◦ whatwg stream は I/O のため ◦ observable は event のため • お気持ち ◦ i8c なんてなかった
Fin 29
Jack