JavaScript and Streams

Streams are great!

Transcript

1. WILDEST STREAMS 1. Stream! 2. ??? 3. Profit by @zladuric
2. `whoami` • Zlatko Đurić • Node.js and JavaScript developer • Freelance Not very productive so has time to do this talk :)
3. Simple Selfie-Stealer Stream (I hope this works!) http://arstempo.hr/camp/simple.html
4. (In case the internet failed) Step 1: Step 1 callback:
5. “Ok, that was easy.” Such doge much wow very smrt
6. A broken camera stream http://idevelop.ro/ascii-camera/ (Not everything is perfect)
7. (Darn internet)
8. How did he do it? <pre id="ascii"></pre> <script src="script/camera.js"></script> <script src="script/ascii.js"></script> <script src="script/app.js"></script>
9. No, for real
10. [code some more]
11. Weirdness++ http://idevelop.ro/predator-vision/ This stuff is really cool!
12. Stream? Poetry! http://www.longestpoemintheworld.com/
13. (Internet, really?) • “Just did a trust fall onto the snow. It saved me. <3” • “Why have changed a lot. I really can not believe what I see ☹☹” • “You can be the boss, MY BOSS.” • “I swear I have short term memory loss” • “So a 31 hour bus drive later and we're all in madrid” • “Can't believe I used to look forward to snow as a kid.” • “I wish the sun would come out tho!!” • “that video to funny should b on that tv show” • “The lyrics in this song make me cry.” • “never stay in on Saturdays why the fuck have I” • “It's good to be us!, Its good to be free!” • “what people say doesn't bother me , why because I know ME !” • “A dollar might turn to a million then we all rich.” • “no sex bitch i only want the neck bitch” • “I miss you ” • “I won't lie, am feeling u” • “I look like an avatar when I French braid my hair.” • “I gotta go out there soon. I don't wanna go out there ” • “Let me just say, you are one handsome ass man. That is all.” • “I really really wanted to go to the mall. :(.”
14. We have gathered here today • A little bit about streams. • What's so cool about streams? • What is going to come next?
15. First - why a stream Regular stuff • Comes as a whole blob • Takes up memory • When action is broken at 95%, redo the whole thing Streamed stuff • Just like regular, but chunked into bits • When broken, we can still reuse parts we got • PIPES!!1 (This sucks)
16. Also, not so simple! Stream_(computing) is not organic A lot of moving parts to setup and coordinate
17. Where did it come from? On the frontend (this is WebCamp) • Until a few years ago, we could not do much with streams (except for Flash) • Mostly for video/audio transfer with Flash, Java Applets On the server • Comes largely from unix I/O and network sockets • stdin, stdout, stderr • Created to streamline (yeah, I know) I/O operations • Flash Media server, Red5 • Peer2Peer • Encoders/decoders, format converters • Bridges between backend services, more I/O • Youtube! WTF?
18. The past Let's hope it dies!
19. The present Stability: 2 – Unstable
20. The future • Draft: http://www.w3.org/TR/streams-api/ • Whatwg is trying to standardize stream APIs from: Domenic Denicola
21. From the specs (not) • A readable stream represents a source of data, from which you can read. In other words, data comes out of a readable stream. • A writable stream represents a destination for data, into which you can write. In other words, data goes in to a writable stream. • A transform stream consists of a pair of streams: a writable stream, and a readable stream. (Boring!)
22. And now pipes! var stream = getUserMedia() .pipe(toCanvas()) .pipe(toAscii()) .pipe(toTransportStream()) .pipe(toTheConsumerStream());
23. Pipe chains and backpresure • “If any step in the chain cannot yet accept data, it propagates a signal backwards through the pipe chain, until eventually the ultimate producer is told to stop producing data so fast.” • “This process … is called backpressure.” High water mark, right there! (Note to self: tell them about error propagation.)
24. The web • WebRTC, WebSockets, Workers – they all stream data • XMLHttpRequest • User Media (MediaStream) API, Blob/FileSystem API, Audio, Geolocation etc.
25. Posibilities Existing apps • Chat/Video/Audio • File sharing (P2P!) • Screen sharing • Real-time analytics/user tracking • ...
26. Question time 1. Aren't streams great? 2. Do you do streams? 3. How boring was I, from 1 – 10? Your turn. Zlatko Đurić
27. Linkage time Image sources etc: • http://idevelop.ro/ascii-camera/ • http://idevelop.ro/predator-vision/ • http://www.longestpoemintheworld.com/ • http://thlorenz.github.io/stream-viz/ • https://whatwg.github.io/streams/ • http://www.slideshare.net/domenicdenicola/streams-for-the-web-31205146 • http://freebigpictures.com/river-pictures/mountain-stream/ • https://www.flickr.com/photos/dottiemae/5202454566/in/photolist-5oEmbT-8VHWuw-6vHCY9-aBotoC-69fvfm-e3oBsB- 7qhXbk-6LpGP7-61BwMw-4sqchL-8jxa2c-bj6uVP-9JfGDJ-gYHGKT-9JfGfL-juqpS-9uHaD5-7DtJfT-7BqsMe-5LZXdf • http://commons.wikimedia.org/wiki/File:Wawe-10000-dusche.jpg • http://commons.wikimedia.org/wiki/File:Potok_pod_jezerom_1.jpg • http://commons.wikimedia.org/wiki/File:Atlanta_75.85.jpg • https://www.pinterest.com/pin/407083253788805735/ • https://whatwg.github.io/streams/ • http://hidro.hr/hidro.php?id=hidro&param=Podaci