Hacker News Reader

Comment by Waterluvian | Hacker News Reader

Maybe not an “API” and maybe not lesser known but every developer should be aware of Proxy. Don’t abuse it. But be aware it exists. It’s a beautiful escape hatch for things when you need advanced capabilities but still need to fit an existing object shape.

View on HN

Don't abuse it? That's half the fun! I made a toy library a while back that allows you to call "any" function you want, and it tries to implement and execute it runtime based on the name! You can do stuff like this, where it will map and filter a list of nested objects.

  declaraoids.findNameAndSexAsGenderWhereAgeGreaterThanXAndAddress_CityEqualsCity(persons, {x: 23, city: 'Bergen'});

[0]: https://github.com/Matsemann/Declaraoids

And Symbol. Please stop putting __my_private_thing tags on objects and use Symbol instead.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

WeakMap also works really well for that, because it means you don't add any extra properties or symbols to the object itself. Instead you store it in the WeakMap with the object as a key, and it'll still get garbage collected with the object as if you'd added it to the object. I've found it's occasionally useful when you're trying to get things from different frameworks to interact with each other, both of those frameworks want to do things like assigning extra fields or setting up proxies, and then they start conflicting.

Good point. I haven't seen an analysis of the tradeoffs of using WeakMap vs Symbol properties. It would be cool if someone knowledgeable did a write-up on that. I imagine that performance could swing either way depending on lots of subtle factors.

Proxy has been abused a lot but always in very interesting ways. ObjectBuffer[0] is a great example, which I also tried to (poorly) reimplement myself.

It creates a new data structure that behaves as an object but is backed by SharedArrayBuffer, in order to support parallel computation over it.

- [0]: https://github.com/Bnaya/objectbuffer

I use proxy to remove youtube ads.

Can you shine some more light on how exactly you do this? Would love to try it out myself!

Here's code: https://pastebin.com/LEzbz4NN

Basically youtube sends ads data in a window.ytInitialPlayerResponse variable. My extension loads before and intercepts this variable with proxy to prevent setting of window.ytInitialPlayerResponse.adPlacements field.

When I was writing this code, I looked into ublock origin filters, so this idea or may be even code could have been borrowed there, I don't really remember.

I also override JSON.parse and Response.json functions, because youtube can also send ad data with AJAX. One of those might be unnecessary, I'm not really sure.

Verified...this is very nifty indeed! Thank you for sharing, now I can finally remove my AdBlock extension as it kept polluting my dev console with browser-polyfill errors ;)

Proxy? How does it work?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

Imagine an Object where you control _all_ the getting and setting.

And it is also slow as hell, so yeah, don’t abuse it for regular programming or in hot loops.

It was very slow before, but browsers improved performance a lot, multiple frameworks use proxies for their reactive primitives under the hood, Vue, Mobx and so on. SolidJS is one of the fastests frameworks out there and is built mainly on proxies, so proxies themselves can't be that slow.

Granted in very very tight loop regular object get/set will be faster, but performance is more than good enough today. If you have an use case for it, use it.

Immer relies completely on it and is wicked fast. It did improve by a lot in recent times.

It lets you intercept behaviors as they are requested of your object and do whatever you want to respond to them. Think of them as extensions of descriptors and you won't be far off (except they're designed to be a wrapper instead of methods on an existing object so that they can also be used for security, IIRC)

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

Proxy is the thing that make the framework Angular possible, it can for example watch an object and when a property change, update the front end

Reply on news.ycombinator.com