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.
I'm sure it'll be very useful to lots of people.
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.
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.
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)
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.