What is the best way to filter 25,000 items?

1

Hi, I am filtering a list of 25,000 songs and this is what I am doing:

export default Ember.Controller.extend({ (...)
  matchingSongs: Ember.computed('searchTerm', function() {
    return this.get('model.songs').filter(function(song) {
       return song.get('title').indexOf(searchTerm) !== -1;
    });
  })
})

However, for large amounts of songs, this can be pretty slow, especially if searchTerm changes on every keystroke. Am I doing it right?

3

You could use Ember.run.debounce to add a delay before filtering, so it doesn’t filter on every keystroke.

1 Like
4

Debounce is a must for the interaction.

Also, using glimmer should speed this sort of thing up. If you can’t upgrade to glimmer yet, I recommend this approach: http://emberup.co/speeding-up-dom-rendering-when-filtering/

1 Like
5

You could try using

matchingSongs: Ember.computed.filter('model.songs', function()...))

I believe, but am not sure, that this optimizes the filter to avoid rebuilding the entire array each time.

6

I can’t see why filtering in memory on 25k items would be slow. What is likely slow is the rendering of how every many items get returned.

Can you elaborate on your rendering strategy? Are you only rendering the top N or all potentially 25k records? What version of Ember?

7

I am rendering all 25 rows on Ember 2 dot something.

To be honest, I only asked this question because my team and I were in an Angular vs Ember debate. In terms of performance, I don’t know that much about Ember. All I know is that it is much faster than before thanks to HTMLBars.

8

@skaterdav85 Was that a typo? Rendering all 25,000 items will tax any browser if you’re also sorting them dynamically. Just loading a static html file that contained the entire list of songs would be a bit poaky, i imagine.