Large amount of small requests vs. small amount of large requests - Angularjs SPA?

Question

I have a complex dashboard that I would like to update every minute. It is an Angularjs SPA application with an IIS backend running in Azure.

Dashboard shows approximatey 30-40 dashlet widgets on it. Each widget needs approximately 10 collections of data entities . Each collection gets about 3-5 new data points every minute

I want to ensure that app i the browser is performing well and is interactable (this is is very important) and that my web servers are scalable (this is secondary, because I'd rather add more web servers than sacrafice speed and interactivity of the browser)

• Should I update the whole dashboard at once? (1 very large call, will probably download a 1200-1600 data entities... probably a lot more for some users, and a lot less for others). This one puts the most strain on the web servers and is less scalable from the web server perspective. But I am not sure what the browser impact is.

• Update a single dashlet widget at a time? (30-40 chunky calls, each one returning about 40 pieces of information)

• Update each collection of data entities inside the dashboard individually? (About 300-400 tiny calls, each returning ~3-5 pieces of information)

One can assume that total server time to generate data for 1 large update and for 300-400 individual data points is very similar.

Timeliness of updates is not /super/ important... if some widgets update 10 seconds later and some on time, that's fine. Responsivness of the browser and the website is important in general, so that if users decides to interact with the dashlets, the thing should be very responsive

Appreciate any advice

Answer 1

AngularJS optimizations are all about:

1. Making sure binding expression evaluation is fast.
2. Minimize the number of things being watched.
3. Minimize the number of digest cycles: A phase when angular check for model changes by comparing old and new model values.

But before you begin to fix\optimize any of the above parts it is important to understand how Angular data binding works and what are digest cycles. This SO post should help you in this regards.

Coming back to the possible optimization.

Fixing first one is matter of making sure if you are using functions in binding expression, they evaluate fast and do not do any compute intensive or remote operation. Simply because binding expressions are evaluated multiple times during multiple digest cycles.

Secondly minimizing the number of watches. This requires that you analyze your view binding behavior:

• Are there parts which once bound do not change: Use bindonce direcitive or if you are on Angular 1.3, Angular itself supports one time binding using :: syntax in expression.
• Create DOM elements only for things visible in the view: Using ng-if or ng-switch rather than ng-show\ng-hide can help. See how ngInfiniteScroll works.

Lastly reducing the number of digest cycles helps as it mean less number of dirty checks to perform over the lifetime of the app. Angular will perform these digest cycles at various times during application execution.

Each remote call too results in a complete digest cycle hence reducing remote calls will be helpful. There are some further optimization possibilities if you use scope.$digest instead of scope.$apply. scope.$apply triggers a app wide digest cycle, whereas scope.$digest only triggers the children scopes. To actually optimize the digest cycle look at Building Huuuuuge Apps with AngularJS from Brian Ford

But before anything measure how things are working using tools like Batarang, and make sure such optimizations are required.