Angular Core

Angular Core Component Architecture Review


This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Angular Core course:
The "Component Architecture Review" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas reviews what code was written so far.

Get Unlimited Access Now

Transcript from the "Component Architecture Review" Lesson

>> Lukas Ruebbelke: / So let's just take a minute and recap what just happened.
>> Lukas Ruebbelke: We have two presentation components, the project details, and so, somebody would say, well, there's state in here is that truly a presentation component. Well, I would say, I don't know, if you wanna get the dictionary out and fight about it, I don't really care, call it whatever you want.

[00:00:28] The point is all the state that's in here, is presentational state, and that's what matters. And then in the project list component, I know you're around here somewhere, even better, there's nothing happening in here. So this is truly stateless.
>> Lukas Ruebbelke: Templates are pretty straight-forward, but now we've taken the kind of that large bit of code or that we've broken it out, because one of the biggest problems with having code that's kinda monolithic.

[00:01:15] So, especially if something's nested, you can never reuse that. Like while I was in here, if I'm like I just want the form, I don't want the list. Give me the form, I don't want the list, or give me the list, I don't want the form. Impossible, cuz they're coupled together.

[00:01:30] And that's the problem when you have one, you miss concerns, and then they are nested or essentially coupled together, so that you can't pick one up without the other. You can't test one without the other. And so this to me, in a very simple example, I think illustrates how to work around a lot of conceptual problems as programmers.

[00:01:53] But then sets a pattern for how to think about programming as a whole. Because when I ask somebody hey, do you understand redux? And they're like, no, and I've got five minutes to figure it out, I simply come to do you understand inputs and outputs? Do you understand that data goes in and events come out?

[00:02:15] Input data in, events out? You understand redux? That is essentially that pattern, state down events up. And then tomorrow we'll kind of expand out on that and we'll see that at an application level.
>> Speaker 2: Is there a command line short-cut to generate the least details components in a similar way to the first time you generated component for projects, component for-

>> Lukas Ruebbelke: So the beauty of the Angular CLI, and this is what you're actually seeing with like Narwhal, is that you can extend the CLI to do custom generators via schematics. And so somebody could if they haven't already, could sit down and create a schematic for a master detail for you.

[00:03:05] And so it would be pretty interesting to say, here's this data model. Or not even a data model just the basic structure of it. Then you just pick it up and you plug your stuff in. Because whether I'm dealing with, in this case projects or customers. Like it is very conventional in the sense of that I'm going to probably do it the same way every single time.

[00:03:27] And so, when you have strong conventions around data modelling, then it's very easy to automate a lot of these things. And so this is world like with like ngrx, or even REDEX, people talk about boiler plate. And I'd encourage people, when you see something that's the same over and over, don't mistake convention for repetition.

[00:03:50] It's that there's a reason why everything is the same because its uniform, its conventional, and its consistent. Versus I would say if something is repetitious then, or it's even boiler plate, I said the B word, that you can take that out and you can still function. That's when I think of boiler plate, is it's crufty, unnecessary code.

[00:04:13] But, when you have a bunch of fine grain single purpose functions, that are doing one thing, then of course things are going to be a little bit more verbose, because you're breaking everything out. So, to answer your question, possibly, but definitely somebody could. And it would just be a matter of sitting down and writing a custom schematic to do that.

>> Speaker 2: Okay.
>> Lukas Ruebbelke: So, what does everyone think about this? Like the idea of component driven architecture, inputs and outputs, container components that get the data, pass it in, listen for events, delegate it back up. And whenever I see a presentational component like this, I just get all googly eyed and giggly.

[00:05:04] Because this is incredibly stable, incredibly portable.
>> Speaker 3: Will you be getting into any validation of the details of the product?
>> Lukas Ruebbelke: So if you look in the, so, full caveat. There is things that are in the code, that we ran out of time to talk about. But the reason why I built out the full fledged application in the reference branch, is because, even though depending on how this went, there were just going to be things that I knew I would not be able to get to.

[00:05:45] But there is, I'd recommend everybody to go, and if you look in the reference branch, there's definitely validations in here. And so there's validations, there is interceptors, route guards. And what I'll even do to that end is, in the Wiki, flush this out as well and call out some of these specific things.