Facade with an Observable Subject

[00:00:00]
>> Now, what we're going to do is, we're going to go constructor, private, and we're going to inject the widgetsService. Awesome, and from here, let me just check something real quick. In, let me just verify that. Got my module. Now, because we're moving the handling of the remote server calls into state, I need to move, CoreDataModule or import that into state, and make that available.

[00:01:15]
So, from fem core-state, I don't know why I couldn't figure that out before. There we go.
>> CoreDataModule.
>> Yeah. And I definitely don't wanna import. Just like a snake eating its tail. There we go, all right. Yes. When it works, it is good. Organize imports. Here we go.

[00:02:18]
And now, let's go head and let's start with, let's do loadWidgets. So, we may not do all of this, but let's do at least a little bit of it. So, widgetsService.all. Sometimes I like to break things down, subscribe. And from here, response is gonna be widgets. And I'm just going to take this and I'm gonna go this allWidgets.next(widgets).

[00:03:11]
Let me see why this did not like this. Possibly it's because of the syntax here. There we go. [SOUND] All right. So now, let's stop, just for a second, and examine what we have done. When we call WidgetsFacade.LoadWidgets, If you imagine kind of this apex, LoadWidgets is going to go get the data and it's going to unwrap that result.

[00:03:48]
And it's going to drop it into this.allWidgets.observable string. So, we're fetching the data, and then because we're subscribed, we're immediately notified that new data has arrived. So now, if I go to the widgets component, what I'm going to do is Let's get rid of the widgetsService. We're just going to move this away.

[00:04:25]
And instead, we're going to use the WidgetsFacade. And what I'm going to do, as well, is from here, so you can see, as well, I'm calling this widgetsService, and I'm taking that result and I'm assigning it in a single transaction. So, it's a command and a query together.

[00:04:53]
This does not happen anymore. We separate the commands in the query. So loadWidgets. And then up here, what we can do is, we're gonna just say this.widgetsFacade.allWidgets. And what I can do, since I'm here. Is I'm gonna wrap this in an observable. And I'm going to say this.widgetsFacade.selectedWidgets, all right?

[00:05:45]
And What I will do, as well, let's go ahead and selectWidget. It's gonna take a widget and this.selectedWidget.next(widget). All right, so, two pretty simple things. selectedWidget, it's going into the facade. We're calling next, and then wherever we're subscribe that's gonna be notified of it. From here, we're calling all the widgets and we're returning it in the observable string.

[00:06:25]
And so now, we go back here. And we no longer are going to do assignment in the component. So rather selectWidget. I believe this was emptyWidget and I realized as I look at this, I just go Widget. There we go. And I'm just gonna comment these out, Right now.

[00:07:46]
Now, Okay, I'm just pointing this out, other than this up here, what assignment am I doing in this component? Nothing. So, let me go into my HTML. And We'll make this asynchronous, as well. Let me save this. And with a little bit of luck This will work, or it may blow up.

[00:08:58]
No provider for reducer manager. One second here. This is what happens when you get aggressive about. So what I'm gonna do, is I'm actually going to see what happens if I just take this out, and save this. All right. What do we notice about this? Nothing. It's exactly the same as we left it.

[00:10:09]
The only thing that's changed is now, we, in our code we have removed all of the implementation details around state management out of the component. Which this allows us to come in on the backside and implement NgRx in pieces. And so, this is, I believe, a facade is service where the subject is, first of all, it is a viable state management approach.

[00:10:44]
But, when you implement it by the facade, then you can take that as far as you want. Now, what I would recommend, this is the one caveat that I would say, be careful, is that the proponents, there are people who are very aggressive about service with a subject.

[00:11:15]
And so, they will create a service with a subject for every data model, every entity in their application. The difference between that individual and myself, is that I'm also a fan of a service with a subject. The difference is, I'm a fan of one service with a subject, and that's called the store.

[00:11:42]
And so, at some point, if you're creating a bunch of services that have subjects, that's what the store is for. You're, in a way to avoid complexity, you're actually just distributing it back across your application. So, if you're using a service with a subject and a facade, I believe for a transition step, it is great.

[00:12:10]
It's fantastic. In fact, if I was doing temporal state that does not need to be stored in application state, let's say a notification bus, I would use a service with a subject. But when it comes to managing state for a complex application, then eventually you're going to want to transition into something like NgRx, Akita, whatever it is, there's a number of them.

[00:12:38]
But having n number of services with subject versus having one, eventually that becomes a losing proposition. I wanna do a quick tour of NgRx. Then I want to do a quick tour of testing in Angular, what that looks like. And then I want to also offer just a little commentary on end-to-end testing, which, I think, is the most underrated thing that developers can do to provide value to their organization.

[00:13:17]
I feel very, very strongly about it. And then from there, we'll do Q&A. And then, in some way, shape, or form, we will get to the build things that I wanted to show you in the performance stuff, at some point. I'm going to, Jump into one more branch here.

[00:13:39]
And, we are going to walk through NgRx.