tejasq / basically-streams

An introductory project to the relatively new streaming APIs available in modern browsers.

Basically, Streams 🌊

So something (relatively) new and fun in browsers, are these two APIs: ReadableStream and WritableStream. 😮

What they allow you to do, is basically send and receive chunks of things progressively (that then combine into the final large thing), as opposed to moving around entire things from server -> browser -> user.

This is really cool.

Streams have some fancy bells and whistles that we'll get to talk about in this project. I'll list them below, but I'd highly recommend starting with the root-level project (index.html, index.js, index.css), and moving into the examples from there.

Why this project?

The answer to this question is basically the same answer to all the things in my "Basically" series: this project aims to explain streams to any level of developer: beginner, intermediate or advanced, focused primarly on the beginners.

The hope is that the concept of streams within a browser would not be scary, causing developers to shy away from it; but rather, that this concept would be dispalyed for how simple it really is, enabling developers to embrace it and run with it, allowing the creation beautiful, streamy things.

Examples

In the next few hours, I am to push examples of cool stream features, such as:

• (Really) Progressive Web Apps (Demo | Code)
• AJAX Requests with Streams (and progress bars) (Demo | Code)
• Piping Streams (Demo | Code)
• Backpressure (Demo | Code)
• Teeing (Forked streams) (Demo | Code)

If you'd like to contribute your use case or examples, pull requests are welcome! Wooo!

basically-streams's Issues

Reset buttons?

When I've shown demos to people, I've found it useful to have a "Reset" button on the page so I can start the demo again from scratch. This doesn't need to be fancy: hooking it up to location.reload() would work.

Show a message when streams are not supported in a browser

Issue Regarding Large Image Loading in "basically-streams/examples/fetch" Example

Hello, I was trying out the "basically-streams/examples/fetch" example and noticed a potential issue. When loading the three example images, the largest image is not read from the disk cache after "fetch", but is loaded again. This means that the progress bar does not accurately reflect the loading progress, as the image is actually requested twice, and the progress bar only displays the progress of the first request. I wanted to ask, is this the expected behavior?

Sample URLs on the progress bar demo hard to spot?

I didn't spot the sample images the first time I looked at the page. Maybe I am just unobservant, but my eyes didn't go down past the input box. A few ideas:

• Mention the sample images further up
• Pre-fill the input box with one of the sample image URLs (which vanishes when you start to enter a new one)
• Move the sample URLs up above the input box

error while cloning the repo

I have an issue with:

• I m seeing the following error while cloning the repo

"Piping streams" demo: should the ReadableStream remove data?

I think it would be better from an encapsulation perspective if the ReadableStream removed the characters. from the left-hand side. Then the writable stream would only have to add them into the div on the right-hand side.

This would mean that the WritableStream was reusable with other sources of data.