React(ive) JS
David Khourshid
@davidkpiano
University JS @ Cloudspace
Easier to spell
"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!
It'll catch on.
LIVE
CODING
TIME
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:
React(ive) JS
By David Khourshid
React(ive) JS
- 5,814