Hacker News Reader

Comment by simion314 | Hacker News Reader

is there a library that can render a lot of data as performant as native GUIs tabes/data-grids . In my experience just loading 1000 items at once it hangs in the browser native dom lay outing code, a good implementation won't create a GUI widget of each item but only for the visible ones and some buffer ones to have faster scrolling. Pagination and loading as you scroll is a hack, an example scenario would be like you would want to create a simple CSV editor and you want to load 1000+ rows , have sort-able, hide-able , rearangeble columns (with a decent toolkit you would just drop a DataGrid component and set the data provider

View on HN

Try https://perspective.finos.org/ (example https://bl.ocks.org/texodus/77fb8ef87155b3a7fe341932bfc33382 )

WebAssembly engine can handle 1mm+ rows, and can be run virtually in node.js, Python or C++. Does filtering, pivoting on multiple axes, sorting, linking, click events, and more.

Pagination and loading as you scroll is a hack..

I've written software using virtual lists in languages from VB6 to React. They're not a hack; they've been a staple of UI libraries for decades.

I am sorry but it is a hack, if I can fit that 1000 rows of CSV in a few KBs of memory and and Array of 1000 objects is fast to manipulate paginating the UI layer because the UI is slow is a necessary workaround not something you do because of UX.

Your text editor is not painting all the text in a large file , how would you feel if you had to display a large file in an html view you had to paginate it and do all the work that the textarea should have done by itself.

I have the same scrolling issues on large, complex Excel spreadsheets. Every environment is going to hit a wall at some point when the UI is forced to display a certain amount of data.

I understand that some application are not optimized, a good GUI widget would render only the visible part and a buffer , the fact that we don't have such good library or even beter native component in HTML is sad , especially that people are making desktop apps with electron. What is more sad is trying to excuse this with some fake ideas that pagination and bad implemented infinity scrolling is superior to optimized GUIs.

Just in case I am not clear. Say you have an Array with 10k image thumbnail urls and you want to show them in a Grid, this Array fits in memory so paginating using network request is stupid and makes things slow. So if all images urls are in memory you can create 10k IMG elemetns because the DOM is slow(especially if you have some DIvs and spans to wrape elements around, center some img name , maybe a button or menu). So if on my screen I can fit 15 items , I could create 30 img elements and as you scroll you would move the UI items that are no longer visible at the bottom and change the attributes like src, name etc. This is not simple and decent toolkits do this for you by default similar how a text editor can load a large file fast because is not painting all of the file text.

Oh I see, yeah that's pretty much the default way to render large lists in a SPA (the term of art is called windowing). React-window is really well designed[0]. It is a shame that there is no native HTML element for this though.

[0] https://github.com/bvaughn/react-window

It's a backpressure issue. It's called handling backpressure.

I think there is a misunderstanding here; I believe that OP is referring to "infinite scrolling" where the list items are fetched from the server n items at a time as you scroll and wishing for a toolkit that keeps the data in memory and recycles elements as you scroll (which is what everyone is recommending). When OP says "hack" they are talking about loading data as you go, not windowing, which is what you are talking about.

Hi Paul, I think I may be able to solve a problem for you. Get in touch?

My public key: https://pastebin.com/GcUCBC63

Yes, you should look for "virtualized" lists or scrolling. This is offered by many components in all frameworks.

Here's a popular one: https://github.com/bvaughn/react-virtualized

Thank you. I will research and see if it is what I needed (from my initial description I am not sure if it recycles invisible GUI items(DOM Elements) - there is no how it works in the github but I will look under ther hood tomorrow )

The next version of this is react-window.

https://github.com/bvaughn/react-window

Reply on news.ycombinator.com