Transcript from the "Review of Angular, Part 2" Lesson
>> Lucas Ruebbelke: Let's do a little bit of review. I know everybody is sick of this graphic but it's so important. What kind of bindings go on each side? So on stage right? So class detemplate what kind of binding is that?
>> Speaker 2: Event.
>> Speaker 3: Or property.
>> Speaker 4: Property.
>> Lucas Ruebbelke: Property.
[00:00:24] So we're sending a property on the class to the template. Now what goes on the other side? Say it.
>> Speaker 2: Event.
>> Lucas Ruebbelke: Yeah, all right. So with that in mind, how would we define this as custom bindings? Class to template, is? If we're sending something into the template?
>> Speaker 5: Output.
>> Lucas Ruebbelke: We're sending something into the template?
>> Speaker 6: Input.
>> Lucas Ruebbelke: Input, yes. Now, if something is coming out of the template that we wanna capture?
>> Speaker 6: Output.
>> Lucas Ruebbelke: Output.
>> Speaker 6: New chart.
>> Lucas Ruebbelke: So input is into the template. Output is something that's coming out, and we need to handle it.
[00:01:09] So let's fill in the blanks here. So in the parent, class the template is corner pocket over here. Just say what you said the last time.
>> Speaker 2: Property.
>> Lucas Ruebbelke: Yes, p is for property. Okay, so from template back into the class. Say what you said last time [LAUGH]
>> Speaker 3: Event.
>> Lucas Ruebbelke: There we go. Okay, so that is just from the parent component to a child component, those bindings are pretty much standard modus operandi. Now, from a parent template into the class, so we're sending something from the template into the class. That is what? What's that?
>> Speaker 3: Output.
>> Lucas Ruebbelke: Input, input, so we're sending it into the class. Now, from the class back to the parent template.
>> Speaker 4: Output.
>> Lucas Ruebbelke: Yes.
>> Lucas Ruebbelke: So parent and child
>> Lucas Ruebbelke: And from the child back to the parent. What's interesting is we were going to talk about you need the rational data flow and touch on Redux and ngrx, this kind of pattern here of state flowing down and events flowing up is the same exact approach.
[00:02:40] And so, but I think it's pretty awesome with this component driven architecture. Redux fits so nicely on top of it because it's the same flow. It's that when you have a parent component and a child component, you are sending state for the parent component, the child component. So everything essentially flows down.
[00:02:59] Parent to child do the tree. Now when something happens those events flow back up with the Redux. And so, it's somehow intention to get into this but I wanna start setting kind of this stage, so that if you were going to go beyond this workshop, I will say the next steps would be learn how to build reactive angular applications with ngrx.
[00:03:22] And to that end, that pattern is data flows down or state flows down from the store, into your components. And when something happens, events or actions flow back up to be processed. And so, I think kind of the analogy I would make is, because it drastically reduces the complexity in your app.
[00:03:46] Would you rather cross a one way street or an eight lane super highway? Well, it's much easier to reason how do I get across the street and what's happening than when you are in kind of this mish mash application thing of where is everything coming, where is everything going.
[00:04:05] And so, once you simplify kind of that dataflow and event flow, things start to make quite a bit of sense. It's like, what's changing this thing? Then you just keep going up until you find it. So just kind of setting that little kind of future kind of, go check this out.
[00:04:24] Because we're just taking this idea and it expands perfectly in the Redux, which solves state management and control flow really really well.
>> Lucas Ruebbelke: So how does observables change this diagram? So we used to provide some input, we get some output. What is happening at the bottom? With an observable, what is the relationship now that these two boxes have with each other?
>> Speaker 7: Flipped basically, so the outputs driving the input.
>> Lucas Ruebbelke: Exactly, so you take the output and the input, and you flip them. So generally, we are just very conditioned to, I'm going to give you some input, you're going to give me some output. So it's kind of this pull, you're pulling things to you.
[00:05:21] So if you do not initiate that actual function call with that input, you're not going to get the output. So it's very much a pull relationship. With observables, that's flip-flop and there's output happening. You simply need to decide where you initially want to hook into it, so that initial output and then just figure where you wanna put it.
>> Lucas Ruebbelke: And so just for me, just kinda that paradigm shift of there is actually an excellent talk by Bob Limart who is I think instrumental in me wrapping my mind around observables and Redux these different things is that he has a really good talk called everything is a stream.
[00:06:05] And think about that, we're always receiving data over time. Whether it's mouse events, it's new user interactions or whatever. This data is constantly updating. We live in this very dynamic, ever changing world. Well, when you start to see the world as a stream, you simply need to say, what do I wanna hook into and what do I wanna do with it.
[00:06:28] Where do I wanna put it in my application?
>> Lucas Ruebbelke: So with that in mind,
>> Lucas Ruebbelke: What is missing, and kinda how does this diagram work? So this is just a really kind of extension from the previous slide. Initial.
>> Speaker 8: Initial output, final input.
>> Lucas Ruebbelke: Right, so how does this look like in real life?
[00:06:55] An initial output would be?
>> Speaker 9: Observable.
>> Speaker 7: Event.
>> Lucas Ruebbelke: Yep, so it's an event.
>> Speaker 7: Event.
>> Lucas Ruebbelke: So something is happening, that we want to capture. So whether it's a click, or something, typing in a text box or you're getting some kind of response from a server. Something is happening, there's some event that we are capturing.
[00:07:21] And so at the bottom, what is your final input practically speaking.
>> Lucas Ruebbelke: Like, how do you consume an observable string?
>> Speaker 7: Subscribe.
>> Lucas Ruebbelke: That's it, subscribe. So when you have an obseravable string and you are ready to consume it and kind of finalize this. I think of it as kind of this final function called the end of it, it's .subscribe.
[00:07:52] At which point you are essentially taking control back from the stream and saying, okay, give me what you have I'll take it from here. And then, what is in the middle, what is kinda the magic sauce here?
>> Speaker 7: All the operators to for millions of that.
>> Lucas Ruebbelke: I actually wonder how many there are.
[00:08:11] It's somewhere between a hundred and a million, it feels like. But the idea is that you can just stack them on top of each other to do whatever you need.
>> Lucas Ruebbelke: So with that in mind, so initial output, final input, and the transformation operators, let's kind of look at this piece of code.
[00:08:41] And who can tell me where the initial output is?
>> Lucas Ruebbelke: I'm just gonna call on you, you're just so intently. Like, where is the stream originating from?
>> Lucas Ruebbelke: Do, do, do, do, do, do. Like, where's the genesis of it?
>> Speaker 5: [CROSSTALK] Observable.fromEvent, yeah.
>> Lucas Ruebbelke: Yep.
>> Lucas Ruebbelke: And so this is the Observable.fromEvent.
[00:09:16] It's capturing this event from the DOM and it's converting it into an observable. Okay, so that's the initial output. But this could be, I mean all sort of things. Mouse move, dragon drop is really quite simple to do this with. So if you've ever tried a new dragon drop that can get very complicated.
[00:09:43] Well, you can do it in about five lines of code with observables. Okay, so final input. This one should be pretty easy. I want one of you four, throw me a bone here. What do we got? Where is the stream ending?
>> Speaker 8: The subscribe block.
>> Lucas Ruebbelke: The subscribe block, yes.
[00:10:12] Very good. And so, this is where you're saying, okay, we're ready to take control of the stream and do something with it. In our application, specifically in our component. And so then, right in between this, we have all of our operators. So debounce, distincUntilChanged, switchMap, on and on and on.
[00:10:36] And so, there's just infinite permutations that you can do with these. But again, initial output, final input. So output to input. So something is happening, you're capturing it. It's being pushed and shared application, you figured out where you wanna put it. And then you use the operators to determine the shape that you wanted to be in, when it gets there.
>> Lucas Ruebbelke: So for instance
>> Lucas Ruebbelke: And I should put these in the slides. I will actually add this to it. There is a website that I created, RXJS for the win, so it's rxftw.in.
>> Lucas Ruebbelke: Right here, I think it'll actually take me here.
>> Lucas Ruebbelke: And so, when you have some spare time, there's some screen cast here And some different things is that you can start to compose these strings in really interesting ways.
[00:11:59] But one of the first things that I do here is if you were going to do a clicker. So I'll take this off, I'm just gonna move back to the slides, that's the one, let's gonna think about this. If you are going to have a button that every time you click it, it would basically like increment something by one.
[00:12:23] So imagine like a standard, you're playing kind of any sport and your measuring shots, reps, whatever. I did a version of this a long time ago with Firebase and it was just this real time scoreboard. And some guy could be like basically send me an email, hey, I do Crossfit games in Florida and I'll pay you $1,000 to make one little change.
[00:12:44] It's like perfect. So this idea of like you just, in other words was, here is your athlete, a plus and minus button. Increment, decrement. So you are doing 20 push ups, click, click, click, click. So now imagine every time that plus button is clicked, is generating what? A DOM event but we don't care about the DOM event.
[00:13:13] What ultimately we want is to know that when we click this button it's going to increment by one. So what you can simply do is say map event return one. Because what happens if you had, for instance, you were playing basketball and you have free throw, free throw.
[00:13:37] So that's one point, standard shot two and a three pointer. So now you wanna a plus one, plus two and a plus three button. What would you do there? Well, map event return one, map event return two, map event return three. And then it just get sent down the stream and add it to the total.
>> Lucas Ruebbelke: And so, this is where you can say this event or this button click actually represents this in this domain. So that is the idea. Using these apparatus, you can one capture events and then make them represent anything you would like.
>> Lucas Ruebbelke: Any questions about that? How do we as a whole, like observable, are they cool?
[00:14:28] It kinda makes sense or they seem hard.
>> Speaker 5: In the current example of when you do the math and return one, where are you doing the accumulation? Is it happening by default or is it happening through a function? Or?
>> Lucas Ruebbelke: So good question. So how do you actually preserve state?
[00:14:49] Is you're incrementing. So I'm just gonna go here because I have it. And I'll just zoom this up a bit. And so, in this case I am just moving something across the screen. But I'm saying take this button on click, map the event to a ten, so that every time I click then I wanna move this ball ten pixels.
[00:15:18] And I'm saying start with an x,y coordinate of 100 and 100. And then using the scan operator, so this is kind of like reduce what it does is it basic maintains state within the string. So it'll go through. And essentially, what it kind of does, is it loops itself.
[00:15:41] And so it's saying, take your previous or the current value and add this new value to it. So the accumulated value take this new current value that's coming in and do some operations. So in this case, we'll go ahead and do this one more down so it'll stay on one line.
[00:15:59] You can see over here, we're just creating a new xy object, but we're saying take your current x value or accumulated x value and just add current to it. But now you can see kind of I'm just transforming the 10 starting with core net value, and then I'm just adding to the x property.
[00:16:21] But skin is how you maintain state with industry. But then you'll notice here and everyone at this examples
>> Lucas Ruebbelke: And now getting exactly what I need, I'm just doing straight assignment, cuz it's perfectly tailored to my situation. Make sense? Now, just as a side context, this took me by three months to kinda wrap my mind around.
[00:16:46] So ever this [SOUND]. My world is changing totally normal, but one inverting the flow of control to where we would just push values to you and you can do whatever you want with them is so much more convenient than wondering like, where is my data coming from? Did something happen?
[00:17:07] How do I know? Well, with an observable, they'll tell you every time it happens. And so, being able to have data pushed to you is fantastic, thank you promises. But being able to have a stream of data constantly pushed to you and then being able to transform it into whatever you want, is the game changer for me.
>> Speaker 3: Questions.
>> Lucas Ruebbelke: Yes?
>> Speaker 3: This might be jumping ahead to the immutable argument but are you recording that machine so that in any time you can go back in a time position to see at when or what that was or how that flow came. Especially as the one, two, three, you could go back and count when one was added, when two was added, when three was added or do you have to record that separately?
>> Lucas Ruebbelke: So in this case, I'm not recording it.
>> Speaker 3: Yeah.
>> Lucas Ruebbelke: But you could just use a history pattern.
>> Speaker 3: Okay.
>> Lucas Ruebbelke: Or, for instance, if you've ever seen Redux tools, it's like this momento of like, for every tick, you're pushing that state into the stack.
>> Speaker 3: Okay.
>> Lucas Ruebbelke: And then, when you're to just replay, you just pop it back off.
>> Speaker 3: Okay.
>> Lucas Ruebbelke: And so, you really could do it.
>> Speaker 3: Yeah, and you store it like an array.
>> Lucas Ruebbelke: You just have to store it kind of a classic history momentum pattern.
>> Speaker 3: Okay.
>> Lucas Ruebbelke: It just go into a stock and then it just pops off.