Recent developments in the hybrid world are blurring the lines between hybrid and native.

You can now use native transitions and native scrolling, along with a fast framework like Ionic. In many cases, it’s impossible to tell any difference between hybrid and native, since many fully native apps use WebViews.

The exciting thing is that hybrid apps are improving at breakneck speed, and it’s never been a better time to be in this field. There are 4 things that can drastically improve your apps and make them feel more native, let’s look at them now.

1. Native transitions

This is a total game changer. You can now use native slide transitions in your hybrid apps, thanks to this Cordova plugin.

The built-in Ionic transitions work really well, but they can occasionally get choppy. Native transitions work perfectly every time, and they are as smooth as butter.

To enable them in your Ionic app, you can use this npm plugin by Julien Renaux. You should follow the instructions on that page to install, but here’s a quick break down.

npm install ionic-native-transitions --save
cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.4.2

(If you don’t use npm, you can download the javascript file manually, and link to it in index.html)

Next, add ‘ionic-native-transitions’ as a dependency:

angular.module('yourApp', [
    'ionic-native-transitions'
])

Next, add ‘native-transitions’ to your links:

<a class="button" native-transitions ui-sref="facts">Next</a>

I added these to the links in my list templates, and the back button. For the back button, you want it to slide the opposite way, so you can use an inline option.

<ion-nav-back-button native-transitions native-transitions-options="{type: 'slide', direction:'right'}" class="button-icon">
  <i class="icon ion-arrow-left-c"></i>
</ion-nav-back-button>

You can also set some default options. I’ve done some experimenting, I think these are good default options in an Ionic app:

.config(function($ionicNativeTransitionsProvider){
  $ionicNativeTransitionsProvider.setOptions({
    "duration"          : 300,
    "androiddelay"      : 100, // Longer delay better for older androids
    // "fixedPixelsTop"    : 64, // looks OK on iOS
  });
})

The default duration of 400 is too slow, to match other Ionic animations it should be around 300. Older Android devices don’t handle the transition very well, so you have to add a longer delay for the new view to update. 100 works well, although I only have a couple of Android devices to test on. You can use fixedPixelsTop if you don’t want your toolbar to slide. I actually like this better at the default setting of 0, because the default Ionic slide/fade animations of the page titles don’t work with native transitions.

There are also transitions for sliding up and down, a drawer, page curl, and more. I can see most of Ionic’s javascript animations being replaced with native animations, but it may be a while until that happens.

There are other options you can explore in the plugin documentation.

2. Native Scrolling

Instantly remove jank scroll.

Ionic uses javascript scrolling by default, which tends to get choppy. If there are a lot of images, you can see major issues, especially on Android.

To fix this, you can enable native scrolling. It can be enabled globally like this:

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

  // Or for only a single platform, use
  // if( ionic.Platform.isAndroid() ) {
    // $ionicConfigProvider.scrolling.jsScrolling(false);
  // }
}

You can also enable it on a single view by adding overflow-scroll=’true’ on your ion-content tag.

As stated in their blog post, this has some issues on iOS. They seem to have fixed most of the bugs at least on iOS9, everything works including pull to refresh and infinite scroll.

3. Caching

Ionic offers some default caching, but if you are pulling in content through an API you need something else.

Let’s say an app user views an article, they close the app, then later they go back to the same article. There’s no reason to do another HTTP request to get the article the second time if it’s just static content. Instead, we cache the article in storage, so any time it’s viewed again it is available instantly.

Naked localStorage works great until you need to store and retrieve a large number of articles, that’s where angular-cache comes in. Angular-cache is a nice library that makes it easy for us to store and retrieve lots of objects in a variety of different ways.

To install, use:

bower install --save angular-cache

or

npm install --save angular-cache

Add it as a dependency:

angular.module('myApp', ['angular-cache'])

Then you can use it like this:

.controller('Posts', function (CacheFactory) {

if (!CacheFactory.get('postCache')) {
  CacheFactory.createCache('postCache');
}
var postCache = CacheFactory.get('postCache');

// Cache a post
postCache.put(id, data);

// Delete from cache
postCache.remove(id);

// Get a post
$scope.post = postCache.get(id);

})

Now we just check if the post exists in the cache when a user loads the page, if it does, we don’t need another HTTP request.

To break the cache, we can add pull to refresh. It’s also possible to set an expiration on our cache, which may be useful for some apps.

There are lots of other great options in their documentation.

4. Crosswalk WebView

The Crosswalk WebView allows for much better performance in Android applications by replacing the native WebView.

The only drawback I’ve seen so far is that it makes your application size fairly large (adds about 20mb). If this isn’t an issue for you, it’s definitely worth using.

To install:

cordova plugin add cordova-plugin-crosswalk-webview

I had to also add this line to my config.xml, using version 1.3.1 of Crosswalk:

<preference name="CrosswalkAnimatable" value="true" />

Crosswalk is also available on Phonegap Build, using this line in your config.xml:

<gap:plugin name="org.crosswalk.engine" version="1.3.0" />

Bonus

You can also speed up your app by making sure your AngularJS is up to par. Check out this cheat sheet for some performance improvements.

If you have other tips, please let me know in the comments.

15 thoughts on “4 Ways to Make Your Ionic App Feel Native

    • I’ve found that the native transitions work differently on Android, especially if they are slow. Just make sure to test 🙂

  1. Nice stuff. Though the native transition plugin is a bit of a hack IMO. It doesn’t really animate anything but a screenshot. There are other places you can investigate before moving to that. Love to talk more about it if you’re up for it?

  2. How about moving from Ionic 1 to Ionic 2, would that make your app feel more “native” ?

    At least I know that it has native scrolling switched on by default and it uses Material Design on Android, for the rest I have no hands-on experience with it I must say.

  3. when using native transition plugin i am getting the following error “nativepagetransitions is disabled or nativepagetransitions plugin is not present”. I ahve follwed all the steps in that tutorial. what will be the problem

  4. God bless you! I had problems with scrolling with big data, four ng-repeat in differents tabs. For every tab i had to wait a couple of second before the scroll would work smoothly. With native scroll it works perfectly now. Thank you! Going to check now the other three tips.

  5. Just example of Ionic 2 Success story.
    Our site is completely on Ionic2 beta.8
    http://m.sherpadesk.com/

    I have hybrid app too and I did some optimizations and got **417ms loading time**.
    Look at report https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/17
    Also Site size decreased **600% (3Mb -> 500 Kb)**
    User interaction response speed improved **2000% (2 seconds -> 100ms)**

    Good recommendations: http://blog.angular-university.io/how-to-run-angular-2-in-production-today/36

    I’ll post all my gulp settings and link to appstore here: http://www.sherpadesk.com/blog/

Leave a Reply

Your email address will not be published. Required fields are marked *