This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Application Review" Lesson
[00:00:00]
>> Lukas Ruebbelke: All right, so let's go through, very good suggestion. So if you have suggestions like hey, it would helpful if we just recapped this or if you could just restate this in a clearer term, absolutely. And so, at a high level, because we're dealing with an Nx workspace.
[00:00:17] And let me just pull this all down to kinda zoom out really high here. When you generate an Nx workspace, this is essentially a monorepo where you're able to split your kind of client specific centric applications into the apps folder. Then you can abstract out common business logic, state management stuff.
[00:00:43] And the things that you could possibly wanna reuse across multiple applications, utility libraries, common functionality, into your libs. So in the apps folder, we are working out of a single application, which is dashboard. And so we were able to generate that just as a normal angular satellite project NGG app dashboard, generated.
[00:01:09] Now, in the libs folder, what I've done is I've generated four common libraries. And they all serve kind of a different purpose. So the first one that I did is I created a material library. And if you look in here, in source.lib, within the material folder, is there is a material.module.
[00:01:35] And all we are doing is importing all of the material components that we're going to use across the application into one place. But not only are importing them, but we are exporting them. So now, as you saw in the previous example, that if you have a component in a module, and you wanna use it somewhere else, you need to export that to make that available.
[00:01:57] And so this is just a nice way to keep your main application module nice and clean.
>> Lukas Ruebbelke: Then if we go back into our file structure, then what I've done is I've created a core-data lib. And when we start to work on our services and communicate with a server, this is where those files will go.
[00:02:26] Typically, what I'll also do is when I'm dealing with NgRx or Redux, that I'll have a state management piece in here as well. Possibly separate that out, it just depends. And so core data, you can just think of this as where your data is coming from, this is where your data is being managed.
[00:02:46] This is a highly reusable module. So this this is something that if you have multiple applications, typically you will reuse portions of this over and over and over. So having this in one place is really nice. As well as if somebody updates the lib, well then now you can leverage that in the application that you happen to be working in.
[00:03:07] What we've also done is generated placeholders for the login screen and the toolbar. So as you would imagine, if you have kind of a standard login screen, you may have a dashboard. You may have a widget, a user portal, or whatever. You may want to reuse that. And it's kind of a standalone are you allowed to see what's behind this wall?
[00:03:29] Let's reuse that. As well as a ui-toolbar, so just think of this as a header component. That there's a lot of utility in every one of our applications, we want all of the header to be exactly the same. And so at a high level, what I've done, from an architectural standpoint, is I stopped and I said what are things that I could possibly want to reuse in maybe another a project?
[00:03:54] And so in AngularJS, the idea was to, if you had something in a controller, you would put it into a service. And then as it became used across the entire application, then you would put it in a common directory. So this is the next evolution of that, is that it's so common, that you want to put it into a standalone lib that can now be imported across multiple applications.
[00:04:18] So this is a kind of a fundamental shift as I started to work with Nx workspaces. That it's like I can put this in the lib, my services that I'm calling the server. That's not really going to change, and consume it across multiple applications very effectively. And then in the apps, it's I'm approaching this of what is the user going to see?
[00:04:40] What are they going to touch? And so this is typically going to consist of some very thin component that most of what they're dealing with is either data consumption from core data. Or if something happens, delegating it back up to communicate with some top level directory. In this case today, it'll be core data.
[00:05:02] Hey, go, I selected this thing or I wanna delete this thing, core data, go do your thing at the server. But at the same time, so consuming data but we need to introduce NgRx then it kinda delegates back out to that. So all the business logic goes there.
[00:05:20] And then within the dashboard, I have went ahead and generated three components. So I'm thinking this application is going to have kind of three basic features. A customers feature, a projects feature, and a kind of a home feature or a home component. So when you come to the application, this is what you're going to see, the home screen.
[00:05:45] And then within each one of these features, that I've generated it as a module, so that I can set up specific routes to that feature. Which also sets the stage for us to do lazy loading. And so by doing it, for instance let's take the projects feature. Because this is in a module, that if for some reason I wanted to pick this up, it would be very easy to promote this into a common lib.
[00:06:17] And so I generally operate on the concept of refactoring through promotion where this is the appropriate abstraction for this now. But as you would get new data and you realize I can use this over here, well, you just start to promote from into a common folder. Or as a common feature or into a common lib.
[00:06:36] And so we have home, projects, customers. And then within the module that, I'll zoom this back down, that we then imported in our feature modules down here. And because I went off script just a bit, that we saw that I wanted to actually pull in this home feature.
[00:07:02] Or this home component, that I also had to at the module level export it.
>> Lukas Ruebbelke: And so this is definitely, as we're doing this, we're coming from the outside, kind of in. And so I've generated a lot of this is the broad shape of it. But you can also, having an Nx workspace, start very specific.
[00:07:23] Of I'm gonna do just one application. We could build it out. So we're kinda coming outside in just a bit so I wanna lay kind of these high pieces. Here's the modules, a lib, a common lib, an application, etc. But so coming from the outside kind of in and seeing the broad strokes.
[00:07:45] But you could definitely start with I wanna start with a single application and build my components there. And then as I need common libs or I need additional things, then abstract them out and refactor through promotion.