HN user
Spreadsheet 2 - Composable, declarative Spreadsheet component.
www.rowsncolumns.app
SVG or HTML adds a lot of DOM nodes when you are displaying lot of textual content.
Personally I found canvas easier to work with, scroll performance was better, less browser bugs, drawing was cheaper and scales for large content (using virtualisation or multiple canvas layers)
Its a private repository, only users with licenses can view this.
No. The component is named "Spreadsheet 2". It's based on React framework. Hence the title of this article "React Spreadsheet 2".
♥
The back-end can be opinionated, allowing developers to choose their preferred stack, whether it's Python, PHP, Node, or Go.
In my view, a UI component should not be constrained or reliant on a specific back-end language.
There are quite a few methods to measure performance
We start of with the FPS monitoring tool which measure the frame rate, memory consumption and GPU sange
We switch to devtools->Performance analysis to measure function call times, layout thrashes and shifts, RAF bottleneck, memory consumption and CPU time.
We also use React devtools to measure re-rendering.
Scrolling is wrapped in Request animation frame loop, hence its being controlled by the browsers frame rate.
For screen readers, we are planning to add table element with plain text content, with aria regions.
We offer support for keyboard shortcuts and navigation, and our platform is natively compatible with both light and dark modes.
We also provide the option for developers to customise themes, ensuring optimal accessibility for users with low/tunnel vision.
The demo data is sourced partially from US Covid database.
The link to single user mode is https://www.rowsncolumns.app/demo?collab=false
Thank you
Please add collab=false to the URL to disable collaboration mode
Oops... Thank you for letting me know :)
Created a single user demo for peaceful browsing
The collaboration mode is getting spammed right now. If you are looking for Single-user mode, its here.
We do not sync the state with a back-end server. Hence when we have collaboration enabled, there can states that go out of sync
You can try single user mode here - https://www.rowsncolumns.app/demo?collab=false
Awesome. I have fixed this issue for you.
Ah. Yes i figured out the issue. Could you share your current location? Are you in the US or Japan? We create a date pattern matching expression based on your current locale.
Thanks for the feedback. I will look into this.
Does the error go away if you just refresh the demo?
Nothing persists. All the diffs are sent over using Supabase and received by all other clients. The diffs are then applied to create the new state.
Did you try to enter a date? Any sample text, so that i can try to pinpoint this issue?
Thank you :)
I will do some testing on Pixel phones soon. This should be a client-side UI lag. No server is used for the demo. Thanks for the feedback
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).
Please try again. We don't persist data to a database in this demo, hence some of these errors. Pushed a temporary fix
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
Sorry about that. The demo does not persist data on the server, hence sheet deletions can throw errors.
Thanks. Possibly related to collaboration. I need to handle a scenario where user deletes another user's active sheet.
Got it. I will try to do some performance testing on midrange phones and mobile firefox. Thanks
Yes, this was also thrown in collaboration mode when user deleted an active sheet of another user. Will need to figure out how to handle this case :(
Thanks for the report :)
Found the issue. In collaboration mode, when user deletes a sheet another user was on, this error is thrown. Will work on a fix. Thanks for the report.
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 planned for large monitors, by splitting the canvas into 4 layers.
In terms of regression, we use Cypress for most e2e testing, but the test cases are small as of now.