Meta Programming in JavaScript with Proxies

https://itnext.io/meta-programming-in-javascript-with-proxies-64fa4898070e

by kiyanwang • 8 years ago

73 52 8 years ago

turdnagel• 8 years ago

I love proxies. I do worry about their effects on performance, but the benefit of being able to use native object semantics is sometimes too great.

I’ve developed a proof-of-concept library that uses them to provide optionals support (no more TypeErrors for writing things like obj.property.property2.property3 when property doesn’t exist) here: https://github.com/jdelman/proxy-lens

(Btw, I know calling it a lens isn’t right.)

goodoldneon• 8 years ago

Yea, Proxy performance can be an issue, especially if you use them recursively. I tried using them to create a "protected" clone (https://github.com/goodoldneon/alhambra). The initial "clone" is much more performant than actually deep cloning, and doesn't get more expensive as the size of the original increases. However, get/set/delete/etc. is far less performant.

chrisseaton5• 8 years ago

I do worry about their effects on performance

What kind of performance do you mean? Compile time? They should be optimisable away and shouldn't have any effect on actual run time should they?

RussianCow• 8 years ago

Proxies are entirely a runtime API. Did you read the article?

iaml• 8 years ago

I don't know if it's a subtle joke, but I think you have a typo in readme.md s/pointdexter/poindexter.

zubairq• 8 years ago

Yep, proxies can be really useful, but use them carefully. We use them at Yazz so that we can have custom code editors that have variables injected into them

invalidusernam32• 8 years ago

get(tgt, prop, rcvr)

Good article, terrible variable naming.

Abbreviated variables are a pet peeve of mine. What is 'tgt' supposed to be? An abbreviation of 'target'? 'Thank god it's Thursday'? Might as well just use x,y and z, it's no less clear.

jcelerier• 8 years ago

funny, target, propery, receiver seem evident to me. don't you guys do note-taking ?

invalidusernam32• 8 years ago

What is the convention used here for deciding the abbreviated names? It's clearly not removing vowels since prop has an o in it. So it becomes subjective as to how stuff should be abbreviated. If things are subjective, there is no standard.

In one function developer A might call it "rcvr", in another function developer B might call it "rec". Both mean "receiver", just use "receiver".

benjaminjackman• 8 years ago

Having experimented with and used proxies a decent amount, the MDN page is my goto reference when I need to use them: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

The biggest pitfalls, in my experience are

1. Infinite recursion when implementing get and printing proxies with console.log in node.js (which attempts to access properties from the object prototype which can lead to infinite recursion problems).

2. Performance, which I would need to do more digging and benchmarking to comment on in more depth.

Some libraries that use Proxies to great effect are the https://github.com/mobxjs/mobx-state-tree and https://github.com/mweststrate/immer libraries both by mweststrate

fro01164• 8 years ago

Immer is excellent. It makes deeply nested immutable updates a breeze. The API almost makes it feel like you're programming in a fantasy-land future where JavaScript's default data structures were persistent data structures like a proper functional language.

And it accomplishes all that without sacrificing type safety like most string path based approaches to deep updates often tend to do (think lodash.set or ramda.assocPath).

The only reason we haven't gone all in on it yet is the existence of browsers that don't support Proxy (like IE11, which we now unfortunately have to support), where performance takes a huge hit, and those tend to be the browsers that can least afford to take that performance hit to begin with.

acemarke3• 8 years ago

Yep, we're using Immer in our new Redux Starter Kit package to help make writing Redux reducers easy:

https://redux-starter-kit.js.org

pault2• 8 years ago

I just converted one of our medium sized redux apps to immer and it has been a resounding success. I highly recommend it and will be using it everywhere in the future.

trh88• 8 years ago

An interesting article, but I would be concerned about readability for newcomers unfamiliar with Proxies.

To be honest, for the particular use cases mentioned here - why not use the object utilities in Lodash (which is well used, familiar to many, well documented, and battle hardened)?

we didn’t get around to implementing slices like array[1:3]

What's wrong with arr.slice(1,3)?

kristiandupont• 8 years ago

This rubs me the wrong way somehow.

All of this functionality could be accomplished with simple functions. They may not be as cool, but they are obvious in the calling code and they are easy to search for. Magic stuff like this conflicts with community conventions. New people are going to be perplexed as to what's going on (or worse, they learn from your code and conversely get perplexed when x[-1] doesn't work on a normal array). Also, you risk confusing various tools in subtle ways.

vinceguidry• 8 years ago

Of course it does. The point was to demonstrate the technique and give a trivial enough example to grasp what's going on. You wouldn't use it for this for the reasons you give.

The availability and accessibility of metaprogramming in Ruby is probably the closest one can get to an objective argument that it's a better language than other dynamic languages.

The superpowers metaprogramming gives you are abstraction power tools. If a particular abstraction doesn't really work for a given application, you can use metaprogramming to interface around the abstraction. You usually don't need it, but when you do, the alternative is a painful refactoring mess.

They allow you to quickly sketch out prototype code to get a trivial implementation working, and when you're done you can stuff all the code into a method on a module and call it a day. Tomorrow, when you need to instrument it somehow, pull out variables to be passed in, given default values, extend it to work with new formats, you don't have to worry about the language fighting you, and if it does, you can whip out metaprogramming to obliterate the offending semantics, all the way to down to BasicObject and eval if need be.

Metaprogramming allows you to mold abstractions like they were clay. In Javascript you just have to suffer if the language fights you. If you see code you can't understand, there's not much that can be done other than to beat your head against it until it works.

You don't have to understand how Ruby code works in order to work easily and effectively with it. All you simply have to know is that it works, then to extend you you can simply build an abstraction around it, even if it comes down to concatenating Ruby strings and then running eval on them. You can simply solve the problem quickly and dirtily, and then when time isn't a pressure, you can return to the code and clean up your mess.

Things you simply cannot do in other dynamic programming languages, to say nothing of statically-typed ones. The sheer speed at which you can work can be scary.

This might seem like fanboy worship but I seriously think that the only language that exists today that we'll still be using in a thousand years is a form of Ruby.

desc3• 8 years ago

Lisp has these advantages too, to an infinite degree. It's a wonderful teaching language for this reason: you can literally express any concept any way, introspect upon it, and execute it however.

The downside is that you end up building a custom language in the process... It can make one developer incredibly productive, to an almost superhuman degree, and maybe you can scale to a small team, but inducting others into the priesthood can take a very long time. Code needs a limited number of conventions, patterns and cliches so newcomers can rapidly train their mental dictionaries with the common stuff, so they can see through it to what it actually does.

You don't have to understand how Ruby code works in order to work easily and effectively with it. All you simply have to know is that it works, then to extend you you can simply build an abstraction around it, even if it comes down to concatenating Ruby strings and then running eval on them. You can simply solve the problem quickly and dirtily, and then when time isn't a pressure, you can return to the code and clean up your mess.

Building an abstraction around something requires that you understand it, or at least how it interacts with the wider world, if that abstraction is not to become the next serious problem itself. (Most docs, even the 'thorough' ones, cover inputs and outputs only: environmental and causal dependencies are rarely properly documented and can really hurt.)

Otherwise it's called 'wrapping it in a bin-bag' and should be labelled with 'don't use this anywhere else unless you're prepared to open it and breathe deeply.'

It's generally been my experience that if you don't know how it works then it doesn't work, and rarely does anyone sufficiently time-constrained to do it 'dirtily' the first time ever have the time to come back and do it properly later: if it has to be quick and dirty, it should at least be transparent enough that someone else can deal with it.

[edit] Also, in a thousand years, Lisp will still exist, because absolutely everything else including Ruby is a mere subset. No one will use it though.

tobr• 8 years ago

I could see it being extremely useful for inspecting and debugging, but I shudder to think of working on a large codebase with liberal use of proxies for production behavior. You wouldn’t be able to take anything at face value, not even the most innocuous looking expression. Getters and setters are tricky enough as it is.

desc3• 8 years ago

I wholeheartedly agree with this assessment.

Metaprogramming is incredibly powerful, and has its place, but it generally comes down to 'defining your own language'. It cannot merely be Javascript any more: one must learn the idioms of your own personal language which Just Happens to run as Javascript.

As a junior dev I used to make maximal use of every language and platform capability I could find. These days, I'd rather just stick to the idioms and conventions of the parent language, because I want neither to maintain a compiler nor teach our junior devs how to use My Custom Language. It's enough to know that those capabilities are there without playing with them constantly.

Boring is simple and maintainable. Best to confine the interesting to the 'what' (which it'll infest anyway) rather than the 'how' (which can at least be kept under control).

dcherman• 8 years ago

I agree. While you can accomplish some really interesting things with Proxy, I think that this article presents some poor examples that are actively harmful. I don't expect `delete` to be O(N) (actually worse if you consider the `ownKeys` implementation. I don't expect setting a property (sort) to invoke an expensive sorting operation. The list keeps going.

While I appreciate what the author is trying to accomplish, I think this is an example of what not to do as far as code is concerned.

Most of my practical usage of Proxies to date have been limited to some debugging tools that I wrote for AngularJS to help detect property changes that occur outside of a digest cycle. Don't think I've had any use cases that I've shipped to production code yet, though I believe Vue is considering using proxies for their reactivity model in the future to avoid the need for `Vue.get` and `Vue.set` for previous unknown properties or deletions.

thisacctforreal• 8 years ago

I particularly like the ``JSON.stringify({ name: "Albert Einstein" }) in dbProxy``.

kozhevnikov2• 8 years ago

One of the unexpected behaviours was that if you proxy an object you cannot call it as a function even if you define `apply` handler. This made proxying async functions impossible because they always return Promise<T> even if T is another function, unless you wrap promise in a dummy function before proxying.

https://github.com/kozhevnikov/proxymise/blob/master/index.j...

diegorbaquero• 8 years ago

That is really interesting, I'm building something with Proxies for any Type and async function proxified worked for me. Mind if I hit you up for a chat?

kozhevnikov2• 8 years ago

Sure. I mean if you have an async function that returns another function (so it actually returns a promise of a function because it's async) proxy of the original function will call apply handler when invoked, but proxy of the return value will not because it's actually not a function but an object (a promise of a function) and as it turned out proxied objects do not call apply handler when invoked (even if it's defined) but throw an exception.

    const handler = { apply: () => { console.log('ok') } };
    const foo = new Proxy(() => {}, handler);
    const bar = new Proxy({}, handler);

    > foo()
    < ok
    > bar()
    < VM313:1 Uncaught TypeError: bar is not a function
        at <anonymous>:1:1

alangpierce3• 8 years ago

One fun use case is that you can use proxies to detect accesses to nonexistent properties of JS objects, and you can then throw or log a warning rather than having them just return undefined. Unclear if you'd want to do that everywhere (due to perf reasons), but might might be a good thing in development/tests.

You can also use proxies to aid in code migrations. For example, let's say you want to migrate your frontend code from `user.id` to `user.handle` and eventually stop returning `id` from the backend. If you wrap server responses in a proxy, then you can warn in production if any code ever accesses `.id`. That's a lot more comforting than trying to search the code, and even in a 100% TypeScript codebase you still might have some dynamic accesses that the proxy would catch.

(I haven't actually done either of the two above approaches in a real-world scenario, but they've always seemed appealing, and I'm curious of others have real-world experience with them.)

alangpierce3• 8 years ago

Unfortunately, to get the last element we still have to do the clunky javaScriptArray[ javaScriptArray.length - 1 ] technique. This ... has always seemed like a major oversight in the ECMAScript standard.

Sort of an aside, but there's a stage 1 (relatively early) proposal to add an `array.lastItem` property that should finally improve things:

https://github.com/keithamus/proposal-array-last

aidos• 8 years ago

I miss python’s list operators so much when I’m in JS (along with lots of other stuff). Is there a reason why we couldn’t use python’s x[-1] syntax in JS?

alangpierce3• 8 years ago

There's probably existing code out there that relies on `arr[-1]` returning `undefined`, e.g. looping backward through an array until it gets a falsy value. You can also assign to `arr[-1]` and it'll work (it assigns to a new -1 key, not to the end of the array), and maybe some people do that in existing code. They had to pick `lastItem` as the name instead of just `last` since using `last` is also known to break the web.

It's also not obvious that negative array accesses should behave that way. It's a tradeoff where it's more convenient in some cases but feels a bit less elegant and can lead to bugs (particularly dynamic array accesses that are accidentally negative). But FWIW, `slice` already implements this behavior, e.g. `arr.slice(-1)[0]` is a way to get the last element of an array, so there's certainly precedent in JS for it.

MarsAscendant• 8 years ago

In the list of useful functions I'd accumulated over a few years of JS, there are `[].last` and `[].lastIndex()`.

The former is a property getter/setter implanted into the Array object¹. The latter is a function that returns `[].length - 1 || 0`.

¹ I know planting properties and functions directly onto the basic objects is generally frowned upon, but I see no harm in doing that for personal projects. Using it in the big-web production might be verboten, but it doesn't I can't make my coding life a bit easier.

Meanwhile, I have a problem with the "web compatibility naming safeguard" argument over the names of the proposed properties/functions. Surely, the websites using `[].last` override the namespace to begin with. If, say, `[].last` were to be accepted, how could it break the sites using the override version?

Outside of that, the fact that new proposals have to cow before a widespread conventional use of the names renders me confused. I feel like the JS engine should take priority over mere convention. Sure, some websites might be hurt in the process, but at least the generations of current and future coders would have few problems figuring out what the new functions do.

Exhibit 1: `globalThis`. Nuff said?

Exhibit 2: `[].smoosh`, which apparently was in the books [https://github.com/staltz/prevent-smoosh]. No longer is: it's now `[].flat`.

Exhibit 3: `Math.clamp()`, in questions [https://github.com/rwaldron/proposal-math-extensions#questio...] for the `Math` extension proposal. (Yet undecided-upon.)

`[].last` just makes sense.

daotoad2• 8 years ago

Yet another way JavaScript has become more like Perl5. It now features `tie`. https://perldoc.perl.org/functions/tie.html

redka• 8 years ago

I use these sometimes in personal projects:

https://gist.github.com/thisredone/783407f9aacc496c4c13e4076...

z3t4• 8 years ago

All the examples could be done in ES5 using Object.defineProperty. Proxies do however have more traps available.

Meta Programming in JavaScript with Proxies

Related Stories