Facades

[00:00:00]
>> Lukas Ruebbelke: I'm talking about facade pattern. So what do you know about it? Well, that it kind of helps clean things up. More importantly is the facade pattern, if we go into the project component here. This component knows quite a bit about ngrx. Which is okay, it definitely doesn't offend me.

[00:00:27]
But still the implementation details of what's happening is right there in the component. And so, what a facade pattern does is it just takes those details, and especially if you're dealing with more than one reducer and piece of state and creates a facade where all of that sits behind it.

[00:00:53]
And so now, your component instead of directly communicating to ngrx is that, it communicates to the facade, which then delegates out. And one of the unfortunate side effects of not using a facade is, you can see that I'm having to pull pieces out. As I'm like, okay, well, we have these actions and these different things and expose them so that I can consume them across my application.

[00:01:25]
Whereas with the facade this allows us to keep those details hidden away, and we're not having to do this perse. But we're able to export a single facade and it will take care of that for you. And so let's build this out and see what this looks like.

[00:01:48]
So this is a very simple concept in the sense that we're going to just basically create a service that's going to expose certain properties that we can then consume and certain methods as well. So I've created just a snippet here to kind of get us started. This is pretty small but nonetheless.

[00:02:15]
Then we'll go into projects facade and I'm going to paste this in. And so what we'll do is we'll separate this refactor out into two parts. So you have commands and you have queries. So we'll do the queries first and then we'll do the demands. So in the facade we're going to take,

[00:02:46]
>> Lukas Ruebbelke: These right here. And so, essentially, we're just lifting this, shifting it and dropping it into our facade. So here,
>> Lukas Ruebbelke: We're going to, as well,
>> Lukas Ruebbelke: Just copy these and so we're very closely going to mirror what we're doing in our component. So let's create our constructor.

[00:03:20]
>> Lukas Ruebbelke: And then within our constructor. So just kinda picking this up and moving this over.
>> Lukas Ruebbelke: And I'll actually leave customers alone for now, that's not important. So constructor,
>> Lukas Ruebbelke: And we'll go here.
>> Lukas Ruebbelke: We'll just make sure that our imports are correct. There we go.
>> Lukas Ruebbelke: And we check, make sure nothing is totally crazy.

[00:04:14]
I think we're good. And so now what we can do is instead of in our project component reaching out and getting the store. Instead we can just import the facade and this is going to be the ProjectsFacade. Let me make sure that imported correctly, of course not.
>> Lukas Ruebbelke: There we go.

[00:04:54]
>> Lukas Ruebbelke: I'm pretty certain that we're exporting this correctly.
>> Lukas Ruebbelke: ProjectsFacde from lib/state/projects/projectFacde.
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: Back into our component and,
>> Lukas Ruebbelke: Now instead of pulling this from the store, we're going to, and also you can see here it's like doing store.select and then it's actually calling in a selector.

[00:05:51]
Now what we can do is just go facade.projects.
>> Lukas Ruebbelke: And facade.currentProjects. And so the query piece of this has been tucked away.
>> Lukas Ruebbelke: Let's save this, make sure that this is building
>> Lukas Ruebbelke: I think I took the store off too early.
>> Lukas Ruebbelke: I'm gonna save this.
>> Lukas Ruebbelke: Refresh, make sure that thing that's coming through correctly.

[00:07:06]
>> Lukas Ruebbelke: Project's data, very good. Let's go back here and double check.
>> Lukas Ruebbelke: Facade.currentProjects.
>> Lukas Ruebbelke: Leave this for just a moment. Let's go ahead and do the command portion. So wherever you see any kind of a dispatch, we're going to create a method around that to handle that. So in the component, if we look here we have the projects.

[00:07:58]
So we'll just move this over.
>> Lukas Ruebbelke: And so this is going to be,
>> Lukas Ruebbelke: Just a lot of, we'll just pick this up. Move this over here,
>> Lukas Ruebbelke: And once we get this completed,
>> Lukas Ruebbelke: I'll talk about a very specific use case where this has come in incredibly handy.

[00:08:59]
>> Lukas Ruebbelke: Take project, take in project,
>> Lukas Ruebbelke: Or rather, create.
>> Lukas Ruebbelke: We'll pick this one up, and move this over.
>> Lukas Ruebbelke: I think this is, right here. All right, so then we can go back into our component,
>> Lukas Ruebbelke: this.facade.getProjects.
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: And we'll do SelectProject.
>> Lukas Ruebbelke: Then back into our component.

[00:10:19]
>> Lukas Ruebbelke: Rather, project.id.
>> Lukas Ruebbelke: And then from here, same thing facade.selectProject(null).
>> Lukas Ruebbelke: And then we can remove the store. And so if we look at this, we're starting to see a lot of these imports collapse.
>> Lukas Ruebbelke: And so whereas we had a whole stack of ngrx stuff,
>> Lukas Ruebbelke: That all of that is now tucked under the ProjectFacade.

[00:11:03]
And if we go through, we just know that these things are happening inside of the facade, but we don't know what. And so we're just even creating just another layer of abstraction here so that the underlying implementation is no longer a concern of the component. So again, moving to very, very thin components.

[00:11:28]
This is, in my opinion, even for a container component, about as thin as it can get.