https://github.com/whizzter/picotpl

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.

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

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.