I am implementing an UI list of items. It supports ordering by sort functions and custom drag and drop ordering.
It will be used for displaying hundreds of items.
I am looking for the "best" way to implement the ordering.
Sorting is always done on data model in memory and is then projected onto the UI.
First solution I know about is just reorder the DOM elements. Simple, but it feels like a little too resource heavy...
...in comparison with flexbox and css order. That is the second solution I have in mind. Assign order with increasing values and let css do its magic... hopefully with less resources used.
The problem with css order is that if I remove or add list items, it does not reindex (the order value) automatically, so there is more maintenance to keep the system working as opposed to using DOM element order.
Do you see any (dis)advantages with using either of those? Do you agree that using css order is (significantly) faster/less expensive? Any other options to order elements?
Edit: Pagination is not an option. My question is only concerning the mechanisms to reorder elements.
I think if you use a pagination logic with Javascript, you can reduce the rendering hundreds of items. I mean you can split items and then just render 10 items and next 10 items.
I am not sure this logic helps or not. https://jasonwatmore.com/post/2018/08/07/javascript-pure-pagination-logic-in-vanilla-js-typescript
When a user changes the order of the elements (by moving an element or toggling a sort function), it should update the array in memory, which should trigger a re-rendering of the DOM elements. Modern front-end JS frameworks do a good job of updating only the necessary DOM elements (using a virtual-dom).
Also, having a single source of truth will allow you to easily expand on the functionality without incurring too much technical debt. For example, if you decide to add pagination or CRUD methods.
Alright, did some test at https://jsbench.me/2pkzlbj45h.
Ordering elements using CSS order can be from 20% slower to 40% faster than ordering by dom manipulation depending on whether the starting order is fully random or almost sorted (0,5% of elements out of order).
The more random the starting order is, the more it benefits CSS order.