Creating a Facade

[00:00:00]
>> What we're gonna do is, I'm going to generate a facade and we're going to build it out, for our discussion. So that has a service that is a service with a subject. This is kinda where we're at. At this point we have. That's right. A classic component where they service combo.

[00:00:21]
So let's get into this. The first thing that we're going to do, is, from the command line, I am going to generate a facade. Now, this is a bit of a, you know what, I'm gonna condense this a little bit, so I could generate just a standalone facade.

[00:00:56]
But because we're going to talk about ngrx, at least conceptually just a little bit. I want to show you the most efficient way in this case. And so, we're gonna go @nrwl/angular, and we're generating ngrx. So this will generate a facade. Widgets. And so this is the feature that we're developing.

[00:01:22]
And we're going to go module, and I'm going to just autocomplete this and we'll talk about so I'm saying generate this ngrx stuff. And the module that you wanna target is in core state. The directory is widgets. And we're going to go with the defaults, and we're going to go with a facade.

[00:01:52]
Now, let me see what happens if I use the dry run flag. So you'll see here, that it generates actions, affects, facade, models, which I never use, reducer, and selectors, and then kind of a updates the module as well. So, actions, effects, facade, reducer, selector. So there's kind of five main pieces to this.

[00:02:27]
We're going to focus on the facade initially. So let's take that dry run flag off And wait for it. Now I'm going to just assume, that the internet is working. And I'm going to move on. So in the dashboard, or in our core, if we go down to core state.

[00:03:01]
We now have our widgets feature, and so this is everything we need to fulfill our lifelong dream of proper state management. And, as much as I want to talk about all these other things, I'm just going to focus on the facade. And from here, they've already done some pretty cool stuff for us which is, You'll notice here, that we have loaded.

[00:03:48]
So is it loaded true or false, which is good to know. All widgets, and the selected widget. Now, the one thing I would do here is make that singular because it's a single widget. And I'm going to actually change this ever so slightly, because we are actually a bit ahead of ourselves.

[00:04:25]
But, the one thing I wanna point out before I delete this is that, hopefully everybody can see that we're segmenting this code into two things. And so think of this as, when we talk about injectable management, it's state flows down, events flow up. Notice here that we have segmented the facade state, in this case state flows out.

[00:04:59]
Then we're just down, and anything that we would put in here is a command, events flow in. And so, it's just this unidirectional flow of data and events that makes things very, very predictable. And a very kind of childish example that I would make is that, given the choice between crossing a one way street?

[00:05:27]
Or the Arc de Triomphe? If you've ever been to Paris and you got the big arc in that circle thing, like that is most modern applications attempted state management is that roundabout around the Arc de Triomphe, when in fact it should be a series of one way streets.

[00:05:47]
You're going this way, and you're coming this way and you're coming back this way. So, now I'm going to delete all of this and we are going to build this out. So, we're going to go private, all widgets. And we're going to create a new subject. And this is going to be a widget or rather an array of widgets.

[00:06:15]
And let me just import this and looks like I get to do this the hard way. So if anybody knows a top secret way to make your imports work all the time, which is kind of funny because there was a time years ago, by that I mean, like a few years ago, that this wasn't even possible.

[00:06:52]
So [LAUGH] the fact that I can get JavaScript imports working like 90% of the time, I probably should count my blessings. All right. Focus. Select the widget, New Subject. Again, that would have been nice if that would have auto completed. And we have one more here which is going to be mutations.

[00:07:17]
And this is going to be just a regular plain subject. Now, someone may ask why pretzel, are we creating subjects and making them private? Well, the subject has the ability to control the control flow within its observable string. So if you have a reference to the subject, you can call next on that subject.

[00:07:46]
You do not want to expose that ability to the outside world. In other words, you wouldn't wanna pass around the subject to one component, while you have another component over here. That's depending on it, in this component over here, it's like pressing the button like next, next, next, next, next, next next like do not allow that, like shared mutable state is the devil, giving the unfettered access to anything in your application to go ahead and change state with a powerful API, recipe for disaster.

[00:08:23]
So what you do, is you define your subject. And then, what you do is you expose the observable stream of the subject like this as observable. And so this is why I'm segmenting the subject which is responsible for propagating data between from the stream itself. So selected widget.

[00:08:54]
And not for sure. As observable and mutations equals. So far, so good.