search

ryansolid / solid-sierpinski-triangle-demo

Solid implementation of Sierpinski Triangle React Fiber Demo
21 stars 1 forks source link

this demo is mostly pointless :/ #1

Closed leeoniya closed 5 years ago

leeoniya commented 5 years ago

@ryansolid

the only interesting aspect of this demo is the part you (and everyone else) comments out:

https://github.com/ryansolid/solid-sierpinski-triangle-demo/blob/master/src/main.jsx#L57-L63

ryansolid commented 5 years ago

Yeah the artificial slowdown doesn't make any sense in fine grained. It would only run once on initial render. Even if I put the delay in the update method it wouldn't cause anymore meaningful work.

I agree that most people make the benchmark look at the 60fps and miss the point. Others increase the frequency of updates to show how many more they can handle.

Chrome CPU throttling was an easy way I found to universally simulate slowdown. Under 6x slowdown on my computer at least I can see differences in different implementations.

Admittedly the approach I took to this isn't that interesting. I was just surprised how naive the React Fiber approach is. Request idle callback never gets called under sufficient load. Then I noticed Stencil did something more interesting actually staggering the rendering. So I figured I could build on that idea.

leeoniya commented 5 years ago

"There are three kinds of lies: lies, damned lies, and statistics benchmarks." 🤣

ryansolid commented 5 years ago

I hear you. I think I might have an idea of how to simulate the slowdown in fine grained. At first I was thinking this would involve creating a bunch of extra computations which would be major bloat. It'd be like wrapping each Triangle in yet another Component in React. It would be going too far in that sense loose the point in a different way.

But I think I can compose the seconds getter so that for each layer down the Triangles the slow down is applied to it. This way there is no extra computation, but each Dot when fetching it's updated value will go through wrapped layers of busy loop work. Which I believe will simulate the exponential slowdown the demo is intending to display. I'm going to give that a try tonight.

Thank you for encouraging me to look into this further. I've been very intent the last few months trying to bring Solid as close to React parity as possible even though I generally have to solve every problem completely differently. I was inspired how React took basically the fine grained pattern with Hooks against what would seem an incompatible render approach. So I'm trying my best to show how fine grained can do everything a VDOM can.

ryansolid commented 5 years ago

My idea won't pan out either. By wrapping the getter I'm actually doing way more work. Each of the final nodes takes the full depth cost instead of each layer taking the cost once for all it's children. It's similar(but not equal) to the difference between say n^n and (n - 1)!.

Even applying it once repeats the work for each dot which is more than React is doing. Fine grained essentially flattens the structure where all the work is being done at the leaves.

EDIT: Yeah looking closer only React and Stencil employ the slowdown. Aurelia and Radi do not. I think the only way to even the playing ground is have the slowdown come from the outside like CPU throttling simulation. But that would require making new implementations of React and Stencil to put it on even ground.

leeoniya commented 5 years ago

it really depends on what you're showing off, i guess.

this demo was specifically made to show off how Fiber solves some problems that are common in the react's rendering pipeline. then everyone took it, stripped out the problem area and turned it into a non-interesting fps contest (not that it's a bad thing, but surely and misleadingly out of context). while re-implementing React and Stencil without the slowdown would put everything on a level playing field, you're not really adding much info over what js-framework-benchmark or circles-benchmark already demonstrate, but without the baggage of what the original sierpinski demo was all about.

ryansolid commented 3 years ago

For what it's worth I added the Slowdown to Solid now. I had the mechanism to previously but wasn't really getting the point. It's not just about external aspects, but internal. Dealing with expensive computations. From that perspective it was just a matter of wrapping the expensive (low priority) changes with scheduler. Since Solid is granular it's easy thing to do manually. But removing the scheduling definitely makes Solid go to a snails pace like React without Fiber so I think this is about as close as I can get to the same scenario.