Managing size and load time (and an open source app)


#1

Hello, as my application is growing, I was wondering if experts could help me out with a few questions:

  1. Today all my controller scripts are loading at index.html. Is it necessary to load them at index or can I somehow load/unload them at specific templates that need them?

  2. I’m using uglify2 to reduce size of JS. Is there a reliable solution that also reduces HTML?

  3. My iOS app is 5MB while my Android app is 25MB thanks to crosswalk. Without crosswalk android performance is terrible. Any tips on this front?

  4. Finally, this is my very first app and I’m terribly excited. Ionic has been a great learning. For folks starting off, feel free to read my code - I’ve commented various tips and tricks as I’ve learned them along the way - if you have better ways to do what I am doing, please let me know
    https://github.com/pliablepixels/zmNinja

thank you.


#2

Hi @pliablepixels

Just went over most of your code now, pretty good and generously commented!

lazy loading of controllers

I usually go the other way, making more things available right away with https://github.com/miickel/gulp-angular-templatecache :stuck_out_tongue:

html minification

There’s gulp-htmlmin but check https://github.com/kangax/html-minifier there’s not a lot you can shed away :confused:

crosswalk and package size

No idea, haven’t experimented with crosswalk yet.

If you have better ways to do what I am doing, please let me know

I’m still getting familiar with Ionic, but overall I liked what I saw in your code!

Let me see if I can find thing to nitpick or comment on! :wink:

I noticed this

     // Note that I hacked radialMenu
    // so please don't use the one you get from bower
```

In case you don't already know, it's possible to have bower retrieve things from github, like this (in your `bower.json`)

```json
"dependencies": {
    "some-library": "git@github.com:pliablepixels/some-library.git#somebranch",
  }
```
It should make it much easier to keep your fork up-to-date.

Also, I have no idea of how many monitors people have, but here
https://github.com/pliablepixels/zmNinja/blob/master/www/js/MonitorCtrl.js#L292-L300

I assume your api server is not exposing any sort of search at `/monitors/daemonStatus/` such that you could ask for a list of `ids`, cause that'd be the possible cleanest way to get them. I'm used to (and probably spoiled by) loopback's `/?filter={"where": {"keywords": {"inq": ["foo", "bar"]}}}` :)

These ideas may or may not make sense in your use case:

* Keep a cache of these status, and don't hit (within a reasonable timeframe) unless the user explicitly says so (with a "force refresh" or something like that)
* Request throttling on your side, if that ends up hammering the server. Not sure if this is really a problem for you, though.

Thanks for sharing! :smile:

#3

Hi @nuba,
Thank you! It’s very kind of you to take a look and offer constructive comments!

A few notes:

lazy loading of controllers

I usually go the other way, making more things available right away with https://github.com/miickel/gulp-angular-templatecache1

Which part are you referring to there? I had no idea I was lazy loading controllers and frankly I don’t quite understand the trade offs.

There’s gulp-htmlmin but check https://github.com/kangax/html-minifier1 there’s not a lot you can shed away

Thank you! I tried it out. As you correctly mentioned, not much of shedding.

In case you don’t already know, it’s possible to have bower retrieve things from github, like this (in your bower.json)

“dependencies”: {
“some-library”: "git@github.com:pliablepixels/some-library.git#somebranch",
}

Ah excellent. I wasn’t happy with the way I was keeping it stored. I’ll migrate to this suggestion soon.

I assume your api server is not exposing any sort of search at /monitors/daemonStatus/ such that you could ask for a list of ids,

Right - the server is not really in my control. It’s something other folks develop

Request throttling on your side, if that ends up hammering the server. Not sure if this is really a problem for you, though.

How does one go about requesting throttling?


#4

Sorry, I should have just quoted instead of summarizing and introducing new terms at the same time.

I was referring to

  1. Today all my controller scripts are loading at index.html. Is it necessary to load them at index or can I somehow load/unload them at specific templates that need them?

Lazy in this context would mean loading the controller’s definition to memory when the state that uses it is navigated to, and not before that.

By default, that is not the case with any vanilla angular app, or vanilla angular + vanilla ui router app, or any vanilla angular + vanilla ui-router + vanilla ionic app.

Lazy loading of controllers, that is, allowing your frontend to retrieve the files defining the controllers as needed has its place when delivering your app over the network.

With Ionic, however, everything has already been shipped in the package and is available locally, so I don’t see any compelling reason to add this complexity to your app.

Maybe it’s something someone would consider in the edge case where there are so many controllers around that they’re actually impacting in the app’s memory footprint, but that’s obviously not your case.

The good old universal computer science trick: add another layer to the problem :wink: Check:


#5

@nuba,
Thank you again for being so descriptive.

The one thing I’ve learned with angular is that ‘there is a service for that’ --> its an incredible world of 3rd party plugins and components. This http throttler is quite good.