[an20]

Congratulations, well done. Out of curiosity, which database and language/framework did you use to build WeKeep especially in the backend? It seems as if you are using react virtualized as your grid component. That's interesting, as I developed such a grid component from scratch in my previous job, as there haven't been any satisfactory libraries at that time. Additionally, we had to support IE9, which was a real problem for any performance optimization. Especially rendering performance with a lot of data has always been a problem for us. Does react-virtualized solve this problem for you with the virtual rendering approach? And did you investigate the available spreadsheet libraries like "Handsontable" or "agGrid"?

[nadima]

I'm running Django in the backend with Postgres.

That's right, I'm using react-virtualized right now with a customized react-datasheet. I found it's a good first iteration, as even fully rendering 100 rows will result in pretty poor performance, so the windowing technique is definitely a must.

That said I'd really like to reach Google Sheets-like performance. Do you know how it's built?

Haven't looked at Handsontable or agGrid, will check them out.

[an20]

An excellent decision, I guess. I'm somehow thinking way too much about such details instead of starting any project. In my previous job, we have used PHP at the backend, but somehow, I like the syntax of python much more. And the community and number of projects around Django are just mind-boggling. So you are probably using Django-REST for the API?

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 :-)

[nadima]

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.