angularjs performance best practices

Question

I take a style based on johnpapa style guide , and according to Miško presentation on Angularjs MTV meetup Best Practices at 49:44

he say that performance depend on 2 thing :

1. How many binding you have.
2. How expensive you getter. (should fast)

And i think that means simple and fast. In my comprehension getter mean a method in a service. But in my case a little bit complex. So how make it simple? i guest it's not possible to change the algorithm? or just calling internal (private) function in a service? does it take effect?

So here is my question :

1. Best practice to make getter on a method in service so will not cause memory leak.

   I hope somebody can make an clear axample with the explanation

2. How IIFE work ?

   Can somebody explain it to me?

3. How IIFE work on a function inside factory (method in service)?

   Is it remove the global variable too? even if i use var, like when we return a factory?

Answer 1

Your question (or rather multiple questions) is rather broad. And you are conflating and combining multiple concepts here, but I will try to untangle you.

First , IIFE. This has nothing to do with Angular performance. IIFE is a way to namespace your global scope. So, instead of exposing functions on the global scope that could result in a conflict, the best practice is to use IIFE.

var globalObj =
    (function(){
      var privateVar = 5;
      function doPrivateFn(x, y){}

      return {
        publicFn: function(x){ doPrivateFn(x, privateVar) };
      }
    })();

Now, the only thing exposed is to the global scope is globalObj , which has globalObj.publicFn() .

Second , IIFE are sometimes used when registering services or controllers with Angular instead of inline anonymous function: .factory("MySvc", function(){}) :

(function(){
  angular.factory("MySvc", MySvcFactory);

  function MySvcFactory($http){
    // ...
  }
})();

All this does is hides the MySvc factory function MySvcFactory from the global scope.

Finally , the point about making getters fast is not about memory leak, but rather computational intensity of the getter function.

So, if you have a binding in a expression, like this:

<span>{{getCount()}}</span>

or this:

<div ng-show="isShown(item)">{{item.prop}}</div>

The idea is to make these functions very fast, if not just a getter:

$scope.isShown = function(item){
  return (item.a || item.b) && $scope.somethingElse;
}

And never do things like this:

<div ng-show="isUnique(item)">{{item}}</div>

where isUnique perfoms a for loop search:

$scope.isUnique = function(item){
   for (var i = 0; i < list.length; i++){
     if (item === list[i]) return false;
   }
   return true;
}

because this function will run on every digest cycle, and sometime even multiple times. Instead, calculate uniqueness and cache the result somewhere, so that you could just return it.