"Reactive" ...?

• What does Reactive mean?
• I heard React was good
• Are you going to show those stupid goats again?

Yes.

React.JS !== Reactive JS

Let's talk arrays.

• Collection of ... things
• Can be iterated
• Can be manipulated
• Has a first and last element

This is a Rey

Array map()

Transform each item

[1, 2, 3, 4].map(x => x * 2);

// [2, 4, 6, 8]

Array filter()

Get a subset of items

[1, 2, 3, 4].filter(x => x % 2 == 0);

// [2, 4]

Array concatAll()

Flatten nested arrays

[[1], [2, 3], [], 4].concatAll();

// [1, 2, 3, 4]

Chain all the things

It's arrays all the way down

[[1], [2, 3], [], 4]
  .concatAll()    // [1, 2, 3, 4]
  .filter(x => x % 2 == 0) // [2, 4]
  .map(x => x * 2) // [4, 8]

"Observables"

Collections over time

"Event Streams"

"Streams"

or whatever.

Anything can be an Observable.

• That's some observa-bullshit
• Nah, it's true.

// Array
[1, 2, 3, 4]

// Observable
--1----2--3----4-|->

Observables? Let's call them "streams"

Streams are async.

We can "listen", or subscribe to a stream with three functions:

• .onNext() for values
• .onCompleted() for end
• .onError() for screw-ups

Marble-servables

(no one else calls it that)

Arrays, sort of

--1---2------3--4-->

(filter x => x % 2 == 0)

------2---------4-->

(map x => x * 2)

------4---------8-->

New stream!

New stream!

Let's look at some more marble-servables.

It'll catch on.

Why do Reactive Programming? 

• Describes what things are, not how things work
• Higher level of abstraction (good thing!)
• Less stateful, more passive
• Can be carried to other languages
• Sounds cool

Resources

Basically everything here:

http://reactivex.io/tutorials.html#rxjs