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.
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."
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.
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.
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:
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!