Hacker News Reader

Comment by cloverich | Hacker News Reader

By fine grained update control -- do you mean similar to mobx + react. I think "automatic change tracking" is the phrase I've seen thrown around. If so this was always the most appealing method for performant UI's for me. You have some conceptual overhead of dealing with observables, but in return you get to ignore the majority of performance -- components only update when the data they need to use changes, and you never have to manually specify it. Really nice for web apps that have a lot of mix and match screens (say, complex internal tooling that may have numerous components re-used ina variety of places).

View on HN

It's a bit like MobX but instead of re-running full components or subtrees it contains the updates granularly. Picture if your renderer was just MobX Autoruns wrapping specific DOM updates as depended upon. In so because the reduced of need for diffing and the compiler that transforms the JSX to this you can author components in a normal way yet get incredible performance.

Reading this I'm reminded of knockoutjs, which the author of SolidJS cites as an influence. I remember at one point, years ago, trying to figure out why it was so much faster than AngularJS. Two things seemed to be going on: 1) It was only updating the parts of the DOM it needed to 2) To do this it seemed to 'automagically' be inferring dependencies.

I wondered how they did this second thing and guessed that it was parsing the JS code I was writing somehow. Either that or flooding the observables with values and making note of how changes trickle down. It turned out that it was doing neither of those things but frankly I didn't understand how it worked even when it was explained to me. Might be a good time to revisit and satiate my curiosity and take another look at it.

This is the article series for you (I wrote it so I'm biased): https://dev.to/ryansolid/a-hands-on-introduction-to-fine-gra...

It just tracks function calls. The general idea is that if a function is called in the render cycle of a component, that registers as a subscription for that piece of data that function returns. There is some magic with proxy and getter to hide the functions but basically that's it.

Reply on news.ycombinator.com