Component-Based Architecture in AngularJS 1.x and ES6 Decorators

Transcript from the "Decorators" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Scott Moss: Decorators are awesome. I really, really like decorators. This is a proposal made by. Who made this proposal? YouWhoTheCats I think.
>> Male Speaker 2: Yeah.
>> Scott Moss: Yeah, it's his proposal. So he is like yo, let's make some decorators just like Python. Everyone else has got it. We should have it.

[00:00:21] They're really not that special to be honest. We've been doing this forever in JavaScript. It's just a function of mix in really. But the syntax is just really nice. The fact that you can how you can do it on the fly. But the proposals out there as part of the ES7 spec, but we can access it on Babel Stage 1.

[00:00:40] So we have access on our code right now if we wanna write a decorators. So really all they do is, like I said, they just mix in on methods. So you can only use decorators on methods on a class on and an object literal. You can't use using one might some free function somewhere or something like that.

[00:00:57] It have to be an object or class. And the way they work is they just decorate the actual method that they're placed above. And I'm gonna show you some very good examples of that on Angular 2 stuff in a minute. But how that will work? It's kind of like this, I already wrote some code over here in preparation for this.

[00:01:17] So don't worry about what's going on up top here. Let's just look at the stuff at the bottom. So we have this class called Person. We have our constructor. By the way, you don't have to put a constructor in the class. You don't have to. If you don't put a constructor, then nothing will happen when you call new, right?

[00:01:32] But you don't have to put a constructor. And then I have this method called scroll. So something in common we do on the web is we do on scroll, do this, right? But then we wanna throttle that or we wanna debounce that. Well, let's just change that to throttle.

[00:01:48]
>> Scott Moss: So we like throttle this thing or debbounce or whatever. And then we wanna throttle by like 300 milliseconds or something like that. So this is cool. Normally, what you would do is you'd have to like. Whatever is calling scroll. That's where you would define a throttle and stuff.

[00:02:01] Which is great. But if you can just put a throttled decorator on top of the scroll, it doesn't matter who calls it. You can be rest assured that it will be throttled, all right? Which I think it's pretty cool. So in order to get that to work,
>> Scott Moss: What we do is up here a decorator's really just a function.

[00:02:21] So if I change this from mineralized over to throttle. That's the new name we called it. It's really just a function that is just a function that returrns the decorator function. So in this case, actually I need to change some stuff, I need to say.
>> Scott Moss: Do something a little different here.

[00:02:51]
>> Scott Moss: Okay. So in this case, throttle is also a function. All decorators don’t have to be functions. They don't have to take in arguments, but they do have to return a value. So what I mean by there is a decorator can be like this or it can be like this.

[00:03:10] And because throttle is a function that's actually takes arguments, it must return a function. So that's a change that I just made. I just have to return a function. There it is. So the arguments that you get and I was logging for you, so you could see them.

[00:03:28] I could tell you, but I think it'll be better if you saw them. Once you see these args, you'll know how powerful this stuff is.
>> Male Speaker 3: Don't forget the T.
>> Scott Moss: Thank you. Oops, there we go. So we get the target, which is like the actual instance. We get the name of the method, and then the awesome thing is this descriptor.

[00:03:56] So who is ever use object.define?
>> Scott Moss: Nobody, anybody knew what object.define is? So it's like a more fine grain way to define an object. So in JavaScript we make an object. Mostly we do this. Let's say. Object literal, right? You can also do object.create or whatever you're flavor is.

[00:04:18] I mean I guess some people might even do this. I don't know who's doing that but so do I. So but if you want more flying in control over the object as far as setting up different setters and getters. Does everybody know what that is, setters and getters?

[00:04:32] Right, so you can do that with object.define. You can say this property is innumerable. Which means if I loop over this object, it should show up or it shouldn't. I don't want this object to be configurable, as in you cannot change it, right? So object.define allows you to define that object more fine grain, all right?

[00:04:48] So you would do object.define and you start passing in some stuff.
>> Scott Moss: So that's what we get here. We get the actual definition of the object that we're trying to decorate. And because we do that, we've got some pretty powerful stuff here. So you get access to the value, the function itself, all types of things.

[00:05:15] So a pattern that I've noticed with decorators is that what you do is you overwrite what the value is or the function. And then inside that overwritten function, you would just call the old function. So does that makes sense? So I have this descriptor.value. That's the new function that I'm making.

[00:05:39] But inside of the call to that function, I'll calling an old one with the same arguments. So I showed that means. Let me just log some of stuff, you'll see what I'm talking about.
>> Scott Moss: So if I just say scroll. I don't know. Just like100, some arbitrary number.

[00:05:58] And now I can come down here and say,
>> Scott Moss: const (num) = args. It's gonna give me the first thing out that array. And then I can say oops, not const, but let num += 300. And I'll just put num there.
>> Scott Moss: Right?
>> Scott Moss: Where is that other consul, here it is, oops.

[00:06:47]
>> Scott Moss: What's typing now, this argument list,
>> Scott Moss: You can't do that I was trying to take a shortcut, let me see.
>> Male Speaker 3: Can't you just see you could turn that, nevermind.
>> Scott Moss: I'll find the shortcut. It was just small type.
>> Male Speaker 3: The client put in an array.
>> Scott Moss: Thank you.

[00:07:05] Yeah, you're right. That's where error was. Cool, there you go. All right, sweet. So now we come out here. Now we could say, consul, or return to,
>> Scott Moss: Actually, no. Return to.
>> Scott Moss: Actually, no. For some reason, that's not working the way I thought it was gonna work, hmm.

[00:07:33] Well, anyway, yeah, that's normally the pattern. So you would come in here, override the function and you return a new function by calling it the old one. So this is great for like minimalization, throttling, debouncing, stuff like that. There's actually a pretty cool library called DecorateThis. But this guy has already made like tons of cool decorators that I think are very very helpful.

[00:07:53] I use them all the time, so I highly recommend checking them out.
>> Male Speaker 3: You got this?
>> Scott Moss: Yeah, mako-taco is his name. Yeah, mako-taco.
>> Scott Moss: Cool, so any questions on decorators. The reason the decorators are rubbish, not because we're not gonna use them. Because I wanna show you something with decorators in a minute.

[00:08:23] Yes?
>> Male Speaker 4: What type of problems do you usually solve for decorators?
>> Scott Moss: The same type of problems. I mean I don’t know how functional your writing style is. But if you're very functional, programmer mixes a a thing that you use a lot, right?
>> Male Speaker 4: Yeah.
>> Scott Moss: So it's the same time when I would use a mix in is when would use a decorator.

[00:08:46] But at the same time, decorators are meant for like a more of a classical programming language. Because they're only used in classes and objects literal. So it's kind of weird. But like one common thing I see myself doing a lot as minimizing. I do a lot of minimization of heavy stuff.

[00:08:59] So I use it there. Also throttling and debouncing is very common for UI heavy stuff. All right, that's a very common one that I see every time. And then actually decorated this has a good example of some really cool stuff that I actually mentioned at my talk at NRU.

[00:09:17] And it's like he found out a way to annotate types of the arguments and return values and call time. So it's not like static analysis like typescript words like this must be an array. It's like when the JavaScript runs if it's not this type there will be an error.

[00:09:33] So he's doing that when he shows you right here. Actually, I can talk about it, but he allows you to, let's see,
>> Scott Moss: Where is it at?
>> Male Speaker 5: It's right at the top.
>> Scott Moss: Now my computer's like frozen. There it is, yeah. So you can say what type of parameters this method must take, a number or this type of stuff its pretty cool

[00:09:56]
>> Male Speaker 5: Yeah.
>> Scott Moss: So again, it's not static analysis. You won't have me tooling support behind it, like Intelesense, but at calltime, you'll get some errors. Yes?
>> Male Speaker 6: Felix and I was wondering what your take on using decorators to register modules in factories, like the Angular 2 way.
>> Scott Moss: I think that’s awesome.

[00:10:15] In fact there's a library for that, too
>> Scott Moss: Ease up. I don't know, I can look for it but I don't know. So there's this company called Ease in San Francisco and one of the guys who works there, he used to work for Ionic. He just made a library that allows you to do that in Angular 1.

[00:10:34]
>> Male Speaker 6: Sweet. It's really cool, yeah. If I find any of it I'll post it, but it's really, really cool.
>> Scott Moss: Any other questions on decorators? No, okay, so the next thing before I set you loose and work on the other thing is.
>> Male Speaker 6: Actually Felix outposted the name of it NG Classy is that it?

[00:10:57] It looks like its under the ease github group or-
>> Scott Moss: That might be it. I think classy, let me see I know there is a classy. I don't know if it's that one though, let me see. No, let's see, GitHub, ng-classy.
>> Male Speaker 6: It looks like there's an app component at state.

[00:11:16]
>> Scott Moss: Yeah, this is it.
>> Scott Moss: Yeah, this is it, so yeah. This the one I was talking about. Yeah, this one is pretty cool. There is another Angular class. Yeah, I thought that's the one he was talking about. That's something different. Cool, yeah so this one. This is pretty cool, and if it doesn't really give you what you want, you can just look at how it works and you can pretty much make it work however you want.

[00:11:35] So this is Aangular 1, which is really cool. It looks like Angular 2, but it's not.