&tl;dr : Compress your code for performance improvements.
There have been quite a few posts on the forum about performance. Specifically, with list performance.
I’ve had my own troubles for the app I’m about to submit (tomorrow, fingers crossed). Specifically, my “old” iPhone 4S and iPad 2 were really slow with my Ionic app. UI elements using ng-if and ng-show would be really janky on the screen and flicker. ng-cloak did not help.
Yesterday, I reached out to Diego Netto (@diego) to see if he could help me get my project compressed and minified with his generator-ionic library. Since he’s local, I was hoping he could babysit me through this. Unfortunately, he’s as swamped as me.
So, I took my existing Grunt process and added in Uglify. I had a few problems due to missing some proper dependency injection in a few places (config resolves mostly). However, it was pretty easy to get it all fixed.
Once I ran on the devices, WOW. The performance problems were gone. All the flaky ng-ifs and ng-shows were cleared up.
Now, there are undoubtedly some improvements to be made in Angular, Ionic, and our own code. So, don’t dismiss working out those issues. But also seriously look at putting minification into your build process.
@Calendee Thats great to hear, I’m going through the process of annotating my code before I minify and keep getting error, so it’s go to know that the hard work pays off.
Its good to hear you found your way around it, because I cant just imagine you having optimization issue, what will then happen to a beginner like me, please can you help me with what I should watch out for while developing my app with ionic(a best practice) and probably a check list. thanks in advance
@Lagoonwish : For a hybrid app, all the HTML files are on the device. So, I would wonder about how grunt-angular-templates would help. Since it just puts them in cache, and the “cache” already exists in the packaged app. Still, minifying the HTML code is good.
@webpestt : Trust me, I’m a beginner too compared to the Ionic devs. Right now, I think dealing with Grunt, Gulp, or general minification techniques is beyond the scope of this topic. It’s not really specific to Ionic. However, if you look at Diego’s yeoman-grunt process, it has a really good structure for starting with.
I’m pretty sure that at some point, Ionic is going to have an official “build” process that will take care of this. However, I think it will be a while coming.
Minification has nothing to do with ng-repeat performance. minification has only to do with page load times (hence, asset management)
we all suffer from ng-repeat performance issue, this issue is “built-in” angular (bindings dirty checking). there’s a bunch of methods trying to resolve this “feature”, good quality hacks, but the real solution will only come with angular 2.0 (object.observe).
you guys might want to check bindonce for your binding issues, though i have not try this but its a tip i got from Daniel Zen, taught i should let you know if this help
You can either configure these plugins manually by modifying the generated Gruntfile.js, but I recommend using the included grunt-contrib-usemin plugin and include usemin blocks in your index.html file that define desired build targets.
Here’s a gist for an example of a slightly modified index.html that the generator would set you up with. For this example I added the leaftlet.js file outside the bower:js block but inside the build:js block so that all the JS files get built into a single vendor.js file for distribution.
Note that the bower:js blocks are managed by grunt-bower-install which looks at all your bower_components and injects the appropriate files into that block for you. The grunt build task brings everything together and updates your www/ directory with the compressed assets and then runs cordova build so that you can emulate / run your application with the build assets.
@hitmantb you are correct. It uses ngmin which was created by Brian Ford (a core AngularJS developer) and the grunt build task the generator sets up for you runs ngmin before uglify, just like you mentioned.
At the highest level, Grunt is a task runner for JavaScript. Think of it as your personal assistant. Grunt is happy to automate and run commands and services for you to make your development workflow more efficient, thus making you more productive as a developer.
Check out the links @coen_warmer posted since they are great starting points.
I’m hoping to put together an initial blog post on getting started with Grunt + Ionic using the ionicjs generator sometime this weekend. Will post back here when that happens!
Compressed my 8MB starter app to 750KB, speed feels quite a bit better too! Took a while to figure out I need to install Ruby + Compass, doesn’t help the recent version of SASS/Compass had a conflict so had to install with --pre option. Finally got it all to work!
Two questions:
How do I change the app name safely? It is using “Foldername”, I am trying to use Folder Name, but when I renamed the JSON I started to get cordova.js not found errors.
I’m looking into the stability of node-sass so that we can potentially eliminate the Ruby dependency, but if your project isn’t using SASS/SCSS you could say no during the initial scaffolding prompt when the generator asks if you would like to use Compass.
To answer your questions:
Renaming your App (for the purposes of its display name) should be as easy as modifying the config.xml file in your project’s root. What JSON were you changing?
Absolutely! You can bring in any libraries manually, but since bindonce.js is registered with bower go ahead and run bower install --save angular-bindonce. Then run any of the grunt tasks and the bower-install task will run (or you can trigger it manually with grunt bower-install) which will inject your new dependency, along with all of your bower_components into your app/index.html file inside the bower:js usemin block.
Not sure why minification would’ve improved the performance of your app so significantly, since you’re still executing the same code. Minification I imagine would have less of an impact in an Ionic app where all of the source files are local to the device.
Having said that, I don’t know how many different libs you’re including or just how massive your codebase is. It may be possible that you’re simply using less memory now, and that your bottleneck on the older devices was actually RAM, and the paging involved in swapping out RAM to NAND which would be slower on those devices as well.
Even if you took the starter app and run through Diego’s Yeoman + Uglify process, you notice a performance improvement.
If I followed “getting started” instruction here I end up with a 8MB file. Diego’s generator if you follow his instructions on Github comes up with a 700KB one. It is the same exact app.
When I quickly tap back and forth between the bottom icons, the 700KB version is definitely a little quicker, even for the starter app. I am on Android 4.1 with LG Optimus G Pro.
I followed instructions on https://github.com/diegonetto/generator-ionic for ionic starter app but i get "application error, there was an network error. (file:///android_asset/www/index.html)
