I need some very basic advice on improving responsiveness.
I was trying to learn how to use Ionic with what I thought was a very simple sample project. I get a JSON response from a web service that gives me a list of retail locations with various attributes like address, phone, etc. I display this list with nice formatting on my mobile device. Everything looked good using Ionic serve so I built the app and loaded to to my Android phone (happens to be running Android 4.1.2). It looks good but scrolling performance is abysmal. A swipe gesture to scroll down might take 3 seconds or more to see a response (and sometimes I get no response at all). Turning the phone sideways “works” but the redraw to accommodate the new perspective takes 5 seconds. My list only has about 200 entries. My first try was using cards because I thought they looked cool.My second attempt was just using simple lists. I did not notice any improvement. I’m at a bit of a loss on how to proceed since I figured this was about as simple a test as you could possibly do. My original goals were to make it much smarter - cache the JSON and refresh in the background, use location services to find closest location, etc, but this very simple display app is so unresponsive as to be unusable. If I can’t find a solution to this, I see no point in proceeding with Ionic.
BTW - I’m curious about how the Ionic community is reacting to recent announcements of Angularjs 2.0. Does Ionic crash and burn when Angular 2.0 comes out?
Here is the guts of my index file. As it is, the refresh loads a javascript array with info for about 200 retail locations. That part is actually very fast. It is the scrolling and such after all the data has been loaded that is so horribly slow.
<ion-pane>
<ion-header-bar class="bar-assertive">
<h1 class="title">Store Finder</h1>
<button class="button button-clear icon-left icon ion-refresh" data-ng-click="refresh()">
</button>
</ion-header-bar>
<ion-content>
<br>
<div class="list" data-ng-repeat="s in stores">
<div class="item item-divider item-positive">
{{ s.name }}
</div>
<div class="item-body item-text-wrap">
<p>
<b>Location:</b> {{ s.address }} , {{ s.city }} , {{ s.province_name }} , {{ s.postal_code }}
</p>
<p>
<b>Phone:</b> {{ s.phone }}
</p>
<p>
<b>Hours:</b> {{ s.hours }}
</p>
<p>
<b>Services:</b>
<br>
{{ s.service_name }}
</p>
</div>
</div>
</ion-content>
</ion-pane>