I also wondered about the complexities of implementing Vue so I made a small clone sometime ago, put it on github so one can see the moving parts of a Vue-like that supports things like arrays, else blocks,etc. The functionality needed was about 500 LoC. (Some bad variable names here and there still since it was mostly a quick-hack for my own learning but put it up anyhow)
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.
Thanks for the idea. I've had to stop focusing on learning React because I found I didn't know enough JavaScript so I'm not confident enough to post any gist about anything presently. I did a JavaScript course 10 years ago after finishing CS50 online but due to a sudden change in family circumstances I had to take a long break from learning programming.
However, thanks to cline, aider, supermaven and v0, I decided that I could now learn enough JavaScript/React/React Native to pair program with AI code generation tools and replace the need for a technical co-founder going forwards.
I'm about halfway through the freecodecamp JavaScript Course and so far so good. The AI code generation tools for VS Codium are insane and I'm certain I'll be launching webapps and mobile apps in no time.
What a horrendously complicated mess. No wonder modern websites are so bloated with a fraction of the functionality and information density from before the 'let's design everything for mobile users only, fuck the desktop' era. And this is supposed to be 'simple' and 'minimalistic'.
I've seen several of these over the years and find it interesting that the only part people usually care to implement is binding some events. If all one needs to do is update some local data and re-render HTML accordingly I question the usage of these frameworks on most projects that do.
Anyway this is pretty far away from how these frameworks actually work. In my opinion "the core" is the lifecycle hooks, not what's being shown here.
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.
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).
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).
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!
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.
I also wondered about the complexities of implementing Vue so I made a small clone sometime ago, put it on github so one can see the moving parts of a Vue-like that supports things like arrays, else blocks,etc. The functionality needed was about 500 LoC. (Some bad variable names here and there still since it was mostly a quick-hack for my own learning but put it up anyhow)
https://github.com/whizzter/picotpl
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.
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.
Thanks for the idea. I've had to stop focusing on learning React because I found I didn't know enough JavaScript so I'm not confident enough to post any gist about anything presently. I did a JavaScript course 10 years ago after finishing CS50 online but due to a sudden change in family circumstances I had to take a long break from learning programming.
However, thanks to cline, aider, supermaven and v0, I decided that I could now learn enough JavaScript/React/React Native to pair program with AI code generation tools and replace the need for a technical co-founder going forwards.
I'm about halfway through the freecodecamp JavaScript Course and so far so good. The AI code generation tools for VS Codium are insane and I'm certain I'll be launching webapps and mobile apps in no time.
What a horrendously complicated mess. No wonder modern websites are so bloated with a fraction of the functionality and information density from before the 'let's design everything for mobile users only, fuck the desktop' era. And this is supposed to be 'simple' and 'minimalistic'.
There's also https://leontrolski.github.io/33-line-react.html (2020) that does an older version of this, just for react. Had its own HN thread back in the day.
I've seen several of these over the years and find it interesting that the only part people usually care to implement is binding some events. If all one needs to do is update some local data and re-render HTML accordingly I question the usage of these frameworks on most projects that do.
Anyway this is pretty far away from how these frameworks actually work. In my opinion "the core" is the lifecycle hooks, not what's being shown here.
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?
No, these aren't representative examples of how you would use Angular.
Angular code wouldn't use any of these techniques:
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)
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.
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
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).
Svelte 5 too.
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!
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.
I'm fairly sure there are more people with various accessibility needs, so we can start worrying about those once everything is fully accessible.
it's the same three people though, and they're happy to support it themselves!
Not sure why you're getting downvotes because you are correct.
https://caniuse.com/proxy