eddyw
eddyw
Sep 4, 2018 · 2 min read

Well, I’m not really sure about that because since, let’s say, you wrap the root object within a Proxy which is as simple as let observableRoot = new Proxy(rootObject, handlers) so instead of doing rootObject.someProperty you’d do observableRoot.someProperty and the handlers will decide what to do when a property is requested or is set. For example, some handlers on a Proxy:

get(rootObject, prop) {
if (typeof rootObject[prop] === 'object' && ...) {
return wrapProxy(rootObject[prop])
}
return rootObject[prop]
},
set(rootObject, prop, value) {
rootObject[prop] = value
// Here you could notify of the change to subscribers
subscribers.notify()
}

So, if I received from backend json = { data: { nested: { from: { net: 123 }}} and I wrap json var in a Proxy, I don’t need to really do it recursively, just wait for the user to access the data to decide if I should return an immutable primitive (strings, numbers, ..) or an object, in which case I’d wrap in a Proxy.

jsonProxy.data // < 'get' handler knows 'data' is an object, so returns a proxy wrapping `data` instead
jsonProxy.data.nested // < 'get' handler on 'data' proxy knows is an object, so returns a Proxy
... so on

So basically Proxies act like a middleman before getting or setting a property which doesn’t have a lot of impact on performance besides of it being one more function call before actually looking for the property. However, V8 recently has introduced some performance enhancements for Proxy , so it’d probably be faster.. at least on NodeJS and Chrome (until other browsers catch up with their own solutions). Where performance suffers the most may be notifying the subscribers, since this is a sync operation, so if you have 100 listeners and each listener blocks the loop (let’s say a wild while ), then every set operation would be slow. This could kind of easily be solved in Redux, you could write your own subscribe implementation and call listeners async with the current state, since every state is immutable this is not a problem.. unless you have racing promises such as the case when a new state is computed before the previous listeners were resolved but that’s a different topic.

On the code above, you could also convert nested props to proxies on the fly whenever a property that is accessed is not a Proxy.

Proxies are just pretty cool.

To add something about React, setState internally uses Object.assign kind of like state = Object.assign({}, state, nextState) and performance wise, Object.assign does just poorly with many properties, but since the state of a component shouldn’t actually have thousands of properties, then it’s just fine.

Just wait for WeakRefs proposal to be implemented on browsers (I pray this year haha), so it’d solve the problem of having to unsubscribe listeners and we’d have better implementations of observables.

    eddyw

    Written by

    eddyw

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade