Proxy, a new JavaScript ES6 feature

https://www.atyantik.com/proxy-javascript-es6-feature/

by tirthbodawala • 8 years ago

199 90 8 years ago

atyantik.com

syspec• 8 years ago

The use of `document.write` for this entry instead of the usual console threw me off at first.

tlrobinson• 8 years ago

Presumably so you can see the output in the embedded JSFiddles.

FYI, if you're embedding a JSFiddle you could also just drop this in the HTML section then use console.log:

    <script>console.log = function(str) { document.write(str, "<br/>") }</script>

sametmax3• 8 years ago

JSFiddle should just have a tick box with "intercept console.log" and a tab with the output .

icc973• 8 years ago

I initially stared at that with horror, but I suspect that Stack Overflow does something similar with their code snippets. If you write console.log it gets output to the screen [0]

[0] https://stackoverflow.com/a/49968603/327074

tazard• 8 years ago

I feel as though this is a missed opportunity to use a proxy!

yashthakur3• 8 years ago

It is just because since all the JSFiddles are on one page. All the console.log would be together in the console and it would be difficult to know which console is for which code.

Hence document.write is used.

Though HTML could be used but that would just increase one more tab to show useless HTML. ;)

sametmax3• 8 years ago

As a Python guy, where we have __setattr__, __setitem__, etc., I was at first wondering why you would use a proxy for such a thing. Better make it part of the language.

But the more I think about it, the more I can see that it's handy to have an official proxy interface for this, for the case of an external code needing to wrap your object.

Also, I've seen so many reinvented wheels for proxies, and usually bad ones, as it seems an easy problem to solve, but there are plenty of edge cases. Proxies avoid the recursive problem altogether.

Besides, __dundermethods__ tend to make the language hard to optimize.

Still, it's really overkill for simple cases like the ones addressed by Object.defineProperty (or @property for Python), as you create a huge layer of indirection for the entire wrapped object. So if you use such a Proxy, you better have a damn good reason.

mateuszf• 8 years ago

I think it's a matter of performance. Compiler / interpreter / runtime will only add overhead in lookups for this objects explicitly matched as proxy, but in normal case it can go directly to the cached functions.

throwaway2016a4• 8 years ago

This is part of the language not just a an interface (though I'm not sure it is an interface, I think it is an object primitive). You wouldn't be able to write this using plain Javascript. Which is why there are no polyfills for client-side code.

Incidentally, PHP does it a similar way to Python with so-called "magic methods" but I can see the benefit to doing it this way.

rijoja2• 8 years ago

So this is sort of like metatables in lua?

atavkpatel• 8 years ago

What is metatables?

wruza• 8 years ago

Except that metatable may change the behavior of a table itself, and js proxy is just a wrapper that cannot change an original object.

rijoja2• 8 years ago

ah thanks for clearing that one out

techsin101• 8 years ago

This is another feature that goes into bucket "I'll never use" along generators

augbog• 8 years ago

Well technically if you use async / await, it's built on top of generators and promises.

CapacitorSet• 8 years ago

I agree it doesn't seem super useful, but it can be used to pull some semantic tricks. I used it in [Rebridge](https://github.com/CapacitorSet/rebridge/) to implement syntactic sugar for database access, so that accessing a property on an object translates transparently to a query, and I've seen it used to [allow for typos in property names](https://github.com/mathiasbynens/tpyo).

yashthakur3• 8 years ago

I especially liked the "construct" part as we can use it to take input from the users in frontend as a numbered value and then store it in the database with the currency format which can be later used to make the value visible with the currency in the frontend.

sametmax3• 8 years ago

Generators require a mind switch to be used regularly. And the browser is not the place where the most obvious use cases are, so it's harder to make your first steps here.

The easiest things to start using generators is to write sysadmin scripts that parse big files. Once you've done that, you get the memory benefit. Then the more you use it, the more you get the lazy evaluation benefit and you start using it elsewhere.

It's clearer in Python because:

- generators have there for ever

- we have unified way of iterating on things, and generators just work transparently

- you can start learning generators by just changing [] to () in your comprehension lists

So in JS it's much less obvious.

icc973• 8 years ago

Yeah, lazy evaluation is the big feature of generators. Given that it's such a powerful feature of Haskell it's definitely worth investigating them.

boubiyeah• 8 years ago

It's such a niche feature. And only useful if you use mutative OO style. Also it gets a bit too much into the magic territory for me, this is hard to debug and reason about, even harder than getter/setters.

maaaats• 8 years ago

Here's a list of stuff proxies have been used for https://github.com/mikaelbr/proxy-fun

m_ke• 8 years ago

It's a feature you'll probably end up using all the time without even noticing it.

I just wrote a class to keep track of changes to an object using proxies yesterday. That way you can pass an object to a form, modify it in place and then roll back if needed. Also makes it easy to get deltas and only post the updates to the backend.

romaniv• 8 years ago

Proxies are a basic feature that should be a part of any OO language. Their usefulness ranges from "save yourself a lot of repetitive work" to "impossible to implement without".

Very simple real-life use case: factor out logging and move it outside of normal logic of the object.

celim307• 8 years ago

Does es6 tags use this under the hood?

hackerbabz• 8 years ago

Why is this an ES6 feature? Isn't ES6 set and implemented? Wouldn't this be part of a future spec (ES2018, ES2019, or whatever)?

rf15• 8 years ago

It's an existing, rarely-used feature. You can try it in your browser!

TomMarius2• 8 years ago

Because it is not a future feature, it exists for years now (I first used it in 2016).

jazoom• 8 years ago

It's a poor title. It's not your fault.

taco_emoji• 8 years ago

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

It's not "new" at all, Firefox has had it since v18 (mid 2012 [0]), Chrome since v49 (early 2016 [1]), etc.

[0] https://en.wikipedia.org/wiki/Firefox_version_history

[1] https://en.wikipedia.org/wiki/Google_Chrome_version_history

hguhghuff2• 8 years ago

I liked the functionality but found it hard to implement. Not a good sign.

Successful features are those that surprise in the easy direction (arrrow functions) rather than in the hard direction (proxies).

TomMarius2• 8 years ago

What were your problems? I on the other hand found it very intuitive.

hguhghuff2• 8 years ago

Can’t remember. Maybe I was misusing it. Probably I was trying to either prevent access to object methods where user not authenticated or prevent access where object not initialized.

matsemann• 8 years ago

I used proxies to make a fun library where you can call arbitrary functions, and it tries to make the function based on the name. For instance

  declaraoids.findWhereNameEqualsX(persons, {x: "Mats"});

It will generate the function on the fly.

https://github.com/Matsemann/Declaraoids

Vinnl• 8 years ago

Haha that's a hilarious abomination :)

It's a shame it doesn't have declaraoids.makeMeASandwich() on the roadmap though.

throwaway2016a4• 8 years ago

You should submit a pull request.

In fairness, some RPC web frameworks do this in a completely non-ironic non-joke way. CakePHP "findBy" comes to mind.[1]

[1] https://book.cakephp.org/2.0/en/models/retrieving-your-data....

simplify• 8 years ago

That's similar to Rail's dynamic `find_by` ORM methods where you can put the column name in the call:

    User.find_by_username "alice"

hoppelhase• 8 years ago

That's how Spring Data JPA works: https://docs.spring.io/spring-data/jpa/docs/current/referenc...

rutierut• 8 years ago

Was looking for something exactly like this the other day! No idea this existed, this will especially be great while stubbing/mocking in tests.

sgdesign• 8 years ago

I was talking about this with a friend and he remarked that this could lead to some pretty opaque code where things behave differently from what you'd usually expect. While I think this is a cool feature, I think I agree with him that you probably want to think twice before using Proxies.

philbo• 8 years ago

A use case I had for proxies was a circular array type:

https://github.com/philbooth/hoopy

If the index overflows in either direction, loop back round to the start/end of the array. I wanted a circular array to use as a fixed-length buffer for receiving data in a streaming JSON parser I wrote:

https://github.com/philbooth/bfj/blob/61087c194d5675c75569a2...

lioeters2• 8 years ago

A circular array type, love it! It looks like an excellent use case of proxies.

flashgordon• 8 years ago

Technically the type should still be an Array with the backing implementation having a circular array behavior no?

antoaravinth• 8 years ago

Cool. I was seeing source of inner js, which in deed uses proxies to create structural sharing.

https://github.com/mweststrate/immer

foob2• 8 years ago

Proxies are definitely fun. We use them extensively in our browser automation framework, which is largely based on the Web Extensions API [1], to implement syntactic sugar in the interface. The general goal behind Remote Browser [2] is to make it really easy to execute privileged code in a web browser, but to otherwise stay out of your way as much as possible. This is accomplished through the heavy use—some might even say abuse—of proxies.

For instance, take a look at this code example of opening a tab.

    await browser.evaluateInBackground(createProperties => (
      browser.tabs.create(createProperties)
    ), { url: 'https://intoli.com' });

The browser.evaluateInBackground() method is part of the Remote Browser API, and it simply evaluates code in a background script context in the browser. The browser.tabs.create() call, on the other hand, is part of the Web Extensions API. The vast majority of Remote Browser's power is provided through remote code execution and the Web Extensions API, so we really wanted to provide a more concise syntax for performing this sort of operation. Using proxies, we were able to make the browser object directly callable as a shorthand for background context evaluation. This code example is exactly equivalent to the previous one.

    await browser(createProperties => (
      browser.tabs.create(createProperties)
    ), { url: 'https://intoli.com' });

That's a bit more concise, but the real sugar is in the next step of abstraction. Instead of explicitly evaluating a function in the background script context, you can simply treat the browser object in the client context as though it were the Web Extensions API browser object in the background script context. This code example is again exactly equivalent, and again accomplished using proxies.

    await browser.tabs.create({ url: 'https://intoli.com' });

The tabs.create method isn't hardcoded into the Remote Browser library. Instead, proxies are used to evaluate any non-local API calls in the background script context. This means that you automatically get full access to the version of the Web Extensions API that your browser supports, whether you're using Chrome, Edge, Firefox, or Opera.

The one last piece of syntactic sugar is the shorthand for evaluating code inside of individual tabs. The syntax is very similar to how you evaluate functions in the background script context, you just need to first use square brackets to indicate the tab ID.

    await browser[tab.id](createProperties => (
      document.getElementById('some-link').innerHTML
    ), { url: 'https://intoli.com' });

This is also implemented using proxies. In fact, the same trap that handles the local Web Extensions API calls handles the tab access, and it differentiates between the two depending on whether or not the property name consists entirely of integers. In both cases, it returns another proxy that is able to handle either additional chaining or function evaluation.

Anyway, sorry that this ended up a lot more long-winded than I was expecting. If this has piqued your interest in Remote Browser though, we made an interactive tour of the project that you should check out [3]. You can actually launch and control browsers from inside of your own browser in the tour, and it explains a lot more about the project philosophy and what you can do with it

[1] https://developer.mozilla.org/en-US/Add-ons/WebExtensions/AP...

[2] http://github.com/intoli/remote-browser/

[3] https://intoli.com/tour

kevincennis• 8 years ago

Proxies can also be really helpful for unit tests.

Obviously you have things like sinon for stubbing out methods, but they do have to modify the original object, which I don’t think anybody loves.

But you can also wrap your object in a Proxy with handlers that stub certain methods.

You can also use proxies to implement validation and observability on objects. Here’s a very minimal example of a sort of Backbone-esque Model class with proxies: https://gist.github.com/kevincennis/25ba31b2e9f9c8b7a34047ba...

icc973• 8 years ago

Data persistence. We add a proxy backup function to each object that is fired when modifying its content.

This makes me think of database triggers, which would imply that it's quite easy to implement dark patterns with Proxies.

fergie2• 8 years ago

This is new to me, and it took me a while to see the point, but having read the Mozilla docs (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...) I can see a few use cool examples of validation and input correction. That said- all of these things _seem_ to be fairly trivial to achieve without proxies, so I am wondering- what is the killer use-case that you absolutely positively need js proxies for?

yashthakur3• 8 years ago

You can use them to call some functions when an object property is called or set. P.S. Just like Database triggers ;).

You can use them conditionally to manipulate data before fetch or before storing. For example: you want to store the username when a person registers using the email id like userzyx@gmail.com then you can use it to generate username from it by truncating the later part and generate unique username which will be "userzyx" here.

Just open up your brains and see where further it can be used and possibilities are just unlimited.

fergie2• 8 years ago

You are essentially restating my question: what _are_ the possibilities with proxies? (What can you do with proxies that is much more messy/difficult/verbose to do otherwise?)

snek• 8 years ago

Here's a pretty good example of how a proxy can be used from Node.js source code: https://github.com/nodejs/node/commit/f074612b744fecfd1f79fd...

jordiee• 8 years ago

https://github.com/solkimicreb/react-easy-state

pretty cool library that is only possible because of es6 proxys

isuckatcoding• 8 years ago

https://caniuse.com/#feat=proxy

Seems to have a decent coverage for most users

throwaway2016a4• 8 years ago

The issue is that for many applications anything less than ~98% is not acceptable (eCommerce for instance). This is 87% (to save people a click).

And because this works on fundamental operators, a polypill is impossible.

However, if you are using Babel to transpile your JS or using Node.js this seems like it could be very useful.

franciscop2• 8 years ago

You also cannot transpile Proxies, since they do not have an equivalent in "old javascript" as they are a feature in such a level that cannot be built with previous tech.

sfa_aok• 8 years ago

Salesforce use this in their Lightning Framework. I've not gone beyond the surface of that framework, but I've found its use of proxies adds friction to development. Trying to debug in the browser, anything other than a primitive results in a looking at an empty Proxy object - I believe this is a deliberate choice behind the framework in the name of security. But it makes it much harder to discover what's in an object - if you don't know the name of a property, good luck getting it.

Note that this is either due to how the framework uses Proxy, rather than Proxy itself, or I'm doing it wrong and should do more reading up on it. It really could be the latter - given my level of experience and knowledge, I thought hard about posting this comment!

hajile• 8 years ago

Everything about the Salesforce JS experience from the ground up is horrible. They'd have to pay me a lot more money to do that again.

dlhavema• 8 years ago

The biggest thing that gets me when my coworkers do SF dev is how many times they have to refresh to see the new code. Its almost always two or three.

Ive seen the proxy thing trying to debugging. I didn't realize it was a set pattern/language feature.

haikuginger• 8 years ago

This makes sense to me - it feels like an interface somewhere in the space of Python's properties (using the @property decorator), its descriptor protocol[0] with which properties are implemented, and its system of magic methods like __getattr__ and __getattribute__.

I am a bit intrigued about the way it's separated from the "nature" of the underlying Object though - in Python, we'd have a single canonical interface to the data, bound to the class in which the data was instantiated. Here, in ES6, it seems like the data might be attached to a base Object, and you could use that Object with any number of different proxies to provide polymorphic behavior.

Overall, these seem like very different philosophies of object-oriented programming. Which I guess makes sense given how the languages have evolved over time.

[0] https://docs.python.org/3/howto/descriptor.html

liberatus• 8 years ago

Big win for JavaScript DSL composers. Reminds me of method_missing and other sharp knives in ruby.

SimeVidas• 8 years ago

I’d rather read an article that doesn’t focus on the API (which I can look up on MDN), but rather on the practical use cases (which are merely a footnote in this article ).

mxschumacher• 8 years ago

I agree: get to production uses with code examples as quickly as possible.

Tough to know whether this is a fringe feature or actually useful on a regular basis without really digging in. Luckily, other comments here highlight some usecases.

13years• 8 years ago

I implemented JavaScript Safe Navigation using proxies as an experiment to learn more about proxies.

This is similar to the TC39 Optional Chaining Proposal https://github.com/TC39/proposal-optional-chaining

https://gist.github.com/dakaraphi/6a87168db66fd8f032d2

ramadis• 8 years ago

I made a simple library to add ruby's `method_missing` to Javascript: https://github.com/ramadis/unmiss

loftyal• 8 years ago

Anyone using redux, I created this using proxies - https://github.com/alnorris/redux-actiontyper

_bxg1• 8 years ago

Proxies are awesome. I used them to create observables that automatically publish on any mutation, no matter where in the object tree it happens: https://www.npmjs.com/package/mutable-model

alessioalex• 8 years ago

Cool stuff, I made a more general use library that notifies you of any chance on an object property, no matter how nested it is: https://github.com/alessioalex/recursive-object-proxy

nathanstitt• 8 years ago

I used object proxy to create a DSL for constructing object factories, inspired by Ruby's FactoryBot https://github.com/nathanstitt/object-factory-bot

It's pretty handy for generating data for unit tests, but wouldn't recommend it for production code since I've discovered Proxy is fairly slow.

hungerstrike• 8 years ago

Unfortunately IE doesn't Proxies them at all and you can't even shim support for them on IE.

cwp• 8 years ago

I use this for sql queries:

  const user = await db.connect(sql => sql.getUserById(43))

The sql value is a proxy that looks for a file called 'getUserById.sql', reads sql out of it, sends the query to the database, and returns a promise for the result. With caching and some sugar methods, it's a pleasant way to use a database.

caxco93• 8 years ago

This isn't actually a new feature, but at least the thread is giving it some more exposure. It's been implemented on many browsers for some time already. I've for example used it for doing quick data-binding. It's really useful and more people should know about it.

jaequery• 8 years ago

I'm not really a fan of these "magic" code creators. I'd use it only as required and not all out.

Boulth• 8 years ago

Proxies are hardly new (2014?), well, just like Es6. There are some interesting applications [0] but I don't know if is use it in production.

[0] https://curiosity-driven.org/array-slices

colept• 8 years ago

Proxy is nice but the scope is very limited if you tend to avoid metaprogramming.

One use I've found is for library maintainers - a way to expose a large API without taking a hit for requiring the whole thing. We use it to consume parts of that API without having to require all the dependencies and subdependencies.

Too• 8 years ago

I can see a very valuable use case for being able to intercept method calls and attribute lookups to do input validation, logging, etc. But being able to dynamically decide which attributes exists sounds like a nightmare from a code-analysis perspective.

Python has had the __getattr__, __setattr__ and friends and once you start using them to be "creative" all static type checkers break down. They are usually frowned upon.

Let's hope typescript is able to interpret these Proxy objects and that the community don't abuse them for all kinds of strange things.

Proxy, a new JavaScript ES6 feature

Related Stories