Reactive Programming with Rx.js

[00:00:00]
>> Kyle Simpson: Rx is a library that has been ported to a bunch of different languages, originally written for .NET but has been ported to JavaScript, has been ported to PHP and Python, and Python and Scalar and a dozen other languages, and it's a library for doing observables. Rx stands for reactive extensions, reactive programming that's this general header that observables fall underneath.

[00:00:23]
So, I'm only showing you the briefest glimpse at observables. This course is not actually in scope to teach you all about observables, that's a whole other course here on Frontend Masters actually. But I just wanna show you how we can do the functional concept with an observable, okay?

[00:00:43]
So I'm gonna say, Rx.subject that makes me an observable. And then I can call .next on a subject, which is what I'm doing over time, I'm saying a.next, and pushing a thing into it. And then somewhere else, I can get a new observable out by calling a.map. And that new observable b, I can subscribe to and it will be notified every time a new value shows up in the b observable.

[00:01:13]
This code is almost identical to the lazy array that I just showed you. We've swapped in Rx.Subject for lazy array, and we've swapped in a .subscribe for a but conceptually it's the same thing. We have one stream of data that is getting values pushed in to it .nexting into it over time, and we have another stream of values, and those two streams are observables.

[00:01:39]
And every time we call an operator on an observable like .map, or .filter or .reduce or any of literally 200 different operators that this API provides, what do you get out on the other side? You get another observable. Just like with map you get another array, or a monad.map you get another monad, when you do observable.map, you get another observable.

[00:02:06]
So it's these streams of data that are declaratively flowing from one to the other, and in between them are our Rx operators like .map or .filter or .distinct until changed or any of the 200 other operators that exist.
>> Kyle Simpson: So all of the things that we've learned about with functional programming we first learned to lift those things to a data structure.

[00:02:34]
That's what our previous unit of discussion was all about. How do we lift things to a data structure? Well, now let's lift things to a time oriented data structure called an observable. Yes?
>> Student: Would you characterize this like kind of a functional version of Pub/Sub kind of architecture?

[00:02:55]
>> Kyle Simpson: It's a functional version of event-oriented programming. I'm not sure I would necessarily go so far as to say Pub/Sub because there's more semantics involved with Pub/Sub, but it's definitely, I mean, the terms observable and stream and event stream are almost used interchangably. They technically mean slightly different things, but there's 98% overlap.

[00:03:15]
If you say an observable or you say an event stream, if you can think in event oriented programming, that's basically what reactive programming is doing, it's reacting to an event coming through, observing an event coming through. Observables are not the only way for you to adapt functional principles over time, but I think they're one of the most compelling and certainly one of the most natural extensions of what we've already learned because they have method names like .map and .filter, and they use the ideas that we've already learned about, and they extend them over time.

[00:03:49]
So I think it's a good place to start when trying to adapt your functional programming to the time component of your applications.