Re:Show HN: WeKeep – A spreadsheets-first accounting software
by nadima on Sunday February 23, 2020 @08:28AM
(#22396733)
I think the limiting factor on my side is the complexity of the DOM – each cell contains a few more nodes, as opposed to most of the demos you will find which usually contains a simple node.
Also, I'm not virtualizing horizontally yet, that's another potential perf booster as some of my sheets have lots of columns.
Thanks for the suggestions, I'll hit you up to discuss more.
With react-virtualized, you are already on the right path as virtual rendering - rendering only the currently visible cells - is the key in regards to the performance of DOM-based approaches. But if you want to reach google sheets performance, there is probably no way around canvas-based rendering (e.g. https://github.com/fin-hypergrid/core or https://github.com/TonyGermaneri/canvas-datagrid). Office 365 seems to use a canvas-based approach as well. The problem with the canvas-based approach is that interaction like mouse clicks and key navigation is a lot more complicated. I think one of the fastest DOM-based grids out there is https://github.com/6pac/SlickGrid. But there shouldn't be too much difference in performance to react-virtualized as both are DOM-based. Often these components are called "grid" if you search for alternatives. Feel free to contact me if you have some specific questions :-)