On Tuesday, August 26, 2014 3:58:01 PM UTC-5, Peter Schuermans wrote: > > Hey Everyone, > > I'm trying to build a custom grid with angular. But the performance is > terrible.. Most likely cause I want to be able to define a custom template > for each cell, > since my objects can contain different object types on the same property, > so for example: > >
Quite a few people building data grids in AngularJS start out with the obvious and idiomatic design: two nested ng-repeats, with some bindings for each cell. One of the repeats is per column, the other is per row. Then on top of this basic idea, abstractions can be added for things like templates parameterized by data type whatever. Consider the number of bindings created by this: R = Number of rows C = Number of columns K = Constant factor, the number of bindings at each cell The total number of bindings created by such a mechanism will be R*C*K. Plugging in some numbers for a modest amount of data, say 200 rows, 10 columns, and two bindings per cell (one for the data, one for the formatting), and you get 200*10*2 = 4000 bindings. The binding mechanism in the current generation of angular and browsers is an area of limitation, to put it politely. The AngularJS approach is a trade-off, choosing the simplest possible format for bindable data (which is to say, any JavaScript data structure), by paying the cost of bindings reevaluating all the time to see if anything changed. I believe in the long run this will turn out to have been a good trade-off, because computers are absurdly fast and getting faster, and because under the hood JavaScript will gain some features which speed things along (Object.observe)I in wide use in the coming years. (As an aside, it is kind of fun to point out how the digest/binding mechanism works when teaching an AngularJS class. There are always at least a few people who gasp!) In the meantime though, with thousands, or sometimes even hundreds of bindings, your AngularJS page is going to be embarrasingly slow. So you have to find a way to get rid of the overwhelming majority of those bindings. You need some sort of "bind once" strategy in which you create perhaps one binding per row rather than one binding per cell in your grid. Or if you have data which is mostly read-only, maybe one binding for the entire data grid. The good news is, if you do that, than the kinds of structures and features you're talking about will only come into play once when initialing each table, and will not notably slow the page. Hopefully this helps either now or when you get to these problems. -- Kyle Cordes http://kylecordes.com -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
