Virtual scroll support for lists

[mlynch]

This one is a doozy. I have the windowing stuff working already (hide/add elements in the virtual viewport). Need to now integrate with angular.

[mlynch]

I'm debating pushing this off until 1.0. It's getting there but is going to need a lot of testing and polish.

[wedgybo]

@mlynch Just wondering what you're progress is with this part? I updated a thread on the forum which had a basic discussion around this.

Is the work in branch 65-virtual-lists still relevant? Or is there something you know that is wrong with the approach? I'm going to start taking a look over it, but any extra info on where you see it's status would be awesome :)

[mlynch]

I think we should start over on it. With the new scroll system, the way I was building it before might not be the best solution.

One thing that I was doing before that I took out for the time being was making the <list> inherit from the scroll view, which is what happens with UITableView on iOS. In this case the list then handles all the scroll events and can swap rows out as needed.

One requirement I believe then is making sure the list item height is specified up front, or easily calculated (so you know which elements are in viewport and which ones aren't).

Here are some options for integrating into Ionic and ng-repeat with Angular:
http://allaud.github.io/quick-ng-repeat/
http://emberjs.com/list-view/
http://blog.stackfull.com/2013/02/angularjs-virtual-scrolling-part-1/

[wedgybo]

Cheers for getting back to me on this @mlynch! It's a bitch of a problem to solve on mobile ain't it!

I think using that sort of structure is the right way forward. As for the row height set manually, I agree. I don't see that as a big problem just now and certainly works for my use case. It's too much to add that into the mix at this time I think 👍

What I currently have is a top level table-view directive which keeps track of the data, which data is in the view window and what the current scroll position is.

Then I have a directive, table-view-item, which keeps the parent table-view directive updated when new items are added/removed. I then used ng-repeat="item in items | limitTo:tableView.windowStart | limitTo:tableView.windowEnd" which gives you a paging effect, where the numbers there were updated by the parent scope.

This worked to a degree, and it's fine on the desktop, mobile was still stuttering as it involves destroying and creating a lot of DOM elements when scrolling and sometimes failed because of the lack of scroll events on mobile.

Anyway, what I want to look at now, is the idea of having the table-view update some form of table-view-repeat with a subset of the master data list, but using the track by element as a marker and just updating the scope as required. Then having each dom element know it's position on the canvas and move accordingly.

So say we have 10 items. Item 0 leaves the contentWindow when scrolling down, it's then replaced with item 11's scope and moved to the bottom of the list with a transform.

One of the elements that apparently does very well in jquery land is this https://github.com/mleibman/SlickGrid although this is not for mobile and doesn't use transforms. It does have code to guess how far the window needs to be when scrolled I believe though, which could be kinda cool in the mobile environment where scroll events are scares.

Any thoughts on the above? I'll have a read through those links tonight as I've not seen how ember do it, or this quick-ng-repeat.

[wedgybo]

Just thought I'd update you with some progress I made today.

The concept of using track by is working quite well. I can now smoothly scroll through a list that would previously crash/or jitter with other solutions.

Here is a VERY rough gist if you want to try and hack it into a project and give it a try.

https://gist.github.com/wedgybo/1b1ce50979b5e5e0247c.

Needs a cleanup and edge cases handed, like bouncing on edges and large swipes where the list needs to be redrawn completely. But built in a phonegap application with a list of 1000 it works well enough without stuttering and crashing.

Once I've sorted the edge cases, I'll next need to look at changes to the master item list to update the tableViewItems. Then look at paging when hitting the edges to load in more data.

[wedgybo]

@mlynch sorry it's been a while getting back on to this.

I've created a version of this that I feel works a bit better on mobile as a proof of concept. I've not tried it on anything older than an iPhone 4s at the moment, but so far so good!. On our application which has non trivial list items. I'm happy with the performance and there is probably some speed to be gained once I understand ng-repeat a bit better.

Check it out.

https://github.com/mallzee/angular-ui-table-view

There's still a bunch of improvements to be made to make it fit in with the ionic format, but if it's something you think is worth doing, I'm happy to give integrating our solution into ionic a go.

[mlynch]

@ajoslin just shipped this in Beta 2. It's awesome! :)

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.