Show HN: ReactCircle – Renders SVG circle and percentage • Hacker News Board

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#41

Post by reimertz » Mon, Apr 23, 2018, 2:52 PM UTC

akerro wrote: post #14

have_faith wrote: post #12

Earlier quoted context omitted.

Your comments reads in bad taste. Maybe be more constructive?

This is my feedback on extremely poor performance of this single reactive component. I hope developer of this component never makes a single webpage. If a single component is that slow and unresponsive, as you see on my video, the webpage (or even worse MOBILE APP) would probably require 16 core Ryzen to render smoothly and scroll up and down on it. I play on this laptop Civ V (minimal requirements [1]) on this lapto…

This is why we can’t have nice things.

To many times I’ve seen these kind of comments on GitHub, HN, ShowHN.

Our field is filled with people who lack a 101 in constructive feedback and context awareness and it breaks my heart. Who would like to ever contribute again if this was the response they got on their first contribution?

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#42

Post by btcindivist » Mon, Apr 23, 2018, 2:54 PM UTC

kuschku wrote: post #37

btcindivist wrote: post #32

Earlier quoted context omitted.

Given there's only a single svg element changing I'm not exactly sure you could have done it better. It might just be that the ease-out transitions for the stroke are not efficiently implemented in whatever browser you're using. If you've tried and check out and understand the code you'd see there's so little being done in JS that this stuff is surely not the bottleneck.

Use a canvas and render the component directly? You’re rendering a circular progress bar, that should be easily doable in microseconds if not nanoseconds. There’s no need to use the overly bloated DOM for everything. I suggest taking a look at Android’s views or even Flutter.

But there's only 3-4 DOM elements. I'm pretty sure doing this in canvas is not as trivial as this.

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#43

Post by jannes » Mon, Apr 23, 2018, 3:00 PM UTC

muizelaar wrote: post #39

zzarcon wrote: post #15

Earlier quoted context omitted.

Can you please try it again? the issue was not related with the component itself https://zzarcon.github.io/react-circle let me know if you still experience that issue

The performance is still bad. It's spending roughly 20ms doing JS work per frame. React profiles are not very easy to interpret but perhaps you're doing a lot more work per frame than you should be? Here's the profile: https://perfht.ml/2F7ohwx

This file is the entire source of the component: https://github.com/zzarcon/react-circle/blob/57bb4d19df08b73...

A lot of the work seems to be the React diffing? The only thing that changes between frames when dragging the slider is the style attribute.

Furthermore, the author seems to have included the development version of React. And the author used development settings for the webpack compilation. The compiled JS is full of eval() calls.

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#44

Post by jannes » Mon, Apr 23, 2018, 3:13 PM UTC

zzarcon wrote: post #10

jannes wrote: post #5

Very cool! However, I'm getting very low FPS when dragging the slider in Firefox on OSX (especially when dragging long distance in a short time). Is this due to the SVG rendering performance of Firefox or due to your code? Turning off animations doesn't seem to make a difference.

Thanks for the feedback! You are right, the demo currently hangs quite a lot on Firefox, Im pretty sure the issue is actually not related with the component itself, I created a issue on the repo to fix it https://github.com/zzarcon/react-circle/issues/10 :)

Thanks! That already works a lot better.

To further improve things, I would suggest two changes to your webpack config:

1. Use the production version of React. It seems that you are using the slightly slower development version. (In webpack this is done by defining process.env.NODE_ENV = "production" and eliminating dead code afterwards)

2. Stop using webpack in development mode for your deployment. There are 272 eval() calls in your bundle because of this: https://raw.githubusercontent.com/zzarcon/react-circle/c1480...

Both of these things are already taken care of by the production mode in webpack 4.

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#45

Post by eeZah7Ux » Mon, Apr 23, 2018, 3:14 PM UTC

Research shows that people are really bad at estimating and comparing angles instead of bars.

Don't use pie/circle diagrams.

Sorry I don't have a link to the pieces of research.

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#46

Post by DiThi » Mon, Apr 23, 2018, 3:17 PM UTC

eeZah7Ux wrote: post #45

Research shows that people are really bad at estimating and comparing angles instead of bars. Don't use pie/circle diagrams. Sorry I don't have a link to the pieces of research.

That's true when you have more than the ratio between two things. But IMHO just a ratio or percentage is perfectly fine.

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#47

Post by jannes » Mon, Apr 23, 2018, 3:42 PM UTC

djstein wrote: post #40

jannes wrote: post #5

Very cool! However, I'm getting very low FPS when dragging the slider in Firefox on OSX (especially when dragging long distance in a short time). Is this due to the SVG rendering performance of Firefox or due to your code? Turning off animations doesn't seem to make a difference.

runs really fast in nightly however

I think the author already patched it and that's why you're not seeing the same problem. Now it runs faster for me, too. (But HN doesn't allow me to edit my original comment anymore)

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#48

Post by kuschku » Mon, Apr 23, 2018, 3:44 PM UTC

btcindivist wrote: post #42

kuschku wrote: post #37

Earlier quoted context omitted.

Use a canvas and render the component directly? You’re rendering a circular progress bar, that should be easily doable in microseconds if not nanoseconds. There’s no need to use the overly bloated DOM for everything. I suggest taking a look at Android’s views or even Flutter.

But there's only 3-4 DOM elements. I'm pretty sure doing this in canvas is not as trivial as this.

Of course it’s not as trivial. But you can control the animation much better, and you can have much better performance.

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#49

Post by riquito » Mon, Apr 23, 2018, 3:54 PM UTC

I was working on the same exact thing in the latest days. In my opinion the transition stroke-dashoffset is too performance hungry to be really usable. I ended up throwing away my svg implementation to redo it in canvas.

If you're going stateful to handle timers remember to use requestAnimationFrame

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#50

Post by WorldMaker » Mon, Apr 23, 2018, 4:33 PM UTC

amelius wrote: post #2

That's generally the easy part of showing progress. The difficult part is usually to determine how much time is still needed for a computation.

Which reminds me that I need to update my demo, mentioned in this blog post, given the JS has somewhat bitrot since 2015: http://blog.worldmaker.net/2015/03/17/compradprog/

My theory, also described in the blog post, and which I felt like the demo demonstrated when its JS worked, is that the nice thing about radial progress bars is that with spin and "tail" movement you can use a radial progress bar for composite progress (progress of multiple individual tasks with defined progress composited together, including cases of "task discovery" where progress may only start later).

I felt that when done right it doesn't violate user expectations ("forward momentum"), and it's an interesting merger of the spinner and progress bar that could be used in some pretty complicated situations.

I should get that demo working again.