Live data from Hacker News

Show HN: ReactCircle – Renders SVG circle and percentage

github.com

31–40 of 56 posts

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

#31
post #25

Earlier quoted context omitted.

I actually work on low latency Java backends, I have no idea how this works ;)

> low latency Java (Does not compute)

Sure it doesnt ;)

The think that myth is coming from the fact that JVM is heavy (150MB?), so it takes time to start, and hot-spot needs some iterations on a source code before it can fully apply JIT, but other that that, Java is really good.

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

#32
post #9

Congratulations on making probably the slowest circular-progress bar I've even seen, that had to be a challenge, but you did it. https://gfycat.com/NimbleMintyBinturong That's on my laptop with i5, 4 cores. I can play smoothly on this L4D2, TF2, CivV... but not this reactive circular-progress bar.

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.

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

#34
post #14

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…

You hope they never make a single page? You can’t improve your skills as a developer? You started out brilliant?

This is a bad way to deliver criticism, especially on a ShowHN.

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

#35
post #27

Earlier quoted context omitted.

Incredibly poor attitude. This is free, open source software. You did not pay for this. If you found a bug and you don't want to wait for the developer to fix it, then fix it and make a PR. There is nothing wrong with making a post stating that you've found a bug. There is a problem with acting entitled like you are, and insulting the developer in the process.

>Incredibly poor attitude. This is free, open source software so we're no longer allowed to criticize poor things we don't pay for?

There's a difference between "hey man you should check this with a throttled CPU" and "I hope developer of this component never makes a single webpage."

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

#36
post #15
post #9

Congratulations on making probably the slowest circular-progress bar I've even seen, that had to be a challenge, but you did it. https://gfycat.com/NimbleMintyBinturong That's on my laptop with i5, 4 cores. I can play smoothly on this L4D2, TF2, CivV... but not this reactive circular-progress bar.

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

If you turn off animation it's snappy.

I'd recommend either killing that altogether as it definitely gives the perception of bad performance.

Or... at least take into account the delta of the progress change when doing animation. For instance, if going from 5 to 10%... a slower animation is fine. If going from 0 to 100%, the animation should be much quicker.

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

#37
post #9

Congratulations on making probably the slowest circular-progress bar I've even seen, that had to be a challenge, but you did it. https://gfycat.com/NimbleMintyBinturong That's on my laptop with i5, 4 cores. I can play smoothly on this L4D2, TF2, CivV... but not this reactive circular-progress bar.

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.

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

#38
post #9

Congratulations on making probably the slowest circular-progress bar I've even seen, that had to be a challenge, but you did it. https://gfycat.com/NimbleMintyBinturong That's on my laptop with i5, 4 cores. I can play smoothly on this L4D2, TF2, CivV... but not this reactive circular-progress bar.

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.

Yeah, more than likely the only problematic part is the transition animation. The main problem was another component breaking the performance in the examples page, not the component itself. Should be fixed now :)

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

#39
post #15
post #9

Congratulations on making probably the slowest circular-progress bar I've even seen, that had to be a challenge, but you did it. https://gfycat.com/NimbleMintyBinturong That's on my laptop with i5, 4 cores. I can play smoothly on this L4D2, TF2, CivV... but not this reactive circular-progress bar.

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

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

#40
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
Post reply on HN