[urduntupu]

The Vue/Angular demo files make use of `new Proxy()`. To the devs knowing these frameworks: is that best practice, or asked differently, are these representative examples?

[martypitt]

No, these aren't representative examples of how you would use Angular.

Angular code wouldn't use any of these techniques:

   - the use of Proxy()
   - calling compile(), 
   - using a querySelector to bind elements
   - Manually wiring up click handlers

But, I'm not sure that's what the author is trying to do -- I think they're trying to show what is going on under the hood, coded in pure JS.

In that context, it's probably relevant to show this (assuming it's indicative of what Angular actually does -- of that I'm less sure)

[Tade0]

I think the author is trying to briefly show how internals of these frameworks are designed.

My framework of choice is Angular and the example is somewhat accurate, even if it shows just a small slice of the system.

Indeed Angular components start off with a compilation step (which doesn't have to be done entirely at runtime) and there's a system in place to react to data changes and events in the template - can't confirm whether it's using Proxies though.

But there's also a whole change detection system which reacts to event listeners firing, HTTP requests, timeouts etc. and decides which components to update and how.

Nowadays there are also signals, which add another layer on top of all that.

Overall Angular's internals are a massively complicated beast and few people have a good grasp of them (I've met some - would not recommend doing what they were doing). Net effect is that its development as a framework is slow. Personally I see it as a feature.

[JimDabell]

Vue switched to proxies in v3. They haven’t had great browser support for a very long time, and if I remember correctly, polyfilling them was difficult.

[throwitaway1123]

Yeah Vue 2 used object getters and setters, and there were a few tricky caveats. For example, setting an array item using an index wouldn't trigger the setters (e.g. `myArray[0] = ''`). You had to remember these edge cases and use `Vue.set` [1]. Proxies made everything so much simpler, but they can't really be polyfilled at all, because they require deep JS engine integration (e.g. to register a callback that gets notified whenever a property is added to an object).

[1] https://v2.vuejs.org/v2/guide/reactivity.html

[whizzter]

Yeah, the Vue-like I made (other comment) was my second attempt at it and this time using just Proxy to simplify things. The first time I had tried to do it as Vue did previously with defineProperty but it was a damn mess to try to support arrays,etc and honestly the code was never stable (and using Vue V2 you can also run into a few edge-cases like missing properties missing reactivity).

[wg0]

Svelte 5 too.

[tobr]

Proxies work across all mainstream browsers. Only the rare IE holdout would be a problem.

[yowzadave]

I have an old MacBook Air that my daughter uses for school; it doesn’t support the evergreen version of MacOS/Safari, or Firefox or Chrome. I think Proxies have been around long enough that they are supported…but I’m waiting for the day that she can no longer use a browser on that machine, at which point I’ll either have to buy her a new one, or install some flavor of Linux. It’s a shame because the computer itself is totally serviceable!

[punduk]

There are probably still people here who use IE or browsers whose names no one remembers and only 3 people in the world use.

[esperent]

Not sure why you're getting downvotes because you are correct.

https://caniuse.com/proxy