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:

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

React(ive) JS

By David Khourshid

Loading comments...

More from David Khourshid