Ng-repeat vs collection-repeat: a quantitive analysis

Hey!

Been using ionic for the past month now and its a fantastic framework, probably the best I’ve come across after a lot of playing around with other frameworks. I’m building an app, and testing it on an android phone and I notice there are primarily two ways of scrolling 1) Native scrolling using ng-repeat 2) javascript scrolling using collection-repeat. I’ve worked with both and I’ve come to the conclusion that ng-repeat works better than collection-repeat in the sense that for the same number of list items in the list collection-repeat isn’t as responsive as ng-repeat. ng-repeat works much smoother and flawlessly than collection-repeat.

Now the problem I most probably will face in the future is that as the size of my list goes on to increase I don’t know how well ng-repeat will be able to handle that, lets say how performant would it be for a 100 items. My list item contains a 200x200px image, some buttons and a text input field and depending on a particular condition it may not have a button and the input field, so basically its varying in size.

If anyone out there can give me a proper analysis, hopefully with some stats and all I could then prepare for this problem and workout a solution.

They recommend only using collection repeat when the amount of items will be quite large. I’m not sure on exact numbers, but my experience has been using collection repeat when I will have over 60 items.

A possible solution could be to use ng-repeat when the items are less than 50 and collection repeat when there are more than that.

1 Like

in my opinion collection-repeat is good for the resource usage of the device, but the performance is (especially) on android not as good as it should. So i use ng-repeat in most cases, because i often have complex listitems with thumbnails ans many information. I combine this with the infinite-scroll component of ionic to have something like paging.

For simple list i use collection-repeat, because the lagging is acceptable there.

Okay. Lets hope it does better than that.

While you asked for Stats and Analysis, I honestly think the best thing you can do, is just implement it and test it out. It shouldn’t take very long to swap out collection repeat for ng-repeat, and you can write a loop to add 1000+ items (or however many you expect) to your list to see how each performs.

I think stats will be meaningless. What matters is how it performs in your app on an actual device.

I wrote an app that display a list of more than 1000 products. With ng-repeat was unusable, but with collection-repeat works quietly well.

I acted on your advice and wrote a basic app which tested ng-repeat for large lists. I used ionicInfiniteScroll to keep adding to the list as I scroll down because thats what my app does, basically trying to mimic what my app does…it seems ng-repeat was able to handle 1000 items(I stopped scrolling one I reached 1000). and there seemed to be no apparent lag or problems scrolling…though it did seem a little slowed down…but hardly noticeable in my opinion. Could it be that my test phone(moto g) is able to handle this well enough or all phones would show the same kind of fluidity with nd-repeat?

Anyways…still testing…

When you add in infiniteScroll, that will also help with performance, since instead of adding all 1000 items to the DOM, which ng-repeat does, you only add the ones you need. Did you test what happens once you reach the bottom of the list and tried to scroll back up? My guess would be that after you reach the bottom and have added 1000 items to the DOM, you may see some performance hits. So you may wanna check on that before signing off on this.

As far as your question about your phone:

With Android it is almost impossible to make that claim. There are so many devices and they all have different versions of Android running on different hardware. Its what makes Android development so difficult.

Was this an actual device you tested on? What version of Android? And how new is it? If its an older phone and not running the latest Android, but still performing fine, I would assume it will run fine, if not better on newer devices. But again, its hard to know, so I try and use my friends phones as well for testing.