WebReflection / hyperHTML

A Fast & Light Virtual DOM Alternative
ISC License
3.07k stars 112 forks source link

Reversed incremental updates #12

Closed WebReflection closed 7 years ago

WebReflection commented 7 years ago

Right now the logic to boost up incremental updates takes care only of pushed nodes.

[1, 2, 3, 4, 5, 6]
// render [1, 2, 3, 4, 9, 10, 11]
//   => reduce to [1, 2, 3, 4]
//   => append [9, 10, 11]
// render result
[1, 2, 3, 4, 9, 10, 11]

However, taking Twitter as example, the same logic should be applied for prepended nodes.

[1, 2, 3, 4, 5, 6]
// render [0, 1, 3, 4, 5, 6]
//   => reduce to [3, 4, 5, 6]
//   => prepend [0, 1]
// render result
[0, 1, 3, 4, 5, 6]

The function in charge of finding the difference should not give up if the first item is different and it should check if looping backward there is a chance to find a reversed update prepending.

Example:

if (i === 0 && a[0] !== b[0]) {
  return tryToUpdatePrependingOrSubstituteAll(a, b);
} else {
  // ...
}

I'm pretty sure a good algo will make hyperHTML nearly as heavy as 2KB but I feel like this is an important feature to cover all kind of lists updates.

Worth trying to sneak in this smarter algo.

WebReflection commented 7 years ago

actually, there are better ways to preserve the current behavior, keeping it simple, and delegate to the platform the reverse-order.

http://stackoverflow.com/questions/25695000/how-to-display-a-reverse-ordered-list-in-html

ol { 
    display: flex;
    flex-direction: column-reverse;
}

li {
    flex: 0 0 auto;
}

I'll close this for now, there are more important things to do here and on viperHTML 😉