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
680
tc39_study_2
jxck
1
8.7k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.1k
Web Components 元年 v3 / Web Components first year v3
jxck
1
1k
Periodic Background Sync
jxck
0
560
Podcast over PWA
jxck
0
260
Yearly Web 2019
jxck
0
170
Other Decks in Technology
See All in Technology
SREが実現する開発者体験の革新
sansantech
PRO
0
130
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.5k
生成AI時代のセキュアCI/CDとソース管理
yuriemori
0
110
Amebaにおける Platform Engineeringの実践
kumorn5s
5
840
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
20k
テキスト解析で見る PyCon APAC 2025 セッション&スピーカートレンド分析
negi111111
0
250
バックエンド留学した話/Backend study abroad story
kaonavi
0
140
AWSエンジニアがSAPのデータ抽出してみた
mayumi_hirano
0
110
滑らかなユーザー体験も目指す注文管理のマイクロサービス化〜注文情報CSVダウンロード機能の事例〜
demaecan
0
130
Medmain FACTBOOK
akinaootani
0
160
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
140
近年の PyCon 情勢から見た PyCon APAC のまとめ
terapyon
0
260
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing Experiences People Love
moore
141
23k
Embracing the Ebb and Flow
colly
85
4.6k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
The Language of Interfaces
destraynor
157
24k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
Visualization
eitanlees
146
16k
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