Observable Streams

[00:00:00]
>> We started at the microsection. And we started talking about complexity at the component level. What are the things that you see in your code that's going to cause you an incredible amount of pain? Well, it is the axis of evil, hidden state, nestled logic, SRP violations. Then, we expanded this out to when we think about features and state management, how do we approach this?

[00:00:34]
And so we took a very bottom up approach to how we can think about programming. And this is where we introduced the four elements of programming, which are nouns, verbs conditions, iterators, and we built out Redux. Now, the fifth element of programming and in a lot of ways this, in my opinion, is the most interesting, especially when you are in in asynchronous environment, and that is time.

[00:01:14]
How do we manage time when we are building applications? And, I would say in parallel to time that this is where typically our flow control problems come from. Because not only do you have to communicate that this thing has happened. But, how often is it that we are dependent on the order in which things are communicated or they break?

[00:01:59]
Has anybody ever in a JavaScript application had something show up before something else? [LAUGH] It caused a problem. Like, welcome to JavaScript, it's asynchronous, this happens all the time. And when you start to deal with complex sequences that are dependent on each other that are dependent on time, ie completely out of your control, this is where things can become very challenging.

[00:02:35]
And so, I don't know if this course is still up but it one of my favorite Frontend Masters courses ever was by Jafar Hussain. And, he's talking about observables. So he is one of the individuals who is the core contributor. And he uses this, it is, yes. So Mark just chimed in, popped up said it is in the catalog.

[00:02:59]
In my opinion, it's timeless. The stuff that Jafar talks about is never going to be irrelevant. And one of the things that he talks about is at Netflix., how do you handle two asynchronous calls that depend on each other? So, you have a user that logs in, and then from there, you need to go and get their videos, like whatever videos that they happen to have been watching or whatever.

[00:03:34]
And, how do you coordinate that? More importantly is if something fails, how do you recover and then coordinate? And so there's all these asynchronous things that become very, very problematic. And so, when you start to add in one, two, three of these asynchronous dependencies, I have seen programmers lose their mind.

[00:04:01]
Because they cannot figure out why something is breaking some of the time. And so, we are going to talk about the fifth element of programming. Specifically, we're going to talk about observable streams. And, if we look at the iron triad of programming, which is state management, flow control, and code volume in observable stream does all three of these very, very, very well.

[00:04:39]
And so, observable streams, Gives us a powerful way to encapsulate, transport, and transform data from user interactions into creative, powerful, immersive experiences. Now, If you are an angular developer, and you are tempted right now to be like, look, I've made asynchronous calls to the server, I've totally use observables, like I'm totally cool, that if you are limiting your exposure to observables to server side calls, you are living below your privileges.

[00:05:24]
I would say that's actually one of the worst ways to learn how to work with observables. And so, when I talk about observables, I immediately talk about it or I basically reframe it in the context of the DOM. And we'll see why in just a moment, but I've just met certain individuals that, I know how to make server costs, I'm good.

[00:05:48]
And, I actually got totally called out and I said, you understand observables? Well, build me a stopwatch with observable streams. I didn't have a clue how to do that. And that's when I realized I didn't understand them at all. So, in terms of encapsulating, an observable stream basically creates this tunnel for your event to move from its origin to its destination safely.

[00:06:27]
Observable streams are encapsulated. It also allows you to reliably transmit or transport that data or event from one place to another. So, thinking about state management, if something changes in your code, your state changes, how do you communicate that? You need to be able to transport it. And so now you have this protected superhighway that you can then set up these microfactories along the way to transform your data into any shape that you want.

[00:07:11]
So that by the time, it gets to its destination, it is in exactly the form that you need for it to just work. So, small little asterix here is if you're working with observables and I would say even promises and you're having to within your then or subscribe block, do a ton of manipulation to the result, that's an anti-pattern.

[00:07:39]
That when your data is the end of the stream, it should be in the shape that you need it to be to the point where you should if you're an angular, you should be able to just dump it into the template. And it should just render that you do not even have to unwrap it.

[00:07:57]
And observable streams gives you the ability and this is the one thing that promises. It's very, very hard to do is that as your data is moving from point A to point B, you can transform that data into whatever shape you need. So that by the time it steps off the train, it's got his party gear on and it's ready to go.