Performance limitations of angular filters on mobile

Question

I have 3000 objects each with a number of properties creating a 72,000 line 2MB JSON file.

The JSON is effectively a database of objects that need to be filtered by a text search filter and also by matching values against an array of values.

In the initial view I perform this in my service:

  this.loadJsonFile = function(url, process) {
    var defer = $q.defer();
    if (angular.isDefined(cache[url])) {
      if (angular.isDefined(cache[url]['then'])) {
        return cache[url];
      }
      defer.resolve(cache[url]);
      return defer.promise;
    }

    $http.get(url).success(function(data) {
      if (process) {
        data = process(data);
      }
      cache[url] = data;
      defer.resolve(data);
    }).error(function(err){
      defer.reject(err);
    });
    cache[url] = defer.promise;
    return defer.promise;
  };

  this.getExercises = function() {
    return this.loadJsonFile('data/exercises.json');
  };

and in my controller all results are exposed to $scope by:

api.getExcercises().then(function(data) {
  $scope.allExercises = data.results;
});

I limit results by :

$scope.limit = 56;

Previously I have stayed away from calling the server every time I need to search as the number of calls would be very high! This works ok on an iPad Air 2 and iPhone 6 where there is plenty of power, however on a Galaxy Tab it is pretty poor.

I need help on a strategy of only exposing a limited number of results to the $scope as I think the shear amount of data being filtered and churned around is causing my poor performance. I am fine with a search / filter function being run and breaking the seamless nature of the live search feature so long as when the results are exposed to $scope (following a loading screen say) the performance is really sharp.

Looking into the server situation I am not keen on hitting my Parse.com server as its not that Angular friendly, however the Async nature of Firebase might work. I have simply uploaded my JSON and attached the data to the $scope via :

var ref = new Firebase("https://URL_HERE.firebaseio.com/results"); 
$scope.allExercises = $firebaseArray(ref);

Which works pretty similarly to my local JSON method. However I wonder if it is possible to perform the following using Firebase?

1. Load an initial 50 results ordered by Name.
2. When typing in the text search a Query is performed and the $scope is delivered the results.
3. When adding values to the filter array the data on Firebase is queried against the values and results exposed to the $scope.

Answer 1

Please take some time to go through the Firebase guide. It will prevent many questions, that are answered there already.

1. Yup, something like:

   ref.orderByChild('name').limitToFirst(50);
   

2. You'd have to run a query like:

   ref.orderByChild('name').startAt(searchString).limitToFirst(50);
   

   Note that Firebase querying does not support wildcard searches. See the guide's section on querying for more info.

Answer 2

Your problem is that your number of watchers is enormous on your datas, and having automatic filters creates even more watchers that are called twice.

I suggest you to implement a database and a Search capability.

For a free solution (as FireBase is paid) I suggest you to use a sqlite database with the cordova sqlite plugin

This is working pretty well on android and ios and, with some work on Windows Phone too ;)