IONIC framework Mobile Application Performance Issue

Question

We are developing a high profile mobile application for one of our clients using the IONIC framework. We are almost done with the development for this phase. The application

Answer 1

Which Ionic Loader are you using? I was unhappy with the available solutions and ended up rolling my own solution.

What version are you targeting, and what version are you testing with (physical device)?

Here are some performance tips:

1. If targeting < 4.4 and APK size is not an issue then try bundling the crosswalk runtime. It's fairly easy with the ionic cli, you can just do ionic browser add crosswalk to include it. Performance will be better, but APK size will be larger.

2. ionic run android will make an APK, but it is much better to do ionic build android

3. Minify JS and CSS, concat, and strip debug in your gulpfile.js. I've also had slight performance gains using html2js on the templates.

4. Watch out for ng-repeat. Rather use collection-repeat or, if you must use ng-repeat, then make sure you're using the track by feature.

5. Filters can have a negative impact on performance. Use directives where possible.

6. Defer defer defer! $q is your friend and can help give an illusion of speed.

7. Just use plain ol' DOM when you can, not everything needs to be Angular.

8. Use one-time binding where possible. {{ ::thing }} sets the value once and persists it, which means less watchers, which means better performance.

9. Avoid $scope.$apply() as this processes all the things. Use $scope.$digest() instead and it will only be processed from the scope it is called from.

10. Keep your $$watchers to an absolute minimum!

11. Only bundle what you need. Make sure you're including the bare minimum in terms of libraries etc.

12. Don't use jQuery (although this is obvious)

Good luck!