Course Introduction

[00:00:00]
>> Lukas Ruebbelke: Just to lay a quick foundation, this is probably my one of my favorite quotes on software engineering. It comes from the paper Out of the Tar Pit, you can Google it, it's a free PDF, Victor Savkin, of Angular, now Narwal, suggested that I read it. And right in the first part of this paper, Ben Moseley and Peter Marks mostly they talk about, that programming is hard, and that this is because large systems are complex.

[00:00:30]
And I think that's almost self evident that, yeah like the larger the system, the more complex that it is, and so on the surface that's really kind of okay, we get it what now. But then they go on to talk about well what is complexity? And they define it as state management, flow of control, and code volume with state management being the largest perpetrator of complexity, and from there stems complex flow of control, and additional code volume to manage that.

[00:01:09]
And so the reason why I'm so in love with NGRX, which we're going to spend quite a bit of time talking about in this workshop, is because, I believe that it handles those problems very, very well. So NGRX is based off of Redux, so Redux is a pattern, it's also a library created by Dan Abramov that is for React.

[00:01:36]
So if I talk about Redux capital R, I'm talking about the library Redux, lower case r in most cases I'll be referring to the pattern. So Dan Abramov created Redux, I believe Rob Romald watched his series over the weekend or something and just said, this is amazing I'm going to hook this upbBut I'm gonna do it with observables.

[00:01:57]
Which I think it's a little extra special sauce or communicating through your application to make it truly reactive. So one note about NGRX, is we are laying the foundation here, when we talk about the NGRX, that a lot of times when you hear NGRX it's talking about typically people think of the store, which is basically the main portion of the redux pattern.

[00:02:26]
But actually it stands for angular reactive extension, so there's actually multiple pieces within NGRX proper, and so they've condensed this all into the platform, but, what I wanna call out was kind of the main libraries here that obviously store plays a really core part. Effects, entity, and then we'll see store-devtools as well, so the three ones that we're gonna focus on is store, effects, and entity.

[00:03:03]
But then we'll also see the store-devtools in actions, there's some additional things, so for instance, the router-store, if you wanted to hook this into your router, you certainly could. I believe that once you understand the foundations, it would not be hard to go in that direction. So when we talk about NGRX, typically people default to the store, but you could be talking about effects, entity.

[00:03:28]
There's schematics, there's a lot of different things under this, so occasionally, you will need to actually clarify that, no, it's not this, just the single thing, but it's actually a series of tools and they continue to add to it. So pretty much every time I use this I actually pour champagne out on the ground I just love it that much.

[00:03:47]
All right so let's talk about the application and what we're gonna be doing today. So this is a very familiar application, I've taken this, pulled it out from yesterday, and I've removed some of the extraneous pieces that are not part of the narrative, and so primarily a single feature project.

[00:04:14]
And we're communicating via the REST API, and so this is where I think most people get to, when it's like, okay, we need to do something different. And so a lot of times what you'll have, is a lot of services making calls, and they're either stateful, or they're sending data to the components, then the components then become stateful.

[00:04:34]
And so pretty much where can you hit that REST API, and it's like, okay, this is getting very large, we have a lot of APIs, we have a lot of services and things are getting messy. So, we are going to take this application and we're going to, through a series of steps, refactor it to use NGRX.

[00:04:54]
Now, if we go to the repo,
>> Lukas Ruebbelke: Angular reactive workshop, the master is the completed branch. There's an additional branch and this is where we will be starting from, coincidentally called the start branch, now what's going to happen is, if we go to the wiki, there are these reactive workshop steps.

[00:05:31]
And so for the most part I'm going to follow this pretty close, and occasionally I may forget how to type something and I may pull this up and reference it. But, these are broken up into steps, and as I finish with step, then we'll cut the branch and we'll push it up.

[00:05:48]
>> Lukas Ruebbelke: And so once I get to like let's say step 2, and I haven't cut a branch, call me out on that, so by the end of the day, we are going to have branches for everyone of these steps. So that somebody comes in they wanna say, what exactly happened when we were talking about, I don't know, entity?

[00:06:06]
I'd like to revisit that, you can just go right to that branch of the branch before and then follow through. So we're gonna break that out in steps, if I forget to do that, please remind me.