5 Ways to Optimise Ionic Apps Like Native

Nowadays most of the mobile app developers moving towards hybrid apps which can be deployed on any platform without knowing any advanced languages. The best framework used to build hybrid apps is Ionic, which is gaining a lot of attention these days.

But if we compare a native and a hybrid, if may give you some performance lags as hybrid apps use web views. In latest OS systems like android, we can increase performance to a new level so that there will be nearly no difference in Hybrid apps.

Following are some tricks which we can perform to highly optimize our ionic apps.

1) Native page transitions

Native page transition is a Cordova plugin which uses hardware acceleration in the Ionic app to switch app view. We can implement beautiful transitions in page views having full control on type duration and direction.

For installation in Ionic app, you simply need to run npm plugin from Julien Renaux

2) Enable Native Scrolling

In Ionic javascript, scrolling is used by default which hits performance a lot if we have a long view with heavy listings or images in it.

For fixing this we need to enable native scrolling so for this we need to disable javascript scrolling as follows:

.config(function($ionicConfigProvider) {
     $ionicConfigProvider.scrolling.jsScrolling(false);
}

If want to disable for specific platform

.config(function($ionicConfigProvider) {
     if( ionic.Platform.isAndroid() ) {
       $ionicConfigProvider.scrolling.jsScrolling(false);
     }
}

If we need to enable it in a single view, we can add the following attribute on ion-content tag

overflow-scroll=’true’

3. Caching Dynamic Data

Ionic retains views data as we switch from one to other. But in applications where a need to update content from remote API’s, then we make same API calls multiple times to get same data. So efficient approach is to save data in sessions storage to make available next time quickly which make the app faster. Angular-cache ( https://github.com/jmdobry/angular-cache ) is a great library which replaces Angular’s default $cacheFactory

This will check if same data exists and get data from local if available, otherwise if will hit another API call.

4. Crosswalk Webview Cordova Plugin

Crosswalk is another great Cordova plugin which replaces native or system provided Web views and drastically increases app performances.

The only drawback listed on plugin’s page that it increases file size to approx ~20Mbs

5. Using Track by in ngRepeat.

When using ngRepeat we should use track by to prevent repeated and useless DOM manipulations. When some data change is detected by digest cycle in any element, ngRepeat will re-render all elements. More the DOM manipulations lesser will be the performance.To avoid re-rendering of all elements we can use track by.

Change code from:

ng-repeat="emp in employees"

ng-repeat="emp in employees track by $index"

These are some tried and tested tricks to increase the performance of AngularJS and Ionic apps. Let us know if you have any other methods in the comment section below.

Category: Hacks