4 Ways to Make Your Ionic App Feel Native

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.
[php]
npm install ionic-native-transitions –save
[/php]
[php]
cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.4.2
[/php]
(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:
[javascript]
angular.module(‘yourApp’, [
‘ionic-native-transitions’
])
[/javascript]
Next, add ‘native-transitions’ to your links:
[html]
Next
[/html]
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.
[javascript]



[/javascript]
You can also set some default options. I’ve done some experimenting, I think these are good default options in an Ionic app:
[javascript]
.config(function($ionicNativeTransitionsProvider){
$ionicNativeTransitionsProvider.setOptions({
“duration” : 300,
“androiddelay” : 100, // Longer delay better for older androids
// “fixedPixelsTop” : 64, // looks OK on iOS
});
})
[/javascript]
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:
[javascript]
.config(function($ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(false);
// Or for only a single platform, use
// if( ionic.Platform.isAndroid() ) {
// $ionicConfigProvider.scrolling.jsScrolling(false);
// }
}
[/javascript]
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:
[php]bower install –save angular-cache[/php]
or
[php]npm install –save angular-cache[/php]
Add it as a dependency:
[javascript]
angular.module(‘myApp’, [‘angular-cache’])
[/javascript]
Then you can use it like this:
[javascript]
.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);
})
[/javascript]
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:
[php]cordova plugin add cordova-plugin-crosswalk-webview[/php]
I had to also add this line to my config.xml, using version 1.3.1 of Crosswalk:
[html][/html]
Crosswalk is also available on Phonegap Build, using this line in your config.xml:
[html][/html]

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.