Best practice to sort a list


#1

Is there a trick to get a list sorted without rendering the whole list each time?

When you have a list of items and you sort them not by name but by date. Every row will be rendered again.

Actually it would be much faster for the templating engine to move the DOM elements instead of create new ones.


#2

Use Glimmer2 and sort like you would normally do :wink:

http://js-repaint-perf-ember.surge.sh/


#3

Thanks for your link.

Your example is very simple, there is no component and the template is very small.

With a real application each row needs more time to render.


#4

Just tested in a real application with a list containing 500 items and it sorts instant without any slowness. Perhaps just create a test app with fake data and test it. (https://ember-twiddle.com/)


#5

In my app according to the Ember Inspector one item need ~15ms to render. With 500 items it would take 7.5 seconds. It takes actually more but I don’t know why, maybe the GC …

I created a Twiddle: https://ember-twiddle.com/1b948596e573e99e492e476bdcd096f5

On my computer the 500 items takes between 2.5 and 3 seconds. It’s not really instant …


#6

Large list views in ember have always performed terribly. The proof is in Charles’s fiddle friends :wink:

However, there are things like https://github.com/emberjs/ember-collection and https://github.com/runspired/smoke-and-mirrors that do fancy incremental rendering for you.

I haven’t played with them in a while, so I’m not sure if they are perfect out of the box.

Let me know if these work out for your use case… I always punt on this problem by rendering 25 items with pagination links.