streams for the web
DESCRIPTION
Streams are a fundamental programming primitive for representing the flow of data through your system. It's time we brought this powerful tool to the web. What if we could stream data from a HTTP request, through a web worker that transforms it, and then into a tag? Over the last year, I've been working on the WHATWG streams specification, which builds upon the lessons learned in Node.js, to provide a suitable abstraction for needs of the extensible web. I'll discuss briefly why streams are important, what they enable, and the role we envision them playing in the future of the web platform. Mostly, though, I want to help you understand streams, at a deep level. In the course of writing this specification, I've learned a lot about streams, and I want to share that knowledge with you. At the core, they are a very simple and beautiful abstraction. I think we've done a good job capturing that abstraction, and producing an API the web can be proud of. I'd love to tell you all about it.TRANSCRIPT
Streamsfor the web
by @domenic
sources of streaming data
AJAXweb sockets
filesweb workersIndexedDB
web rtc
webcammicrophone
geolocation.watchPositionthe human finger
setIntervalweb audio sources
readable streams
var flappyBird = readable.read();
sinks for streaming data
AJAXweb sockets
filesweb workersIndexedDB
web rtc
<audio><video>
<canvas><template>
writable streams
writable.write(flappyBird);
transformations of streaming data
CSV parserthe html parser
JSON to HTML via templatestring encoding/decoding
audio/video codecsencryption/decryption
gzipweb workers
transform streams
transform.input.write(flappyBird);var evilBird = transform.output.read();
simple pipe chains
readable.pipeTo(writable);
complex pipe chains
readable .pipeThrough(t1).pipeThrough(t2) .pipeTo(writable);
the future
fetch("http://example.com/video.mp4") .pipeThrough(new MP4DecoderStream()) .pipeThrough(specialEffectsWebWorker) .pipeTo(document.query("video"));
the future
fetch("http://example.com/images.zip") .pipeThrough(new Unzipper()) .pipeTo(new InfinitePhotoGallery(document.query("#gallery")));
the future
navigator.webcam .pipeThrough(new AdaptiveVideoResizer()) .pipeTo(rtcPeerConnection);
the future
var ws = new WebSocket("http://example.com/analytics");var events = new EventStream(document, "click");
events .pipeThrough(new EventThrottler()) .pipeThrough(new EventsAsJSON()) .pipeTo(ws.input);
the present
FileReader
readAsBinaryString onprogress loaded total target target.result
XMLHttpRequest
open responseText send onreadystatechange
MessageChannel
port1 port2 start close
getUserMedia
src srcObject URL.createObjectURL onloadedmetadata createMediaStreamSource
canvas
getContext('2d').drawImage toDataURL createElement appendChild querySelector
Worker
postMessage onmessage onerror terminate event.data
MediaStreamTrack
onstarted onended readystate stop URL.createObjectURL
why streams win
•They’re a unifying abstraction•They separate concerns•They encourage reusable code
why streams win
•They efficiently map to low-level OS primitives•They avoid buffering in memory•They encapsulate backpressure
https://github.com/whatwg/streams
understanding streams
push vs. pull sources
readable stream buffering
backpressure
high-water marks
demo time!
http://thlorenz.github.io/stream-viz/
writable stream buffering
congrats. that was the hard stuff.
can streams be generic?
sync vs. async
error handling
abort/cancel
E E E E E Eabort! abort! abort!
C E C E C E
cancel!cancel!cancel!
phew.i guess … i guess that was the easy stuff?
why?
https://github.com/whatwg/streams