Lit-html: Create React fiber demo

[richardanaya]

I'd love to see a lit-html implementation of the react fiber stack demo.

https://claudiopro.github.io/react-fiber-vs-stack-demo/stack.html

this might give us further clues of how to optimize lit-html

[justinfagnani]

We can look at this. My understanding of fiber and that demo is that it demonstrates scheduling at the component level. lit-html doesn't have components or scheduling, so my hunch is that this is going to be more of a questions for some component module above lit-html, maybe showing how you can achieve fiber-like scheduling with Web Components. A worthy investigation either way.

[daKmoR]

Sooo I finally had a look at this...

I did a fork of https://github.com/filipbech/lit-element-fiber-demo and added 3 variations...
but nothing really helped... even a flat dom structure was not enough...

see it here
https://dakmor.github.io/lit-element-fiber-demo/index.html
source:
https://github.com/daKmoR/lit-element-fiber-demo

apparently updating 729 nodes at the same time cannot be done efficiently within one frame (so it freezes)

even tried not using lit-html for leave nodes but plain this.innerText... but didn't improve much (which actually would suggest that lit-html is pretty fast) ...

however non the less it seems that something like this would need some sort of delegation of rendering work (or prioritized or non blocking work packages or ...)
I guess it would somehow need to be part of a puh RenderingManager or so?

any suggestions? ideas? anyone?

[kenchris]

Did you see my analysis here? https://github.com/filipbech/lit-element-fiber-demo/issues/2

[daKmoR]

wow nice analysis... will take a closer look tomorrow... thx for the hint :) [and holy moly how could I have missed that :p)

but it seems the "secondly update" is the one that costs a lot...

[thysultan]

apparently updating 729 nodes at the same time cannot be done efficiently within one frame (so it freezes)

It is possible to update 729 nodes in one frame, but the underlining reason it can't in the fiber demo is because of the intentional artificial slow down that blocks the main thread with enough work to last ~frame, essentially a smoke test for whether an implementation that uses scheduling.

if (slowDown) {
  const e = performance.now() + 0.8; 
  while (performance.now() < e) {
    // Artificially long execution time.
  }
}

The stencil demo is not equivalent because it left out this artificial slow down.

[kwaclaw]

I used plain lit-html with nx-js/observer-util (https://github.com/nx-js/observer-util) to implement an MVVM-style design for that demo. It seems to run quite smoothly: https://github.com/kwaclaw/PlayGround/tree/master/lit-html

[justinfagnani]

We have a Sierpinski Triangle demo with async rendering here: https://github.com/PolymerLabs/async-demos/tree/master/packages/sierpinski-triangle