Meta-programming JavaScript Using Proxies

[krzbrg]

It was odd that the post was prefaced with a warning that "you will have to use Chrome/Chromium" before opening with an example copied and pasted from Mozilla's docs. This is not true. The example works in the Firefox 35.0.1 console out of the box. There are no feature flags or internal browser configurations that need to be changed. Also worth noting that the first example came from an outdated MDN Proxy API documentation page [1]. The current Proxy API page covers the ECMAScript 6 proposal [2].

If you're interested in seeing which browsers have implemented these ES6 features, Kangax has a nice table up on GitHub pages [3].

[1] https://developer.mozilla.org/en-US/docs/Archive/Web/Old_Pro...

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

[3] http://kangax.github.io/compat-table/es6/

[epidemian]

Not only that, but Proxy has been implemented in Firefox for a while†. I remember having played with it a long time ago.

†: Since Firefox 18 according to the MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Referen...

[donatj]

Having seen this kind of "magic" as PHP calls it, come full force and then largely leave in the PHP ecosystem after we became tired of it, I can't say I miss it.

It's fun to play with but for actual work a clear, strongly defined API beats this sort of syntactic sugar like this any day.

[kbody]

Quite true, I rather leave magic at Hogwarts. Although the package nature of node etc. could be fitting for such magic behind some public facing API.

Also, I have some concerns over their performance but we will see in time.

[sklogic]

Because neither PHP nor JS can do anything close to a proper metaprogramming. No API can compete with a properly designed eDSL.

[dracolytch]

I'm not really sure changing the behavior of fundamental operations really counts as metaprogramming, but in many ways I think it's very in-line with some conceptual constructs JS already has in place. Considering that you can access an object's properties by addressing an array, the ability to call a function by accessing a property isn't very alien. Considering the flexibility of JS, I'd be curious to see how crazy you could get.

At the same time, I'm also very scared to see what kind of crazy code this will lead to that I'd have to look at. I think lots of people will probably implement overly complex or obtuse ideas because they are interesting.

[rrubmo]

I was the only one playing with the cover effect for about 5 min?

[JackuB]

Saw it used on other sites too.

Here is original: http://tympanus.net/Development/AnimatedHeaderBackgrounds/

[bwheel]

+1

[xpop2027]

Same boat

[z3t4]

Have a look at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... http://kangax.github.io/compat-table/es5/#Object.definePrope...

I'm currently working on a data persistence module with database backend in Node.js using Object.defineProperty that define get and set.

[towelguy]

It's akin to python's magic methods (eg. __len__), only implemented in a separate object. Looks cleaner.

[davidchase03]

Didn't they change the spec for Proxies and as of Chrome v40 Proxy doesnt exist in the devtools? I tried it in my Chrome/Canary and it wasn't there however it did work in Firefox v35

[domenicd]

We haven't started implementing proxies in V8. There was a prototype implementation of an old proposal but that's kind of dead code now.

[kaonashi]

Seems something like ruby's method_missing.

[james2vegas]

many languages that do OO have that; Perl, Smalltalk, Objective-C, f.e.. But this seems more like monkey-patching.

[benihana]

This article was initially baffling to me. There's no link to the API or libraries, or functions or whatever the hell the author is talking about, so since I'm not following all this stuff closely, I don't know if this is a proposed change to JavaScript or an external library or what.

So then I go here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... and realize that it's an experimental proprosal for ES6, which means it's going to be a while before I can even think about using this. Then I realize the MDN article actually explained proxies and what they're designed for way better than this article (they're meant as a functional hook when manipulating properties on an object). It has useful, non-contrived examples that illustrate better than this article why you'd want this in the spec.

[domenicd]

It's not an experimental proposal for ES6, it's part of ES6, which is now finalized as of our most recent TC39 meeting last week. (There will only be editorial fixes going forward.)

Regardless, it doesn't matter what language version it's in. What matters is that it's already implemented in Firefox and the IE previews.

[couchand]

These are some neat uses of ES6 Proxies, but I can't handle a typo as the very first word of the article.

[Bahamut]

Agreed, interesting that a typo so early has such a strong psychological effect.

The article could use some better structuring, but it does contain some interesting ideas for using proxies.

[krazydad]

Agreed. Giant cover image with pointless mouse-over effect immediately followed by typo on first word. Ugh.