Proxies & Reflect API

[00:00:00]
>> Maximiliano Firtman: Proxies under reflected API is another big topic that we will cover briefly here. But the whole idea of a proxy, it's something that appear also in ES6. Actually it's a design pattern that with the mix of proxies and the reflect API, you can get into the objects and do something when the object changes.

[00:00:26]
Or when you are reading value from the object, or something like that. For example, let me run this. So, if you look here, I have an object target. It's an object with the name Joseph, just that. And then I'm creating a proxy for that object, okay? The proxy will receive a target, so that's the object that you will observe, kind of, and then a handler.

[00:00:51]
The handler is another object that will have different hooks, actually they are called traps. And we have a trap for set, for get, and many others. So in this case, I'm setting a trap for get. So when you are getting a value from that object, that hook, that function is going to be executed.

[00:01:17]
So when you are trying to get in the name, you can see that before getting the name, so I can say here, the name is. I'm using a template string here. The name is Joseph, before that, we see this, and what is that? This console, that says, hey, hey, you're trying to get that property from that object.

[00:01:43]
I'm gonna string you find the object so we can see better there. So every time you're getting a property, you are going through a proxy. Now, you're not getting directly into the object, you're going through a proxy, okay? That proxy will let you change. And here I'm saying, hey, I'm using the reflect API to go and grab from that object, that property.

[00:02:11]
>> Maximiliano Firtman: And of course, I can just return something different.
>> Maximiliano Firtman: Return whatever, [SOUND], so now that's the name. Maybe you're thinking, well, but that's a proxy, it's not a real object, but think about this. And if you are working with modules, you are exporting things. So when you use a proxy, typically, you will export the proxy version of the object.

[00:02:38]
So from a consumer point of view, you don't know that you're going through a proxy, you're just using an object that someone returns you. I have an object, so I'm getting and setting value from that object. I don't know that I'm going through a proxy, but maybe I'm going through a proxy, and that proxy can do something, yeah?

[00:03:00]
>> Speaker 2: I might have missed this, but on line 6 and line 8 is get a specific keyword that's-
>> Maximiliano Firtman: It's a specific keyword, actually a specific key for the handler. I mean, I can do any key, I'm not going to get an error, but also it's not gonna work, okay?

[00:03:15]
It's not actually working, so the trap should use one of these specific key, we have get, set, there are long list of traps. If you wanna get more on proxies, I have another course on front-end masters, Vanilla JavaScript. You don't need that framework, that's the name, Vanilla JavaScript, you don't need that framework.

[00:03:37]
Where we get into proxies, we use proxies to simulate or emulate reactive programing. So when you change the data, you update the UI. Something that react, for example, is doing with interpolation. So we use proxy for that, okay? But, yeah, the proxies can be used for other purposes as well.

[00:04:03]
And the reflection API will let you receive an object, analyze the object, see what's inside, see the methods, execute the method. Change property values, read properties values, without actually knowing the object beforehand. That's typically a reflection API on most of model languages.