Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Component Classes" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

Lukas demonstrates his approach to create component classes: Create, Import, Decorate, Enhance, and Repeat (CIDER).

Get Unlimited Access Now

Transcript from the "Component Classes" Lesson

[00:00:00]
>> Lukas Ruebbelke: All right, so what I'm gonna do, we're going to get into component fundamentals. I'm gonna talk for 10, 15 minutes. I'm going to issue a challenge. And then, we are going to break for lunch. We'll eat lunch, and then we'll get into, from there, you can pick up the challenge.

[00:00:19]
>> Lukas Ruebbelke: So in component fundamentals, we'll talk about the anatomy of a component. I'm going to mention just briefly a mnemonic that I use when developing a component. I just notice, I'm doing the same thing over and over and over. And so, I just came up with a pretty simple mnemonic.

[00:00:37] If it doesn't make sense, then scratch it. But I personally like having small little catchy things like I'm doing something and I just have kind of this check list I walk down. And then we'll talk about how you just can take a class, enhance with properties and methods, injectables, and then we'll just briefly talk about Lifecycle Hooks.

[00:00:59]
>> Lukas Ruebbelke: So the anatomy of the component, remember template, class, metadata. And then from here, we have event binding and property binding. And that's quite simply, really I think the core of, I mean I would be, if I were to guess, I would say this actually makes up 80% of your application.

[00:01:21] I think as you start to get expand in complexity, it may shift a bit more to the classes, but you will do this a lot.
>> Lukas Ruebbelke: Little bit of a show box here. I come from, or rather, I think, philosophically, I aspire to, or I really like functional dynamic programming.

[00:01:47] And so one of my favorite JavaScript books is, Functional JavaScript, by Michael Fogus. I love observables for this reason, I just love functional programming. And so, when I saw the we are moving into this classical kind of system of classes, I was just like I don't know how I feel about this.

[00:02:06] Like, we're moving into the wrong direction, cuz under the hood, JavaScript is a LISP. And it's a LISP really in sheep's clothing and you can do some really crazy things with functional JavaScript. And so as I saw these classes come up, I really had a hard time reconciling where it was going.

[00:02:27] It kinda bummed me out. And I kind of stopped, and I thought, why do like, what do I not like about classes in OOP? And I realized, I don't actually care about classes, what I don't like is inheritance, and when you have classes, you now have the potential for inheritance.

[00:02:49] And so, especially in Java, this is just kind of the way that you do it. You have a class that inherits from a class and inherits from a class and on and on and on. But I realize classes, like it does not explicitly, or it's not intrinsically a quality that you must use inheritance.

[00:03:08] And when I started thinking of classes as simply organizational objects or containers to put properties and methods and not as a mechanism for inheritance. It became a lot easier for me to reconcile. So I started thinking, just as basic objects or containers, and I never use inheritance. There are maybe, I'm not saying never, ever, ever.

[00:03:30] I've never ran into a case that made sense or a composition via dependency injection did not work.
>> Lukas Ruebbelke: If you did it, or you are using inheritance, be very careful. Now on one end of the spectrum, you have someone like Eric Elliot who pretty much just like, if you use inheritance, you're sub-human, and I don't use that strong of language.

[00:03:54] But on the other hand, you have somebody like Dan Abramov, who created Redux, and he wrote a fairly thoughtful where he says, when you control it and contain it, he will use it up to a single level. So just know that inheritance is a slippery slope. I never use it, it's simply an organizational mechanism very much like a module.

[00:04:18] All right, so let's talk about CIDER real quick. And what that is is class definition, imports your dependencies, decorates your class then you enhance it with properties and methods, and then you just repeat this. So this is where this concept of just CIDER. And as I was doing it by hand, the first thing I would do is I'd create my component class.

[00:04:45] And so the first thing I'm gonna do is like I need an items component. Export class ItemsComponent. The next thing I would do, is, I would import my basic dependencies. So import, this is where I'd import my core angular dependencies. If I knew there was any third party dependencies or custom dependencies, I would import them.

[00:05:06] And so, what this does as opposed to ES5. So if you've ever done ES5, well, unless you're using requireJS or something, where does all your script tags go? Where does all your resources go? In the bottom of your index.html, there's just tons of them, unless you're bundling it.

[00:05:24] But it's pretty much like you just get everything. With this approach, it allows you to import and just pull in just the things that you need. And so the next step is, we import. So here, we're importing component, and then we decorate. So we turn into something that Angular can use.

[00:05:50] So in this case, we're using the component decorator. And as I mentioned, you can decorate properties and methods as well, input, output.
>> Lukas Ruebbelke: And so here, now we're decorating the class. So, we create the component class, import the dependencies, decorate the class, and then from there we say well, now what do we want this to actually do?

[00:06:18] And then we start to add in methods and properties that define the functionality, and the data that we want to expose. And so if you're using the Angular CLI, a lot of this just happens for you. But as you're building up your muscle memory, class, import, decorate, enhance.

[00:06:39]
>> Lukas Ruebbelke: And so from here, we got some properties, item, selectedItem, and we have some methods. And this is just straight JavaScript, nothing fancy here. Properties and methods.
>> Lukas Ruebbelke: And you can also enhance with dependencies. So we've talked about this, but let's say your class or your component needs a service.

[00:07:12] Well, you just pass it in using typically a private modifier. Generally, you do not need to expose your class to the template. But now, it's available for you to consume data, or allow that service to do whatever it needs to do.
>> Lukas Ruebbelke: And then, from here, I skipped a step.

[00:07:32] Is that, and you'll see this from day one to day two as we start to build up the components. Generally, I will start very broad. I'll start to build something out. And then I realize, this is starting to get too big. And so then I repeat. And that's where the 'R' in CIDER comes from, is I'll take something and I'll abstract it out and turn it into a child component, and you start all over.

[00:07:58] So class, import, decorate, enhance, repeat.
>> Lukas Ruebbelke: So you can take it or leave it, but that is just kind of in my mind as I'm doing this. That's what is happening.