Performance issues when updating view data


#1

I’ve created a playground to better show the performance limitations I’m regularly facing with NativeScript.
You can find it here:

First you’ll notice a slow startup time. Then you can hit the “Reload Data” button to make the app freeze. You’ll notice scrolling will no longer work while the UI is being updated. Also the app will no longer present an alert when hitting the “Trigger Alert” button until the view has been updated. The ActivityIndicator however will keep spinning interestingly…

In my actual real world application for example I’m implementing the “nativescript-pulltorefresh” plugin within a very similar screen. The server is responding very fast which is great. Unfortunately that means I’m still pulling / scrolling while the view is already starting to rerender which makes the scrolling freez and results in a very bad user experience.

I would like to improve performance here but I have no clue how I could accomplish that. Webworkers only do allow the exchange of serialized data if I understood that correctly. That means I can not use another thread to overcome these issues because I can’t update the categories property of my component. (Please correct me if I’m wrong)

Just in case you’re about to suggest changing the layout. Unfortunately that’s not an option. Also using ListView / RadListView will not help as these could not handle the additional horizontal ScrollViews. (At least in my tests…)

Edit: It seems like I didn’t remember correctly what issues I’ve had in this scenario when trying to use ListView / RadListView. I actually made my experience with these views:

Since I’m using this inside a TabView I’m really limited here.

Please point me into the right direction.


#2

I ended up using nested RadListViews. A fixed height on the inner RadListView and also setting it’s Layout’s itemWidth and itemHeight did the trick. It seems like theses RadListViews are much more capable now. (My experienced issues come from pre and alpha 3.0)


#3

would you mind sharing your new updated layout in Playground? It will be good for a noob like me to learn more about flattening layout concept. Thank you


#4

It’s not working for iOS in the playgrounds because these are using “nativescript-telerik-ui-pro”: “^3.0.4”, and I’m using “nativescript-pro-ui”: “^3.1.4”, I guess…

Anyways, there you go: https://play.nativescript.org/?id=b2Vj0G1FL003AL3hHSeqM&template=play-ng&template=play-ng


List inside ListView
Nested ListViews
#5

Thanks a lot. I appreciate it :slight_smile: