Performance degradation as app scales

[Lee Owen]

Is anyone having luck with angular in large scale apps?  We're seeing significant performance drops, with a higher volume of elements using ngModel, and such.  Most noticeably with text input's using ngModel, which seem to cause the entire app to re-digest on every keystroke.

Is anyone else having issues with larger scale apps?

[Lee Owen]

Is there anyway to throttle ngModel digests out of the box?

[Pawel Kozlowski]

Hi!

Would you mind sharing some data regarding the size of your app? I'm
trying to see what you mean by 'large scale app' here.
What is the rough number of bindings / inputs?

I'm in the process of writing sth bigger and didn't hit any noticeable
problems so far but my pages don't have more than 1000 bindings and no
more than 20 ng-models.

I guess it would be cool if we could tell angular "hold on with
running $digest cycles, I'm doing more substantial changes", do the
changes to the model and then manually trigger $digest. Unfortunately
I don't how to achieve this with the current version of AngularJS...

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>



--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Lee Owen]

There's no way that I could give an accurate number of bindings, and usages of ngModel, but it's high.  The issue is to do with our design, in which we store most of our model data on a low level scope, and build up from there.  In most cases this isn't an issue, but with text input's bound to ngModel, with every keystroke it is running a digest through the entire app.  I resolved the issue by getting in between ngModel, and the input element, using an event throttle on the keyup event handler to manually update the ngModel.  That is easier than refactoring the model to be more modular I guess.

[Godmar Back]

On Tue, Sep 25, 2012 at 12:56 PM, Lee Owen <itsle...@gmail.com> wrote:

Is anyone having luck with angular in large scale apps?  We're seeing significant performance drops, with a higher volume of elements using ngModel, and such.  Most noticeably with text input's using ngModel, which seem to cause the entire app to re-digest on every keystroke.

That's an odd design decision.  Most other data binding frameworks synchronize textboxes only on blur, and require the programmer to "opt-in" to receive events or updates per keystroke changed.  For instance, ZK has a 'change' and a 'changing' event for the former and the latter. Wonder why AngularJS made that call.

Talking about performance degradation - we've just experienced some as well.  The initial rendering of our page (which involves a huge $digest of an externally loaded model) takes up to 6 seconds.  Chrome profiling shows that the time is spent in $digest/$apply.

 - Godmar

[James Wright]

Apparently they had it on blur and changed it:

https://groups.google.com/forum/?fromgroups=#!searchin/angular/onblur/angular/G7CFRLoTAwY/knbb5JClCjAJ 

Also has a fiddle on how to get around it.

Jamey

[Godmar Back]

Thanks for the pointer.

As is common in company-sponsored open source development, we don't learn why Vojta now thinks it 'turned out to be a good idea" while Misko three months earlier thought it's a good idea for performance and flexibility.

My guess is user experience - while the focus stays in the textbox, the user won't see anything changing (by default). In our experience, this hasn't been a problem. Users quickly get the idea that a value is saved when they tab away of click.

We're actually running angularjs on the server via nodejs+cloudbrowser, so the one-event per keystroke triggers roundtrips to the server for each keystroke, so should this become a concern, we'll need to adopt the approach suggested in the fiddle. (However, looking at it - it's a hack that relies on the undocument internal $setViewValue method.  Previously, at least, they would support both buffered and immediate model updates in their open API, now no longer.)

 - Godmar

[Peter Bacon Darwin]

$setViewValue is documented as far as I remember. It's part of ngModelController.

Pete
...from my mobile.

[Godmar Back]

You're right - here is the link:  http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController 

I must have been thinking of Doug Crockford's talk where he points out that JavaScript recommends that $variables be reserved for internal use.

 - Godmar