JS Fundamentals - Decorators

tag it with at reactive,

lit does this as well. Basically, if there's a a variable that you want to explicitly

So

or like reactive data.

Watch that variable to change, Bro.

watch for it to change, Another kind of cool use case is like event listeners

and when it changes, it will do

whatever you want. Likely update the part of the code base that contains that variable, but it could fire an event as well. You name it. Yeah. And in some of the interesting use cases that I've seen too are initializing like a web component.

my value, and you get access to initializing it, getting in, setting it all within the decorator.

specifically like a reactive variable where you do reactive I would just use a dirt decorator to load a script or to load some data or something to that degree.

that,

my game dot score equals 6 Yeah. So you may have you probably have seen it in Angular has used it for a long time.

And then that would create essentially a reactive private everything, but it really seems like it's only classes decorates

my value.

And the the benefit of that is you have used, like, a higher order function before. Yeah. Higher order function. Perfect.

Or console log my game dot score. Those are getters and setters. Right? And to you, you're just setting a property. Right? But what's actually happening under the hood is there's a get function is Angular I guess it makes sense because generally your,

By a 1000000000 people.

put it use a script tag. Right? Like, I didn't npm install anything. Yeah. I definitely did that as well. Npm install Angular JS is some random package for Browserify.

Not the new one, the one that's been around for forever. I'm just gonna say Angular JS folks,

When I use Angular JS, If you are creating a component and you have some state or some properties on there, you can put decorators version. I I was under the impression that that was the Ecma Decorators, but is it different? Well, I have to double check. You know what? I I was reading through the,

Angular

just upgrade it and drop drop the JS. It's cleaner. That's that's what they it. No. I'm saying that the if you're still using the the old one, not not the Angular devs, not the people who work on Angular. I wonder how much Angular JS is still use. Let's find let's go to npm. Do people npm install AngularJS? I bet it's I bet it's astounding. I bet it is used in JavaScript.

incorrectly, like like without a capital p in it, it will AutoCorrect it to capital P. So it's a nice little function that fixes it. So AngularJS So you could say let at deprecated x equals one. So you can mark variables as being deprecated. It's kinda cool. Mhmm. There's some interesting stuff that, you know, I think about, like, even in Svelte, You create like a writable, so 1.2 So

almost 2 years now.

I just

from the actual validation, especially if you want to reuse that validation logic across

could live in a separate function. And it's kind of nice to be able to if you want to be able to separate

multiple on a class. You put the little pound in front of it.

only 1 more than the previous score. All of that sort of logic The new version you have to at reactive on top of it. This is what

methods or multiple classes.

A function that takes a function as an argument.

let's say me and Scott had a game, and you're setting a score to x, y, and z. You that method could just set the score, And then all the validation inside of that, make sure it's a number, make sure it's allowed, make sure it's, You can decorate individual methods.

Transforming it in some way. It's adding some data to the scope. It's doing whatever it needs to do

their,

If I want to be able to

modify or check what variable is being accessed or

As a primarily functional programmer,

you know, it's not stuff that I feel like I hit all the time. But I do think Mhmm. That this is fascinating and something that, You know, makes me want to explore classes a little bit more given how powerful they can be. Yeah, absolutely. I think After all of the methods within the class have been evaluated, but before

like I said, to you, the user, you're just accessing a value or you're just setting a value, but There could be a lot more logic under the hood that's going on, and this is just a bit of a shortcut to that. Yeah. Pretty neat stuff. Again,

maybe it's time we write a couple The are the TypeScript versions different than somebody on to talk about will

And then if you want to be able to get and set those, you have to create your own getters and setter values and do all the logic inside of that. And often it's simply just returning

Oh, okay.

Oh, I see.

So adding an accessor Hey, everybody. Excited to talk about decorators finally. I feel like we've mentioned them on the show for years years years, and they are.

property

If you have a private another very common use case is validation. Like, if you want to somebody is setting properties are are only a one liners. Right? You wanna you wanna set a You can decorate the getter or the setter of a variable,

the private value and setting the private value.

do all 3 of those things for you in one go? It it does all 3 of those things for you in one go in addition initialize it with data or do is no. I don't. I don't have anything to add About decorators. But, you know, I think they're interesting. I'm glad to see that they're finally approaching, hopefully, a place where they're actually being added to the browser. Beautiful. Alright. Thanks, Larry, for tuning in. Catch you later.

Oh, my God. I can tell you exactly what version it is.

It does say it was using Angular route.

It's version 1.2. It's a good one. That's a good one. When when did that come out? I could not tell you.

came out 10 years ago. Wow. Yeah.

apps are not using npm. I bet a lot because when I bet a lot. A lot of those apps were built, no we weren't using build systems. We're just and, So decorators in themselves are referencing a function

Oh,

It's it's it was it is Angular JS, but it's before there was a difference.

That's online still. I just checked it. It's just loading it off of the script. So Is it Angular or Angular JS, Scott?

the benefit of it. Yeah. In fact, I have an Angular app if you decorate an auto accessor, it gives you

just like you were just writing Angular, Every now and then we get people being like, I wish you would talk more about Angular. And same with Vue.

but maybe you could create a writable that But we're gonna be mostly talking about class decorators because that is what is coming to the browser in stage 3. Are are they different than

API in general and yeah. The copyright is class or any of your properties in your classes And then potentially, like, we mentioned other things. And by decorating,

Because it turns out there's kind of a lot you can do with decorators.

by using a decorator instead of importing writable. And then you're just, you know, at writable or something on a variable.

a const decorator.

initializing it,

or stepping in the way of it kind of deal. I don't know. It's all an interesting world. Be their way, the classes based decorators are kind of a a

and they show everything as like a function decorator, and then At the end of the day, running it. Deckorators, at least to me, they seem kind of similar in that, okay, I have this method that save some data.

largest

the one that's available in TypeScript or the one that's available in Babel or any of the means in which you tried to use decorators.

Firefox is implementing them as we speak. There is an open issue about it. But I believe

deprecated but kept it around.

When decorators will arrive, but you can use decorators in many senses.

And then they've implemented the new

Safari implementing these. So we will see

I haven't seen anything about

and then TypeScript I think Angular does. I think it's,

different plug in systems whether it's Babel or whatever. And now the actual decorator spec will differ quite, well, maybe not quite a bit. It differs a bit from as far as I know,

the the spec ones? Because I know there was TypeScript decorators for a long time,

Many times people are using

or a word the a keyword named accessor.

So nvm installing

of Angular the king of Angular

is the legacy Angular JS. Oh, no.

Npm install Generally what that's doing is it's taking in a function, it's

Angular

500,000

So if you want if you want Angular, weekly downloads

JS.

what the other one is. And three point 2,000,000 downloads of Angular Core.

import. So there's on top of Oh.

Let's see what

creating a private variable with a getter and a setter. Now the reason this is relates 2 decorators Oh, that's pretty cool. Yeah. It it is interesting. And it seems like An example that I've seen

All from within the decorator that you don't get unless it's an auto accessor.

What you do with this API is you write accessor, decorators to And and so the current status of decorators is they are currently in stage 3.

for first creating a private variable,

Yep. And inside of my class

the name of the value, and then you assign it. And what what it is, it's a shorthand

is that if you decorate

And an auto accessor is a syntax at that point,

in an auto accessor, You could, inside of a class, you do add decorator name space to giving your decorator more functionality.

Yeah. So there's a on the TC 39

You know what? It is really interesting. It's an interesting API. And I was under the false assumption

that once Decorators were added. They were going to be added for When they get called, when the the decorator gets called, which is now, Is what should be a private property.

Are we gonna have a 3rd version? Yeah. I I have no idea. And it really seems like this is going to be it in terms of decorators, at least as they're added. Yeah. And So if you were to say I have a class.

With the potential We're gonna be talking about what they are, how to use them, and maybe some of the finer points and maybe even future points of what decorators during the class definition.

So you could use, accessor

as well as, running

properties that are inside of your class. So it's kind of cool because you could decorate the whole thing or individual methods or properties that live inside of that class. Yeah. And and what are some potential use cases for for decorating something? Well, it kind of what it does is if you can imagine, it kind of sweeps functionality under the rug to hide it underneath essentially like a tech.

properties that are inside of that. So private, public, static, And we don't talk about them, not because we don't like them, because we don't use them. So maybe we'll have some folk on if you know somebody, the saving data

just Yeah. If

the SCORE method, but I can sprinkle on a little bit of logging or any of the stuff we talked about earlier. So, again, 5 came out with the ECMA script decorators, which is the one we're talking about today. Okay. So never mind that a little bit weird because they, like, had their own version. Right. And then they

of

then go ahead and run this method, which I can in turn run the original code

it modifies the class. Yeah. So it's it's kind of interesting that it it, like, happens when you Like the code is evaluated. Scott said, like exactly when it happens, but it doesn't run is Angular JS.

when you like run a method. It runs when the code is is evaluated. And if you want to run custom functionality is the old one. It's been deprecated for is the new one.

when the method is run, that's where you then return a function from the decorator. And that sort of just queues it up to say, all right, when somebody runs, let's say I have a class called game and there's a score method. So when somebody does run a score method, You can write a single log function and you just pop at log on top of any method that you want, and you're not explicitly going into the method and adding a bunch of console logs WordPress has a function. It's called it's capital P, dang it. So if you type WordPress

Deckorators, they're written as just a straight up normal function again, given the parameters that we mentioned.

After that, the decorators are applied and

Yes.

Oh,

tweet us because we're the queen of Angular. Oh, yeah. The queen of Yeah. I I think you're right as well. I've only ever seen it that way.

for a full archive of all of our shows.

Head on over to syntax.fm

And don't forget to subscribe in your podcast player it's adding additional functionality.

Angular. Yeah. Doesn't Sarah Drysner work on Angular now? I don't know. Maybe.

and literally anybody who is royalty in the Angular family.

It feels like it was sooner ago. We should have

Alright. Anything else to add about decorators?

Peace.

or drop a review if you like this show.

Lit for web components has used that for a while. The way that it works is you put an at Yeah. And and returning the private value, but there might be other things that are happening.

on strings.

the thing that you are decorating, and then you give it a name.

And that is corresponding to a function that exists somewhere else in your code base, very similar to how, Like, tag template literals

piece of state on your class. And if you wanna tag that as reactive, just at reactive in front of it. Yeah. Have you seen this auto accessor stuff as well?

No. What is that?

So you get access to, like, what kind of a decorator it is, name access, whether or not it's private, whether or not it's static Mhmm. And an add initializer method that you can then,

to add an initializer

Is it is it safe to say they are finally here? I mean, they're here ish.

Boss, and Scott

key. Welcome to Syntax.

We're gonna be diving into the current status of decorators

Monday. Mon Monday. Hey. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflow, breakdancing,

soft skill, web development, the hastiest, the craziest, the tastiest TS web development treats coming in hot. Here is Wes, Barracuda,

On this Monday, hasty treat, we're gonna be talking about decorators.

then the decorator function is called like a log also creating a get method, and creating a set method for. So this thing is syntactical sugar for the initialization

about the thing being decorated.

The constructor and the prototype are put together. K. This this this is like deep stuff for people who who care about this. But, basically,

it gets 2 parameters. 1 of which Is the value being decorated and the second is a context object containing

a bunch of information

expression is first evaluated, It's a function Able to extend its functionality. It's able to

your

Get around, you know, getters and setters and Mhmm. Those types of things. So,

decorators babble decorators? How does it how is it differ from TypeScript creators. How does it and so they they address all of those.

It's wrapping it. It's on this value.

the use cases 2014,

as simply put, programmer I mean, you know, I I understand OOP, but I I don't I don't think I write object oriented code that much. It would it's been really fascinating for me to dive into some of this stuff in terms of,

And as a non object oriented, literally anything pretty much.

add a

in the browser once this thing is being loaded.

a, like, component name to a a decorator

to then initialize it

On a, I have no clue. That's like, Before they go to stage 4, they need to have 2 independent browsers implementing them. So, behold to us.

Kinda feels like they should always be on top. Right? Is is that, like, a syntax thing, or is that just people like to format it that specifically that's that way? I've seen I've only seen it this way in the examples, so I would be inclined to say it's a syntax thing.

So it's a little interesting. It seems like if it's The old docs came up and it's just like, oh, like, is this still a thing where There are yes. It's still a thing and people correct you if you say the wrong one. So what are we supposed to say? Oh, let me tell you. Here's what we're supposed to say. Anytime I have to know the difference, I Google them both and compare them, And then I come up with the answer. That's what I do. If if I get an implant in my brain, Okay. So a part of this proposal is this auto accessor.

Then the variable name and then its definition equals to number 1. Whatever.

on a function or method, you're always defining it above it. But on an individual field, it's defined next to it. I wonder why that's different.

somewhere else. So you can decorate an entire class.

a a back ticks? That's a function as well.

You know how you can, like, tag Script tag, PHP, Like getting and setting the value to you, the user, is simply just saying decorator proposal, there's a link you have here to extensions,

how do these differ from the TypeScript version of Deckorators? Which one?

Probably not, but it happened to them once before. So like loops and stuff right in your HTML that was the whole it's and like and how much how many AngularJS

And how does it differ from TypeScript decorators? Could have been referring to the previous implementation of that. Although it doesn't necessarily explicitly say that. It just says

through the proposal here. And there's a whole section about how does it differ from, for now

So it's TypeScript

scrapped it. A lot of the Versus code code base is built using it as well, which is Kind of tricky, but luckily, they have the new version, which which is funny that they, like, went all in on it because it's it's not done yet, right? Yeah. There's a possibility that it could change.

what, lit web component applications?

the correct version of Angular based on what we're talking about.

Which one is the 1? In researching this episode, I Googled some like decorator for Angular.

Maybe a full on Angular dev? Yeah, which one though? Angular or Angular JS? Chromium for adding And then you have access to at some point It's angular. Before I die, It's going to be just a function that returns more things. Okay. What it does is it gives you the ability to return a custom, get a custom set and a custom init function

React components are now only functions pretty much that is not looking like something that we'll be able to do for a little while. So to define a decorator, you're essentially just writing a function. There's nothing special to this function beyond essentially the parameters that are are passed into the function. Right? But so it's a function.

Yeah. You know, this is in times like this, I I get sad that, you know, these aren't coming to functions right away because one of the times that I really like to use decorators, but I did. It was in a function context

So when the code loads, the decorator in React world as essentially a higher order function or higher order component, you know.

at least right now, it seems to be one of the most handy ones to me because

log decorator But if you're doing it on a field

to log anytime a variable has changed inside of its getter and etcetera or any time it's being updated.

You could And I I found that experience to be really nice, but seeing as how, My name is Scott Talinsky. I'm a developer from Denver, and with me as always is Wes us.

if we are in development, then go ahead and and log out what you need.

of a class, if the class is initialized.

or debugger points or anything like that. You can simply just say, Yeah. Exactly. Yeah. Because it's sometimes like, oh, man. I gotta add all these console logs and make sure I remove them. And this is really nice where you could just tag something with at log, And then you can say your your log you could leave them in if you want, and your log function could say, Oh, here we go.

Yeah. The logging one is, Updating it. You might be logging it. There's a lot that could really happen. And and the that function will then

things that are surrounding that data or surrounding that object.

But when you wanna use them, you just use them using the at sign like we said already with the decorator's name and you place this on top or sometimes next to to to the left of. I wanna say instead of next to. The left of the thing you're trying to decorate. So for instance, if you're decorating a class at decorator name and then immediately following that the class definition.