5 Ways to Improve Hybrid Mobile App Performance in Ionic Framework

While Hybrid Apps are a fantastic way for mobile app developers to develop for multiple operating systems while still maintaining the native look and feel that the user expects, hybrid apps have plenty of drawbacks when compared to natively developed apps. One of those drawbacks is most definitely overall performance. Ionic has proven to be very capable of making high performance hybrid applications, but there are a few optimizations developers can perform to ensure lags and bugs are minimal. 

Related Reading: What Is Ionic Framework

 

Choose Native Scroll over Javascript Scroll

Opting for Native Scroll, rather than Ionic's default Javascript scroll, can prevent the choppiness that often accompanies Javascript. Native scroll is especially helpful to performance for Android apps. Native scroll caused some trouble on iOS for a bit there, but the recent updates have greatly improved this. Ionic even wrote their version of a nursery rhyme about it called Native Scrolling in Ionic: A Tale in Rhyme

Enable this careful though. Tom Buyse writes 

"If you’re already using collection-repeat, you might want to consider replacing it with a normal ng-repeat. I’ve experienced some stutter when using collection-repeat in combination with native scroll." 

 

Reduce Initial Startup Lag with Angular TemplateCache

Ionic has its own default caching mechanism, but has limitations that can interrupt smooth performance. For example, this caching mechanism only caches the view when it is first initially entered, not each time the app starts up. Developers can enable an Angular TemplateCache so that all views have already been cached when the user starts up the app, which prevents initial lag time when a user enters the view for the first time. 

Devs will need to install "gulp-angular-templatecache" plugin, then generate the template cache. Tom Buyse again nails it with his instructions on precisely how to install the plugin, generate the template, and ensure AngularJS accepts the command. Find his walk-through here.

 

Minify Apps for Production

Minification is something most developers are used to doing when they're finishing off an application for production. The extra space and added readability are a must when developing something huge or when working on a team, but that extra space can take up a lot of, well, space, and it can cause lag. Condensing everything onto a single line, concatenating files together, and renaming long variables to shorter ones not only considerably condenses the code, but it can also aid in protecting it from thieving eyes. 

Most developers recommend using Gulp and Grunt to execute this, and we're no different! Josh Morony gives a great walk-through on how to minify applications in Ionic before releasing them to production and/or the App Stores.

 

Using Track By

App developers can use Track By to avoid unnecessary DOM manipulation if ng-repeat is used. As in most development situations, DOM manipulation often causes less-than-stellar application performance. Additionally, if Ionic's digest cycle discovers at least one element within your collection to have changed, ng-repeat will re-render all of your elements to match. Let's avoid re-rendering the complete collection altogether and change only the elements we want to change by using Track By and a unique identifier. 

Change your code:

Track By source: https://julienrenaux.fr/2015/08/24/ultimate-angularjs-and-ionic-performance-cheat-sheet

 

Enabling Animations for Performance

Lastly, enabling Animations in AngularJS can have a huge boost on performance. In fact, many content pieces and hot-to guides have been written on forcing ngAnimate to target only the specifically-named class elements, rather than checking all elements looking for elements to animate. While Ionic and AngularJS are closely related, this is an Ionic post, so we won't expand on this further. You can check out Ben Nadel's post on enabling animations explicitly for a performance boost in AngularJS here

If you've got the need for speed and high mobile application performance, implementing a few or all of these in Ionic can offer significant speed and performance payoff. Do you know of other methods developers can implement to improve their app's performance? We'd love to hear from you on our social media channels! 

GET IN TOUCH


Want to start a project? Great! We just need to know a bit about your project.

We're experts in mobile apps and responsive web but have experience in a large range of technologies and platforms.

So just fill out a bit of info for us and we’ll get back to you. We can't wait to hear about your project and are excited to get collaborating.

Tell us about your project!


Thank you! We'll be in contact shortly!

Message Sent! The form will close automatically in a moment.

Invalid Email