Mastering Web Application

Chapter 11

Many bindings made easy

The ng-repeat directive, when used on data sets of substantial size, can quickly
result in many watches being registered on scopes.

An easy calculation is in order here. Let's consider a simple table with five columns.
Each column will probably have at least one binding. This means that one row in a
table will produce five bindings. If we assume that theoretical limits of AngularJS are
around 2000 bindings we can't expect tables of over 400 items to perform reasonably.
Of course more columns (or more bindings per column) will lower the number of
items that can be reasonably managed and displayed.

Collections of over 500 rows are probably a bad fit for the ng-

repeat directive. Exact limits will vary depending on the number of

bindings but we can't expect collections of thousands of elements to

perform correctly.

Unfortunately there is not much we can do about the ng-repeat directive with large
data sets. We should strive to pre-filter and trim a collection before leaving it in the
hands of ng-repeat. All tricks are good here: filtering, pagination, and so on.

If you are working in a domain where you really need to display thousands of rows
the built-in ng-repeat directive might not be a tool of your choice. In this case you
should be ready to roll out your own directive. Such a directive shouldn't create two-
way data bindings for individual items, but rather render DOM elements based on
the content of a collection. This will avoid creating enormous amounts of bindings.

Summary

This chapter provided in-depth coverage of AngularJS internals. We need to get
a good grasp of AngularJS inner-working in order to understand its performance
characteristics and theoretical limits.

All performance-related improvements must start with scrupulous measurements so
as to identify and understand existing bottlenecks. Starting the performance-tuning
process without hard data is like shooting in the dark. Fortunately, there is an excellent
Chrome extension, Batarang, that lets us inspect a running application.

We should pay special attention to the AngularJS $digest loop execution time as it
can determine users' perception of the entire application. Allow the $digest loop
to run for more than 50ms-100ms, and users will start perceiving our application as
unresponsive. This is why we've spent so much time in this chapter discussing how
the $digest loop operates and what we can do to speed it up.