AngularJS for dashboard application (with lots of data to be displayed)

[Saurabh Nanda]

Hi,

I've come-up the Angular learning curve by implementing a PoC dashboard for my product in AngularJS. I'm enjoying working with Angular till now and I'm considering standardizing all future web dev in my company on AngularJS (unless some other tool fits the job better). However, I'm constantly worried about performance. There have been discussions elsewhere [1] about performance issues faced while using Angular to display large data-sets.

In the context of my dashboard app, how should I go about scaling the PoC from ~80 data-items in a table to about ~1,000 data items? I know the standard reply is that a human cannot "digest" (pardon the pun) so many data items, but think about data visualization. What if this is a live feed of 1,000 nodes in a network, where each node is represented by a color-coded dot. And the human is basically looking for a red-colored dot or a cluster of yellow-colored dots? How does one deal with that efficiently? What if there's a "quick action bar" in the dashboard itself, which enables the human to make some changes, which then effect the values of those ~1,000 data-items? Is Angular not the best framework to use for such use-cases?

[1] https://groups.google.com/d/topic/angular/3Bv2R2xRwuI/discussion & https://groups.google.com/d/topic/angular/MXE-FRPBoZ4/discussion

Thanks,

Saurabh.

[Peter Bacon Darwin]

In such a case you would probably be best off creating a directive that takes an array of the data and manages the rendering of the dots - rather than trying to bind each dot individually to the data using watches.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Saurabh Nanda]

In such a case you would probably be best off creating a directive that takes an array of the data and manages the rendering of the dots - rather than trying to bind each dot individually to the data using watches.

Is that basically because of how ngRepeat works? With every DOM event (keypress, scroll, mouseover, mousedown, etc.) it compares the ENTIRE collection with the previous version? Is there no way to "pause" this watch & fire it at will? Basically, instead of redoing all the good work of ngRepeat, can we turn it's "live update" features on/off at will?

(Did what I wrote make sense?)

Saurabh.

[Peter Bacon Darwin]

In effect yes.  All watchers, including those set up by ng-repeat, are triggered multiple times for each digest and each digest occurs on, pretty much, every event in the browser.

Saurabh.

--

[Adam C]

It seems to me that angular would benefit from finer grained control over processing of bound elements/models as suggested by Saurabh. Otherwise it won't scale to very complex applications?  

[Adam C]

Example of an alternative to ng-repeat [youtube] which is optimized for certain use cases.

[Peter Bacon Darwin]

Isn't that rather unhelpful to tell us all about a bit of code that we are not allowed to see?
:-)

... sent from my tablet

[Darren Bruning]

I agree. And in that directive, consider using d3.js to render the dots- it can compare the existing dots with a fresh dataset, and let you provide animations for the new/removed/changed items, while leaving unchanged items alone.

[Maxim Grach]

I agree with Saurabh's suggestion too. Control that allow too "off" 2-way data binding will be useful.

среда, 6 февраля 2013 г., 15:27:31 UTC+6 пользователь Peter Bacon Darwin написал: