Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How React, Vue, and Angular Work – Core Principles in One File

gist.github.com

Post reply on HN
Print view View original

11–20 of 23 posts

Re: How React, Vue, and Angular Work – Core Principles in One File

#11

Post by Tade0 »

urduntupu wrote: post #2

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?

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.

Re: How React, Vue, and Angular Work – Core Principles in One File

#12

Post by red_admiral »

punduk wrote: post #8
tobr wrote: post #6

Earlier quoted context omitted.

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

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

Hey, elinks still works just fine inside tmux over an ssh connection. Less hassle than getting the VPN running correctly if I just want to read a company intranet wiki page.

Re: How React, Vue, and Angular Work – Core Principles in One File

#14

Post by Vinnl »

punduk wrote: post #8
tobr wrote: post #6

Earlier quoted context omitted.

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

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

I'm fairly sure there are more people with various accessibility needs, so we can start worrying about those once everything is fully accessible.

Re: How React, Vue, and Angular Work – Core Principles in One File

#16

Post by icu »

Thanks for this, but as a complete beginner I didn't really get the point of the raw code with no comments explaining it. I was left asking myself what am I missing because the title seemed beginner friendly. Maybe if someone is really experienced they can figure out what all the "core principles" are in the "one file" but I didn't.

So if a complete beginner is reading this, I suggest copying and pasting the code into your favourite AI chat (I used Claude 3.5 Sonnet) and then prompt it to learn from the raw code.

For example, I asked Claude "what is this code illustrating?" for the React code and got a good response, and then I picked apart the list of key concepts Claude identified with further prompts.

Only after doing that was I able to get any use and understanding from the post.

Re: How React, Vue, and Angular Work – Core Principles in One File

#17

Post by yowzadave »

tobr wrote: post #6
urduntupu wrote: post #2

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?

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

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!

Re: How React, Vue, and Angular Work – Core Principles in One File

#18

Post by thunderbong »

icu wrote: post #16

Thanks for this, but as a complete beginner I didn't really get the point of the raw code with no comments explaining it. I was left asking myself what am I missing because the title seemed beginner friendly. Maybe if someone is really experienced they can figure out what all the "core principles" are in the "one file" but I didn't. So if a complete beginner is reading this, I suggest copying and pasting the code int…

You should create your own gist and add the explanations and then post that gist here.

I'm sure it'll be very useful to lots of people.

Re: How React, Vue, and Angular Work – Core Principles in One File

#19

Post by wg0 »

JimDabell wrote: post #3
urduntupu wrote: post #2

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?

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.

Svelte 5 too.

Re: How React, Vue, and Angular Work – Core Principles in One File

#20

Post by throwitaway1123 »

JimDabell wrote: post #3
urduntupu wrote: post #2

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?

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.

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

Post reply on HN