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.


Posted

in

by

Tags:

Comments

15 responses to “4 Ways to Make Your Ionic App Feel Native”

  1. Daniel Milner Avatar

    Great tips! I’m already re-working one of my apps to add native transitions.
    Another great plugin to complete that “native” feel is cordova-plugin-dialogs (https://www.npmjs.com/package/cordova-plugin-dialogs). It lets you use native dialogs for alerts, confirmations, etc.

    1. Scott Avatar
      Scott

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

  2. Mike Avatar
    Mike

    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?

    1. Scott Avatar
      Scott

      I’d love to hear what you have in mind Mike.

    2. Elvis Morales Avatar

      Hey Mike, I think I find also the Native Transitions plugin not so native. Do you know another solution for this approach in a better native way done and less hacky?
      Thanks in advance.

      1. Scott Avatar
        Scott

        I like it because it’s always smooth. The JS transitions get jumpy on slower devices, or if the new view doesn’t load quickly.

  3. FX Bayu Anggara Avatar

    Thank you, very nice share !!

  4. leo b Avatar

    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.

    1. Scott Avatar
      Scott

      I don’t think simply switching to Ionic 2 would change anything, unless it gets better performance and therefore feels more native.

      1. leo b Avatar

        Yeah well, what I heard of it Ionic 2 does promise better performance so that would probably make it feel more native.

  5. Rahul Avatar
    Rahul

    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

    1. Scott Avatar
      Scott

      Hi this plugin has been updated and the way it works is a little different now. Please see https://www.npmjs.com/package/ionic-native-transitions

  6. Mauricio Navarro Miranda Avatar

    Hey, thank you for this post!
    Do you have suggestions like theese for Ionic 2? 🙂

  7. francesco mussi Avatar

    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.

  8. Eugene Avatar

    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/