Show HN: React Spreadsheet 2 • Hacker News Board

Re: Show HN: React Spreadsheet 2

#41

Post by mklepaczewski » Fri, Nov 24, 2023, 10:03 PM UTC

rowsncolumns wrote: post #24

Waterluvian wrote: post #21

Performance for something like this is critical. How do you test or plan on testing performance to prevent regressions? I’ve yet to crack this nut in a way that makes me happy.

Yes it is. The Spreadsheet is powered by ReactJS and Konva. React and Konva provides a Profiler and Devtools to measure performance and to prevent any un-necessary re-renders. We also measure the Canvas FPS to make sure rendering is at max 60fps. The bottleneck we have identified is with scrolling large amounts of text, especially in large 42 inch 4K monitors, where FPS limits to 55-60fps. We do have some workaround…

You mentioned physical size of monitors. Does it affect performance in your tests? I would be very, very surprised if performance on 27" 4k monitor was any different than on 42" 4k monitor. Maybe I'm not aware of some quirk?

Re: Show HN: React Spreadsheet 2

#42

Post by dotandgtfo » Fri, Nov 24, 2023, 10:03 PM UTC

The demo is neat. How did you do the backend? As far as I see your offering is only related to the UI components. What databases and backends are you seeing users have success with?

Re: Show HN: React Spreadsheet 2

#43

Post by zem » Fri, Nov 24, 2023, 10:04 PM UTC

looks great, nice to see real time collaboration built in!

Re: Show HN: React Spreadsheet 2

#44

Post by arendtio » Fri, Nov 24, 2023, 10:08 PM UTC

torunar wrote: post #3

Is it able to handle tables with 1,000,000+ rows?

Actually, this is an important comment. Building a spreadsheet with web technology is not that difficult. However, building one with more than just the most basic features, which performs well, once the data grows, is a surprisingly hard task.

To give an example of what makes it so difficult: Some browsers (e.g. Chrome) seem to have special optimizations for rendering tables. So performance-wise it makes a difference if you use table-tr-td-tags or div-tags within your DOM.

Re: Show HN: React Spreadsheet 2

#45

Post by rowsncolumns » Fri, Nov 24, 2023, 10:09 PM UTC

dotandgtfo wrote: post #42

The demo is neat. How did you do the backend? As far as I see your offering is only related to the UI components. What databases and backends are you seeing users have success with?

The demo does not use a back-end service.

We are agnostic to back-end frameworks. Some users have used Prisma + Graphql, NoSQL databases etc.

The Sheet data structure on the UI can be flexible too. It can come from streaming data source, lazily loaded on-demand or all stored in browser memory

Re: Show HN: React Spreadsheet 2

#46

Post by rowsncolumns » Fri, Nov 24, 2023, 10:10 PM UTC

dotandgtfo wrote: post #36

mcgooiggy wrote: post #34

Earlier quoted context omitted.

i only got this with my adblocker turned on fyi, ublock origin

Seconding this Edit: Happened again. Might not be related.

Please try again. We don't persist data to a database in this demo, hence some of these errors. Pushed a temporary fix

Re: Show HN: React Spreadsheet 2

#47

Post by NetOpWibby » Fri, Nov 24, 2023, 10:10 PM UTC

arendtio wrote: post #39

A few weeks ago I was looking for a spreadsheet component that could be used with Svelte. To my surprise, I found something quite complete: Github: https://github.com/ticruz38/svelte-sheets Demo: https://ticruz38.github.io/svelte-sheets It doesn't have the collaborative functionality as React Spreadsheet 2, but other than that it looks comparable.

This looks great, thanks for sharing!

Re: Show HN: React Spreadsheet 2

#48

Post by rowsncolumns » Fri, Nov 24, 2023, 10:16 PM UTC

mklepaczewski wrote: post #41

rowsncolumns wrote: post #24

Earlier quoted context omitted.

Yes it is. The Spreadsheet is powered by ReactJS and Konva. React and Konva provides a Profiler and Devtools to measure performance and to prevent any un-necessary re-renders. We also measure the Canvas FPS to make sure rendering is at max 60fps. The bottleneck we have identified is with scrolling large amounts of text, especially in large 42 inch 4K monitors, where FPS limits to 55-60fps. We do have some workaround…

You mentioned physical size of monitors. Does it affect performance in your tests? I would be very, very surprised if performance on 27" 4k monitor was any different than on 42" 4k monitor. Maybe I'm not aware of some quirk?

I have tested on 32" 4K and 27" 4K and there was no performance issues.

Slight degradation on Dell 42" 4K, could be because of the ppi or the pixel ratio, which might be causing canvas/row/cell/ dimensions to be not rounded to whole numbers (this can affect perf).

Re: Show HN: React Spreadsheet 2

#49

Post by cuuupid » Fri, Nov 24, 2023, 10:23 PM UTC

Saw the collaboration mode and immediately feared it would devolve into people throwing around slurs as many unmoderated online experiences often do.

Pleasantly surprised to see conspiracies about Tupac and 'vue gang' take over the sheet instead :)

Re: Show HN: React Spreadsheet 2

#50

Post by [deleted] » Fri, Nov 24, 2023, 10:24 PM UTC

cuuupid wrote: post #49

Saw the collaboration mode and immediately feared it would devolve into people throwing around slurs as many unmoderated online experiences often do. Pleasantly surprised to see conspiracies about Tupac and 'vue gang' take over the sheet instead :)

[deleted]