This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Component System Architecture" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Lukas: This is one of my most favorite framework features in Angular 2 and that is component composition and how components fit together. So we'll talk about Component System Architecture briefly, what this is, what that means for Angular2. We'll talk about a clear contract between our components using input and output.
[00:00:27] We'll talk about input and output and then we will then get into Smart Components and Dumb Components, and then briefly talk about View Encapsulation, which is pretty interesting. But first, an Angular History lesson. So I briefly eluded it yesterday but this time, I'm gonna do it with graphics.
[00:00:51] And then, if you stick around for tomorrow, I actually have an extension of this. But the first time, I believe, that most people ever did Angular 1, it was kind of a Hello World, really simple. For me it was kind of a put this thing on the controller and then bind to it.
[00:01:10] In the template and then I took at a step further and edit it to an input field and when I type in the input field, it would automatically update in the dom and my mind was blown. I was sold, like I'm all in. So, the first Hello World very tiny app, you had a tiny view and a tiny controller.
[00:01:31] Oftentimes, initially In the same page. So a lot of times you would just put your controller in line with your HTML and eventually they said, well, we're gonna stop doing that. Then you started to actually try to build something, a little bit more ambitious, started trying to add in features.
[00:01:49] And so, in my case, it was a lot of times a controller with a large amount of logic that I'm importing the HTTP module and or service, rather. And doing all this service side stuff and this thing just got bigger, and bigger, and bigger. And then, before it's too late you're kinda forced to sit down and just get realistic, of like, this thing is not working.
[00:02:13] And so, within kinda the first year of Angular, the different teams the project set was on is that we ran into this very, very quickly, is that our controllers are too big, our templates are too big, and one particular project and this was before kind of UI router stabilized.
[00:02:30] We were having to kind of roll our own mechanism to only redrop parts of the page, because if something would change. And there was a mutation, we were saying well great. Now we gotta redraw like everything and we don't wanna do that. And so we were kind of had a shell component that it would say hey what has changed.
[00:02:48] And then it would go and redraw portions of the page. And so we kind of had to do these home brewed things because we had a single kind of page in here with large controller, large view. Now, in angular one there's two solid approaches to this problem. The first one is named route and breaking everything into tiny pieces that is essentially, your application is now a state machine.
[00:03:19] This works very well, so you might say hey, that side bar is one thing. This is a state. Lets say that this top thing here and our footer. But you still had this template controller pair, we were just braking down into smaller more specific things. Another really good approach is by using directives so again what we're doing is we're taking where we had a large controller and a large template.
[00:03:47] And still keeping that combination, just making it much smaller, and breaking them into directives. So this is how I do all of my Angular One projects now. If you go to Angular Class, get up, repo, they have a great web pack ES6 starter that I believe Scott did like 99% of that.
[00:04:08] And that's all component based. And so, now you're using ES6 to basically create directives, everything goes into there. But the idea here, is to take large controllers, large templates, and start to break them into smaller pieces. That you can manage. When you start working on a large team for a large PC manufacturer, for instance, and you're on the same project, it's really nice to be able to divide you application up into pieces so that everyone can work on something without causing any intra office drama.
[00:04:48] That's right, I'm looking at you. He's like what, what, what, what?
>> Speaker 2: You're right.
>> Lukas: Yeah, that's happening right now.
>> [LAUGH]
>> Speaker 2: I'm not sure. I schedule the meetings, and he does the shell scripts.
>> [LAUGH]
>> Lukas: So I guess, he's doing shell scripts now, so, you're welcome.
[00:05:04]
>> [NOISE]
>> Speaker 2: Just if he'll take it.
>> Lukas: He'll take it. So with angular two this template controller pair still exists. It's now by default, it's baked into the frame work. But now instead of a directive, we are using that semantic. It's evolved a little bit and it's a component.
[00:05:23] So now, hopefully we're starting to see this pattern emerge. So, this is really Component System Architecture. It's that you start to look at your page, and you say, how do I break this down into tiny logical fine grain single purpose components. And so for me, a kind of a good way that I approach this is any time somebody give me for instance a visual composition of this is what we want this application to look at.
[00:05:54] I tend to say if I have a pencil and I draw things around. If I draw boxes around things, that generally is a good candidate for a component. So for instance,
>> Lukas: If we go here and somebody showed me a picture of this, I would look at this and off the top of my head I'd say okay, well, we have maybe this header that could possibly be a component.
[00:06:22] We have this list of items, so that could be one component. But we could take it a step further and now we could actually have an item in there, cuz I would hate to repeat that over and over. And then we have this thing here which is an item detail so that would be like an items detail component.
[00:06:38] And so you just start to draw boxes on top of the layout and you're like, ok this logically makes sense. And generally I find that for the most part the kind of component system architecture kind of, itself. Like, just logically like this is how this thing should be put together.
[00:07:03] Fortunately, Angular makes this really easy to do and, and it's really, you know, almost by necessity to start to think of things in this kind of way. With that said, for instance, I've seen individuals who are in an object orienting programming language. And they're doing it in the worst possible way by actually writing a lot of procedural code within an object.
[00:07:37] So like you may have a construction. You have like 42 lines of procedural code. It's like okay, so we're doing, we have an object but we're not adhering to the spirit of what's trying to happen here. Because now we've got these procedural things that are happening, we're missing these concerns, etcetera.
[00:07:53] So even though Angular encourages you by providing these mechanisms, you can still technically create a very large component with a very large template, and that would be suboptimal. So you have to really embrace this idea that things need to be very specific, fine grain. So, this is kind of clean code, you know, again Robert C Martin, keep everything small, fine grained, and specific to what it does.
[00:08:23]
>> Lukas: So, we've been talking about templates and components, and by now, we are, I think we're, I think we're very familiar with this graphic.
>> Lukas: But what I wanna focus on here, that really enables this is the custom data binding. And so we've seen from a component to a template, how to do that?
[00:08:50] But now when you can start to use these same mechanisms to bind to other components, and create custom events that you can bind to, custom properties that you can send to this component. This becomes very powerful. And so really, the crux of component system architecture comes down to understanding how to create custom events and bind to them.
[00:09:15] And custom properties that you can then send into your child component via the template.