AngularJS Performance in Large Applications

Pretty good article, especially in regards to the $digest cycle which can cause some performance migraines. This is something I have seen newbies in Angular encounter pretty quickly, too many watchers and mistakenly triggering tonnes of $digest cycles.<p>Regarding point 7.1 - sometimes in my experience, an application might have many elements inside of an ng-repeat which cannot be avoided. It is one thing to say keep your lists small, but when you&#x27;re dealing with a whole bunch of data that is loaded in via an infinite scroll, you can&#x27;t just stop the content at 50 results.<p>Honestly, the only solution the team I currently work with have come up with is using React.js (swapping out Angular for React completely would be too expensive). If you take the heavy UI work away from Angular and use React.js, it honestly makes your lives easier. Even just for rendering a whole lot of content inside of an ng-repeat, you will see the performance issues vanish. Using track by in your ng-loops will also save you more migraines.<p>Don&#x27;t get me wrong, Angular without-a-doubt has some issues, but there hasn&#x27;t really been an issue that the team hasn&#x27;t been able to work around so far. Most issues you encounter in Angular are caused by a limited understanding of the framework and its strengths. The documentation is pretty bad, but you find the more you use Angular, the better you get at it.<p>Most of the limitations you encounter in Angular, they are in every single other front-end framework as well. This is because browsers currently do not support some of the niceties in ES6 and many of us have to support older browsers like IE9, etc. But even so, ES6 won&#x27;t fix everything, but it will make things a lot less painful. Things are getting better, but front-end frameworks are just a little too ahead of their time at the moment.<p>While Angular has issues now with performance (mainly two way binding and watching) when ES6 is supported in Angular 2.0 and object.observe() is used, we are going to see a dramatically more powerful framework without all of the dirty checking Angular currently has to make binding and watching work. This will be the case for other frameworks like Knockout and Ember as well.

By comparison, it seems that the equivalent article for a React application would be &quot;use immutables and PureRenderMixin&quot;, full stop.<p>I&#x27;ve been developing with React for the past several months and the idea of going back to Angular is already painful.<p>I&#x27;ve been looking for opinions on why Angular would be preferable to React. I haven&#x27;t found any; can anyone else who&#x27;s used both comment?

Nit-pick, but I don&#x27;t agree with his definitions of complexity.<p>&gt;&gt;&gt; The second reason software is slow is known as space complexity. This is a measure of how much &#x27;space&#x27; or memory a computer needs to run your solution. The more memory required, the slower the solution.<p>Requiring more memory doesn&#x27;t make an application slower by default. It simply means it requires more memory to run as expected.<p>Similarly, when he&#x27;s talking about run time complexity, he calls it &quot;a measure of how many comparisons a program needs to make to achieve a result&quot;. It can be any action, not necessarily a comparison. Be it number of times cycle needs to be executed, number of expensive calls to external service, etc. Number of comparisons to make is commonly used in introductory courses when studying sorting algorithm but doesn&#x27;t make much sense without a context.

Can somebody explain me what &quot;large Applications&quot; are?<p>I read it many times, but when i compare it to the &quot;little&quot; Tools i write for my company, it seems that this &quot;large&quot; Applications are really really tiny.<p>So what did you understand under large Applications?

A couple of times, the article mentions using:<p>&gt; services and object references to propagate object changes between scopes.<p>There are so many ways to wire things up in Angular -- references, watches, broadcast&#x2F;emit -- that I&#x27;d love to see some examples from the author, who seems to really know what he&#x27;s doing.<p>For example, say I have a `userService` that maintains a small `user` model with username, name and roles properties. What&#x27;s the most performant and maintainable way of &quot;binding&quot; to changes to this object so when I call, e.g.: `userService.logout()` somewhere, some component I write can pickup the change and adjust it&#x27;s state &#x2F; UI accordingly?

If you aren&#x27;t going to use $scope.$watch, you might want to ask why you&#x27;re using Angular in the first place. From my own experience building a large-ish hybrid mobile app in Angular, I haven&#x27;t run into any performance issues. While you should of course understand the implications of how you structure your application, I would also warn against premature optimization. I advise building first for simplicity and ease of maintenance and then tweak for performance if needed.

Common things I have encountered:<p>$scope.$watch()ing large arrays unnecessarily will be the death of you<p>Using ng-show where there is complex render logic in that element, consider ng-ifs to remove from DOM completely<p>Using track by in ng-repeats can help<p>We had simple screens which would hide any symptoms of bad practices but once you have an &#x27;overview&#x27; screen with 10 different lists, many different show&#x2F;hide forms etc the page can get slow very quickly.

There is some good info here. But when your Angular app slows to a crawl, it won&#x27;t be because you used objects instead of arrays.

What&#x27;s the current best guide for learning AngularJS? Is angularjs.org my best bet, or would you recommend some other resource?

&quot;application error&quot; ...is this site written in angularjs? If so I think we have the answer to that title! :)

If anyone, like me, didn&#x27;t know about &#x27;track by&#x27; as a way to optimize ng-repeats, here&#x27;s a couple of articles that explain what it is and why it&#x27;s beneficial:<p><a href="http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/" rel="nofollow">http:&#x2F;&#x2F;www.codelord.net&#x2F;2014&#x2F;04&#x2F;15&#x2F;improving-ng-repeat-perfo...</a><p><a href="http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm" rel="nofollow">http:&#x2F;&#x2F;www.bennadel.com&#x2F;blog&#x2F;2556-using-track-by-with-ngrepe...</a>

9.4 seems to be an outdated issue. Since version 1.2.16, $rootScope.$broadcast does not go to all child scopes, only those with a watcher. It&#x27;s very fast, and perfectly fine to use if you need it.

This is still fairly applicable for the major causes of speed and slowness.<p><a href="https://www.exratione.com/2013/12/considering-speed-and-slowness-in-angularjs/" rel="nofollow">https:&#x2F;&#x2F;www.exratione.com&#x2F;2013&#x2F;12&#x2F;considering-speed-and-slow...</a><p>My impression is that Angular-specific issues are way more important than pure Javascript speed concerns in terms of relative impact on an application. Number of watchers and ng-repeat declarations are the most important aspect of an AngularJS application.

I disagree with 9.4 as I think you should try to use event emitting more. This is the best way to modularize your application and really separate your concerns.<p>For example, given a service in charge of dealing with the a part of user&#x27;s data. All mutations should be done through the helpers given by the service and then it should emit an event telling everyone subscribed to deal with it and update themselves.<p>Doing it this way, you maintain much more sanity when you have to create a really reactive application.

&gt;Similarly, Angular provides the ability to watch entire objects by passing a third, optional true parameter to scope.$watch. This is, for lack of better words, a terrible idea. A much better solution is to rely on services and object references to propagate object changes between scopes.<p>How am I supposed to then propagate these changes into the DOM if I&#x27;m not using $watch?

uh... re Loops: &quot;Try and avoid making calls in a loop.&quot; This is an over simplification. The author draws the wrong conclusion from the example given:<p><pre><code> for(var x = 0; x &lt; 100; x++){ var keys = Object.keys(obj); sum = sum + keys[x]; } </code></pre> The problem here is needlessly invoking the same operation 100 times (Object.keys).

Seems it is down, Google Cache: <a href="http://webcache.googleusercontent.com/search?q=cache:www.airpair.com/angularjs/posts/angularjs-performance-large-applications" rel="nofollow">http:&#x2F;&#x2F;webcache.googleusercontent.com&#x2F;search?q=cache:www.air...</a>

Large and small are fuzzy metrics. A subset of non binary thinking (see Kosko, the model of probability and the hypercube, etc). &quot;Jeremy is short,&quot; well - to a 5&#x27;0 person, I&#x27;m freaking tall.<p>To Yao Ming, I&#x27;m short. Trouble is, we each of us technologists tend towards introversion (been struggling since...well, take my age and then subtract however many years my communication skills were less than stellar).<p>Ever try to raise money for an idea based on numbers? It&#x27;s like trying to land a date based on the size of your...real estate. Sooner or later, another yutz shows up, plops <i>his</i> drink on the counter and announces that the yacht he just stepped off was twice the size of yours.<p>Ya, it&#x27;s never a fun game because it necessitates that binary outcome. Suffice to say good tools in the wrong hands can still be used to chop off your own feet if you don&#x27;t pay attention.