RetroV: External learning resources
Page created: 2023-03-23Back to the RetroV main page.
React: "Reconciliation"
"React implements a heuristic O(n) algorithm based on two assumptions: 1. Two elements of different types will produce different trees. 2. The developer can hint at which child elements may be stable across different renders with a key prop."
A great explanation of the diffing process at a high level:
Evil Martians: "Optimizing React: Virtual DOM explained"
Excellent and very clear explanation of React’s DOM diffing with quite a bit more detail about the process and why doing things a certain way can have big impacts on performance:
Deathmood: "How to write your own Virtual DOM"
Nice explanation and example of a bare minimum VDOM diffing engine.
Note that with one simple modification (use the supplied h() function rather than
the JSX shown), you can run the final example with nothing but a browser (no build
step required):
...
var a = h('ul', {},
h('li', {}, 'item 1'),
h('li', {}, 'item 2')
);
var b = h('ul', {},
h('li', {}, 'item 1'),
h('li', {}, 'hello!')
);
...
But watch out, visiting medium.com has gotten increasingly gross:
React Github issue: "A faster diff algorithm"
This is an informative and friendly discussion in which a lot of the big names in this space arrived and talked for a while about rendering performance:
.dom
RetroV Inspiration. Full hyperscript and DOM diff in 512 bytes! This was a direct inspiration. In fact, I was originally going to fork this and change it to suit my preferences until I decided to go in a radically different direction for VNode creation.
Mithril
RetroV Inspiration. My old favorite, still getting updates. This is how I learned these practices and it’s the standard by which I judge them.
ijk
RetroV Inspiration. DOM without the 'h()' function - pure JS data structures. I think I’d seen this concept before, but maybe not. At any rate, this has heavily influenced RetroV. This library is for transforming data, not rendering. Super compact code!
Hyperscript
An implementation to look at. Hyperscript renderer only, no VDOM. Nice single-file JavaScript code!
µdomdif
An implementation to look at. Just DOM diffing, wonderfully concise and very readable code.