OMG STREAMS

# OMG STREAMS
### with Pam Selle, @pamasaur thewebivore.com

---

# Thesis:
Streams are the most 🌟awesome🌟 data structure you didn't know enough about

---

# Step 1: Streams? STREAMS!!!

---

# Streams?

---

# History

---

# Unix!

---

# All glory to "pipe"

---

> cat bestanimals.txt | grep -i cats

---

> cat bestanimals.txt .red[|] grep -i cats

---

# But what ARE streams?

---

# Streams are an abstract data structure

---

# REAL WORLD DEMO

---

# SICP
![SICP](images/SICP_cover.jpg)

---

# SICP says "Streams are delayed lists"

---

# Delayed list?

Treat them (mostly) like a list structure,
but you don't have all the values at once

---

# Why streams?

---

# Why streams?

* Can't/don't want to hold everything in memory
* Bandwidth is expensive

---

# STREAMS!!!

---

# Represent possibly INFINITE DATA

---

# INFINITE

---

# DATA

---

# = WIZARDS

---

# What are some things that don't have an end?

---

* Natural numbers
* Weather
* User input (ex. keystrokes)
* Large data sets*
* Your heartbeat*

---

# “Stream processing lets us model systems that have state without ever using assignment or mutable data.” - SICP

---

# AWESOME

---

# AGAIN! AGAIN!

---

# “Stream processing lets us model systems that have state without ever using assignment or mutable data.” - SICP

---

* Move faster
* Not storing things in memory
* Not mutating data

---

# Modes of streams

---

# Push & Pull Modes

---

# Push: Firehose
![Firehydrant](images/firehydrant.gif)

---

# Push: Firehose
* Callbacks
* Non-blocking
* Downside is possible overload

---

# Pull: More please
![horse pulling people](images/horse-pull.gif)

---

# Pull: More please
* Iterators
* Blocking
* Timeout (never ever block forever)

---

# Step 2: Streams in JavaScript

---

# Node streams

---

# Node streams are push streams

---

# Classic Example (from substack):

---

``` js
var http = require('http');
var fs = require('fs');

var server = http.createServer(function (req, res) {
    fs.readFile(__dirname + '/data.txt', function (err, data) {
        res.end(data);
    });
});
server.listen(8000);
```
---

## The important bit
``` js
fs.readFile(__dirname + '/data.txt', function (err, data) {
  res.end(data);
});
```
---

``` js
var http = require('http');
var fs = require('fs');

var server = http.createServer(function (req, res) {
    var stream = fs.createReadStream(__dirname + '/data.txt');
    stream.pipe(res);
});
server.listen(8000);
```

---

## The important bit
``` js
  var stream = fs
    .createReadStream(__dirname
      + '/data.txt');
  stream.pipe(res);
```
---

# Piping rather than using memory!

---

# Go Node streams!

---

# Generators!

---

# Generators are _reusable_ and _pausable_ functions

---

# … or …

---

# PULL STREAMS?
![dramatic cat](images/dramatic-cat.gif)

---

# Ask for more when you want more
(aka: pull streams!)

---

# You know it's a generator when …
* function*
* yield

---
class: important-bit

``` js
function* something() {
  yield 2;
}
```

---
class: important-bit

``` js
function* something() {
  yield 2;
}

var s = something()
s.next()
```

---

# [Generators demos!](example/generators/index.html)

---

# caniuse?

Ish. You probably want BabelJS.

---

# Step 3: Libraries & Emerging Standards

---

# Libraries for working with streams

---

# BaconJS || HighlandJS || RxJS

---

![bacon](images/friendly-baconjs.png)

---

![bacon, uncensored](images/uncensored_bacon.png)

---

# HighlandJS

"The *Stream* constructor, accepts an array of values or a generator function as an optional argument."

(emphasis added)

---

# Highland: Single interface for many data types

Possible sources: Arrays, Generators, Node readable streams, EventEmitter/jQuery Elements, Promises

---

# RxJS

_The_ reactive programming library for JavaScript. New flavor out soon!

Current: [Reactive-Extensions/RxJS](https://github.com/Reactive-Extensions/RxJS)
Next: [ReactiveX/RxJS](https://github.com/ReactiveX/RxJS)

---

# Recommended

* [Intro to Rx by staltz](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)

---

# Emerging standards!

---

# Browser streams standard

https://streams.spec.whatwg.org/

---

# Fetch API

https://fetch.spec.whatwg.org/

``` js
  fetch(SOME_DATA).then(function(response) {
    return response.json() // Eventually, STREAMS!!
  }).then(function (data) {
    ...
  }).catch(function(error) {
    ...
  })
```

---

# Object.observe()
[A proposal for ES7](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe)

``` js
var obj = {
  foo: 0,
  bar: 1
};

Object.observe(obj, function(changes) {
  console.log(changes);
});
```

---

# Observable type
[A proposal for ES7](https://github.com/zenparsing/es-observable)

``` js
Observable.of(1, 2, 3, 4, 5)
    .map(n => n * n)
    .filter(n => n > 10)
    .forEach(n => console.log(n))
    .then(_ => console.log("All done!"));
```

---

# Small projects using some of these tools

---

# [Last Week Blog](https://last-week-blog.herokuapp.com)
Tell me what's new from the last week on my blogs!

---

# SpaceTime App
Uses the Fetch API. No streams yet :(
* https://spacetimeapp.herokuapp.com
* https://github.com/HacktheUniverse, constellation-deformation

---

# Millennials to Snake People
Observes mutations to the DOM to appropriately update uses
of the word "millennial"

* [Chrome extension](https://chrome.google.com/webstore/detail/millennials-to-snake-peop/jhkibealmjkbkafogihpeidfcgnigmlf?hl=en-US)
* [Firefox add-on (me)](https://addons.mozilla.org/en-US/firefox/addon/millennials-to-snake-people/)
* [Safari](https://github.com/a2/millennials-to-snake-people/releases)
* [Code using .observe()](https://github.com/pselle/millennials-to-snake-people/blob/master/data/content-script.js#L242-L264)

---

# Observable (using RxJS)

[Art with clicks!](example/rx/index.html)

---

# Interesting links!

---

# Node Streams
* http://nodestreams.com/
* https://github.com/substack/stream-handbook/
* https://github.com/substack/stream-adventure/

---

# Generators
* [You Don't Know JS Async & Performance: Generators](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/ch4.md)
* [ES6 Generators in depth with Dr.Axel Rauschmeyer](http://www.2ality.com/2015/03/es6-generators.html)

---

# Those reactive programming libraries

* [Bacon.js](https://baconjs.github.io/)
* [Highland](http://highlandjs.org/)
* [RxJS](https://github.com/Reactive-Extensions/RxJS) / [RxJS Next](https://github.com/ReactiveX/RxJS)

---

# Other cool reactive things

* [Rx Marbles](http://rxmarbles.com/)

---

Slides at [pselle.github.io/omgstreams](http://pselle.github.io/omgstreams)

---

# Thank you!

### @pamasaur | thewebivore.com | turing.cool