proxy-fun

🐐 For learning how to use JavaScript Proxy, or just to see what is possible through metaprogramming in modern JavaScript. Tries to collect resources such as presentations, articles, modules and examples using Proxy, Reflect and other intercession type metaprogramming.

The Proxy object was included in the ES2015 iteration of the standard and is available in all evergreen browsers and Node.js v6. Unfortunately as it is a big language semantic change, it cannot be polyfilled through transpilers such as Babel.

Know of any brilliant resources? Let us know and we'll create a vast collection of awesomeness.

JavaScript ES2015 Proxy

Proxies are a common pattern in both programming and networking. It often entails something interfacing with something else. Usually a proxy takes the role of the original contstruct and intercepts calls made to that construct and in some cases altering it's original behaviour. This allows you to enrich functions with more actions or operations in a transitive manner, or even intercept and cancel an action.

A proxy can be looked at as a decorator function, but with you can intercept default language semantics also, in a meta-level of programming instead of at the base-level.

TL;DR? See an overview of examples using JavaScript Proxy in the summary.

Proxy Resources

Presentations

• Slides: Metaprogramming SUPERPOWERS by Nickolay Ribal
• Video: Breaking the Fourth Wall With JavaScript by Mikael Brevik
• Slides: Diving into ES2015 proxy performance in V8 by Maya Lekova
• Video: JavaScript Metaprogramming - ES6 Proxy Use and Abuse by Eirik Vullum

Videos

• Use ES6 Proxies by Kent C. Dodds

Articles

• Recreating Python's Slice Syntax in JavaScript Using ES6 Proxies by Evan Sangaline
• Metaprogramming in ES6: Part 3 - Proxies by Keith Cirkel
• Exploring JS chapter 28. Metaprogramming with proxies by Dr. Axel Rauschmayer
• ES6 Proxies in Depth by Nicolás Bevacqua
• Introducing ES2015 Proxies by Addy Osmani
• ES6 In Depth: Proxies by Jason Orendorff
• Object Path resolver by Hemanth.HM
• Negative Array Index in Javascript by Hemanth.HM
• Meta-programming JavaScript Using Proxies by Daniel Zautner (Uses an old edition of the Proxy API and is outdated, but the concepts are the same.)
• Using ES2015 Proxy for fun and profit by Alon Niv
• How to use JavaScript Proxies for Fun and Profit by Alberto Gimeno
• Understanding JavaScript Proxies by Examining on-change Library by Arfat Salman

Modules

• slice: Slice implements Python's extended slice syntax and negative indexing in JavaScript using proxies.
• zer: Zer helps you serialize any JavaScript chains to String representations of any languages by leveraging ES2015 Proxy objects
• negative-array: Negative array index support array[-1] using ES2015 Proxy
• tpyo: A small script that enables you to make typos in JavaScript property names. Powered by ES6 proxies + Levenshtein string distance.
• stevia: Experimental module providing natural sweetening for javascript objects
• known: Allow only access to known object properties using ES2015 Proxy
• iSeries: A set of modules that use Proxy to extend and enhance your existing JavaScript classes.
• proxy-observe: A Proxy based implementation of Object.observe
• Experimental Safe JavaScript Navigation : The purpose of this function is to provide a way to avoid deep nested conditionals when traversing a hierarchy of objects
• allora: Promisify everything in less tha ~50 lines It can be used to use promises on any javascript object.
• stroxy: A simple streaming wrapper for native event functions (e.g. addEventListener) using ES2015 proxies.
• Declaraoids: Declarative programming on steroids.
• python-range: A JavaScript implementation of the Python's range() function.
• rebridge: Transparent Javascript-Redis bridge.
• box-js: A tool for studying JavaScript malware.
• v: Secure, Synchronized, Realtime, Cloud, Native JavaScript Variables & Events.
• Promiser: Promise combination resolver by get accessor pattern.
• React Easy State: A transparent state management library for React.
• The Observer Utility: A general purpose transparent reactivity library (React Easy State is just a thin wrapper of it). It uses ES6 Proxies to achieve a 100% language coverage for reactivity.
• The Compiler Utility: A 'sandboxed' code evaluation library. It uses ES6 Proxies (has traps) in conjuction with the with keyword to 'sandbox' code.
• Did I do that?: A debug tool based on JavaScript Proxy to track surprising/unwanted mutation of objects.
• mewt: Array and object immutability implemented in under one kilobyte using Proxies.
• objecthistory: Object undo, redo & change history using Proxies.
• hoopy: Circular array type
• emmis: Chaining API where you reduce over payload and operators, like redux
• rus_roulette: Bringing runtime errors back to fashion
• Echo: Write a line of code that starts with Echo, and Echo will print it back to the console.
• Comlink: Uses proxies to hide the fact that you're using Web Workers.

Meta-programming in general

Resources not using JavaScript Proxy, but shows different usages of creative and awesome meta-programming to be used as inspiration.

Articles

• Metaprogramming in ES6: Symbols and why they're awesome by Keith Cirkel
• Metaprogramming in ES6: Part 2 - Reflect by Keith Cirkel
• Javascript Proxies, Russian Roulette and some Practical examples

Modules

• jsPipe: Implementing pipes in Javascript using pseudo operator overloading.
• JSDecorators: Python like decorators in Javascript with pseudo operator overloading.

Examples in this repo

Run all examples in this repo by using [email protected]:

$ node ./examples/<example-file>.js

Examples using tracing and tests can be run using npm:

$ npm test

Remember to install all example dependencies by doing npm i