Hello,
Last two days I tried to migrate to Ionic beta 14 and decided to stay for a while with beta 13. I can’t tell that my application is simple but I was surprised that nor cache neither angular 1.3 improvements somehow improved performance.
As example I have infinit-scroll list of 20-30 items where I show on start 5 items. I can’t use cache because If I get event from native, I need update full list but without cache I can’t remember scroll position. I use bindonce
plugin and on Beta13 on Android it works not like native but users can stay with that. After upgrade to Beta14 - on Androids scrolling just stuck. Even on iOS I feel performance degradation. Its true that I don’t use angualr bindonce
with ::
but pasvaz/bindonce makes job well too.
I hope I’ll join in next build.
This is list item Example
<ion-item class="item wm-group-item" ng-repeat="group in groupItems" id="{{'wm_group_item_' + $index}}" on-finish-render="renderDone" ng-cloak> <span ng-if="group.isDevider" class="wm-devider"> <span bo-text="group.title.day" ></span> <span bo-text="group.title.date"></span> </span> <div ng-if="!group.isDevider"> <div class="row wm-group-row" > <div class="col" bo-class="{'true': 'button wm-button','false': 'wm-images-one'}[group.groupStatus.name != 'STATS']" ng-click="itemClick(group.mGroupId, group.groupStatus.name);"> <div class="row" >
<div class="col col-20" > <div bo-class="{'true': 'wm-images-no-image','false': 'wm-images-one'}[group.mAvatarImgBase64Str === 'none']"> <div ng-if="group.mAvatarImgBase64Str !== 'none'" class="row wm-group-image-row" > <img ng-src="{{group.mAvatarImgBase64Str}}" alt="img/default.png"/> </div> <div ng-if="group.mAvatarImgBase64Str === 'none'" class="wm-organizer-let" bo-style="getGroupImgBgColor(group.organizer.mName[0])" bo-text="group.organizer.mName[0].toUpperCase()"> </div> <div bo-if="group.mMeeterType === true && group.groupStatus.name !== 'IDLE' && showDebugStats.value === true"> <span>M</span> </div> </div> </div>
<div class="col wm-col-80" > <div style="margin-left: 10px;"> <div ng-if="group.groupStatus.name == 'IDLE'" class="row" > <p class="wm-group-item-title" bo-text="group.modifiedTitle"></p> </div> <div ng-if="group.groupStatus.name == 'IDLE'"> <div class="row" > <p class="wm-group-status" bo-text="'Last meeting: ' + group.title"> </p> </div> <div class="row" > <i class="icon settings-wm-ion-icon ion-eye"></i> <span class="wm-group-status wm-group-stats">{{group.stats.met}}/{{group.stats.spent}} in last 30 days</span>
</div>
</div> <div ng-if="group.groupStatus.name == 'COMPLETED' || group.groupStatus.name == 'WAITING'" class="row"> <p class="wm-group-item-title" bo-text="group.title" style='width: 100%;'></p> </div> <div ng-if="group.groupStatus.name == 'COMPLETED' || group.groupStatus.name == 'WAITING'" > <div class="row" style="padding-top: 0px;"> <p class="wm-group-status" bo-text="groupTimeDisplay(group.startDate_HH_mm,group.end_HH_mm)"> </p> </div> <div class="row"> <p ng-if="group.modifiedTitle || group.modifiedOrgTitle" class="wm-group-status"> With <span style="font-weight: bold;">{{group.modifiedOrgTitle}}</span> {{group.modifiedTitle}} </p> </div> <div bindonce="group.groupStatus" class="row" ng-if="group.groupStatus.name == 'WAITING'" > <p class="wm-group-status-wait" bo-if="group.groupStatus.value === 5" bo-text="constants.group_item_status_respond"> </p> <p class="wm-group-status-wait" bo-if="group.groupStatus.value === 1" bo-text="constants.group_item_status_wait"> </p>
</div> </div> <div ng-if="group.groupStatus.name == 'STATS'"> <p class="wm-group-item-title" bo-text="group.modifiedTitle"></p> <p class="wm-group-status" bo-text="group.stats.met"></p> <p style="margin-bottom:5px" class="wm-group-status">spent {{group.stats.spent}}</p> <div style="position:absolute; right:2px; top:40%;" bo-text="((group.percentage === 0) ? '> 1' : group.percentage) + '%'"></div> <div> <div style="height:7px; background-color:green; width:{{group.percentage}}%"></div> </div> </div> </div> </div> </div> </div>
</div> </div>
</ion-item> <ion-infinite-scroll distance="10%" on-infinite="fetchGroups()" icon="ion-loading-d" ng-if="moreDataCanBeLoaded()"></ion-infinite-scroll> <!-- </ion-scroll> -->
Its true that above mentioned item is too complicated because I have 3 Tabs with 3 lists and I use the same template for every list. Maybe its not good practice and I need to create 3 different items