Noob question on performance


#1

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>

#2

Try setting overflow-scroll=“true” to get native scrolling. If you use the sidemenu starter project it has a weird bug where you have to use 2 fingers but there are some workarounds: https://github.com/driftyco/ionic/issues/2201


#3

Take a look at this blog entry:

It made a huge difference for my apps that have to run on android.


#4

Adding overflow-scroll=true definitely improved things but it is far from good enough. If I try to scroll fast with several swipe gestures it may grab one of them or none of them. If I try to scroll very slowly, just moving the text up and down a bit in my screen, the appearance is jerky. And redraw when I change the way I holding the phone from landscape to portrait is still very slow. It is not giving me a “native app” experience.

Still leaves me wondering how ready Ionic really is for production work on Android. My simple app is not much beyond “hello world”. I would not have expected such problems.


#5

That’s disappointing, I’m on iOS and it makes a huge difference. Look into the ng-repeat issues people have and there is collection-repeat: http://ionicframework.com/docs/api/directive/collectionRepeat/

I’m just scratching the surface on Ionic too so I hope it works or I’ll be in your situation soon.


#6

There are already alot of known Android issues with Ionic(performance) that the team is working through. One thing you can also try is using collection-repeat (http://ionicframework.com/docs/api/directive/collectionRepeat/) instead of ng-repeat. Collection-repeat is made for lots of items.

As for Angular 2.0, the team has already said (Can’t remember where) that they will be updating the framework to Angular 2.0 when it comes out and that they are very excited for it.


#7

I’ve also decided to kick ionic for now. The Android performance is very bad. Transitions and scrolling are very slow and laggy. Also with the latest nightly. It makes no fun using the apps built with ionic on Android. This is a knock out for the ionic framework.

Using crosswalk is not an option for mainstream apps, since it blows up the package size. The performance is also bad on Android 4.4.4 devices with simple content.

Nevertheless I’ll follow ionic’s development and try it from time to time. When the performance issues has been solved I would prefer using ionic for my projects.


#8

I think I’m on the same page. Something to keep our eyes on but clearly not ready for production work on Android at this time. Too bad.


#9

The overflow bug should be fixed