Chapter 11Think about your UI
Each watch registered on a scope represents a "moving part" on a page. If we remove
all the unnecessary bindings (see earlier, things that are part of the $digest loop but
are not changing, really) we are left with a "2000 moving parts per page" theoretical
limit. In practice it is more complex than this, since we need to take speed of
individual watches into account.
Still, 2000 is a good indicator. Is 2000 a sufficient number? This depends on who
you ask, and the type of application being written, but we should really think of our
users. Can they cope with 2000 "moving parts" at once? Are we giving them optimal
user experience? Maybe UI of our application should be reevaluated to focus on
presenting essential data and controls? One of the principles of user interface design
the visibility principle says (http://en.wikipedia.org/wiki/Principles_of_
user_interface_design) says:
The design should make all needed options and materials for a given task visible
without distracting the user with extraneous or redundant information. Good designs
don't overwhelm users with alternatives or confuse with unneeded information.By making UI lighter we can both speed up the $digest loop, and provide better
user experience to people using an application. An option worth exploring!
Don't watch for invisible
AngularJS offers two directives that come handy when we need to conditionally
show parts of the DOM: ng-show and ng-hide. As discussed in Chapter 4, Displaying
and Formatting Data, those directives won't physically remove hidden elements from
the DOM, but will hide elements by styling them appropriately (display: none).
The bottom line is that "hidden" elements are still present in the DOM tree and any
watches registered by those elements (or their children) will be evaluated in every
$digest loop.
Let's skim through the following example and the corresponding Batarang's
performance results:
<input ng-model='name'>
<div ng-show="false">
<span>{{getNameLog()}}</span>
</div>