Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Streams for the Web

6,750 views

Published on

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 <video> 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.

Published in: Technology
  • Be the first to comment

Streams for the Web

  1. 1. Streams for the web by @domenic
  2. 2. sources of streaming data AJAX web sockets files web workers IndexedDB web rtc webcam microphone geolocation.watchPosition the human finger setInterval web audio sources
  3. 3. readable streams var flappyBird = readable.read();
  4. 4. sinks for streaming data AJAX web sockets files web workers IndexedDB web rtc <audio> <video> <canvas> <template>
  5. 5. writable streams writable.write(flappyBird);
  6. 6. transformations of streaming data CSV parser the html parser JSON to HTML via template string encoding/decoding audio/video codecs encryption/decryption gzip web workers
  7. 7. transform streams transform.input.write(flappyBird); var evilBird = transform.output.read();
  8. 8. simple pipe chains readable.pipeTo(writable);
  9. 9. complex pipe chains readable .pipeThrough(t1).pipeThrough(t2) .pipeTo(writable);
  10. 10. the future fetch("http://example.com/video.mp4") .pipeThrough(new MP4DecoderStream()) .pipeThrough(specialEffectsWebWorker) .pipeTo(document.query("video"));
  11. 11. the future fetch("http://example.com/images.zip") .pipeThrough(new Unzipper()) .pipeTo(new InfinitePhotoGallery(document.query("#gallery")));
  12. 12. the future navigator.webcam .pipeThrough(new AdaptiveVideoResizer()) .pipeTo(rtcPeerConnection);
  13. 13. 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);
  14. 14. the present FileReader readAsBinaryString onprogress loaded total target target.result XMLHttpRequest open responseText send onreadystatechange MessageChannel port1 port2 start close Worker getUserMedia src srcObject URL.createObjectURL onloadedmetadata createMediaStreamSource canvas getContext('2d').drawImage toDataURL createElement appendChild querySelector postMessage onmessage onerror terminate event.data MediaStreamTrack onstarted onended readystate stop URL.createObjectURL
  15. 15. why streams win • They’re a unifying abstraction • They separate concerns • They encourage reusable code
  16. 16. why streams win • They efficiently map to low-level OS primitives • They avoid buffering in memory • They encapsulate backpressure
  17. 17. https://github.com/whatwg/streams
  18. 18. understanding streams
  19. 19. push vs. pull sources
  20. 20. readable stream buffering
  21. 21. backpressure
  22. 22. high-water marks
  23. 23. demo time! http://thlorenz.github.io/stream-viz/
  24. 24. writable stream buffering
  25. 25. congrats. that was the hard stuff.
  26. 26. can streams be generic?
  27. 27. sync vs. async
  28. 28. error handling
  29. 29. abort/cancel
  30. 30. E E E E abort! C abort! cancel! cancel! E C E E abort! cancel! E C E
  31. 31. phew. i guess … i guess that was the easy stuff?
  32. 32. why?
  33. 33. https://github.com/whatwg/streams

×