Proxy Pattern

[00:00:00]
>> So normally, when we use objects, I'm just going to make this big, I don't know if it's annoying when this repeatedly goes on, I can just always just pause it, [LAUGH] if this is like overwhelming. But, yeah, normally when we use an object, or we want to access properties on an object, we can either use dot notation like we did here like personal name returns John Doe.

[00:00:17]
Or when we want to modify it we can do that instantly as well with dot notation or with bracket notation. Now, with the proxy pattern, we actually use something called a proxy, which is kind of an object that sits in between that intercepts those requests and also intercepts those responses.

[00:00:34]
So instead of directly changing the volume person here, we actually go through that proxy which invokes the set method on that proxy. And then the proxy forwards that request to the target object same with get. Now luckily, in JavaScript, it's pretty easy to use proxies because JavaScript has a built in proxy object to use the proxy pattern.

[00:01:00]
Now, the syntax is kinda like the following, so this is kind of related to this person here. So if we had a person object, the proxy could look something like, new proxy and then the person would just the target object. So that the object that intercept the request to forward the request to or get the responses from.

[00:01:19]
And then by default, the proxy object has a lot of built in methods. Now two of them are getting set, those are the only ones that I'll cover right now. But you can just go on MDN and see all the all the methods that are available now. And then again, they also get our arguments properties.

[00:01:38]
So the first one is, again, target, so that's a target objects and then the property that we wanna get in case we use gets or that we wanna set if we are modifying a property. And also the set has a value which is the new value that we're changing that property to.

[00:01:55]
So for example here, if we have this person again, I don't know if I should make this bigger or not, I'll do that. So we have a person called John Doe. And then we create a new person proxy, which takes that person objects. And whenever we change it, so whenever we want to retrieve a value, maybe we do like person proxy.name, we get the value of name is John Doe.

[00:02:17]
Or we wanna set a property, maybe want to increment the age, it's like changed age from 42 to 43. So I'll just, I can show you either in StackBlitz, I know, I also have it here, but I can just show it in the browser. So we can say like personProxy.name.

[00:02:39]
And then you see that it looks like the value of name is John Doe. So this is super nice because it actually just executed this Get method here. So if we're like changing a value, maybe a personProxy.age +=1, is like change age from 42 to 43, so this is super nice.

[00:03:00]
Yeah, so here you see that we're using the target prop, we're still using this bracket notation here. But there's actually another built in method that we can use in JavaScript namely reflect. So instead of writing it here, the target property or target a property equals value and then returning true we can just use that reflect to get and reflect to set.

[00:03:24]
Which I find a lot easier to read and they do the exact same thing. So with a proxy, it's super easy to add functionality to a certain object. Maybe every time that we're changing a value we want to, I don't know, send something to analytics like, hey, this is now changed.

[00:03:43]
Or the more I think useful case of proxy is to add validation. I often use it for validation when I wanna make sure that if we're changing a property, it's either always string if it's a username. Or it's a number when we're changing the age or maybe the age shouldn't be lower than 18, all those things.

[00:04:01]
It's also super easy to log things like we just saw with this one, every time we accessed it, we sent a log to the console with the value that we changed. So if you ever need to debug anything, this is definitely a super nice way to do that to see what are we changing?

[00:04:17]
What is the target object? And what are we changing it to? Now of course, like a big trade out, or at least something to keep in mind is that those methods run every time they interact with the target object. So if you have a pretty long execution of those things, maybe, like I said before, we send it to analytics and this takes, I don't know, even just like one second to send there.

[00:04:40]
This could definitely lead to performance issues cuz we don't wanna have to wait every time we interact with an object, it has to be instant. But there's so many things you can do to make sure that it still goes faster like, it's asynchronous, all those things. So that's not too big of an issue but definitely something to keep in mind.

[00:04:57]
So every time when we interact with target object those methods run, so make sure to keep them small and fast. Okay, so to get started, [LAUGH] okay this looks a bit scary, but it's not. So to get the exercise about the proxy, what we have here is that we have an object and we want to add some validation to it.

[00:05:17]
So you can see the validation requirements here. So the user name has to be a string that only contains two letters, so it cannot be a string that's 1, 2, 3, hello or something and it needs to be at least three characters long. The email also has to be a valid email address.

[00:05:32]
Now I've already add some validators to this file so you don't need to like validate it yourself. You can just like invoke that is valid email function. Also there is all letters for the username to make sure that it only contains letters. And for the age, has to be number at least 18.

[00:05:50]
And to add some logging to it, so not just validation but also logging. You should change the output to include the dates when it was logged and then the value of that property is this new property or forget, so the value of this property is this value. I just have like a quick example here.

[00:06:09]
>> Could you restate the best use cases of proxy pattern again?
>> Yeah, they're are certain, so we have validation logging, formatting notifications and debugging. But for me, the most useful one is definitely for validation like we do in this exercise. If the object that we are interacting with, if we modify it and we have to make sure that it always has certain data types.

[00:06:37]
Maybe because our database expects it, so when you need it to be string it needs to be a number. We wanna make sure that we cannot accidentally change it to an invalid type. Of course with TypeScript that's a bit harder, which is great with TypeScript. But this is a much better way to do that at runtime to make sure that, yeah, we don't change it in any unexpected ways.

[00:06:57]
I've got it, yeah, I also like it for just logging, like I said here, if you ever need to know the time at which something was logged, you can just add that to the get method here. Like we did like the value of prop, maybe we just, yeah.

[00:07:11]
In this exercise, we're adding a new date, so you will see the outcome of that.