First of all, its a nice looking widget. Thanks @AlexSuleap
Taking a look at the code of the library and some example in my own code, this are my findings:
1)
The root problem in this widget is that is generates way too many angular handlers.
Tree data structure tend to be larger biggish. (that's why we often need them)
A simple list of some hundreds of items will easily take 2000 angular handlers.
(Recomendation for a webapp based on angular, in total, not to exceed 3000 handlers, so its of course dificult to have a widget that consumes 66% already by itself)
2)
I think, in general with widgets, relying too much on angular to generate the widget html is a very expensive thing to do, and does not scale.
Summary:
I think one has to rewrite several parts of the widget to improve the performance. Perhaps the following will help:
Use ng-if for collapsed nodes, so that they don't consume handlers.
Use a single ng-click for whole tree, and generate uuid attribute for all nodes (with single-bindings) so that its easy get back the node in that simplified ng-click.
Remove usage of ng-classes as much as possible. Replace it with direct DOM manipulation when possible.
Optimize ng-repeats by using 'track by' with the node UUID, otherwise they need to be generated.
Difficult: think of a way to remove ng-repeats.
Add option to disable animations.
I think this would reduce by 80-95% the angular handlers, and definitively the rendering will much faster.
First of all, its a nice looking widget. Thanks @AlexSuleap
Taking a look at the code of the library and some example in my own code, this are my findings: 1) The root problem in this widget is that is generates way too many angular handlers. Tree data structure tend to be larger biggish. (that's why we often need them) A simple list of some hundreds of items will easily take 2000 angular handlers.
(Recomendation for a webapp based on angular, in total, not to exceed 3000 handlers, so its of course dificult to have a widget that consumes 66% already by itself)
2) I think, in general with widgets, relying too much on angular to generate the widget html is a very expensive thing to do, and does not scale.
Summary: I think one has to rewrite several parts of the widget to improve the performance. Perhaps the following will help:
I think this would reduce by 80-95% the angular handlers, and definitively the rendering will much faster.